day01

安装chrome助手目的允许你可以访问谷歌的商店
安装vue devtools vue的调试工具可以让我们方便的去观察vue程序当中的数据
安装vscode vue插件 vue代码的补全

1、vue简介

尤雨溪参考文档（官网）渐进式：类似于迭代开发，vue.js只是一些核心代码，可以让你搭建基本页面如果你的页面功能相对比较丰富，那么需要相关的一些插件去完成。

插件：就是一些功能代码模块。它是为了给已经完成的功能代码，额外去添加功能用的。
官方插件：vuex vue-router......官方出品的 都是vue官方的插件
第三方插件：也是为了给vue去添加功能用的，但是是别的人写的。比如axios

数据为尊  动态显示页面

2、初谈vue

原生写法 jquery写法 vue写法（数据为尊）

函数使用：函数和对象配置对象：特点：属性名固定属性值可变的对象挂载点模板数据数据代理模板语法（html + js组成）指令和插值 v-bind 指令操作（操作元素）动态属性和表达式 {{}} 双花括号操作（文本内容）表达式

3、数据绑定

单向 v-bind 简写：：双向 v-model 一般表单类元素才能双向绑定 MVVM： M:model 模型的意思本质就是我的data数据 V:view 视图的意思本质就是我的页面元素 VM:ViewModel 视图模型的意思本质就是我的vm实例

事件的绑定和处理  v-on:click   简写  @click 
	事件绑定：两个东西  事件类型   事件回调
	回调函数：定义了 没调用 但是执行了  （事件  ajax  定时器   生命周期回调）
 	vue当中的方法要在methods当中去配置,并且这些方法最终都也会变成vm的方法


3个重要点
	1). vue控制的所有回调函数的this都是vm
	2). 所有data/computed/methods中的属性/方法都会成为vm的属性/方法
	3). 模板中表达式读取数据, 是读取vm的属性；模板中调用函数, 调用的是vm的方法

4、挂载的两种方式和data的两种写法

5、Object.defineProperty方法 es5拓展的方法：Object.defineProperties 和 Object.defineProperty

数据代理用到计算属性用到响应式数据的原理用到

6、computed计算属性和 watch监视

姓名案例：firstName  lastName  fullName	

1、复杂的插值表达式写法

2、methods方法实现

3、computed计算属性实现

4、methods和computed的区别	
	计算属性效率是比较高的，因为有缓存

5、watch监视属性
	两种写法  配置项写法监视firstName   vm.$watch监视lastName

6、watch监视实现computed的效果 immediate作用

7、computed和watch的区别
	同步计算属性
	异步watch
	他们作比较的时候   比较的是computed的getter，和setter没关系

8、计算属性的setter，只是为计算属性添加了监视，如果数据后期修改，会发生响应式的变化

8、强制绑定样式class和style

class动态绑定： 1、类名不确定字符串形式 2、类名确定，但是不知道哪个生效对象形式 3、类名有几个都生效数组形式
style动态绑定 1、必须把原来的东西写在对象当中，样式名不变，样式值是动态的 2、样式名如果不合法，要变为小驼峰写法

9、条件渲染

v-if v-else 隐藏的时候直接删除元素节点文档流当中不存在（内存无） v-show 隐藏的时候通过css display: none去隐藏文档流当中还存在（内存有）哪个好？要看怎么用：假设我们需要频繁的切换，那么v-show效率比较高但是占内存假设我们切换不频繁，那么v-if v-else就比较好，不占内存

10、列表渲染 v-for

11、vue如何去监视数据变化而更新页面

1、修改数组当中对象的属性，发现页面可以改变 2、调用数组的方法直接修改数组当中的整个对象，发现页面也可以改变 3、通过数组的下标直接修改数组当中的整个对象，发现页面改变不了原因：修改数组当中对象的属性，都是可以修改的，因为对象的所有属性都添加了get和set方法（响应式数据），data当中所有的对象

	通过数组的方法去修改整个对象也是可以修改的，因为vue当中重写了数组的部分原生方法，额外添加了展示到页面的功能

	通过下标直接修改数组整个对象，不可以展示到页面，但是数据确实改了，因为数组的数据整体并没有添加get和set方法


对象数据和数组数据响应式的区别

vue从入门到精通 day01