Vue中的常见指令
Vue中的常见指令
- 一、如何使用Vue
- 二、Vue指令
一、如何使用Vue
1、引入vue.js
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="../js/vue.js">script>//引入vue.js
<title>Documenttitle>
head>
2、在HTML中展示
{{}}的作用：将数据渲染出来，文本插值：是Vue最简单最常用的渲染方式
<div id="app">
<p>{{message}}p>
div>
3、建立一个Vue对象
<script>
new Vue({
el:"#app",
data:{
message:"hello"
}
})
</script>
在上一篇中我们提到过，Model 和 View 之间通过ViewMode 进行数据同步，以上代码中的 HTML模块即为视图模块（Model ），而Javascript模块就相当于模型模块（View ）。
View 数据的变化会同步到 Model 中，而 Model 数据的变化也会立即反应到 View 上
如果Vue对象中的message值发生了改变，那么页面中所显示的message的值也会同步的发生改变。
如果页面中的message的值可以自由修改（可以使用input实现），那么Vue对象也会很快感应到。
View 和 Model 之间的同步工作完全是自动的，无需人为干涉。
二、Vue指令
Vue指令是带有v-前缀的特殊属性，通过属性来操作元素
1、v-show：根据表达式的真假值来显示和隐藏元素
<div id="app">
<p v-show='a'>{{message}}p>
<p v-show='b'>{{info}}p>
div>
<script>
new Vue({
el:"#app",
data:{
a:true,
b:false,
message:'hello',
info:'vue'
}
})
</script>
页面显示： hello
2、v-html:插入标签
<div id="app">
<input type="checkbox">苹果
<input type="checkbox">香蕉
<input type="checkbox">桃子
<input type="checkbox" @click="other">其他
<div v-html="htmlstr" v-show="str">div>
div>
<script>
new Vue({
el:"#app",
data:{
str:false,
htmlstr:''
},
methods:{
other(){
this.str=!this.str;
}
}
})
</script>
页面显示：在点击其他复选框时，页面出现文本编辑框
3、v-text：在元素当中插入值
<div id="app">
<p v-text="message">p>
div>
<script>
new Vue({
el:"#app",
data:{
message:'hello'
}
})
</script>
页面显示： hello
4、v-if、v-else-if、v-else：根据表达式的真假值动态添加数据
<div id="app">
<div v-if="role=='zhangsan'">
<p>你是张三p>
div>
<div v-else-if="role=='lisi'">
<p>你是李四p>
div>
<div v-else="role=='wangwu'">
<p>你是王五p>
div>
div>
<script>
new Vue({
el:"#app",
data:{
role:'wangwu'
}
})
</script>
页面显示： 你是王五
5、v-for：根据变量的值来循环渲染元素
<div id="app">
<table border="1">
<tr>
<th>编号th>
<th>姓名th>
<th>性别th>
tr>
<tr v-for='item in objects'>
<td>{{item.id}}td>
<td>{{item.name}}td>
<td>{{item.sex}}td>
tr>
table>
div>
<script>
new Vue({
el:"#app",
data:{
objects:[
{id:1,name:'张三',sex:'男'},
{id:2,name:'李四',sex:'男'},
{id:3,name:'王五',sex:'男'}
]
}
})
</script>
页面显示：
6、v-bind：绑定元素的属性并执行相应的操作
v-bind:class="{a_class:a}：当 a 的值为true时，该元素的class为"a_class"
v-bind也可省略，例如绑定style:：style:=“css样式”
<div id="app">
<a v-bind:href="link" v-bind:class="{a_class:a}">百度一下你就知道a>
div>
<script>
new Vue({
el:"#app",
data:{
a:true,
link:'http://www.baidu.com'
}
})
</script>
页面跳转至百度主页
7、v-on：监听元素事件，并执行相应的操作
<div id="app">
<a v-bind:href="link" v-on:click="myclick">百度一下你就知道a>
div>
<script>
new Vue({
el:"#app",
data:{
link:'http://www.baidu.com'
},
methods:{
myclick:function(){
alert('即将去往百度');
}
}
})
</script>
8、v-model：把 input 的值和变量绑定了，实现了数据和视图的双向绑定
<div id="app">
<input type="text" v-model="context">
{{context}}
div>
<script>
new Vue({
el:"#app",
data:{
context:'您好'
}
})
</script>
页面显示：
9、v-once： 指令可以让元素或组件只渲染一次，一旦绑定，数据就不会改变。
<div id="app">
<input type="text" v-model="context">
<p v-once>{{context}}p>
<p>{{context}}p>
div>
<script>
new Vue({
el:"#app",
data:{
context:'您好'
}
})
</script>
页面显示：
更改前：
更改后：
10、v-pre ：用于跳过这个元素和它的子元素的编译过程。对于大量没有指令的节点使用v-pre 指令可以加快编译速度。
<div id="app">
<p v-pre>{{context}}p>
div>
<script>
new Vue({
el:"#app",
data:{
context:'您好'
}
})
</script>
页面显示：（尽管data中已经定义了context）
11、v-cloak ：解决初始化慢而导致页面闪动的问题。
在使用{{}}展示或更新页面数据时：当网速比较慢时，会出现一个不好的过渡现象，会让用户先看到我们的表达式（例如页面中的{{context}}），然后才看到data中的值（您好），即所谓的闪烁问题
但有时添加完毕后变量仍会显示（即闪烁问题没解决），这是怎么回事呢？原来是 v-cloak 的display属性被优先级别高的样式覆盖所导致，所以最好再添加一个 !important ，将其优先级设置为最高，防止被其他优先级高的dispaly:none样式所覆盖。
[v-cloak]{
display: none !important;
}
v-if和v-show的性能比较
共同点：二者都是根据传入的bool值来判断是否显示该内容，都是惰性的条件渲染
区别：
（1）实现方式：v-if采用底层的appendChild来实现，v-show采用样式的display控制标签的显示
（2）加载性能：v-if加载速度更快，v-show加载速度更慢
（3）切换开销：v-if切换开销大，v-show切换开销小
v-if确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建；
v-show—不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS进行切换。
一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好，如果在运行时条件很少改变，则使用 v-if 较好。