Vue第三篇：模板语法

Vue.js使用了基于HTML的模板语法，允许我们声明式地将DOM绑定至底层Vue实例的数据。所有的Vue.js模板都是合法的HTML.

1、模板语法-插值

文本插值
最常见的数据绑定方式就是使用“Mustache”双大括号{{变量}}的文本插值

<span>message:{{msg}}</span>

Mustache标签将会被替代为对应数据对象上msg属性的值，无论何时，绑定数据对象上的属性值发生变化时，它都会随着更新。

通过使用v-once指令，执行一次性的插值，当数据改变时，插值不变。

<span v-once> 这个将不会改变：{{msg}}</span>

双大括号会将数据解释为普通文本，而非HTML代码。
为了输出真正的HTML，我们需要添加一个v-html指令：

<p> Using v-html directive:<span v-html="rawhtml"></span></p>

span中的内容都江湖替换为属性值rawhtml

v-bind 更改标签的属性值

<div v-bind:class="color"></div>

可以通过修改color的属性值来改变div的class属性

<div id="app">
    {{msg}}
    <p>Using mustaches: {{ rawHtml }}</p>
    <p v-html="rawHtml"></p>
    <div v-bind:class="color">test...</div>
</div>
<script type="text/javascript">
var vm = new Vue({
    el : "#app",
    data : {
        msg : "hi vue",
        rawHtml : '<span style="color:red">this is should be red</span>',
        color:'blue'
    }
});
vm.msg = "hi....";
</script>
<style type="text/css">
.red{color:red;}
.blue{color:blue; font-size:100px;}
</style>

使用javaScript表达式
Vue.js提供了完全的javaScript表达式支持

    <p>{{ number + 1 }}</p>
    <p>{{ 1 == 1 ? 'YES' : 'NO' }}</p>
    <p>{{ message.split('').reverse().join('') }}</p>

<div id="app">
    <p>{{ number + 1 }}</p>
    <p>{{ 1 == 1 ? 'YES' : 'NO' }}</p>
    <p>{{ message.split('').reverse().join('') }}</p>
</div>
<script type="text/javascript">
var vm = new Vue({
    el : "#app",
    data : {
        number : 10,
        ok : 1,
        message : "vue"
    }
});
</script>

2、模板语法-指令

指令是带有v-前缀的特殊属性，指令特性的值预期是单个js表达式(v-for 例外) 当表达式的值发生改变时，会连带的更改作用于DOM中。

<p v-if="seen">现在你看到我了</p>

这里的v-if指令根据表达式seen的值的真假来插入或者移除p元素

参数
一些指令可以接受一个参数，在指令名称之后以冒号表示，比如v-bind

<a v-bind:href="url">...</a>

href是参数，告知v-bind指令将该元素的href特性与表达式url的值绑定

修饰符
修饰符以半角句号.指明的特殊后缀，如@click.stop 表示点击后停止，不执行父集操作。

<div id="app">
    <p v-if="seen">现在你看到我了</p>
    <a v-bind:href="url">...</a>
    <div @click="click1">
        <div @click.stop="click2">
            click me
        </div>
    </div>
</div>
<script type="text/javascript">
var vm = new Vue({
    el : "#app",
    data : {
        seen : false,
        url : "https://cn.vuejs.org/v2/guide/syntax.html#%E6%8C%87%E4%BB%A4"
    },
    methods:{
        click1 : function () {
            console.log('click1......');
        },
        click2 : function () {
            console.log('click2......');
        }
    }
});
</script>

Vue第三篇：模板语法

1、模板语法-插值

2、模板语法-指令

推荐阅读更多精彩内容