三个指令
v-cloak
使用v-cloak能解决插值表达式闪烁的问题，也就是在网络不好的时候并没有完全加载该界面的时候，可能会显示成{{msg}}。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../js/vue.js"></script>
<style>
[v-cloak]{
display: none;
}
</style>
</head>
<body>
<div id="app">
<p v-cloak>{{msg}}</p>
</div>
<script>
var s=new Vue({
el:"#app",
data:{
msg:"哈哈哈"
}
})
</script>
</body>
</html>
v-text
使用意义在于可以直接显示数据，在没有获取数据时候，可以显示标签中的数据
<p v-text="msg"></p>
v-html
可以将html进行转义，也就是说，如果数据是一段html代码，他可以执行该段html代码
<div id="app">
<p v-html="msg2"></p>
</div>
<script>
var s=new Vue({
el:"#app",
data:{
msg2:"<h1>我是H1标签，我很大</h1>"
}
})
v-bind
是Vue中提供的用于绑定属性的指令，所谓的绑定属性就是可以在属性中获取对应的变量值，而不是将属性中所绑定的变量当做字符串
<div id="app">
<span>
<input type="button" value="按钮" v-bind:title="mytitle">
</span>
</div>
<script>
var app1=new Vue({
el:"#app",
data:{
mytitle:"这是我们自己定义的一个Title"
}
})
</script>
v-bind:value="mytitle"
可以给某个标签中的某个属性绑定值
还可以进行变量的处理，如字符串的拼接
v-bind:title="mytitle+‘123’"
这样可以显示成字符串+上一个变量，也就相当于js中的字符串拼接
v-bind的简写形式“：”
v-on
是用来绑定事件的机制
<div id="app">
<button v-on:click="btn" >按钮</button>
</div>
<script>
var app=new Vue({
el:"#app",
methods:{
btn:function () {
alert("hello!!!")
}
}
})
</script>
注意！！！
注意！！！
注意！！！
这个地方的methods，注意后面的s，注意后面的s，注意后面的s
还有一些其他的事件，如鼠标覆盖事件：mouseover等等，都可以使用同样的方法
注意点
v-text和v-cloak的区别
- 默认前者没有闪烁问题
- 后者可以进行数值和需要的数据的拼接，但是前者会替换标签中的数据，从而覆盖标签中原本的内容
网友评论