这是我参与「第四届青训营」笔记创作活动的第10天

1. Vue核心

1.1. Vue简介

1.1.1. 官网

1.1.2. 介绍与描述

动态构建用户界面的渐进式JavaScript框架

1.1.3. Vue的特点

遵循MVVM模式
编码简洁，体积小，运行效率高，适合移动/PC端开发
它本身只关注UI，可以引入其它第三方库开发项目

1.1.4.与其他JS框架的关联

借鉴 Angular 的模板和数据绑定技术
借鉴 React 的组件化和虚拟DOM技术

1.1.5. Vue周边库

vue-cli：vue脚手架
vue-resource
axios
vue-router：路由
vuex：状态管理
element-ui：基于vue的UI组件库（PC端）

1.2初识Vue

想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象
root容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法
root容器里的代码被称为Vue模板
Vue实例与容器是一一对应的
真实开发中只有一个Vue实例，并且会配合着组件一起使用
{{xxx}}中的xxx要写js表达式，且xxx可以自动读取到data中的所有属性
一旦data中的数据发生变化，那么模板中用到该数据的地方也会自动更新

1.3 模板语法

Vue模板语法包括两大类：

插值语法：

功能：用于解析标签体内容
写法：{{xxx}}，xxx是js表达式，且可以直接读取到data中的所有区域

指令语法：
- 功能：用于解析标签（包括：标签属性、标签体内容、绑定事件…）
- 举例：<a v-bind:href="xxx">或简写为<a :href="xxx">，xxx同样要写js表达式，且可以直接读取到data中的所有属性
- 备注：Vue中有很多的指令，且形式都是v-???，此处我们只是拿v-bind举个例子

1.4 数据绑定

<div id="root">
        单向数据绑定：<input type="text" v-bind:value="name"><br>
        双向数据绑定：<input type="text" v-model:value="name">
    </div>

Vue中有2种数据绑定的方式：
1. 单向绑定（v-bind）：数据只能从data流向页面
2. 双向绑定（v-model）：数据不仅能从data流向页面，还可以从页面流向data
备注：

双向绑定一般都应用在表单类元素上（如：<input>、<select>、<textarea>等） v-model:value可以简写为v-model，因为v-model默认收集的就是value值

1.5 el与data的两种写法

el有2种写法：

const vm = new Vue({
    el:'#root', //第一种写法
    data:{
        name:'JOJO'
    }
})
vm.$mount('#root')//第二种写法

创建Vue实例对象的时候配置el属性
先创建Vue实例，随后再通过vm.$mount('#root')指定el的值

data有2种写法：

new Vue({
            el:'#root', 
            //data的第一种写法：对象式
            data:{
                 name:'JOJO'
            }
            data的第二种写法：函数式
            data(){
                return{
                    name:'JOJO'
                }
            }
        })

对象式
函数式

如何选择：目前哪种写法都可以，以后学到组件时，data必须使用函数，否则会报错

由Vue管理的函数，一定不要写箭头函数，否则this就不再是Vue实例了

1.6 MVVM模型

MVVM模型：
- M：模型（Model），data中的数据
- V：视图（View），模板代码
- VM：视图模型（ViewModel），Vue实例

总结：

data中所有的属性，最后都出现在了vm身上
vm身上所有的属性及 Vue原型身上所有的属性，在Vue模板中都可以直接使用

1.7 Vue中的数据代理

Vue中的数据代理通过vm对象来代理data对象中属性的操作（读/写）
Vue中数据代理的好处：更加方便的操作data中的数据
基本原理：

通过object.defineProperty()把data对象中所有属性添加到vm上。
为每一个添加到vm上的属性，都指定一个getter/setter。
在getter/setter内部去操作（读/写）data中对应的属性。

Vue学习笔记（一）| 青训营笔记