ue.js 模板语法

Vue.js 使用了基于 HTML 的模版语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。

Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。

结合响应系统，在应用状态改变时， Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。

插值

文本

数据绑定最常见的形式就是使用 {{...}}（双大括号）的文本插值：

<div id="app"> <p>{{ message }}</p></div>

Html

使用 v-html 指令用于输出 html 代码：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Vue 测试实例</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>

<body>
    <div id="app">
        <div v-html="message"></div>
    </div>

    <script>
        new Vue({
            el: '#app',
            data: {
                message: '<h1>教程</h1>'
            }
        })
    </script>
</body>

</html>

属性

HTML 属性中的值应使用 v-bind 指令。

以下实例判断 use 的值，如果为 true 使用 class1 类的样式，否则不使用该类：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Vue 测试实例 </title>
</head>
<style>
    .class1 {
        background: #444;
        color: #eee;
    }
</style>

<body>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>

    <div id="app">
        <label for="r1">修改颜色</label><input type="checkbox" v-model="use" id="r1">
        <br><br>
        <div v-bind:class="{'class1': use}">
            v-bind:class 指令
        </div>
    </div>

    <script>
        new Vue({
            el: '#app',
            data: {
                use: false
            }
        });
    </script>
</body>

表达式

Vue.js 都提供了完全的 JavaScript 表达式支持。

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Vue 测试实例</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>

<body>
    <div id="app">
        {{5+5}}<br>
        {{ ok ? 'YES' : 'NO' }}<br>
        {{ message.split('').reverse().join('') }}
        <div v-bind:id="'list-' + id">教程</div>
    </div>

    <script>
        new Vue({
            el: '#app',
            data: {
                ok: true,
                message: 'RUNOOB',
                id: 1
            }
        })
    </script>
</body>

</html>

指令

指令是带有 v- 前缀的特殊属性。

指令用于在表达式的值改变时，将某些行为应用到 DOM 上。如下例子：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Vue 测试实例 - </title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>

<body>
    <div id="app">
        <p v-if="seen">现在你看到我了</p>
        <template v-if="ok">
            <h1>教程</h1>
            <p>学的不仅是技术，更是梦想！</p>
            <p>哈哈哈，打字辛苦啊！！！</p>
        </template>
    </div>

    <script>
        new Vue({
            el: '#app',
            data: {
                seen: true,
                ok: true
            }
        })
    </script>
</body>

</html>