Vue常用系统指令

<div id="app">
    <h2 v-html="msg"></h2>
    <h2 v-text="msg"></h2>
    <h2>{{msg}}</h2>
    <h2 v-pre>{{msg}}直接打印</h2>
    <h2 v-once>{{msg}}</h2>
    <input type="text" v-model="msg">
    <button @click="changemsg()">改变数据</button>
    <button v-on:click="msg='直接写入'">改变数据</button>
    <p v-for="n in 5">薛忠海 {{n*2}}</p>
</div>
<script src="./vue.js"></script>
<script>
    var vm=new Vue({
        el: "#app",
        data: {
            msg: '调用数据',
        },
        methods: {
            changemsg() {
                this.msg = "方法"
            }
        }
    });
</script>

1.v-text：作用单纯，就是来渲染文本的

2.v-html：在渲染文本的时候，如果含有标签会解析成dom元素

3.v-cloak：这个以属性方式定义在元素身上，当vue初始化完毕要渲染的时候会自动取出该标签，利用特性可以解决插值表达式的缺陷。

4.双大括号和v-text会将数据解析成纯文本，而非html，为了输出真正Html，需要使用v-html，但是对于没有html标签的数据绑定时作用同v-text和{{}},注意：使用v-html渲染数据可能非诚危险，因为它容易导致XSS(跨站脚本)攻击，慎用，能使用{{}}和v-text实现不要使用它。

5.v-pre网页直接显示原始值，不会输出Vue中的data值。

6.v-once：只渲染一次。之后数据不会改变

image.png

7.v-model：

.lazy取代input监听change事件
.trim自动将输入的内容首尾空格去掉
.number自动将输入的字符串转为数字