1.什么是vue
一套用于构建用户界面的渐进式javascript框架。
补充：构建用户界面（将数据转化为界面） 渐进式：（简单应用：只需引入轻量小巧的vue核心库。复杂应用：可引入各式各样的vue插
2.vue的特点
①组件化，提高代码复用率和可维护性
②声明式编程，无需直接操作DOM，提高开发效率
③使用虚拟DOM＋diff算法，尽量复用DOM节点
3.el与data两种写法
① el:"#root" ② v.$mount("#root")
data:对象或者函数形式
4.MVVM模型
M：模型 （model）：对应data中的数据
V：视图（view)：模板
VM：视图模型 ：Vue实例 ：用于数据绑定，DOM监听
5.数据代理
（1）定义：通过一个对象代理另一个对象中属性的操作（读/写）
6.事件使用
6.1 点击事件
用指令v-on:click = " 事件名 "，简写@click = " 事件名 "来写。
可以传参，可不传参，不传参时事件调用可以不添加括号。
methods中配置的函数不要用箭头函数，this为vue实例，否则不为vm了
本身自带参数event，可在methods函数中直接使用。既想用到event参数，又想传其它参数时，必须在触发事件函数时写出参数为$event和其它参数,且调用顺序和定义顺序一致。
（2）事件修饰符
.prevent ：阻止事件默认行为
.stop： 阻止事件冒泡
.once：事件只触发一次
.capture：事件捕获
.self：当event.tagert是当前元素时才调用
6.2 键盘事件
在监听键盘事件时，我们经常需要检查详细的按键。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：
为了在必要的情况下支持旧浏览器，Vue 提供了绝大多数常用的按键码的别名：
.enter
.tab（只能绑定到keydown事件上）
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right
②capsLock修饰符写成caps-lock
③ 系统修饰键
.ctrl
.alt
.shift
.meta
6.3.事件与事件流
[事件]
JavaScript中的事件,可以理解就是在HTML文档或者浏览器中发生的一种交互操作
使得网页具备互动性。
常见的有加载事件、鼠标事件。
[事件流]
由于DOM是一个树结构,如果在父子节点绑定事件时候，当触发子节点的时候，
就存在一个顺序问题，这就涉及到了事件流。
页面触发一个事件时,会按照一定的顺序来响应事件,事件的响应过程为事件流。
[js的事件流三阶段]
事件捕捉阶段(capture phrase): 事件开始由顶层对象触发,然后逐级向下传播,直到目标元素;
处于目标阶段(target phrase): 处于绑定事件的元素上;
事件冒泡阶段(bubbling phrase): 事件由具体的元素先接收,然后逐级向上传播,直到不具体的元素
(事件捕获是从上到下，而事件冒泡，是从下到上。)
事件冒泡和事件捕获分别由微软和网景公司提出,是为了解决页面中事件流(事件发生顺序)的问题。
[事件冒泡] :
微软提出了名为事件冒泡(event bubbling)的事件流。
事件冒泡可以形象的比喻成把一颗石头投入水中，泡泡会一直从水底冒出水面。
也就是说,事件会从最内层的元素开始发生，一直向上传播,直到document对象。
因此在事件冒泡的概念下在button按钮发生click事件的顺序应该是
button-div-body-html-document。
[事件捕获]:
网景提出另一种事件流名为事件捕获(event capturing)
与事件冒泡相反，事件会从最外层开始发生，直到具体的元素。
因此在事件捕获的概念下在button按钮发生click事件的顺序应该是
7.计算属性
（1）基础理解
- 定义：通过已有的属性计算出来
- 原理：底层借助了Object.defineProperty的getter和setter
- 优势：内部有缓存机制，效率更高，调试方便
- 备注：计算属性最终都会出现在vm身上，它的值为getter中返回的值
8.监视属性
（1）基础理解
（2）深度监视
（3）简写形式
（4）computed与watch对比
computd能实现的，watch一定能实现，watch能实现的，computed不一定能实现。例如watch能实现异步操作
vue所管理的函数写成一般函数，不是vue所管理的函数写成箭头函数，例如setTimeout。这样写是为了保证this指向为vue实例
9.class、style样式
9.1 class样式
（1）一般绑定
2）数组形式绑定
（3）对象形式绑定
9.2 style样式
10. 条件渲染
（1）v-if
写法：v-if=“表达式”，v-else-if=“表达式”，v-else=“表达式”
适用场景：切换频率较低
特点：不展示的DOM元素直接被剔除 ，不能再获取到DOM节点
注意：v-if与v-else-if,v-esle一起使用时，结构不能被打断
可以与template搭配使用
（2）v-show
写法：v-show=“表达式”
适用场景：切换频率较高
特点：不展示的DOM元素不是被剔除，而是用css样式display：none隐藏掉
11. 列表渲染
（1）基本列表
语法：v-for="(item,index) in object"
（2）key的作用
- 以id作为key的值
- 以index作为key的值
- key是虚拟DOM对象的标志，当数据发生变化时，vue会根据新数据生成新的虚拟DOM
vue进行新旧虚拟DOM对比
若旧虚拟DOM中找到了与新虚拟DOM中相同的key，若虚拟DOM中内容没变，则直接使用之前的真实DOM，若内容改变，则生成新的真实DOM
若旧虚拟DOM中未找到与新虚拟DOM中相同的key，则直接生成新的真实DOM -
12. vue中数据监测
-
1. vue会监视data中所有层次的数据。
2. 如何监测对象中的数据?
通过setter实现监视，且要在newVue时就传入要监测的数据。
(1).对象中后追加的属性，Vue默认不做响应式处理
(2).如需给后添加的属性做响应式，请使用如下API:
Vue . set(target, propertyName/index, value) 或
Vm . $set(target, propertyName/ index, value)
3.如何监测数组中的数据?
通过包裹数组更新元素的方法实现，本质就是做了两件事:
(1).调用原生对应的方法对数组进行更新。
(2).重新解析模板，进而更新页面。
4.在Vue修改数组中的某个元素一定 要用如下方法:
1.使用这些API:push()、pop()、shift()、 unshift()、splice()、 sort()、reverse()
2.Vue .set()或vm. $set()
13. 内置指令
12. 1 v-text
文本指令
-
12. 2 v-html
- 12. 2 v-cloak
本质是个特 殊属性，Vue实例创建完毕并接管容器后，会删掉v-cloak属性。
配合css使用可解决网络慢而导致页面显示不正确的问题:css中： [ v-cloak ] { disp;ay:none}
11. 3 v-once
v-once所在节点在初次动态渲染后，就视为静态内容了
以后数据改变不会引起页面的更新
11. 3 v-pre
可以让vue跳过所在节点的编译过程
可利用它跳过没有使用插值语法，指令语法的节点，会加快编译 -
13. 自定义指令
972
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
