前言
从今天起开始学习Vue.js框架.
给自己做一个小规划:
- 《3小时速成 Vue2.x 核心技术》
- 阅读《官方文档》基础部分
- 《Vue2.5开发去哪儿网App——从零基础入门到实战项目》
- 《Vue全家桶+SSR+Koa2全栈开发美团网》、《Vue+Vue-Router+Vuex+SSR实战精讲》
其中1、2、3可以结合起来看，4中有两个课程，如果时间足够则都可以看完。
正文
开发环境
IDE：
- VS Code
Node.js:
- node
- npm
调试环境:
- Chrome
- Vue.js devtools
工程环境:
- Vue Cli 3.0—(npm install -g vue-cli)
第一个Demo—Hello Vue !
代码:
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
</head>
<body>
<div class="bg" id="d1">
hello world !
{{msg}}
</div>
<script>
new Vue({
el:'#d1',
data:{
msg:'hello vue !'
}
})
</script>
</body>
</html>
- 使用BootCDN引用在线库文件
el绑定元素,可以通过class名,也可以通过id名,与JQuery类似
模板语法
- v-html — 输出真正的 HTML
1
2
3
4
5
6
7
8
9
<div id="d1">
<div v-html="template"></div>
</div>
<script>
new Vue({
el: '#d1',
template: '<div>hello template</div>'
})
</script>
- v-bind( : ) — 用于响应式地更新 HTML 元素属性(id、name、value、href 等等)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<div id="d1">
<a v-bind:href="baidu">百度</a>
<input type="button" v-bind:value="btnvalue" v-on:click="alertMe">
<div :id="sdiv"></div> //打开 F12 这里的 id 值就为subDiv 了.
</div>
<script>
new Vue({
el: '#d1',
data: {
baidu: 'http://www.baidu.com',
btnvalue: '点我',
sdiv: 'subDiv'
},
methods: {
alertMe: function(){
alert('记得吃饭!');
}
}
})
</script>
- v-on( @ ) — 绑定事件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<div id="d1">
<input type="button" v-bind:value="btnvalue" v-on:click="alertMe">
8
<input type="button" value="+1" @click="addOne">
</div>
<script>
new Vue({
el: '#d1',
data: {
btnvalue: '点我',
},
methods: {
alertMe: function(){
alert('记得吃饭!');
},
addOne: function () {
this.count++ ;
}
}
})
</script>
侦听器与计算属性
- 侦听器: watch
- 计算属性: computed
wathc通常侦听一个变量或一个常量的变化,computed可以监听很多个量.
这些量必须是要在这个Vue对象中的.
简单实现watch:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div id="app">
{{msg}}
</div>
<script>
var app = new Vue({
el: '#app',
data: {
msg: 'Hello World !',
},
watch: {
// 这里function的两个参数,前面一个为变化后的新值,后面一个为旧值
msg: function(newval,oldval){
console.log('oldval:'+ oldval);
console.log('newval:'+ newval);
}
}
})
</script>
这时我们在Chrome调试界面中修改app.msg时,则会出现这样的情况:
当侦听的数值发生变化时,会执行我们预先设置好的打印语句.
那么,watch可不可以同时侦听多个变量呢?
答案是可以的.
那watch可以侦听本Vue对象以外的变量吗?
1
2
3
4
5
6
7
8
9
10
11
12
13
<script>
var arr = 'Test';
var app = new Vue({
el: '#app',
watch: {
// 这里function的两个参数,前面一个为变化后的新值,后面一个为旧值
arr: function(a,b){
console.log('oldval:'+ b);
console.log('newval:'+ a);
}
}
})
</script>
看来本Vue对象外的变量并不会触发侦听事件.
简单的computed实现:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div id="app">
{{msgC}}
</div>
<script>
var app = new Vue({
el: '#app',
data: {
msg: 'Hello World !'
},
computed: {
msgC: function(){
return 'Computed: ' + this.msg ;
}
}
})
</script>
同样的computed也可以同时计算多个变量,而且对Vue对象外的变量还是没法计算,只有当对象内变量发生变化,页面才会连同一起更新.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div id="app">
{{ msgC }}
</div>
<script>
var arr = 'Test'; //新增Vue对象外的变量
var app = new Vue({
el: '#app',
data: {
msg: 'Hello World !'
},
computed: {
msgC: function(){
return 'Computed: ' + this.msg + arr ;
}
}
})
</script>
条件渲染、列表渲染、Class与Style绑定
条件渲染:
- v-if
- v-else-if
- v-else
- v-show
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div id="app">
<p>现在count的值为: {{count}}</p>
<div v-if="count>0">大于0</div>
<div v-else-if="count == 0">等于0</div>
<div v-else>小于0</div>
</div>
<script>
var app= new Vue({
el: '#app',
data: {
count: 0
}
})
</script>
列表渲染:
- 循环数组
- 循环对象
最简单的数组渲染:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div id="app">
<div v-for="item in list">
{{item}}
</div>
</div>
<script>
var app= new Vue({
el: '#app',
data: {
list: [1,2,3,4,5]
}
})
</script>
也可以对对象数组进行渲染:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<div id="app">
<div v-for="item in students">
<!-- 可以在这里增加v-if对遍历的元素进行判断 -->
<div v-if="item.age>18">
{{item.name}}已经成年了
</div>
</div>
</div>
<script>
var app= new Vue({
el: '#app',
data: {
students: [{
name: 'Tom',
age: 17
},{
name: 'Lucas',
age: 25
}]
}
})
</script>
也可以用 v-for 来遍历一个对象的属性:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<ul id="v-for-object" class="demo">
<li v-for="value in object">
{{ value }}
</li>
</ul>
<script>
new Vue({
el: '#v-for-object',
data: {
object: {
title: 'How to do lists in Vue',
author: 'Jane Doe',
publishedAt: '2016-04-10'
}
}
})
</script>
他输出的结果是:
- How to do lists in Vue
- Jane Doe
- 2016-04-10
也可以提供第二个的参数为 property 名称 (也就是键名)：
1
2
3
<div v-for="(value, name) in object">
{{ name }}: {{ value }}
</div>
还可以用第三个参数作为索引(index)：
1
2
3
<div v-for="(value, name, index) in object">
{{ index }}. {{ name }}: {{ value }}
</div>
Style与Class绑定
我们之前在写CSS样式内联引用时是这么写的:
1
<div style="color:red">XXX</div>
如果我们使用Vue的v-bind绑定则应该这么写,属性名加不加引号都可以,但是不加引号对的话属性名中’-‘的地方必须使用驼峰式书写:
1
2
<div v-bind:style="{'color':'red'}"></div>
<div v-bind:style="{fontSize:'20px'}"></div>
或者我们也可以写在Vue对象里:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div id="app">
<div :style="d1">aaa</div>
</div>
<script>
var app= new Vue({
el: '#app',
data: {
d1: {
color: 'red'
}
}
})
</script>
Vue对象中的键不能出现”-“,如果非要假如-,那么整个键加上单引号即可.如果是style样式中原本就有-的,用驼峰式写法,他会自动替换到html中,如:
1
2
3
4
5
6
7
8
9
10
11
<script>
new Vue({
el: '#a',
data: {
d1: {
color: 'red',
backgroundColor: 'yellow'
}
}
})
</script>
Class绑定有两种语法:
- 对象语法
- 数组语法
1
2
3
4
5
<!-- 对象语法 -->
<div :class="{ 'active (类名)' : true (判断式) }"></div>
<!-- 数组语法: -->
<div :class="['a','b','c',{'active (类名)' : true (判断式)}]"></div>
我们可以在判断式中进行一些筛选:
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-for="item in students">
<div :class="[{'old': item.age > 18},{'young' : item.age < 18 }]">{{item.name}} </div>
</div>
</div>
<script>
var app= new Vue({
el: '#app',
data: {
d1: {
color: 'red',
backgroundColor: 'yellow'
},
students: [{
name: 'Tom',
age: 17
},{
name: 'Lucas',
age: 25
}]
}
})
</script>
