文章目录
一、vue2快速入门
1.1、Vue2.x官网
中文官网:https://cn.vuejs.org/
接口文档:https://cn.vuejs.org/v2/api/
风格指南:https://cn.vuejs.org/v2/style-guide/
1.2、Vue2.x介绍
描述:Vue是一套用于构建用户界面的渐进式框架。
作者:尤雨溪
1.3、Vue2.x特点
- 遵循 MVVM 模式,借鉴 angular 的模板和数据绑定技术,借鉴 react 的组件化和虚拟 DOM 技术。
- 适合 移动/PC 开发,代码简洁,体积小,运行效率高。
- 它本身只关注 UI,可以轻松引入 vue 插件或其它第三库开发项目。
1.4、Vue2.x入门
尝试 Vue.js 最简单的方法是使用 Hello World 例子,你可以在浏览器新标签页中打开它,跟着例子学习一些基础用法。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
</head>
<body>
<div id="app">
<h1>{
{
message }}</h1>
</div>
<script>
let vm = new Vue({
el: "#app",
data: {
message: "Hello World"
}
})
</script>
</body>
</html>
1.5、Vue2.x实例
每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的:
var vm = new Vue({
// 选项
})
虽然没有完全遵循 MVVM 模型,但是 Vue 的设计也受到了它的启发。
因此,在文档中经常会使用 vm (ViewModel 的缩写) 这个变量名表示 Vue 实例。
当创建一个 Vue 实例时,你可以传入一个选项对象。
选项对象由数据、DOM、生命周期钩子、资源、组合、以及其它对象组成。
由于选项对象各部分并不连贯,所以会在以后的章节慢慢介绍,本章节只是介绍常用的一些对象选项。
1.5.1、el
类型: string | Element
限制: 只在用 new 创建实例时生效。
介绍: 提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标。可以是 CSS 选择器,也可以是一个 HTMLElement 实例。在实例挂载之后,元素可以用 vm.$el 访问。
let vm = new Vue({
el: "#app"
})
console.log(vm.$el)// ==> div#app对象
1.5.2、data
类型: Object | Function
限制: 组件的定义只接受 function。
介绍: Vue 实例的数据对象。Vue 将会递归将 data 的 property 转换为 getter/setter,从而让 data 的 property 能够响应数据变化。浏览器 API 创建的原生对象,原型上的 property 会被忽略。实例创建之后,可以通过 vm. d a t a 访 问 原 始 数 据 对 象 。 V u e 实 例 也 代 理 了 d a t a 对 象 上 所 有 的 p r o p e r t y , 因 此 访 问 v m . a 等 价 于 访 问 v m . data 访问原始数据对象。Vue 实例也代理了 data 对象上所有的 property,因此访问 vm.a 等价于访问 vm. data访问原始数据对象。Vue实例也代理了data对象上所有的property,因此访问vm.a等价于访问vm.data.a。以 _ 或 $ 开头的 property 不会被 Vue 实例代理,因为它们可能和 Vue 内置的 property、API 方法冲突。你可以使用例如 vm. d a t a . p r o p e r t y 的 方 式 访 问 这 些 p r o p e r t y 。 当 一 个 组 件 被 定 义 , d a t a 必 须 声 明 为 返 回 一 个 初 始 数 据 对 象 的 函 数 , 因 为 组 件 可 能 被 用 来 创 建 多 个 实 例 。 如 果 d a t a 仍 然 是 一 个 纯 粹 的 对 象 , 则 所 有 的 实 例 将 共 享 引 用 同 一 个 数 据 对 象 ! 通 过 提 供 d a t a 函 数 , 每 次 创 建 一 个 新 实 例 后 , 我 们 能 够 调 用 d a t a 函 数 , 从 而 返 回 初 始 数 据 的 一 个 全 新 副 本 数 据 对 象 。 如 果 需 要 , 可 以 通 过 将 v m . data._property 的方式访问这些 property。当一个组件被定义,data 必须声明为返回一个初始数据对象的函数,因为组件可能被用来创建多个实例。如果 data 仍然是一个纯粹的对象,则所有的实例将共享引用同一个数据对象!通过提供 data 函数,每次创建一个新实例后,我们能够调用 data 函数,从而返回初始数据的一个全新副本数据对象。如果需要,可以通过将 vm. data.property的方式访问这些property。当一个组件被定义,data必须声明为返回一个初始数据对象的函数,因为组件可能被用来创建多个实例。如果data仍然是一个纯粹的对象,则所有的实例将共享引用同一个数据对象!通过提供data函数,每次创建一个新实例后,我们能够调用data函数,从而返回初始数据的一个全新副本数据对象。如果需要,可以通过将vm.data 传入 JSON.parse(JSON.stringify(…)) 得到深拷贝的原始数据对象。
let data = {
a: 1}
let vm = new Vue({
data: data
})
console.log(vm.a)// ==> 1
console.log(vm.$data == data)// ==> true
// Vue.extend() 中 data 必须是函数
let Component = Vue.extend({
data: function () {
return {
a: 1}
}
})
// ES6提供了另外一种简写的方式
let Component = Vue.extend({
data() {
return {
a: 1}
}
})
1.5.3、methods
类型: { [key: string]: Function }
介绍: methods 将被混入到 Vue 实例中。可以直接通过 VM 实例访问这些方法,或者在指令表达式中使用。方法中的 this 自动绑定为 Vue 实例。注意,不应该使用箭头函数来定义 method 函数 (例如 plus: () => this.a++)。理由是箭头函数绑定了父级作用域的上下文,所以 this 将不会按照期望指向 Vue 实例,this.a 将是 undefined。
let vm = new Vue({
data: {
a: 1},
methods: {
plus: function () {
this.a++
}
}
})
vm.plus()
console.log(vm.a)// 2
// ES6提供了另外一种简写的方式
let vm = new Vue({
data: {
a: 1},
methods: {
plus() {
this.a++
}
}
})
vm.plus()
console.log(vm.a)// 2
1.5.4、watch
类型: { [key: string]: string | Function | Object | Array }
介绍: 一个对象,键是需要观察的表达式,值是对应回调函数。值也可以是方法名,或者包含选项的对象。Vue 实例将会在实例化时调用 $watch(),遍历 watch 对象的每一个 property。注意,不应该使用箭头函数来定义 watcher 函数 (例如 searchQuery: newValue => this.updateAutocomplete(newValue))。理由是箭头函数绑定了父级作用域的上下文,所以 this 将不会按照期望指向 Vue 实例,this.updateAutocomplete 将是 undefined。
示例
let vm = new Vue({
data: {
a: 1,
b: 2,
c: 3,
d: 4,
e: 5,
f: {
g: 6
}
},
methods: {
someMethod: function (newVal, oldVal) {
console.log("new: %s, old: %s someMethod...", newVal, oldVal)
}
},
watch: {
// 值可以是方法
a: function (newVal, oldVal) {
console.log("new: %s, old: %s method...", newVal, oldVal)
},
// 值可以是方法名
b: "someMethod",
// 该回调会在任何被侦听的对象的 property 改变时被调用,不论其被嵌套多深
c: {
deep: true,
handler: function (newVal, oldVal) {
console.log("new: %s, old: %s deep...", newVal, oldVal)
}
},
// 该回调将会在侦听开始之后被立即调用
d: {
immediate: true,
handler: function (newVal, oldVal) {
console.log("new: %s, old: %s immediate...", newVal, oldVal)
}
},
// 你可以传入回调数组,它们会被逐一调用
e: [
function handle1(newVal, oldVal) {
console.log("new: %s, old: %s handle1...", newVal, oldVal)
},
function handle2(newVal, oldVal) {
console.log("new: %s, old: %s handle2...", newVal, oldVal)
},
function handle3(newVal, oldVal) {
console.log("new: %s, old: %s handle3...", newVal, oldVal)
}
],
// 你可以观察一个对象的某一个属性值
'f.g': function (newVal, oldVal) {
console.log("new: %s, old: %s f.g...", newVal, oldVal)
}
}
})
vm.a = 11
vm.b = 22
vm.c = 33
vm.d = 44
vm.e = 55
vm.f.g = 66
1.5.5、computed
类型: { [key: string]: Function | { get: Function, set: Function } }
介绍: 计算属性将被混入到 Vue 实例中。所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例。注意如果你为一个计算属性使用了箭头函数,则 this 不会指向这个组件的实例,不过你仍然可以将其实例作为函数的第一个参数来访问。
computed: {
aDouble: vm => vm.a * 2
}
计算属性的结果会被缓存,除非依赖的响应式 property 变化才会重新计算。注意,如果某个依赖 (比如非响应式 property) 在该实例范畴之外,则计算属性是不会被更新的。计算属性默认只有 getter,不过在需要时你也可以提供一个 setter。
示例:
let vm = new Vue({
data: {
a: 1},
computed: {
// 仅读取
aDouble: function () {
return this.a * 2
},
// 读取和设置
aPlus: {
get: function () {
return this.a + 1
},
set: function (v) {
this.a = v - 1
}
}
}
})
console.log(vm.aPlus) // => 2
vm.aPlus = 3
console.log(vm.a) // => 2
console.log(vm.aDouble) // => 4