computed和methods的对比
- computed属性，在值不改变的情况下，其函数只调用一次
- methods,每执行一次函数就会调用一次，性能不如computed
- var的变量中for和if是没有款及作用域的，函数有
- const指向的地址不能改变，但是对象里面的内容可以改变
ES6增强写法
<script>
const name = 'zhangsan'
const age = 18
const sex = 'nan'
const price = 18
const obj = {
name,
age,
sex,
price
}
console.log(obj);
</script>
事件监听
image.png
<div id="app">
<h2>{{counter}}</h2>
<button @click='add'>+</button>
<button v-on:click='sub'>-</button>
</div>
<body>
<script src="../../node_modules/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
counter: 0
},
methods: {
add() {
this.counter++
},
sub() {
this.counter--
}
}
})
</script>
</body>
<!-- 函数的参数在没有的情况下可以连括号都不用写的 -->
<button v-on:click='btn1Click'>按钮1</button>
<!-- <button @click='btn1Click()'>按钮1</button> -->
修饰符的使用
<div id="app">
<div @click='divClick'>
aaaaaaaaaaaaa
<!-- .stop阻止事件冒泡 -->
<button @click.stop='btnClick'>按钮2</button>
</div>
<div>
<form action="ahahahahha">
<!-- .prevent阻止默认事件，比如阻止提交 -->
<input type="submit" value="提交" @click.prevent='submitClick'>
</form>
</div>
<div>
<!-- .enter表示只有enter键的弹起才会触发 -->
<input type="text" @keyup.enter='enterClick'>
</div>
<div>
<!-- .once表示只能有一次处罚的机会 -->
<button @click.once='onceClick'>一次</button>
</div>
</div>
-
.native，在使用组件进行类似点击事件的时候，事件后面要使用该修饰符才起效
<BackTop @click.native="backTopClick"></BackTop>
- v-on参数问题
<div id="app">
<!-- 函数的参数在没有的情况下可以连括号都不用写的 -->
<!-- 但是如果methods函数里面有参数，且没有传入，那就会把原生事件event传进去 -->
<button v-on:click='btn1Click'>按钮1</button>
<!-- <button @click='btn1Click()'>按钮1</button> -->
<button v-on:click='btn2Click("abc",$event)'>按钮2</button>
<button v-on:click='btn3Click("abc")'>按钮3</button>
</div>
- v-if,v-else-if,v-else
<div id="app">
<!-- 方法一 -->
<h1 v-if='score>90'>优秀</h1>
<h1 v-else-if='score>60'>及格</h1>
<h1 v-else>不及格</h1>
<!-- 方法二 -->
<h1>{{resault}}</h1>
</div>
<body>
<script src="../../node_modules/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
score: 99
},
computed: {
resault() {
let shuowMessage = '';
if (this.score > 90) {
return shuowMessage = '优秀'
} else if (this.score > 60) {
return shuowMessage = '及格'
} else {
return shuowMessage = '不及格'
}
}
}
})
</script>
- v-if和v-show的区别
v-if如果是false的话，根本就不会存在dom中
v-show如果是false的话，只是添加了一个行内样式：display：none
显示和隐藏切换频繁的时候，使用v-show,可以提升性能
当显示隐藏只切换一次时，使用v-if
虚拟DOM复用问题
image.png
-
解决方法
image.png
v-for遍历数组和对象
<div id="app">
<ul>
<li v-for='(item,index) in names'>{{item}}--{{index}}</li>
</ul>
<ul>
//遍历对象（guo--name--0
18--age--1
177--hight--2）
<li v-for='(value,key,index) in movies'>{{value}}--{{key}}--{{index}}</li>
</ul>
</div>
<script src="../../node_modules/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
names: ['zhangsan', 'lisi', 'zhang', 'guo'],
movies: {
name: 'guo',
age: 18,
hight: 177
}
}
})
</script>
关于数组当中插入一个数据的过程
-
key Vue的虚拟DOM的Diff算法有关系
key就是你给每一个数据加了一个独一无二的id。它的作用就是，比如你去电影院买票，你现在有一号座位和二号座位，但是三号座位也是有的。只不过他空着，当第二次dom更新后，三号来了。他会坐在他的三号位置上，一号和二号都不用做出任何改变，key属性要和所遍历的内容一一对应
image.png
<ul>
<li v-for='item in names' key=item>{{item}}</li>
</ul>
数组中的操作有响应式的方法是
<!--
可以响应式的操作
push()
pop()
shift()
unshift()
splice()
sort()
reverse() -->
<div id="app">
<ul>
<li v-for='item in students'>{{item}}</li>
</ul>
<button @click='btnClick'>改变</button>
</div>
<script src="../../node_modules/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
students: ['a', 'b', 'c', 'd']
},
methods: {
// 末尾增加操作
/* btnClick() {
this.students.push('aaa')
} */
//末尾删除
/* btnClick() {
this.students.pop()
} */
//头部删除
/* btnClick() {
this.students.shift()
} */
//头部增加
/* btnClick() {
this.students.unshift('aaa')
} */
//删除、替换、插入元素
// this.students.splice(start,*,...)
// 第一个值一直是开始的下标，第二个值是删除的个数，后面可跟要添加的元素
/* btnClick() {
//插入操作，从下标1位置开始，删除0个，添加后面的字符串
this.students.splice(1, 0, 'qqqqqqqqq')
} */
/* btnClick() {
//删除操作，从下标1位置开始，删除0个，添加后面的字符串
this.students.splice(1, 2)
} */
//反转数组
/* btnClick() {
this.students.reverse()
} */
//通过下标改变的操作没有响应式操作
btnClick() {
this.students[0] = '0000'
}
}
})
</script>
作业
*开始第一个亮，后来点谁谁亮
image.png
<div id="app">
<ul>
<li v-on:click='btnClick(index)' v-for='(key,index) in movies' :class='{active:isActive===index}'>{{key}}</li>
</ul>
</div>
<script src="../../node_modules/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
movies: ['火影忍者', '大话西游', '海贼王', '变形金刚'],
isActive: 0
},
methods: {
btnClick(index) {
this.isActive = index;
}
}
})
</script>
网友评论