(3)vue 模板

一、插值

1.Mustache 语法

数据绑定最常见的形式。

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

完整

    <div id="vm">{{ msg }}</div>
    <script>
         new Vue({
            el: vm,
            data: {
                msg:'hello'
            }
        })
    </script>

2.v-once

更新不会改变，但注意会影响该节点上的其它数据绑定

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

3.解析html

    <div id="vm"><span v-html="msg"></span></div>
    <script>
         new Vue({
            el: vm,
            data: {
                msg:'<u>abc</u>'
            }
        })
    </script>

4.属性绑定

 Mustache 语法  不能使用在html属性上。可以使用v-bind的模式

<div v-bind:id="dynamicId"></div>

5.JavaScript 表达式

{{ number + 1 }}

{{ ok ? 'YES' : 'NO' }}

{{ message.split('').reverse().join('') }}

<div v-bind:id="'list-' + id"></div>

每个绑定必须是单表达式，不能是语句

二、指令

1.定义

在vue里带有v-前缀的特殊属性表示指令。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM

例如 上面的v-once

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

2.参数

一些指令能够接收一个“参数”，在指令名称之后以冒号表示

<a v-on:click="doSomething">...</a>

3.动态参数

2.6.0 新增语法

？

4.修饰符

?

 

5.常用指令

 

三、指令缩写

1.v-bind 缩写

<!-- 完整语法 -->
<a v-bind:href="url">...</a>

<!-- 缩写 -->
<a :href="url">...</a>

2.v-on 缩写

<!-- 完整语法 -->
<a v-on:click="doSomething">...</a>

<!-- 缩写 -->
<a @click="doSomething">...</a>

 （2）单击事件

    <button id="w" v-on:click="warning">abc</button>
    <script>
        var vm = new Vue({
            el: '#w',
            methods: {
                warning() {
                    alert("危险!");
                }
            }
        })
    </script>

（3）事件传参

 如果传入方法不加()并且定义的方法有参数时，这是会默认传给函数一个event对象

    <button id="w" v-on:click="warning">abc</button>
    <script>
        var vm = new Vue({
            el: '#w',
            methods: {
                warning(event) {
                    console.log(event);
                }
            }
        })
    </script>