什么是 Vue.js


Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。Vue 作为 JavaScript 框架在国内非常火热,如常见的 微信小程序、UniApp、鸿蒙的App应用开发等、都有 Vue.js 的身影。

Vue.js 环境搭建


安装 Vue.js 命令行

1
npm install vue

安装 Vue.js 脚手架

1
2
npm install -g @vue/cli
npm i -g @vue/cli-init

如果遇到安装不上,可使用 cnpm 安装(可选)

1
2
3
npm install cnpm -g --registry=https://registry.npm.taobao.org
cnpm install -g @vue/cli
cnpm i -g @vue/cli-init

构建Vue应用

1
vue create [项目名]

使用 webpack 构建 Vue 应用(可选)

1
vue init webpack [项目名]

安装依赖
c d 进Vue项目使用命令安装依赖

1
npm install 或 cnpm install

Vue项目目录结构:

目录 说明
build 构建代码(webpack)
config 配置文件目录
node_modules 依赖模块
src 源码目录
static 静态资源目录
test 测试初始目录
index.html 首页入口文件
package.json 项目配置文件
README.md 项目说明文件

数据绑定和初始数据


在传统的网页设计中。要改变dom内容总是需要不停获取dom对象。在 vue 中能够使用数据绑定来解决这个问题。

数据绑定

这里创建了一个Vue实例,e l 绑定到了 id 为 app 的 dom 对象。其中 data 可以为数据模型

1
2
3
4
5
6
7
8
9
<div id="app">我的名字是:{{ name }}</div>
<script>
new Vue({
el: '#app',
data: {
name : '陈陈菌'
}
})
</script>

绑定样式和类元素

vue 不仅可以绑定数据,还能绑定 CSS 样式和样式类

v-bind:style="{ color: color }"

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div id="app">
<p v-bind:style="{ backgroundColor: color , border: bor, width: widthValue }">
我喜欢的颜色:{{ color }}
</p>
</div>

<script>
new Vue({
el: '#app',
data: {
widthValue : '300px',
color : 'blue',
bor: '5px solid'
}
})
</script>

v-bind:class="{ DOMClass }"

1
2
3
4
5
6
7
8
9
10
11
<style>
.DOMclass {
color: "#blu"
}
</style>
<div id="app" v-bind:class="{ DOMclass }">我喜欢的颜色:蓝色</div>
<script>
new Vue({
el: '#app'
})
</script>

data 数据对象


data 中能够定义 多种类型,如:数组、对象、数字、字符串、布尔值。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div id="app">
姓名:{{ chen.name }}<br/>
年龄:{{ chen.age }}<br/>
性别男:{{ chen.sex }}<br/>
兴趣爱好:{{chen.hobby[0]}}、{{chen.hobby[1]}}、{{chen.hobby[2]}}<br/>
</div>
<script>
new Vue({
el: '#app',
data: {
chen:{
name: '陈陈君',
age: 20,
sex: true,
hobby:['编程','音乐','游戏']
}
}
});
</script>

自定义方法


在 methods 中定义的方法可以在 el 挂载的元素内调用

1
2
3
4
5
6
7
8
9
10
11
12
13
<div id="app">
<input type="button" v-on:click="log" value="点我弹出对话框">
</div>
<script>
new Vue({
el: '#app',
methods: {
log(){
alert("弹出对话框");
}
}
})
</script>

计算属性


Vue 提供了一个专门用来计算数值的 computed 属性

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">
<p>总价格:{{ totalPrice }}</p>
<p>单价: {{ price }}</p>
<p>数量:{{ number }}</p>
<div>
<button v-on:click="number==0?0:number--">减少数量</button>
<button v-on:click="number++">增加数量</button>
</div>
</div>
<script>
new Vue({
el: '#app',
data: {
price: 20,
number: 0
},
computed: {
totalPrice(){
return this.price * this.number
}
}
})
</script>

状态监听


当绑定的一些值发生改变,watch 可以用来监听它们,及时作出的反应

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div id="app">
<input type="text" v-model="cityName">
</div>
<script>
new Vue({
el: '#app',
data: {
cityName: '深圳'
},
watch: {
cityName(newName,oldName){
// Debug来查看值的变化
console.log(newName,oldName)
}
}
})
</script>

过滤器


让 文字格式化 处理更方便。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div id="app">
<div>{{ message | toUpcase }}</div>
</div>
<script>
new Vue({
el: '#app',
data: {
// 将会变为 HELLOWORLD
message: 'helloworld'
},
filters: {
toUpcase(value){
return value ? value.toUpperCase(): ''
}
}
})
</script>

内置指令


v-model (双向数据绑定)

1
2
3
4
5
6
7
8
9
10
11
12
<div id="app">
<input type="text" v-model="number">
<p>number的值:{{ number }}</p>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
number : null
}
})
</script>

v-on (监听事件)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div id="app">
<p>{{ msg }}</p>
<button v-on:click="showInfo">按钮</button>
</div>
<script>
new Vue({
el: '#app',
data: {
msg: "hi"
},
methods: {
showInfo(){
this.msg = '我是v-on指令'
}
}
})
</script>

v-bind (单向数据绑定)

1
2
3
4
5
6
<!--绑定一个图片-->
<img v-bind:src="imageSrc">
<!--绑定一个样式属性-->
<div v-bind:style="{ styleKey }"></div>
<!--绑定一个样式类-->
<div v-bind:class="{ className }"></div>

v-text (插入文本内容)

1
2
3
4
5
6
7
8
9
10
<!--这段文本将会替换成ChenChenJun-->
<div id="app" v-text="name">balbalbalbal</div>
<script>
new Vue({
el: '#app',
data: {
name: 'ChenChenJun'
}
})
</script>

v-html (插入HTML内容)

1
2
3
4
5
6
7
8
9
10
11
12
<div id="app" v-html="html1">
<!--这段内容将会被替换成 a 标签-->
balbalbalbalbal
</div>
<script>
new Vue({
el: '#app',
data: {
html1: '<a href="https://blog.glumi.cn">陈陈菌博客</a>'
}
})
</script>

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
<div id="app">
<button v-on:click="add">添加学生</button>
<button v-on:click="del">添加学生</button>
<table border="1" width="50%" style="border-collapse: collapse;">
<tr>
<th>班级</th>
</tr>
<tr align="center" v-for="item in students">
<td>{{ item.grade }}</td>
<td>{{ item.name }}</td>
<td>{{ item.gender }}</td>
<td>{{ item.age }}</td>
</tr>
</table>
</div>
<script>
new Vue({
el: '#app',
data: {
students: []
},
methods: {
add(){
var student = {grade:'1',name:'张三',gender:'男',age:'25'}
this.students.push(student);
},
del(){
this.students.pop()
}
}
})
</script>

v-if (条件渲染)

使用 v-if 指令的 dom 会根据布尔值进行隐藏和显示。并且支持表达式。
它与 v-show 的区别就是 v-if 会根据布尔值把 dom 元素移除或保留. 而 v-show 在只是添加了样式来控制,比如在隐藏元素时是添加 display: none; 样式来隐藏

1
2
3
4
5
6
7
8
9
10
11
12
<div id="app">
<input type="button" v-on:click="bool=!bool" value="显示/隐藏元素">
<p v-if="bool">balbalbalbalbal</p>
</div>
<script>
new Vue({
el: '#app',
data: {
bool: false
}
})
</script>

v-show (显示隐藏)

1
2
3
4
5
6
7
8
9
10
11
12
<div id="app">
<input type="button" v-on:click="bool=!bool" value="显示/隐藏元素">
<p v-show="bool">balbalbalbalbal</p>
</div>
<script>
new Vue({
el: '#app',
data: {
bool: false
}
})
</script>

事件


事件监听

1
2
3
v-on:[事件]

@[事件]

事件修饰符

1
v-on:[事件].[修饰符]
事件修饰符 说明
stop 阻止事件冒泡
prevent 阻止默认事件
capture 事件捕获
self 仅自身事件触发
once 事件只触发一次

组件


组件是开发中较为重要的部分,在 Vue 中可以让 html css 和 javaScript 单独组成一个个的组件来进行开发,提高可复用性 和 解耦性。

局部组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div id="app">
<my-component></my-component>
</div>
<script>
var componentA = {
data(){
return {
count: 0
}
},
template: '<Button @click="count++">被点击了{{ count }}</button>'
};
var app = new Vue({
el: '#app',
components: {
'my-component' : componentA
}
});
</script>

全局组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div id="app">
<my-component></my-component>
</div>

<script>
Vue.component('my-component',{
data(){
return {
count: 0
}
},
template: '<Button @click="count++">被点击了{{ count }}</button>'
});
var app = new Vue({
el: '#app'
})
<script>

template 模板

在前面的开发中,template 模板是使用字符串来保存的,但实际上模板代码是可以写在 HTML 结构中的,这样有利于代码高亮提示。需要注意:template 标签中只能有一个子容器,否则会带来错误。

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
<div id="app" style="background-color: bisque;">
<app-1-model-1></app-1-model-1>
</div>

<template id="myComponent">
<div>
<ul>
<li>list1</li>
<li>list2</li>
<li>list3</li>
</ul>
</div>
</template>



<script>
var myComponent = {
template: '#myComponent'
}
var app = new Vue({
el: '#app',
components: {
'app-1-model-1' : myComponent
}
})
</script>

组件的数据传递 props

props ,用于接收父组件的定义数据,其值为数组。

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
<div id="app" style="background-color: bisque;">
<app-1-model-1 name="这里是 ul "></app-1-model-1>
</div>

<template id="myComponent">
<div>
<ul>{{ name }}
<li>list1</li>
<li>list2</li>
<li>list3</li>
</ul>
</div>
</template>

<script>
var myComponent = {
props: ['name'],
template: '#myComponent'
}
var app = new Vue({
el: '#app',
components: {
'app-1-model-1' : myComponent
}
})
</script>

组件的数据传递 $emit

$emit ,能够将子组件的值传递到父组件去,$emit 可以触发父组件定义的事件。

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
<div id="app">
<parent></parent>
</div>

<script>
Vue.component('parent',{
template: `
<div>
<child @childFn="transContent"></child>子组件传来的值:{{message}}
</div>
`,
data() {
return {
message: ''
}
},
methods: {
transContent(payload){
this.message = payload
}
}
})
Vue.component('child',{
template: `
<div>
<input type="text" v-model="message">
<button @click="click">Send</button>
</div>`,
data(){
return {
message: '子组件的消息'
}
},
methods: {
click(){
this.$emit('childFn', this.message);
}
}
})
var app = new Vue({
el: '#app'
})
</script>

组件切换

Vue 中的页面几乎由 组件 来构成,不同的组件表示不同的表现方式。对于雷同的组件能够通过切换来表示不同的DOM。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<div id="app">
<a href="#" @click.prevent="flag?flag:flag=!flag">登录</a>
<a href="#" @click.prevent="flag?flag=!flag:flag">注册</a>
<login v-if="flag"></login>
<register v-else="flag"></register>
</div>

<script>
Vue.component('login',{
template: '<div>登录页面</div>'
})
Vue.component('register',{
template: '<div>注册页面</div>'
})
var app = new Vue({
el: '#app',
data: {
flag: true
}
})
</script>

生命周期


Vue 为生命周期提供了回调的钩子函数,用来在特定的情况下触发,贯穿了 Vue 实例化的整个过程。从初始数据监听、编译模板、到将实例挂载到DOM并在数据变化时更新 DOM。

钩子函数

钩子 说明
beforeCreate 创建实例对象之前执行
created 创建实例对象之后执行
beforeMount 页面挂载成功之前执行
mounted 页面挂载成功之后执行
beforeUpdate 页面更新之前执行
updated 页面更新之后执行
beforeDestroy 实例销毁之前执行
destroyed 实例销毁之后执行

以上为 Vue 2 相关学习笔记,其他内容待更新与修正 : )