VUE基础：模板语法

插值

1.文本：使用双大括号包含一个变量的方式进行文本插值，输出的是文本；
v-once指令可以进行一次性插值，当数据改变时，插值处的内容不会更新。

    <div id="app-6" v-once>
        {{msg}}
    </div>
    <script type="text/javascript">
        var vm = new Vue({
            el:'#app-6',
            data: {
                msg: 'hi vue.'
            }
        })
        vm.msg = "vue" /* 未改变插值 */
    </script>

2.原始HTML：可以输出真正的 HTML

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

注意:不能使用 v-html 来复合局部模板，因为 Vue 不是基于字符串的模板引擎。

3.特性：v-bind指令可以将样式作用在HTML特性上。

    <div id="app-6">
        {{msg}}
        <div v-bind:class="color">test vue color</div>
    </div>
    <script type="text/javascript">
        var vm = new Vue({
            el:'#app-6',
            data: {
                msg: 'hi vue.',
                // color: 'red'
                color: 'blue'
            }
        })
    </script>
    <style type="text/css">
        .red{
            color: red;
        }
        .blue{
            color: blue;
            font-size: 20px;
        }
    </style>

4.使用JavaScript表达式：会在所属 Vue 实例的数据作用域下作为 JavaScript 被解析，并且每个绑定都只能包含单个表达式

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

指令

什么是指令：带有 v- 前缀的特殊特性；
指令的作用：当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。
1.参数：一些指令能够接收一个“参数”，在指令名称之后以冒号表示。

    <div id="app-7">
        <p v-if="seen">你可以看到我</p>
        <a v-bind:href="url">vue官网地址</a>
    </div>
    <script type="text/javascript">
        var mv = new Vue({
            el:'#app-7',
            data:{
                // seen: true
                seen: false,
                url: "https://cn.vuejs.org/v2/guide/syntax.html"
            }
        });
    </script>

2.动态参数：
对动态参数的值的约束：动态参数预期会求出一个字符串，异常情况下值为 null。这个特殊的 null 值可以被显性地用于移除绑定。任何其它非字符串类型的值都将会触发一个警告。
对动态参数表达式的约束：某些字符，如空格和引号，放在 HTML attribute 名里是无效的；解决办法：使用没有空格或引号的表达式，或用计算属性替代这种复杂表达式。
3.修饰符：以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。

    <div id="app-7">
        <p v-if="seen">你可以看到我</p>
        <div @click="click1">
            <div @click.stop="click2">
                click me
            </div>
        </div>
    </div>
    <script type="text/javascript">
        var mv = new Vue({
            el:'#app-7',
            data:{
                // seen: true
                seen: false,
            },
            methods:{
                click1:function(){
                    console.log('click1');
                },
                click2:function(){
                    console.log('click2');
                },
            }
        });
    </script>

缩写

1.Vue 为 v-bind 和 v-on 这两个最常用的指令，提供了特定简写

<body>
    <!-- 完整语法 -->
    <a v-bind:href="url">...</a>
    <!-- 缩写 -->
    <a :href="url">...</a>
    
    <!-- 完整语法 -->
    <a v-on:click="doSomething">...</a>
    <!-- 缩写 -->
    <a @click="doSomething">...</a>
</body>

最后编辑于：2020.01.05 19:07:19