<style>
[v-cloak]{display:none}
</style>
<body>
<div id="app">
<p v-cloak>{{msg}}</p>
<p v-text="msg"></p>
<p v-html="msg2"></p>
</div>
<script>
var app=new vue({
el:#app
data:{
msg:“哈哈哈”;
msg2:“<h1>哈哈哈</h1>”
}
})
</script>
</body>
v-cloak:解决闪烁问题
当网速较慢时,vue加载较慢,插值表达式渲染的数据就会产生闪烁,使用v-cloak指令加上如上样式可以解决该问题
v-text:插入文本字符串
v-text默认就没有闪烁,但是会以文本字符串的方式覆盖所在元素的文本
v-html:插入html
v-html与v-text的不同在于插入的是html。
v-bind:绑定属性
在vue中想要让属性如title等于data对象中的一个变量(键),会被直接当作字符串显示出来,这时就要用到v-bind,v-bind可以将绑定的属性值当作变量对待,在data对象中去找。
<input type="button" value="按钮" v-bind:title="data对象中的变量"/>
v-bind:可以简写成:
v-on:绑定方法
与v-bind的不同之处在于v-on绑定的是方法,会在methods对象中寻找变量。可以缩写为@