Vue的其他常用指令
v-text
和v-html
。
使用:写在头标签中(插值表达式{{ }} 和其功能相似,但写在双标签中)。
作用:相当于原生的 innerText 和 innerHTML 。
little-demo:
<div id="app">
<h1 v-text="msg"></h1>
<p v-html="htmlstr"></p>
</div>
<script src="./vue.js"></script>
<script>
const vm = new Vue({
el: "#app",
data: {
msg: "我是一个h1",
htmlstr: "<h1>我也是一个h1</h1>"
}
});
</script>
-
v-bind
动态绑定数据(单向绑定M=>V)使用:
1)写在头标签中 v-bind: 属性=‘值’。
2)使用缩写 :属性名
作用:(单向)动态绑定数据,可用于任意元素,主要用于设置属性和操作样式。
little-demo:
<style>
.red {
color: red;
}
</style>
<div id="app">
//给标签设置title属性
<h1 v-bind:title="name">我是一个h1</h1>
//给标签添加样式
<h1 v-bind:class="{red:isRed}">我是一个h1</h1>
//简写:
<h1 :class="{red:isRed}">我也是一个h1</h1>
</div>
<script src="./vue.js"></script>
<script>
const vm = new Vue({
el: "#app",
data: {
isRed: true,
name: "哈哈"
}
});
</script>
v-bind
和v-model
的区别
- v-bind 是单向绑定数据,而v-model是双向绑定数据;
- v-bind 可以作用于任何元素,而v-model 一般用于表单元素。
v-on
注册事件
使用:
1)注册: v-on:事件名=‘函数名(参数)’;
2)函数写在methods里面,methods里面存放的是方法,而data中存放的是属性和数据。
3)使用缩写:@事件名=‘函数名(参数)’。
事件传参注意点:
1)如果调用时,不想写参数,又想拿到事件对象,在形参中写一个e 就可以拿到事件对象。
2)如果在调用时,传了参数,但是还想拿到事件对象,Vue保留了一个关键字 e v e n t , 需 要 在 调 用 时 传 参 @ c l i c k = ‘ f n ( event,需要在调用时传参@click=‘fn( event,需要在调用时传参@click=‘fn(event,num)’,
声明时fn(e,num)即可。
little-demo
<div id="app">
<!-- 实现点击按钮,数字++ -->
<!-- <button v-on:click="fn">{{ num }}</button> -->
<button @click="fn">{{ num }}</button>
<button @click="fn1($event,num2)">{{ num }}</button>
</div>
<script src="./vue.js"></script>
<script>
const vm = new Vue({
el: "#app",
data: {
num: 100,
num2: 4
},
methods: {
fn(e) {
this.num++;
console.log(e);
},
fn1(e, num2) {
// console.log(res);
// console.log(res + this.num);
this.num = num2 + this.num;
console.log(e);
}
}
});
</script>
v-for
遍历数据(数组),根据数据里的每一项动态创建对应(指令所在的)标签
使用:写在头标签中,v-for=‘遍历的对象’ / v-for=’[ 数组]’ / v-for=‘i in 100’
little-demo:
<div id="app">
<p v-for="(item,index) in list">{{ item.name }}: <input /></p>
</div>
<script src="./vue.js"></script>
<script>
const vm = new Vue({
el: "#app",
data: {
list: [
{ id: 1, name: "zs", age: 18 },
{ id: 2, name: "ls", age: 28 },
{ id: 3, name: "ww", age: 38 }
]
}
});
</script>
现象:在上面的案例中,在id=2的文本框中输入数据,然后在数组的最前面添加一项,发现在id=2 中写的数据跑到id=1 中去了。
原因:就地复用策略。默认是根据索引去追踪数据的。
解决:绑定一个key属性,告诉vue,使用key指定的数据去追踪数据,推荐使用id
<p v-for="(item,index) in list" :key="item.id"></p>
-
v-if
和v-show
切换元素的显示和隐藏语法:
v-if='布尔值'
v-show='布尔值'
相同点: 都可以切换元素的显示与隐藏;
不同点:实现的方式不同
v-if
是通过不断的创建节点和删除节点来完成元素的显示与隐藏的;
v-show
是通过切换元素的 display:block/none 值来完成元素的显示与隐藏的;使用场景:
如果切换元素显示和隐藏 频繁使用
v-show
,如果不频繁使用v-if
。 大多数情况下,
v-if
都是配合v-else
(两种情况) 和v-else-if
(三种及三种以上)来使用的 =>条件渲染<div id="app"> <h1 v-if="isTrue">我是h1</h1> <h1 v-show="isTrue">我也是h1</h1> <p v-if="num>18 && num < 20">我是一个p</p> <p v-else-if="num<=18">我也是一个p</p> <p v-else>我是一个大p</p> </div> <script src="./vue.js"></script> <script> const vm = new Vue({ el: "#app", data: { isTrue: true, //通过改变num的值来判断哪个p元素该被创建 num: 38 } }); </script>
-
v-once
该标签的内容只会解析一次,以后无论怎么变化,都不会再变化 -
v-pre
告诉vue 该标签不需要解析 -
v-cloak
遮盖 现象:每次刷新页面的时候, 会发现页面闪了一下,可以看到{{ }},
这是因为Vue解析指令需要一定的时间,所以会出现这种现象.
使用遮盖: 当出现{{}}时,使用遮盖; 当解析完毕,去掉遮盖.
使用:
1)给需要添加遮盖的元素 添加一个指令 v-cloak;
2)通过属性选择器,给其设置样式 [v-cloak]{display:none}
3)当添加指令的标签解析完后,vue会自动删除该指令。
4)如果需要遮盖的东西太多的话,可以给其父元素添加该指令
<style>
[v-cloak] {
display: none;
}
</style>
<div id="app" v-cloak>
<p>{{ name }}</p>
<p>{{ name }}</p>
<p>{{ name }}</p>
<p>{{ name }}</p>
<p>{{ name }}</p>
<p>{{ name }}</p>
<p>{{ name }}</p>
<p>{{ name }}</p>
<p>{{ name }}</p>
<p>{{ name }}</p>
<p>{{ name }}</p>
<p>{{ name }}</p>
<p>{{ name }}</p>
<p>{{ name }}</p>
<p>{{ name }}</p>
<p>{{ name }}</p>
<p>{{ name }}</p>
<p>{{ name }}</p>
<p>{{ name }}</p>
<p>{{ name }}</p>
<p>{{ name }}</p>
<p>{{ name }}</p>
<p>{{ name }}</p>
<p>{{ name }}</p>
<p>{{ name }}</p>
<p>{{ name }}</p>
<p>{{ name }}</p>
<p>{{ name }}</p>
<p>{{ name }}</p>
<p>{{ name }}</p>
</div>
<script src="./vue.js"></script>
<script>
const vm = new Vue({
el: "#app",
data: {
name: "我是一个p"
}
});
</script>