初识Vue
- 需要创建Vue实例
- root容器代码需要符合html规范，但是混入了一些特殊的Vue语法
- root容器代码被称为Vue模板
- 容器和Vue实力之间一一对应
注意区分js表达式、js代码 ：一个表达式会生成一个值，可以放在任何一个需要值的地方
- {{}}需要写js表达式，可以读取data中的所有属性
- data中属性的值发生改变，那么页面中用单该属性的地方也会自动更新
- 真实开发中只有一个vue实力，并且会配合着组件一起使用
Vue模板语法的两大类
- 插值语法
- 功能：用于解析标签题内容
{{xxx}}这种，xxx是js表达式，可以读到data中的所有属性
- 指令语法
- 功能： 用于解析标签（含标签属性、标签体内容、绑定事件等）
举例
其中的:href就是v-bind:href的简写， 它会把后面的字符串Date.now()当作js表达式处理。 但如果只是<a href ='Date.now()'> </a>那么字符串Date.now()就真的只是字符串而已
Vue数据绑定
Vue中有两种数据绑定的方式
- v-bind：单向绑定，数据只能从data流向页面
- v-model：双向绑定，数据可以在data和页面中双向流动
- 一般都用在表单类（输入类型）的元素
v-model:value可简写为v-model
el和data的两种写法
el的两种写法
- new Vue时配置el属性
- 先创建Vue实例，随后再通过
vm.$mount('.root')这种方式指定el的值
data的两种写法
- 对象式
- 函数式
但是由vue管理的函数，例如上面的函数式data，不要写箭头函数，因为箭头函数的this是window，写了之后函数的this就不再是Vue实例了
MVVM模型
View Model是model和view间的桥梁
- Model：模型 == data中的数据
- View：视图 == 模板代码（页面）
- VM： 视图模型 == Vue实例
观察发现： - data种的所有属性，最后都出现在VM身上
- 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()去做数据代理
- Vue中的数据代理： 通过vm对象来代理data对象中属性的操作
- Vue中数据代理的好处： 更加方便操作data中的数据
- 基本原理：
通过Object.defineProperty()把data对象中所有的属性添加到vm上。为每一个添加到vm属性都指定一个getter、setter。在getter、setter内部去操作data对应的属性
ObObject.definePropertyObject.defineProperty
事件处理（事件的基本使用）
v-on:xxx，@xxx绑定事件，其中xxx是事件名- 事件的回调需要配置在methods对象中，最终会在vm上
- methods中配置的函数，不可使用箭头函数，否则this就不是vm了
- methods中配置的函数，都是被vue所管理的函数，this的指向是vm或组件实例对象
@click="demo"和@click="demo($event)"效果其实一样，但后者带了括号，可以传参
