1. v-text 指令
<strong>v-text :</strong>用于更新标签包含的文本,它的作用跟双大括号的效果一样;
<div id="app">
<p v-text="msg"></p>
</div>
<script>
new Vue({
el:"#app",
data:{
msg:"hiddensmile"
}
})
</script>
<p></p>标签加上了指令 v-text ,它的值就是data数据中的msg,渲染结果:
<p v-text="msg"></p>
===
<p>{{msg}}</p>
2. v-html 指令
<strong>用法:</strong>绑定一些包含html代码的数据在视图上,比如:“< em >hello,Vue!< /em >”,这个字符串包含了< em >标签,要想< em >不被当作普通的字符串渲染出来,就得用 v-html 指令;
<div id="app">
<p v-text="msg"></p>
<b v-html="main"></b>
</div>
<script>
new Vue({
el:"#app",
data:{
msg:"hiddensmile",
main:"<em>hello,Vue!</em>"
}
})
</script>
< em >标签被成功解析并渲染出来,视图上的文本也有了加粗 斜体的效果,这就是v-html发挥了作用,bingo!
3. v-show 指令
<strong>v-show 指令:</strong>用来控制元素的display css属性的,取值为true/false;
<div id="app">
<p v-show="display">我是false</p>
<p v-show="show">我是true</p>
</div>
<script>
new Vue({
el:"#app",
data:{
display:false,
show:true,
}
})
</script>
用了两个< p >标签,都加上了 v-show 指令,取值分别为true和fasle,直接看效果
<strong>释:</strong>第二个p标签的v-show设置为true,元素正常显示;第一个p标签的v-show设置为false,元素解析成:
<p style="display:none">我是false</p>
所以它不会显示在视图上。这就是 v-show 指令的用法,简单明了。
4. v-if 指令
<strong> v-if </strong>指令的取值也是为true或false,它控制元素是否需要被渲染出来,拿两个元素设置不用的值,对比一下看效果就知道了。
<div id="app">
<p v-if="if_true">我是true</p>
<p v-if="if_false">我是false</p>
</div>
<script>
new Vue({
el:"#app",
data:{
if_true:true,
if_false:false,
}
})
</script>
把 v-show 指令换成了 v-if ,同样是两个< p >标签,同样是不同的取值:true和false。看效果:
<strong>释:</strong>设置为true的< p >标签,成功渲染出来,而设置为false的< p >标签,直接被一行注释代替了,并没有被解析渲染出来。
v-show 和 v-if 都能控制元素显示或者隐藏,区别:如果需要频繁切换显示/隐藏的,就用 v-show;如果运行后不太可能切换显示/隐藏的,就用 v-if 。
5. v-else 指令
<strong>v-else 指令:</strong>要求前一个兄弟节点必须要使用 v-if 指令;
<div id="app">
<p v-if="if_1">我是if_1</p>
<p v-else>我是else_1</p>
<p v-if="if_2">我是if_2</p>
<p v-else>我是else_2</p>
</div>
<script>
new Vue({
el:"#app",
data:{
if_1:false,
if_2:true,
}
})
</script>
<strong>释:</strong>只有第二个< p >标签被渲染出来,第一个< p >标签由于 v-if 指令的值为false,直接被忽视了,不渲染。直接渲染第二个< p >
一旦第一个标签的 v-if 指令的值为true,被忽视的就是第二个< p >标签了。 v-if 和 v-else 只有一个会被渲染出来。
6. v-for 指令
<strong>v-for 指令:</strong>data中的存放的数据不是个简单的数字或者字符串,而是数组Array类型,这时,要把数组的元素展示在视图上,就需要用到vue提供的 v-for 指令,来实现列表的渲染。
<ul id="app">
<li v-for="list in items">我是{{list}}</li>
</ul>
<script>
new Vue({
el:"#app",
data:{
items:['list01','list02','list03']
}
})
<strong>释:</strong>data中包含数组 items,数组包含三个元素:“list01”,“list02”,“list03”,我们通过 v-for 指令把它渲染出来,其中list表示数组中的每个元素。渲染结果:
<strong>释:</strong>解析渲染出三个li,其中包含的值分别是数组中的元素,表示解析渲染成功。
<em>循环解析:</em>不但要拿到items数组的每个元素list,我们还获取每个元素的索引,写法如上,循环的时候加上(list,index)。
<strong>如何拿到索引?</strong>拿到每个元素的索引也很简单,稍微改动一下代码,把html部分的代码修改为:
<ul id="app">
<li v-for="(list,index) in items">{{list}}</li>
</ul>
<strong>注:v-for指令除了可以迭代数组,还可以迭代对象和整数。 </strong>
7. v-bind 指令
<strong> v-bind 指令</strong>的作用和用法,它用于动态绑定DOM元素的属性,比较常见的比如:< a >标签的href属性,<img/>标签的src属性。
<div id="app">
![](src_img)
</div>
<script>
new Vue({
el:"#app",
data:{
src_img:"../images/2.jpg"
}
})
</script>
<strong>释:</strong>用 v-bind 指令来修饰src属性,表明它的值是一个动态的值,对应的则是data中的src的值:../images/2.jpg.
8. v-on 指令
<strong>v-on 指令</strong>相当于绑定事件的监听器,绑定的事件触发了,可以指定事件的处理函数;
<div id="app">
<button v-on:click="click_btn">点击</button>
</div>
<script>
new Vue({
el:"#app",
methods:{
click_btn(){
console.log("hello,hiddensmile!")
}
}
})
</script>
通过 v-on 指令修饰click点击事件,指定事件响应后的处理函数为methods中的click_btn( )方法
<strong>释:</strong>点击按钮,可以成功触发click事件,并且调用click_btn( ),想给处理程序say( )传参数,也是可以的;
<div id="app">
<button v-on:click="click_btn('女')">点击</button>
</div>
<script>
new Vue({
el:"#app",
methods:{
click_btn(sex){
console.log("hello,"+sex)
}
}
})
</script>
<strong>释:</strong>click_btn(sex)接受一个参数sex,并把sex打印出来,在调用的时候传如实参“女”。
9. v-model 指令
<strong>v-model 指令:</strong>最重要最常用的指令,一般用在表单输入,它帮助我们轻易地实现表单控件和数据的双向绑定。
<div id="app">
<input type="text" v-model="msg">
<p>刚刚输入的是:{{msg}}</p>
</div>
<script>
new Vue({
el:"#app",
data:{
msg:'',
}
})
<strong>释:</strong>只要给input控件添加 v-model 指令,并指定关联的数据msg,就可以把用户输入的内容绑定在msg上。把msg的内容显示出来,看是不是跟用户输入的内容是同步更新的:
10. v-once 指令
<strong>v-once 指令:</strong>它的特点是只渲染一次,后面元素中的数据再更新变化,都不会重新渲染。
<div id="app">
<input type="text" v-model="msg">
<p v-once>你输入的是:{{msg}}</p>
</div>
<script>
new Vue({
el:"#app",
data:{
msg:"hello,大家好,我是hiddensmile!"
}
})
</script>
<strong>释:</strong> 修改1:< p >标签增加了 v-once 指令;
修改2:msg的初始值不再是空字符串。看效果:
<strong>释:</strong> 由于msg有了初始值,第一次渲染的时候,input控件和< p >标签都有了内容,由于< p>标签添加了 v-once 指令,所以,后期更新msg的值的时候,< p>标签的内容不会发生改变;