v-bind、v-on、v-cloak、v-text

<div id="dv">
　　<!-- v-cloak能够解决表达式闪烁问题
　　（当网速较慢时，会先出现{{msg}}，当请求完毕后才会将数据替换） -->
　　<p v-cloak>===={{msg}}====</p>
　　<p>========={{msg2}}========</p>
　　<h4 v-text="msg">============</h4>
　　<!--默认 v-text 没有闪烁问题-->
　　<!-- v-text会覆盖元素中原本内容，
　　而插件表达式不会覆盖，可在前后增加想要的元素 -->
　　<div v-text="msg3"></div>
　　<div>{{msg3}}</div>
　　<div v-html="msg3"></div>
　　<!-- v-html能够将数据当成HTML文本显示，会覆盖原有内容 -->
　　<!-- v-text与插件表达式只会讲数据当成普通文本显示 -->

　　<!-- v-bind：用于绑定属性的指令 -->
　　<input type="text" v-bind:value="mytitle">
　　<!-- v-bind可以简写成 : -->
　　<!-- v-bind原理是将被绑定的属性的值当成js代码执行，
　　所以可以在其中写合法的表达式-->
　　<input type="text" :value="mytitle+'123'" @click = "show">

　　<!-- v-on：事件绑定机制 -->
　　<!-- v-on：缩写@ -->
　　<input type="button" value="按钮" v-on:click = "show">
</div>

<script>
　　var vm = new Vue({
　　　　el: '#dv',//el：代表被操作的元素
　　　　data:{//存储数据,这里面的数据名不是固定的
　　　　　　msg:'123',
　　　　　　msg2:'456',
　　　　　　msg3:'<h1>哈哈，你好Vue</h1>',
　　　　　　mytitle:'这是我自己定义的title'
　　　　},
　　　　methods:{//这个methods属性定义了当前Vue实例中所有可用的方法
　　　　　　show:function () {
　　　　　　　　alert("hello");
　　　　　　}
　　　　}
　　});
</script>

标签：el,Vue,methods,msg3,msg2,bind,cloak,text,msg
来源： https://www.cnblogs.com/Smile-W/p/11002282.html