vue: html模版

双大括号的深入：

双大括号里

可以写变量、表达式(简单的)、函数

        <p>{{ name }}</p>
<p>{{ name+'123' }}</p>
<p>{{ sayName() }}</p>
<script>
    new Vue({
        el: '.app',
        data: {
            name: 'aimee',
        },
        methods: {
            sayName: function() {
                 return 'fang'
            },
        }
        })
 </script>
      

指令的深入:

v-bind: vue不会分析字符串里的语法,要使用v-bind绑定变量值到属性值,并且省略双大括号，绑定的可以是变量或函数。

         <p><a href="{{ link }}">{{ baidu }}</a></p>
 <!-- 注意点: vue不会分析字符串里的语法(href属性里的值应是字符串) -->
 <p><a v-bind:href="link">{{ baidu }}</a></p>
 <!-- 解决方案: 使用v-bind绑定变量值到属性值,并且省略双大括号 -->
 <p><a v-bind:href=" baiDu() ">{{ baidu }}</a></p>
 <!-- 可以写变量和函数 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    new Vue({
        el: '.app',
        data: {
            link: 'https://www.baidu.com',
         },
     methods: {
         baiDu: function() {
             return 'https://www.baidu.com'
         }
     }
    })
</script>
      

v-once: data字段的值如果在methods等其他函数中改变，会更着改变之前的结果，如果想在改变之前使用该值可以使用v-once。

        <p>{{ name }}</p>
<!-- 被改变 -->
<p v-once>{{ name }}</p>
<!-- 在没有改变变量之前使用v-once的使用,可以防止内容的更改 -->
<p>{{ sayName() }}</p>
<p v-once>{{ name }}</p>
<!-- 只能在没改之前使用 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        new Vue({
            el: '.app',
            data: {
                name: 'aimee'
            },
            methods: {
                sayName: function() {
                    this.name = 'fang';
                    // 原本this.name = aimee,但是在这个更改了以后，全局生效，都变成fff
                    return this.name;
                },
            }
        })
 </script>
      

v-html: 如果要在变量中使用html标签插入，直接插入的话,vue只能识别为字符串，所以我们要使用v-html。(但不推荐使用，安全问题)

        <p>{{ taobao }}</p>
<!-- 可以直接渲染html标签吗? 不可以的，vue值会把它当做dom节点 -->
<p v-html="taobao"></p>
<!-- 如果要渲染html标签，确保安全的话可以使用v-html指令绑定变量即可 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    new Vue({
        el: '.app',
        data: {
            taobao: '<a href="https://www.taobao.com">淘宝网</a>'
         }
     })
</script>