基本指令
v-cloak一般与display：none进行结合使用
网速特别慢的时候，会在页面上先显示{{msg}}，之后在渲染出内容，为了避免这种情况的出现，使用v-vloak。
v-cloak作用：解决初始化慢导致页面闪动的最佳实践。
加了v-cloak，会在Vue实例结束之后，才会渲染{{msg}}，所以要与display：none进行结合使用。
相关代码
<head>
<meta charset="UTF-8">
<title>基本指令</title>
<style>
[v-cloak]:{
display: none;
}
</style>
</head>
<body>
<div id = "app">
v-cloak应用场景：
<hr/>
<p v-cloak>{{msg}}</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: {
msg: '村里有个姑娘叫小芳'
}
})
</script>
</body>
v-once指令
v-once作用：定义它的元素和组件只渲染一次。
<p v-once>{{oncedata}}</p>
//后面用app.ondedata的值，页面也不会重新渲染了。
条件渲染指令
v-if, v-eles-if ,v-else
用法： 必须跟着屁股走
- v-if的弊端 :
- Vue 在渲染元素时 ，出于效率考虑，会尽可能地复用已有的元素而非重新渲染， 因此会出现乌龙；
- 只会渲染变化的元素，也就是说，input元素被复用了。（以下代码没有添加key之前，在输入用户名内输入内容，点击按钮会，输入密码里面也会有相同的内容。）
- 解决方法：加key，唯一，提供key值可以来决定是否复用该元素
- 代码示例
<body>
<div id = "app">
v-if的实例用法：对不想让其复用的标签或元素，加入key即可。
需求：点击按钮，实现用户名输入框和密码输入框的切换。
<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' ? 'pasesword' : 'name')
}
}
})
</script>
</body>
v-show
v-show作用：只改变了css属性display。
v-show用法：显现与否取决于布尔值。当布尔值为true，则显现。当布尔值为false，则不显现。
<p v-show = "9 > 5">我被渲染</p>
v-show与v-if的区别
-
v-if:实时渲染：页面显示就渲染，不显示，我就给你移除，不存在DOM结构中。 -
v-show:v-show的元素永远存在也页面中，总是在DOM结构中，只是改变了css的display的属性。 - 频繁的切换页面使用
v-show，实时渲染，就用v-if。
列表渲染指令v-for
-
用法: 当需要将一个数组遍历或枚举一个对象属性的时候循环显示时，就会用到列表渲染指令
v-for。 -
使用场景：
- 遍历多个对象（遍历的一定是数组）
- 遍历一个对象的多个属性
-
代码示例
v-for的用法：v-for一定是写在要遍历的元素上,v-for后面接等号，第一个参数是自己定义的变量。
<body>
<div id = "app">
v-for遍历不带索引的多个对象,遍历的一定是数组<br>
<ul>
<li v-for = "vueMth in vueMethods">
{{vueMth.name}}
</li>
</ul>
v-for遍历带索引的多个对象,遍历的一定是数组<br>
<ul>
<li v-for = "(vueMth,index) in vueMethods">
{{index}}-----{{vueMth.name}}
</li>
</ul>
v-for遍历一个对象的多个属性
<ul>
<li v-for = "value in nvshen">
{{value}}
</li>
</ul>
v-for遍历一个对象的多个属性,vlaue -key -index
<ul>
<li v-for = "(value,key,index) in nvshen">
index:{{index}}---key:{{key}}---value:{{value}}
</li>
</ul>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
vueMethods: [
{name: '美丽'},
{name: '善良'},
{name: '温柔'}
],
nvshen: {
girl1: '杨幂',
girl2: '赵丽颖',
girl3: '古力娜扎'
}
}
})
</script>
</body>
数组更新，过滤与排序
改变数组的一系列方法：
• push() ：在末尾添加元素，返回的是添加后的数组的长度
• pop() ：将数组的最后一个元素移除,返回的是被删除的元素
• shift() ：删除数组的第一个元素，返回的是被删除的元素
• unshift()：在数组的第一个元素位置添加一个元素，返回添加后的数组的长度
• splice() ：可以添加或者删除函数，返回删除的元素
slice()有三个参数
- 第一个参数 表示开始操作的位置
- 第二个参数表示：要操作的长度，为0表示没有要删除的元素
- 第三个为可选参数：可以为要添加的元素，可以包含多个
app.arr.splice(0,0,'acd','sed') //在0位置删除0个元素并添加两个元素
• sort()：排序
sort要传递一个排序函数
<div id = "app">
<div v-for = "study in arr">{{study}}</div>
<button @click = "sortArr">点击</button>
</div>
var app = new Vue({
el: '#app',
data: {},
methods: {
sortArr:function(){
this.arr.sort(function(a,b){
return a.length - b.length
})
}
• reverse()：arr.reverse()即可
• 以上代码改变数组，都会对页面造成新的渲染。
• filter：过滤
返回字符串中含有oo的项
{{matchOO}}
computed: {
matchOO:function(){
return this.arr.filter(function(book){
return book.match(/oo/)
})
}
},
两个数组变动vue检测不到
- 改变数组的指定项 arr[0] = 'car' //没用
- 改变数组长度 arr.length = 1 //没用
- 解决方法：
1.set： 改变指定项：Vue.set(app.arr,1,”car”)
2.splice：改变数组长度：app.arr.splice(1)
方法和事件
基本用法
v-on绑定的事件类似于原生 的onclick等写法。
如果方法中带有参数，但是你没有加括号，默认传原生事件对象event。
如果方法中没有参数，也可以不加括号。
//因为方法中有参数，所以必须加括号
<button @click = "handle()">点击我每次加1</button>
methods: {
handle: function(count){
count = count || 1;
this.count += count;
}
}
//方法中没有参数，可以不加括号
v-on绑定事件：<button v-on:click = "count">{{countnum}}</button><br/>
methods: {
count: function(){
this.countnum = this.countnum + 1
}
}
修饰符
-
在vue中传入event对象用 $event
-
向上冒泡
- stop:阻止单击事件向上冒泡
- prevent::提交事件并且不重载页面，在提交的元素上使用。
- self:只是作用在元素本身而非子元素的时候调用
- once: 只执行一次的方法
-
可以监听键盘事件：
- <input @keyup.13 ="submitMe"> ——指定的keyCode
-
vueJS为我们提供了：
- .enter
- .tab
- .delete
-
具体代码实现
<body>
<div id = "app">
stop用法：
<div @click = "divclick" style = "height:100px;width:100px;background: red;">
<button @click.stop = "btnclick">点击</button>
</div>
<hr/>
prevent用法：
form表单的提交每次都会重载页面，阻止重载prevent
<form action = "" @submit.prevent = "hangle">
<button type = "submit">提交表单</button>
</form>
<hr/>
self的用法：
<div @click.self = "divclick" style = "height:100px;width:100px;background: red;">
<button @click = "btnclick">点击</button>
</div>
<hr/>
once:只执行一次
<button @click = "onceMethod">执行无限次</button>
<button @click.once = "onceMethod">执行无限次</button>
<hr/>
监听键盘事件：
<input @keyup.enter = "submitMe">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
},
methods: {
divclick: function(){
alert('div被点击了')
},
btnclick: function(){
alert('button被点击了')
},
hangle: function(){
alert('我不重载，页面也不刷新')
},
onceMethod: function(){
alert('多少次了')
},
submitMe:function(){
alert('按下了enter键')
}
}
})
</script>
</body>
网友评论