vue的指令
2021-03-04 本文已影响0人
alicemum
官网：
vue的模板渲染指令
1. {{}}插值表达式
<h1>{{msg}}</h1>
2. v-html
<!-- ""中是js表达式 -->
<h1 v-html="msg + 1"></h1>
<h1 v-html="'msg'"></h1>
3. v-text
不能解析html标签
<h1 v-text="<em>111</em>"></h1>
4. v-bind
绑定动态属性
v-bind:src 等价 :src
<img v-bind:src="'./img/' + imgUrl" alt="" v-on:click="changeUrl">
<img :src="'./img/' + imgUrl" alt="" v-on:click="changeUrl">
5. v-on
绑定事件
v-on:click 等价于 @click
<img :src="'./img/' + imgUrl" alt="" v-on:click="changeUrl">
<img :src="'./img/' + imgUrl" alt="" @click="changeUrl">
....
<script>
new Vue({
methods: {
changeUrl(){}
}
})
</script>
事件传参
<p><button class="btn1" @click="fun1" >不传参数</button></p>
<p><button class="btn2" @click="fun2('red',23)">传参数</button></p>
<p><button class="btn3" @click="fun3">不传其它参数,只获取事件对象</button></p>
<p><button class="btn4" @click="fun4('blue',$event)">传其它参数,并且获取事件对象</button></p>
注意： 如果事件处理程序既要传一般参数，也要获取事件对象，事件对象要放在最后，用$event做为参数传入
方法
fun1(){
console.log('fun1');
},
fun2(color,num){
console.log(color,num);
},
fun3(e){
// console.log(e);
console.log(e.clientX,e.clientY);
console.log(e.target);
},
fun4(color,e){
console.log(e);
},
事件修饰符
<!--
事件修饰符： @click.修饰符
1. @click.stop 阻止冒泡
2. @click.prevent 阻止浏览器默认行为
3. @click.once 只执行一次
4. @keyup.键名 (13，enter都是指回车键， 38： 上箭头)
-->
<p @click="handlerP"><button @click.stop="handlerBtn">阻止冒泡</button></p>
<form>
<p>用户名：<input type="text" name="user" @keyup.enter.38="fun"></p>
<p><button @click.prevent="addPro">提交</button></p>
</form>
<p><button @click.once="addPro">只执行一次</button></p>
vue的条件渲染指令
6. v-if
条件为真，则渲染，条件为假，不渲染(没有生成dom对象)
v-else
v-if和v-else要相邻
v-else-if
<p><button @click="toggle()">切换显示和隐藏</button></p>
<div class="box1 box" v-if="isShow">登录框</div>
<div class="box2 box" v-show="isShow">登录框</div>
var vm = new Vue({
el: '#app',
data: {
isShow: true
},
methods: {
toggle(){
this.isShow = !this.isShow
}
}
});
7. v-show
条件为真，则显示，条件为假，则隐藏(生成了dom对象，css样式为隐藏)
<p><button @click="toggle()">切换显示和隐藏</button></p>
<p v-if="isShow"><button>红色</button></p>
<p v-else v-cloak><button>蓝色</button></p>
vue的列表渲染指令
8. v-for
数据
data: {
list: [1, 3, 6],
person: {
name: "Rose",
age: 20,
address: 'BJ'
},
studentsList: [
{
name: "Rose1",
age: 20,
address: 'BJ'
},
{
name: "Rose2",
age: 20,
address: 'BJ'
},
{
name: "Rose3",
age: 20,
address: 'BJ'
}
]
},
渲染数组
<ul>
<li v-for="item in list">{{item}}</li> -->
</ul>
<ul>
<li v-for="(item,index) in list">{{index}}------{{item}}</li>
</ul>
渲染对象
<ul>
<li v-for="value in person">{{value}}------ Rose</li>
</ul>
<ul>
<li v-for="(value,key) in person">{{key}}------ {{value}}</li>
</ul>
渲染数据
<ul>
<li v-for="(item,index) in studentsList">
<h3>第{{index+1}}个人的数据</h3>
<ul>
<li v-for="(val,key) in item">{{key}}----{{val}}</li>
</ul>
</li>
</ul>
数组和对象的更新检测
当数组或对象的数据更新，视图却没有触发重新渲染时，可用以下两种方法
Vue.set()
vm.set
methods: {
changeData() {
// ====================================数组更新检测
this.list.push(5) //可以触发视图更新
this.list[3] = 5 //不可以触发视图更新
// 三个参数： 数组，索引，新值
Vue.set(this.list,3,5) //可以触发视图更新
this.$set(this.list,3,5) //可以触发视图更新
// =====================================对象的更新检测
this.person.name = "小李"; //可以触发视图更新
this.person.sex = "男"; // 不可以触发视图更新
// 三个参数：对象，属性，新值
Vue.set(this.person,"sex","男") //可以触发视图更新
this.$set(this.list,3,5) //可以触发视图更新
}
}
9. v-model
双向数据绑定，只用于表单元素，数据改变，元素的值也自动发生改变，元素的值改变，数据也随之变化
<p>用户名: <input type="text" @keyup="addUser" v-model="user"></p>
<p>用户名: <input type="text" @keyup.enter.38="addUser" v-model="user"></p>
<p>{{user}}</p>
var vm = new Vue({
data: {
user: 'hello'
},
methods: {
addUser(){
console.log(this.user);
}
}
});
v-model中的user,必须是在data中注册过的数据
