第1章 Vue基础-安装

Vue基础之安装

兼容性

不支持IE8以下

直接script引入

如果下面的下载地址没法下载,可以直接去官网进行下载,官网地址
开发版
生产版

CDN

  1. 学习和制作原型,可以使用最新版本,地址为
  2. 生产环境,使用地址为
  3. 如果使用原生ESModule ,这里兼容ES Module的构建文件
    1
    2
    3
    <script type="module">
    import Vue from 'https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.esm.browser.js'
    </script>

NPM

在用 Vue 构建大型应用时推荐使用 NPM 安装,NPM 能很好地和诸如 webpack 或 Browserify 模块打包器配合使用。同时 Vue 也提供配套工具来开发单文件组件

1
2
# 最新稳定版
$ npm install vue

创建第一个Vue应用

监控value值的变化

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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
{{a}}
</div>
<script type="text/javascript">
var data = {a:1};
var vm = new Vue({
el:'#app',
data:data
})

//监控a值的变化
vm.$watch('a',function(newVal,oldVal){
console.log(newVal,oldVal);
})
data.a = '123123';
</script>
</body>
</html>

生命周期函数

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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
{{msg}}
</div>

<script type="text/javascript">
var vm = new Vue({
el:'#app',
data:{
msg:'hi vue'
},
//实例化初始之后,数据观测(data observer)和event/watcher事件配置之前被调用
beforeCreate:function() {
console.log("beforeCreate");
},
//实例创建完成之后立即调用,但是挂载阶段还没开始,$el属性目前不可见
created:function() {
console.log("created");
},
//在挂载开始之前被调用:相关渲染函数首次被调用
beforeMount:function() {
console.log("beforeMount");
},
//挂载成功,el被创建,vm.$el替换
mounted:function() {
console.log("mounted");
},
//数据更新之前调用
beforeUpdate:function() {
console.log("beforeUpdate");
},
//组件DOM已经更新,组件更新完毕
updated:function() {
console.log("updated");
}
});
setTimeout(function() {
vm.msg = "changing....."
}, 3000);
</script>
</body>
</html>

模板语法

插值

v-once只赋值一次,后续不可再修改值

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>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<!-- v-once 只能一次赋值,后续操作将不执行 -->
<div id="app" v-once>
{{msg}}
</div>

<script type="text/javascript">
var vm = new Vue({
el:'#app',
data:{
msg:'zhangsan'
}
})
//因为添加了v-once,所以只能赋值一次,这里就不会再进行赋值操作了
vm.$msg = 'hi vue'
</script>
</body>
</html>

v-html输出html标签并渲染

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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<!-- v-once 只能一次赋值,后续操作将不执行 -->
<div id="app" v-once>
{{msg}}
<!-- 不使用的情况下是没法显示的 -->
<p>
Using v-html:{{rawhtml}}
</p>
<!-- 使用v-html标签值指向变量,需要将v-html添加在一个标签上 -->
<p> Using v-html:<span v-html="rawhtml"></span></p>
</div>

<script type="text/javascript">
var vm = new Vue({
el:'#app',
data:{
msg:'zhangsan',
rawhtml:'<span style="color: #FF0000;">this is should be red</span>'
}
})
//因为添加了v-once,所以只能赋值一次,这里就不会再进行赋值操作了
vm.$msg = 'hi vue'
</script>
</body>
</html>

动态绑定元素属性

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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<!-- 绑定样式 -->
<div v-bind:class="color">
test red
<!-- 绑定元素的id -->
<span v-bind:id="testBindId">123123</span>
</div>
</div>

<script type="text/javascript">
var vm = new Vue({
el:'#app',
data:{
//通过绑定的color属性修改元素的样式
color:'red',
testBindId:'123123'
}
});

//通过绑定元素修改对应元素的id属性
vm.$data.testBindId = "updateId"
</script>
<style type="text/css">
.red{
color: #FF0000;
}
</style>
</body>
</html>

使用Javascript表达式

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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<!-- 加法表达式 -->
<p>{{number+1}}</p>
<!-- 三元运算符 -->
<p>{{ok?hello:bye}}</p>
<!-- 字符串操作:将字符串拆分然后反向排序之后再拼接 -->
<p>{{msg.split('').reverse().join('')}}</p>
</div>

<script type="text/javascript">
var vm = new Vue({
el:'#app',
data:{
number:1,
msg:'abcedfg',
hello:'Hello Vue',
bye:'Bye Vue',
ok:true
}
});
setTimeout(function() {
vm.$data.ok = false;
}, 3000);
</script>
</body>
</html>

模板语法-指令

指令是带有v-前缀的特殊特性。指令的特性是值逾期是单个JavaScript表达式。指令的职责是当表达式的值发生改变时,其将产生的连带影响,响应式的作用域DOM

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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<p v-if="seen">现在你能看到我</p>
<!-- 常规情况下,点击click me会触发父级点击,添加click的修饰符stop就会点击完之后不触发父级事件 -->
<div @click="click1">
<div @click.stop="click2">
click me
</div>
</div>
</div>

<script type="text/javascript">
var vm = new Vue({
el:'#app',
data:{
seen:false
},
methods:{
click1:function(){
console.log('click1');
},
click2:function(){
console.log("click2");
}
}
})
</script>
</body>
</html>

class和style的绑定

对象语法

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
59
60
61
62
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<!-- 1. active样式是否生效,取决于isActive -->
<!-- 2. 动态属性和静态属性可以并存 -->
<!-- 3. 可以通过对象添加多样式 -->
<div
class="test"
v-bind:class="{active:isActive,green:isGreen}" style="height: 12.5rem;width: 12.5rem;text-align: center;line-height: 12.5rem;">
hi vue
</div>
<br>
<!-- 通过数组绑定多样式 -->
<div v-bind:class="['active','green']"
style="height: 12.5rem;width: 12.5rem;text-align: center;line-height: 12.5rem;">
通过数组绑定多样式
</div>
<br>
<!-- 三元运算动态控制样式 -->
<div v-bind:class="[isActive?'active':'',isGreen?'green':'']"
style="height: 12.5rem;width: 12.5rem;text-align: center;line-height: 12.5rem;">
通过数组绑定多样式
</div>

<!-- v-bind:style绑定样式 -->
<div :style="{color:color,fontSize:size,background:isRed?'#ff0000':''}">
hi vue
</div>
</div>

<script type="text/javascript">
var vm = new Vue({
el:'#app',
data:{
isActive:true,
isGreen:true,
color:'#ffffff',
size:'30px',
isRed:true
}
})
</script>
<style type="text/css">
/* 声明样式 */
.active{
background-color: #FF0000;
}
.test{
font-size: 30px;
}
.green{
color: #00FF00;
}
</style>
</body>
</html>

条件渲染

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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<!-- 通过if else 判断是走哪个 -->
<div v-if="type === 'A'">
A
</div>
<div v-else-if="type === B">
B
</div>
<div v-else-if="type === C">
C
</div>
<div v-else>
NOT A/B/C
</div>
<!-- 使用v-show控制显示 -->
<div v-show="isShow">
<p>是否显示</p>
</div>
</div>
<script type="text/javascript">
var vm = new Vue({
el:'#app',
data:{
type:'A',
isShow:true
}
})
</script>
</body>
</html>

列表渲染

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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
<title></title>
</head>
<body>
<div id="app">
<ul id="v-for-object">
<li v-for="item,index in items">
{{index}}-{{item.message}}
</li>
</ul>

<ul v-for="value,key in objects" :key="key">
<li>{{key}}:{{value}}</li>
</ul>
</div>

<script type="text/javascript">
var vm = new Vue({
el:'#app',
data:{
items:[
{message:'Foo'},
{message:'Bar'},
],
objects:{
title:'How to do lists in Vue',
author:'zp',
publishedAt:'2019-10-27 09:54:53'
}
}
})
</script>
</body>
</html>

事件绑定

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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<button v-on:click="cliclkcount += 1">{{cliclkcount}}</button>
<button type="button" v-on:click="addOnce('abc',$event)">AddOnce</button>
</div>

<script type="text/javascript">
var vm = new Vue({
el:'#app',
data:{
cliclkcount:0,
name:'Vue'
},
methods:{
addOnce:function(str,e){
alert('hi');
alert(this.name);
alert(str);
console.log(e);
this.cliclkcount ++;
}
}
})
</script>
</body>
</html>

表单输入绑定

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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<input v-model="message" placeholder="Edit me" />
<p>输入的内容为:{{message}}</p>

<textarea v-model="message2" placeholder="Hint me">
</textarea>
<p>输入的内容为:{{message2}}</p>

<div class="mui-input-row mui-radio ">
<input v-model="names" type="radio" value="Jone">
<label>Jone</label>
<input v-model="names" type="radio" value="Lily" />
<label>Lily</label>
</div>

<div class="mui-input-row mui-checkbox mui-left">
<input type="checkbox" v-model="sex" value="Man" >
<label>Man</label>
<input type="checkbox" v-model="sex" value="Woman" >
<label>Woman</label>
<input type="checkbox" v-model="sex" value="UnKnown" >
<label>UnKnown</label>
</div>
<button type="button" @click="submit">Sumbit</button>
</div>

<script type="text/javascript">
var vm = new Vue({
el:'#app',
data:{
message:"123123",
message2:'测试内容',
names:"Lily",
sex:['Man','Woman']
},
methods:{
submit:function(){

}
}
})
</script>
</body>
</html>

组件基础

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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<button-container title="title1" @clicknow="clicknow">
<!-- 使用slot插入元素 -->
<h1>123123</h1>
</button-container>
<button-container></button-container>
</div>
<script type="text/javascript">
Vue.component('button-container',{
//自定义属性
props:['title'],
data: function(){
return {
count:0
}
},
template:'<div><button type="button" v-on:click="clickFun">{{title}}点击了我{{count}}次</button><slot></slot></div>',
methods:{
clickFun(){
this.count ++;
//组件传递参数到外部
this.$emit('clicknow',this.count);
}
}
})

var vm = new Vue({
el:'#app',
data:{

},
methods:{
//自定义事件传出的数据
clicknow:function(e){
console.log(e);
}
}
})
</script>
</body>
</html>

组件注册

局部组件注册及使用

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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<!-- 局部组件使用 -->
<test></test>
</div>

<script type="text/javascript">
var vm = new Vue({
el:'#app',
data:{

},
// 局部组件定义
components:{
test:{
template:'<h2>h2.....</h2>',
}
}
})
</script>
</body>
</html>

单文件组件

基础插件安装

在使用单文件组件之前,需要先安装以下环境

1
2
3
4
5
//1. 安装npm
npm 全称Node Package Manager,是一个基于Node.js的包管理器,也是整个Node.js社区最流行、支持的第三方模块最多的包管理器
npm -v
//2. 由于网络原因,需安装cnpm,是npm的中国镜像
npm install -g cnpm --registry=https://registry.npm.taobao.org

//3. 安装vue-cli
cnpm install -g @vue/cli

// 4. 安装webpack,webpack是Javascript打包器(module bundler)
cnpm install -g webpack

使用vue-cli创建项目

  1. 使用cmd命令输入vue ui,会自动打开浏览器,并跳转到Vuecli创建项目的界面
  2. 选择创建项目,修改项目路径,点击创建
  3. 选择默认,继续创建,一段时间后,看所选择的路径下就会创建好项目
1
2


0%