一、v-on基本使用
<div class = "app">
<h2>{{num}}</h2>
<button v-on:click="increment">+</button> /*v-on事件绑定*/
<button @click="decrement">-</button> /*v-on的语法糖*/
</div>
<script>
const app = new Vue({
el: '.app',
data: {
num: 10
},
methods: { /*ES6的方法增强写法*/
increment() {
return this.num++;
},
decrement() {
return this.num--;
}
}
})
</script>
二、v-on的参数传递问题
情况一:当事件不需要传递参数的时候()有还是没有都不影响的
<div class = "app">
<h2>{{num}}</h2>
<button v-on:click="increment()">+</button>
<button @click="decrement">-</button>
</div>
要注意的是: 在绑定事件的时候,如果没有括号那么该方法则会本身自带传递一个参数(事件对象)
类似于
<button @click="decrement(event)">-</button>
情况二: 当事件需要传递一个参数且需要用到事件对象的时候,则必须把事件对象传到事件处理程序里面,使用 $event 即可
<div class = "app">
<h2>{{num}}</h2>
<button v-on:click="increment(str)">需要传参数,但没有传事件对象的</button>
<br><br>
<button @click="test(str, event)">需要传参数,传了一个event的</button>
<br><br>
<button @click="decrement(str, $event)">需要传参数,传了一个$event的</button>
</div>
<script>
const app = new Vue({
el: '.app',
data: {
num: 10,
str: '熊大',
event: '我是一个变量,不是事件对象' /*event是一个变量*/
},
methods: {
increment(str, event) {
console.log(str);
console.log(event)
},
test(str, event) {
console.log(str);
console.log(event)
},
decrement(str, event) {
console.log(str);
console.log(event)
}
}
})
</script>
结果:
但要注意的是上面我这里的Vue用的是 开发版本
<script src="../library/vue/vue.js"></script>
如果使用的是 生产版本
<script src="../library/vue/vue.min.js"></script>
就不会有错误
所以还是推荐使用$event,因为生产版本更加符合程序员的气质(严谨一点吧)
官方是这样解释的:Deprecated symbol used, consult docs for better alternative (不赞成使用符号,请查阅文档以获得更好的选择
)
情况三: 当需要传递一个参数且不需要用到事件对象的时候,直接使用括号即可
<div class = "app">
<h2>{{num}}</h2>
<button @click="increment(str)">需要传参数,但不需要传事件对象的直接使用()</button>
</div>
<script>
const app = new Vue({
el: '.app',
data: {
num: 10,
str: '熊大'
},
methods: {
increment(str) {
console.log(str);
}
}
})
</script>
要注意的是这里的 $event事件对象 与 原生js 里面的 事件对象是同一个对象
三、v-on的修饰符
阻止冒泡
原生js:e.stopPropagation();
Vue:<button @click.stop=“increment”></button>
阻止默认行为
原生js:e.preventDefault();
Vue:<button @click.prevent=“increment”></button>
监听键盘的某个键
原生js:需要在js里面写写if语句判断
Vue:<input type = “text” @keyup.enter=“getKeycode”>
监听组件根元素的原生事件(用于自定义组件)
.native
这里等我学习到了在补充吧
一触发一次的回调
<button @click.once=“increment”>
例子:
了解其他的修饰符可以点击这里
四、v-if、v-else-if、v-else
不过不适合在template里面的业务逻辑太多,一般都是在vue里面的computed里面经过处理之后再在template呈现数据
<div class = "app">
<h2 v-if="num > 101">当前的数字为:{{num}} > 101</h2>
<h2 v-else-if="num > 11">当前的数字为:{{num}} > 11</h2>
<h2 v-else>当前的数字为:{{num}}</h2>
</div>
<script>
const app = new Vue({
el: '.app',
data: {
num: 10,
}
})
</script>
if语句从大到小,媒体查询从小到大
五、一个关于input的复用的小问题(与Vue的虚拟DOM有关系)
上代码:
<div class = "app">
<span v-if="flag">
<label>用户名登陆</label>
<input type = "text" name = "" id="userName" size="20" placeholder="userName">
</span>
<span v-else>
<label>邮箱登陆</label>
<input type = "email" name = "" id="userEmail" size="20" placeholder="userEmail">
</span>
<br>
<button @click="getChange">切换</button>
</div>
<script>
const app = new Vue({
el: '.app',
data: {
flag: true
},
methods: {
getChange() {
this.flag = !this.flag;
}
}
})
</script>
结果图:
由图可以知道,上面我们的两个input都是不同的(因为id都不一样的),但是神奇的发生了,在切换不同的input的时候它里面的value值却没有改变,这是为什么呢?答案是Vue内部的虚拟DOM
那上面是虚拟DOM呢?
虚拟DOM其实就是一棵以 JavaScript 对象( VNode 节点)作为基础的树,用对象属性来描述节点,实际上它只是一层对真实 DOM 的抽象(Virtual DOM)。最终可以通过Vue里面的一系列操作使这棵树映射到真实环境上,这样加快了渲染的速度,提升了效率
当然也可以参考官网的虚拟DOM
那上面的两个input的与虚拟DOM有上面关系呢?
在最开始的时候,Vue把模板里面if语句包含且值为true的DOM元素(与用户名登陆相关的元素)先挂到虚拟DOM树上面,在把虚拟DOM树上面的DOM渲染到页面上面,当点击切换的时候,Vue还是先把模板里面if语句包含且值为true的DOM元素(与用户名登陆相关的元素)先挂到虚拟DOM树上面,但是树上面已经有了一个label与一个input的元素,所以Vue不会重新在树上面挂上DOM (key的原因),而是经过Vue内部的一些算法来替换掉对应不同的内容(比如input的value、type、placeholder等等),但是input的key属性除外,所以我们可以利用 key 来处理掉相应的问题(key不同就不会复用),且key的查找是在虚拟DOM里面全局查找 ,且key如果不唯一那么运行的时候就会有警告,所以就需要尽量保证数据的唯一性
input修改为:
<input type = "text" name = "" id="userName" size="20" placeholder="userName" key="userName">
<input type = "email" name = "" id="userEmail" size="20" placeholder="userEmail" key="userEmail">
结果为:
大功告成!
五、v-show
<div class = "app">
<h2 v-show="flag">吉吉大王</h2>
<h2 v-if="flag">吉吉大王</h2>
<h2></h2>
</div>
<script>
const app = new Vue({
el: '.app',
data: {
flag: true
}
})
</script>
由上面可知,v-if与v-show渲染效果相同,实则不然
因为当flag值由true切换为为false时,在页面里的DOM里面根本就没有v-if对应的元素(直接删除了其对应dom节点),但v-show对应的DOM只是display:none了而已 ,当然在flag值为true的时候他们两者渲染效果的确相同
所以在需要在显示与隐藏频繁切换的时候,用v-show
只有一次切换的时候用v-if
六、v-for
遍历数组
<div class = "app">
<h2 v-for="(value, index) in names">{{index + 1}}号--{{value}}</h2> /*两个值的时候,第一个为具体值,第二个为索引*/
<h2 v-for="item in names">{{item}}</h2> /*一个值的时候,值为具体值*/
<h2>{{names[0]}}</h2> /*数组里面索引为0的值*/
<h2>{{names}}</h2> /*整个数组*/
</div>
</div>
<script>
const app = new Vue({
el: '.app',
data: {
names: ['熊大','熊二','翠花','光头强']
}
})
</script>
遍历对象
<div class = "app">
<h2 v-for="(value, key, index) in names">{{key}}--{{value}}--{{index}}</h2> /*三个值的时候,第一个为对应值,第二个为键值,第三个为索引*/
<h2 v-for="(value, key) in names">{{key}}--{{value}}</h2> /*两个值的时候,第一个为对应值,第二个为键值*/
<h2 v-for="item in names">{{item}}</h2> /*一个值的时候,值为对应值*/
<h2>{{names.actress1}}</h2> /*对象里面的actress1属性*/
<h2>{{names}}</h2> /*整个对象*/
</div>
<script>
const app = new Vue({
el: '.app',
data: {
names: {
actor1: '熊大',
actor2: '熊二',
actress1: '翠花',
actor3: '光头强'
}
}
})
</script>
官方推荐我们在使用v-for的时候,给对应的元素或者组件添加上一个v-bind:key属性,原因在下面的视频里面说明
点这里
在对视频里的内容补充一点东西和一些说明
遍历数字
<div v-for="index in 5" :key="index">{{ index }}</div>
/*注意这里是从1开始*/
七、数组中哪些方法是响应式的
响应式的:
push():在数组的最后面加入元素(可以是一个也可以是多个值)
this.names.push('111','222');
pop():在数组的最后面删除元素(没有参数,只能删除最后一个)
this.names.pop();
shift():在数组的最前面删除元素(没有参数,只能删除最后一个)
this.names.shift();
unshift():在数组的最前面加入元素(可以是一个也可以是多个值)
this.names.unshift('111','222');
splice():在数组的某个位置加入(替换、删除)元素(可以是一个也可以是多个值)
this.names.splice(0, 0, '老王', '吉吉国王');
sort():给数组排序(里面可以传递一个函数)
this.names.sort();
reverse():给数组翻转
this.names.reverse();
Vue.set():给数组某个位置加入元素
Vue.set(arr, 0, 23); /*Vue.set(数组, 索引, 具体值),给数组的某个位置添加元素*/
例子:
非响应式的:
因为Vue的内部并没有对以下的修改数组的方式进行监听,所以导致了当数据改变时,数组渲染到页面的数据并没有改变
this.names[0] = '毛毛';
本人只用于个人的学习与记录