一、什么是Vue

  • 渐进式框架,易用,灵活,高效,可以兼容其他框架。
  • 渐进式项目由浅入深,由简单到复杂的方式进行开发。
  • Vue是双向数据绑定,不用操作DOM,即可改变页面,开发者可以更好的专注于业务逻辑。

二、Vue是基于虚拟DOM

Vue是预先通过JavaScript进行计算,然后再将DOM渲染出来。因为这个DOM是预处理,并没有真实的操作DOM,所以叫做虚拟DOM。

三、Vue的基础知识

1,模板插值

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 <div id="app">
<!-- 插入html标签 -->
<div>这是一个html标签:{{htmlmode}}</div>
<div v-html="htmlmode"></div>
<!-- 在模板使用表达式 -->
<div>模板中使用表达式:{{age}}</div>
</div>
<script type="text/javascript">
var test_data = {
age: 18,
htmlmode: '<p style="color:red;">Daisy</p>',
}
var vm = new Vue({
//选择实例化目标
el: "#app",
//存储数据
data: test_data,
})
</script>

2,动态属性绑定

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
36
37
 <div id="app">
<!-- 动态绑定属性 -->
<a v-bind:href="weburl">跳转到百度</a>
<!-- 动态绑定样式 -->
<div v-bind:class="fontColor">动态绑定样式</div>
<!-- 表达式绑定class样式,可以多个绑定 -->
<div v-bind:class="{styleColor:isColor,styleSize:isSize}">表达式绑定class样式</div>
<!-- 数组内表达式绑定class样式,可以多个绑定 -->
<div v-bind:class="['styleColor',isSize?'styleSize':'']">数组内表达式绑定class样式</div>
<!-- 动态绑定行内样式 -->
<div v-bind:style="{color:colVal,background:isbg?'black':''}">动态绑定style行内样式</div>
</div>
<script type="text/javascript">
var test_data = {
weburl: 'https://www.baidu.com/',
fontColor: 'styleColor',
isColor: true,
isSize: true,
colVal: 'red',
isbg: true,
}
var vm = new Vue({
//选择实例化目标
el: "#app",
//存储数据
data: test_data,
})
</script>
<style>
.styleColor {
color: blue;
}
.styleSize {
font-size: 35px;
}
</style>

3,条件渲染v-if

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
 <!-- 单个条件渲染 -->
<div id="app">
<div v-if="seeMe">你看不到我(不保留在dom中)</div>
<div v-show="seeSta">你看不到我(保留在dom中)</div>
<!-- 多个条件渲染 -->
<div v-if="keys == 1">满足条件1</div>
<div v-else-if="keys == 2">满足条件2</div>
<div v-else-if="keys == 3">满足条件3</div>
<div v-else>满足最后一个条件</div>
</div>
<script type="text/javascript">
var test_data = {
seeMe: false,
seeSta: false,
keys: 2,
}
var vm = new Vue({
//选择实例化目标
el: "#app",
//存储数据
data: test_data,
})
</script>

4,列表渲染 v-for

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
<div id="app">
<ul>
<li v-for="(value,key) in pList" v-bind:key="key">
数组渲染:{{key}} - {{value.name}}
</li>
</ul>
<ul>
<li v-for="(value,index) in numList" v-bind:key="index">
对象渲染:{{index}} - {{value}}
</li>
</ul>
</div>
<script type="text/javascript">
var save_data = {
pList: [
{name: "johnli"},
{ name: "mark"},
{ name: "rose"}
],
numList: {
name: 'rose',
sex: '女',
age: 18,
},
}
var vm = new Vue({
//选择实例化目标
el: "#app",
//存储数据
data: save_data,
})
</script>

5,事件处理

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">
<button type="button" @click="touchAct(1,$event)">
点击次数:{{tuchCount}}
</button>
</div>
<script type="text/javascript">
var save_data = {
tuchCount:0
}
var vm = new Vue({
//选择实例化目标
el: "#app",
//存储数据
data: save_data,
methods: {
touchAct: function(type, e) {
this.tuchCount++;
}
},
})
</script>

6,表单双向绑定

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
36
37
38
39
40
<div id="app">
<form>
<div>
<label>text表单:</label>
<div><input v-model="inputVal"></div>
<div>{{inputVal}}</div>
</div>
<div>
<label>mark</label>
<input type="checkbox" value="mark" v-model="checkboxVal">
<label>rose</label>
<input type="checkbox" value="rose" v-model="checkboxVal">
<label>frank</label>
<input type="checkbox" value="frank" v-model="checkboxVal">
<div>{{checkboxVal}}</div>
</div>

<div>
<label>男</label>
<input type="radio" value="男" v-model="radioboxVal">
<label>女</label>
<input type="radio" value="女" v-model="radioboxVal">
<div>{{radioboxVal}}</div>
</div>
</form>
</div>
<script type="text/javascript">
var save_data = {
inputVal: '',
checkboxVal: [],
radioboxVal: '',
}
var vm = new Vue({
//选择实例化目标
el: "#app",
//存储数据
data: save_data
})
</script>

7,生命周期钩子函数

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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<script type="text/javascript">
var vm = new Vue({
//选择实例化目标
el: "#app",
//存储数据
data: {},
//生命周期
//生命周期--1、实例化之后,数据data和event/watcher事件配置之前被调用
beforeCreate: function() {
console.log('beforeCreated');
},
//生命周期--2、实例创建完之后,挂在之前
//这里完成以下配置:
//(1)data
//(2)属性和方法运算
//(3)watch/event事件回调
created: function() {
console.log('created');
},
//生命周期--3、挂在之前,渲染函数首次被调用
beforeMount: function() {
console.log('beforeMount');
},
//生命周期--4、挂在成功,el被新创建的vm.$el替换
mounted: function() {
console.log('mounted');
},
//生命周期--5、数据变化之前
beforeUpdate: function() {
console.log('beforeUpdate');
},
//生命周期--6、组件DOM已经更新
updated: function() {
console.log('updated');
},
//生命周期--7、组件激活是调用
activated: function() {
console.log('activated');
},
//生命周期--8、组件停用时调用
deactivated: function() {
console.log('deactivated');
},
//生命周期--9、捕获来至子组件错误调用
errorCaptured: function() {
console.log('errorCaptured');
},
// //生命周期--10、销毁之前
beforeDestroy: function() {
console.log('beforeDestroy');
},
// //生命周期--11、销毁之后
destroyed: function() {
console.log('destroyed');
}
})
</script>