文章目录

一、vue2快速入门

一、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.a。以 _ 或 $ 开头的 property 不会被 Vue 实例代理，因为它们可能和 Vue 内置的 property、API 方法冲突。你可以使用例如 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