1、Es6一些基础语法及增强
1.1、let/var
let可以看作是更完美的var,js在使用var声明变量的时候,变量的作用域主要是和函数的定义有关.而对于没有作用域的比如if/for等会出现问题。
1 | //es5 |
1.2、const的使用
const修饰的标识符为常量,不可以再次赋值,但是可以修改const内部的属性
1 |
|
1.3、ES6中的对象增强的写法
1 |
|
1.4、v-on详细说明
1.4.1、参数
- 如果该方法不需要额外参数,那么方法后的()可以不添加。但是注意:如果方法本身中有一个参数,那么会默认将原生事件event参数传递进去
- 如果需要同时传入某个参数,同时需要event时,可以通过$event传入事件。
1 |
|
1.4.2、修饰符
- Vue提供了修饰符来帮助我们方便的处理一些事件:
- .stop - 调用 event.stopPropagation()。
- .prevent - 调用 event.preventDefault()。
- .{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。
- .native - 监听组件根元素的原生事件。
- .once - 只触发一次回调。
1 |
|
1-5、v-if/v-else/v-else-if
1 |
|
1.5.1、原理
v-if 后面的条件为false 的时候,对应的元素以及子元素不会渲染
1.5.2、案例
- vue在进行DOM渲染的时候,处于性能考虑,会尽可能的复用已经存在的元素,而不是重新创建新的元素,如果我们不希望Vue出现重复利用的问题,可以给对应的input添加key,并且保证key的不同
1 |
|
1-6、v-show的使用
- v-show当条件为false的时候仅仅是将元素的display的属性设置为none,而v-if 则是压根不会渲染DOM
- 开发中,当现实与隐藏很频繁的时候,使用v-show当只有一次显示的时候使用v-if
1-7、v-for遍历对象/数组
1 |
|
- 官方推荐我们在使用v-for时,给对应的元素或组件添加上一个:key属性。并保证这个属性是唯一的,这样Diff算法可以正确的识别此节点,找到正确的位置区插入新的节点,所以说key的作用是为了高效的更新虚拟DOM
1-8、检测数据更新
push() | 向数组末尾添加数据 |
---|---|
pop() | 删除数组最后的数据 |
shift() | 删除数组开头的数据 |
unshift() | 从开始位置添加数据 |
splice() | 从第几的位置删除数据,或者添加数据插入 |
sort() | 正序排序(按照数组) |
reverse() | 反转数组 |
1 | <div id="app"> |
1.9、图书购物车(案例)
1 |
|
1 | table{ |
1 | const app = new Vue({ |
2.0、高阶函数的js
1 | //高阶函数的使用 |
2.1、v-model 原理
2.1.1、基本原理
v-model 是 v-bind和v-on 的指令的结合
1 | <body> |
2.1.2、v-model在单选/多选/复选框/下拉框 之间的使用
radio
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22<div id="app">
<label for="mail">
<input type="radio" value="男" v-model="sex" name="sex" id="mail">
</label>
<label for="famail">
<input type="radio" value="女" v-model="sex" name="sex" id="famail">
</label>
<div>{{ message }} 您选择的是 {{sex}}</div>
</div>
<!--导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
<script>
const app = new Vue({
el:'#app',
data:{
message:"hello vue",
sex:'女'
}
});
</script>多选框
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29<div id="app">
<!--单选框-->
<!-- <label for="agree">-->
<!-- <input type="checkbox" id="agree" v-model="isAgree" > 同意协议-->
<!-- </label>-->
<!-- <div>你选择的是:{{isAgree}}</div>-->
<!-- <button v-bind:disabled="!isAgree">下一步</button>-->
<!-- 多选框-->
<label for="id1">
<input id="id1" type="checkbox" value="篮球1" v-model="hobby">篮球1</label>
<label for="id2">
<input id="id2" type="checkbox" value="篮球2" v-model="hobby">篮球2</label>
<label for="id3">
<input id="id3" type="checkbox" value="篮球3" v-model="hobby">篮球3</label>
您的爱好是:{{hobby}}
</div>
<!--导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
<script>
const app = new Vue({
el:'#app',
data:{
message:"hello vue",
isAgree:false,
hobby:[]
}
});
</script>下拉框
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35<div id="app">
<select name="abc" id="" v-model="fruit">
<option value="苹果1" >苹果1</option>
<option value="苹果2" >苹果2</option>
<option value="苹果3" >苹果3</option>
<option value="苹果4" >苹果4</option>
<option value="苹果5" >苹果5</option>
<option value="苹果6" >苹果6</option>
</select>
<div>您选择的水果是:{{fruit}}</div>
<select name="abc" v-model="fruits" multiple>
<option value="苹果1" >苹果1</option>
<option value="苹果2" >苹果2</option>
<option value="苹果3" >苹果3</option>
<option value="苹果4" >苹果4</option>
<option value="苹果5" >苹果5</option>
<option value="苹果6" >苹果6</option>
</select>
<div>您选择的水果是:{{fruits}}</div>
</div>
<!--导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
<script>
const app = new Vue({
el:'#app',
data:{
message:"hello vue",
fruit:'苹果1',
fruits:['苹果1','苹果2']
}
});
</script>
2.1.3、值绑定
1 | <div id="app"> |
2.1.4、v-model修饰符
1 | <div id="app"> |