Vue学习笔记

初识Vue

1. 需要创建Vue实例
2. root容器代码需要符合html规范，但是混入了一些特殊的Vue语法
3. root容器代码被称为Vue模板
4. 容器和Vue实力之间一一对应

注意区分js表达式、js代码 ：一个表达式会生成一个值，可以放在任何一个需要值的地方

5. {{}}需要写js表达式，可以读取data中的所有属性
6. data中属性的值发生改变，那么页面中用单该属性的地方也会自动更新
7. 真实开发中只有一个vue实力，并且会配合着组件一起使用

Vue模板语法的两大类

1. 插值语法

• 功能：用于解析标签题内容
  {{xxx}}这种，xxx是js表达式，可以读到data中的所有属性

2. 指令语法

• 功能： 用于解析标签（含标签属性、标签体内容、绑定事件等）

举例

其中的:href就是v-bind:href的简写， 它会把后面的字符串Date.now()当作js表达式处理。 但如果只是<a href ='Date.now()'> </a>那么字符串Date.now()就真的只是字符串而已

Vue数据绑定

Vue中有两种数据绑定的方式

1. v-bind：单向绑定，数据只能从data流向页面
2. v-model：双向绑定，数据可以在data和页面中双向流动
   • 一般都用在表单类（输入类型）的元素
   • v-model:value可简写为v-model

el和data的两种写法

el的两种写法

1. new Vue时配置el属性
   
2. 先创建Vue实例，随后再通过vm.$mount('.root')这种方式指定el的值

data的两种写法

1. 对象式
2. 函数式

但是由vue管理的函数，例如上面的函数式data，不要写箭头函数，因为箭头函数的this是window，写了之后函数的this就不再是Vue实例了

MVVM模型

View Model是model和view间的桥梁

1. Model：模型 == data中的数据
2. View：视图 == 模板代码（页面）
3. VM： 视图模型 == Vue实例
   观察发现：
4. data种的所有属性，最后都出现在VM身上
5. VM身上所有的属性，以及Vue原型山的所有属性， 在Vue模板中都可以直接使用

数据代理

回顾Object.defineproperty()

[参考，为什么value、writebale不能和getter、setter一起出现] (https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty)

语法
Object.defineProperty(obj, prop descriptor)

• obj: 要定义属性的对象。
• prop: 一个字符串或 Symbol，指定了要定义或修改的属性键。
• descriptor: 要定义或修改的属性的描述符。
• 返回值:传入函数的对象，其指定的属性已被添加或修改。

descriptor是个对象：

• value是数值
• writable是控制属性是否可以被修改，默认是false
• configurable：控制属性是否可以被删除，默认是false
• enumerable： 控制属性是否可以被枚举，默认是false
• get()函数：当有人读取obj的prop属性时，getter会被调用，返回值为该prop的value
• set()函数：当有人修改obj的prop属性时，setter会被调用，且会接收到被修改的值

数据代理

通过一个对象代理对另一个对象中属性的操作，就是数据代理
可以使用Object.defineProperty()去做数据代理

1. Vue中的数据代理： 通过vm对象来代理data对象中属性的操作
2. Vue中数据代理的好处： 更加方便操作data中的数据
3. 基本原理：
   通过Object.defineProperty()把data对象中所有的属性添加到vm上。为每一个添加到vm属性都指定一个getter、setter。在getter、setter内部去操作data对应的属性
   ObObject.definePropertyObject.defineProperty
   

事件处理（事件的基本使用）

1. v-on:xxx，@xxx绑定事件，其中xxx是事件名
2. 事件的回调需要配置在methods对象中，最终会在vm上
3. methods中配置的函数，不可使用箭头函数，否则this就不是vm了
4. methods中配置的函数，都是被vue所管理的函数，this的指向是vm或组件实例对象
5. @click="demo"和@click="demo($event)"效果其实一样，但后者带了括号，可以传参