v-cloak
cloak掩盖
- 一般与display:none进行绑定
v-once
- 定义它的元素和组件只渲染一次
<span v-once>{{oncedata}}</span>
image.png
条件渲染指令
vif, velesif ,velse
v-if基本用法
<div id="app">
v-if接的是等号： 等号后的内容必须是布尔值
<p v-if="6<3">{{apple}}</p>
<p v-else-if="9>5">{{pineapple}}</p>
<p v-else>{{banana}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
apple: 'apple',
banana: 'banana',
pineapple: 'pineapple'
}
})
</script>
v-if的实例用法
用法： 必须跟着屁股走
v-if的弊端 :
Vue 在渲染元素时 ，出于效率考虑，会尽可能地复用已有的元素而非重新渲染， 因
此会出现乌龙
只会渲染变化的元素，也就是说，input元素被复用了
解决方法：加key，唯一，提供key值可以来决定是否复用该元素
<div id="app">
<div v-if="type==='name'">
用户名: <input type="text" placeholder="请输入用户名" key='name'>
</div>
<div v-else>
密码: <input type="text" placeholder="请输入密码" key='psd'>
</div>
<button v-on:click="toggleType"> 切换</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js">
</script>
<script>
var app = new Vue({
el: '#app',
data: {
type: 'name'
},
methods: {
toggleType: function () {
//三目运算符
this.type = (this.type === 'name' ? 'password' : 'name')
}
}
})
</script>
vif和vshow的比较
vif:
实时渲染：页面显示就渲染，不显示。我就给你移除
vshow:
vshow的元素永远存在也页面中，只是改变了css的display的属性
v-for
用法: 当需要将一个数组遍历或枚举一个对象属性的时候循环显示时，就会用到 列表
渲染指令 vfor。
两种使用场景：
遍历多个对象
遍历一个对象的多个属性
var app = new Vue({
el: '#app',
data: {
//每个对象对应一个li，数组
vueMethods: [{
name: '多思考'
},
{
name: '多练习'
},
{
name: '多上课'
}
],
nvshen: {
girl1: '高圆圆',
girl2: '杨幂',
girl3: '张柏芝'
}
}
})
<div id="app">
v-for的用法: v-for一定是写在要遍历的元素上<br>
遍历多个对象一定是数组
1.遍历多个对象: <br>
学好vueJs的方法是
<ul>
<li v-for="vueMth in vueMethods">{{vueMth.name}}</li>
</ul>
<hr>
带索引的写法: 括号的第一个变量，代表item,第二个代表index
<ul>
<li v-for="(vueMth,index) in vueMethods">{{index}}-----{{vueMth.name}}</li>
</ul>
<hr>
2.遍历一个对象的多个属性
<span v-for='value in nvshen'>{{value}}</span>
<hr>
拿到value,key,index的写法 v-k-i (外开)
<div v-for='(value,key,index) in nvshen'>第一个{{index}}女生:--键是{{key}}---值是{{value}}</div>
</div>
数组的更新过滤
改变数组的一系列方法：
• push() 在末尾添加元素
• pop() 将数组的最后一个元素移除
• shift() 删除数组的第一个元素
• unshift（）：在数组的第一个元素位置添加一个元素
• splice() ：可以添加或者删除函数—返回删除的元素
三个参数：
- 第一个参数 表示开始操作的位置
- 第二个参数表示：要操作的长度
- 第三个为可选参数：
• sort（）：排序
• reverse()
<div id="app">
<div v-for='study in arr'>{{study}}</div>
<button @click='sortArr'>点我排序</button>
<button @click='reserveArr'>点我进行数组的翻转</button>
<hr>
<button @click='changeOne'>改变数组的指定项</button>
<button @click='changArrLength'>改变数组的长度</button>
{{mathOO}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
arr: ['book', 'pen', 'pencil']
},
computed: {
mathOO: function () {
//参数代表要过滤的每一项
return this.arr.filter(function (book) {
return book.match(/oo/)
})
}
},
methods: {
sortArr: function () {
this.arr.sort(function (a, b) {
return a.length - b.length;
})
},
reserveArr: function () {
this.arr.reverse()
},
//改变数组的指定项
changeOne: function () {
this.arr[0] = 'car'
},
//改变数组的长度
changArrLength: function () {
this.arr.length = 1
}
}
})
//改变vue的第一项
Vue.set(app.arr, 1, "car")
</script>
点击传输的是event对象，如果是字符串则点击的传的是参数
方法和事件
<div id="app">
点击次数： {{count}}
<button @click='handle()'>点我每次加一</button>
<button @click='handle(8)'>点我每次加8</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
count: 0
},
methods: {
handle: function (count) {
// console.log(count)
count = count || 1;
this.count += count;
}
}
})
</script>
image.png
如果方法中带有参数，但是你没有加括号，默认传原生事件对象event
vue.js 的修饰符号
在vue中传入event对象用 $event
向上冒泡
stop:阻止单击事件向上冒泡
prevent::提交事件并且不重载页面
self:只是作用在元素本身而非子元素的时候调用
once: 只执行一次的方法
可以监听键盘事件：
<input @keyup.13 ="submitMe"> ——指定的keyCode
vueJS为我们提供了：
.enter
.tab
.delete
<div id="app">
<!-- 向上冒泡 -->
stop用法: <br>
<div @click.self='divclick' style="height: 100px;width: 100px;background-color: red;">
<button @click='btnclick'>点击</button>
</div>
<hr>
prevent的用法:
每次提交表单都会重载页面
<form action="" @submit.prevent='hangle'>
<button type='submit'>提交表单</button>
</form>
<hr>
once: <br>
<button @click='onceMethod'>执行无限次</button>
<button @click.once='onceMethod'>只执行一次</button>
<hr>
监听键盘事件:
<br>
<input @keyup.13='submitMe'> ---keyCode
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
count: 0
},
methods: {
divclick: function () {
alert('div被点击了')
},
btnclick: function () {
alert('button被点击了')
},
hangle: function () {
alert('我不重载，页面也不刷新了')
},
onceMethod: function () {
alert('执行一次method')
},
submitMe: function () {
alert('您按下了enter键')
}
}
})
</script>
