0%

Vue 基础

Vue 简介

  • Vue 是一套用于构建用户界面的 JavaScript 渐进式框架
  • Vue 提供 MVVM 数据双向绑定,专注于UI层面,核心思想:数据驱动、组件系统

库和框架

  • 库是为实现特定功能而封装的代码片段
  • 框架是开发项目的一套完整解决方案

MVVM

  • Module 模型,数据访问,对应前端的 javascript 对象
  • View 视图,对应前端 dom
  • ViewModule 视图模版,视图与模版数据交互

Vue 安装

npm 安装

1
npx install vue --save

CDN 引入

1
<script src="https://cdn.staticfile.org/vue/2.6.11/vue.js"></script>

调试插件

Vue.js devtools 是 Vue 官方提供的浏览器调试插件

Vue 模版语法

插值语法

插值语法使用

html

1
2
3
<div id="app">
{{ message }}
</div>

javascript

1
2
3
4
5
6
const vm = new Vue({
el: "#app",
data: {
message: "Hello Vue!"
}
});

指令语法(Directives)

指令是带有 v- 前缀的特殊属性

  • v-bind 指令可以用于响应式地更新 HTML attribute,如 v-bind:href="url",可缩写为 :href="url"
  • v-on 指令用于监听 DOM 事件,如 v-on:click="doSomething",可缩写为 @click="doSomething"

html

1
2
3
4
<div id="testDirectives">
<a v-bind:href="url">百度一下</a>
<button v-on:click="sayHello">Hello,Vue!</button>
</div>

javascript

1
2
3
4
5
6
7
8
9
10
11
const vm = new Vue({
el: "#testDirectives",
data: {
url: "https://www.baidu.com"
},
methods: {
sayHello(event) {
alert(event.target.innerHTML);
}
}
});

计算属性和侦听器

1
2
3
4
5
6
7
8
<div id="getName">
FirstName:
<input type="text" placeholder="First Name" v-model="firstName" /><br />
LastName:
<input type="text" placeholder="Last Name" v-model="lastName" /><br />
FullName:
<input type="text" placeholder="Full Name" v-model="fullName" /><br />
</div>

计算属性

  • 配置对象的 computed 属性为 Vue 的计算属性
  • 计算属性默认只有 getter,需要时也可以提供一个 setter
    • getter 将函数的返回值作为属性值
    • setter 监视属性值的变化

javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
const vm = new Vue({
data() {
return {
firstName: "yzbt",
lastName: "diy",
fullName: "yzbt-diy"
};
},
computed: {
fullName: {
get() {
return this.firstName + "-" + this.lastName;
},
set(value) {
const names = value.split("-");
this.firstName = names[0];
this.lastName = names[1];
}
}
}
}).$mount("#getName");

侦听器

  • 配置对象使用 watch 属性
  • 实例对象使用 $watch() 方法
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
const vm = new Vue({
data() {
return {
firstName: "yzbt",
lastName: "diy",
fullName: "yzbt-diy"
};
},
// 监视 firstName,实例化时调用 $watch()
watch: {
firstName: function(value) {
this.fullName = value + "-" + this.lastName;
}
}
}).$mount("#getName");

// 监视 lastName
vm.$watch("lastName", function(value) {
this.fullName = this.firstName + "-" + value;
});

Class 与 Style 绑定

  • 通过给 v-bind:class 传递字符串,对象或数组可以实现动态切换 class
  • 类名不确定传递字符串,类名确定,但是不确定是否生效传递对象或数组

html

1
2
3
4
5
6
7
8
9
10
11
12
<div id="styleBind">
<p v-bind:class="fullClass">TEST1</p>
<p
class="ftSize"
v-bind:class="{bgColor: hasBgColor, ftColor: hasFtColor}"
>
TEST2
</p>
<p v-bind:class="[hasBgColor ? 'bgColor' : '', 'ftColor']">
TEST3
</p>
</div>

css

1
2
3
4
5
6
7
8
9
.bgColor {
background-color: #bfa;
}
.ftSize {
font-size: 21px;
}
.ftColor {
color: red;
}

javascript

1
2
3
4
5
6
7
8
9
const vm = new Vue({
data() {
return {
fullClass: "bgColor ftColor ftSize",
hasBgColor: true,
hasFtColor: false
};
}
}).$mount("#styleBind");

条件渲染

  • v-if 指令用于条件性渲染一块内容,在表达式返回 truthy 值时被渲染
  • v-else-if 指令必须跟在 v-if 指令元素之后
  • v-else 指令必须跟在拥有 v-ifv-else-if 指令元素之后
  • v-if 通过增删对象改变元素显示状态,v-show 通过修改样式改变元素显示状态

过渡动画