目录
vue简介：
一套用于构建用户界面的渐进式JavaScript框架
特点：
1、采用组件化模式，提高代码复用率，让代码更好维护
2、声明式编码，让编码人员无3、需直接操作DOM，提高开发效率
3、使用虚拟DOM+优秀的Diff算法，尽量复用DOM节点
遵循MVVM模式
编码简洁，体积小，运行效率高，适合移动/pc端开发
本身只关注UI，也可以引入其他第三方库开发项目
vue安装：
提取码：1111
1、初识vue：
1、想让vue工作，必须先创建一个vue实例，且要传入一个配置对象
2、root容器里的代码依然符合HTML规范，只不过混入一些特殊的vue语法（ 双括号{{ }} ）；
3、root容器里的代码被称为【vue模板】；
4、vue实例和组件是一一对应的；
5、真实开发中只有一个vue实例，并且会配合着组件一起使用；
6、{{xxx}}中的xxx要写js表达式，且xxx可以自动读取到data中的所有属性；
7、一旦data中的数据发生改变，那么页面中用到该数据的地方也会自动更新；
注意区分：js表达式 和 js代码（语句）
1、表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方：
- a
- a+b
- demo（1）
- x===y ？'a' : 'b'
2、js代码（语句）：
- if（）{}
- for（）{}
2、vue模板语法：
1、插值语法：
功能：用于解析标签体内容
写法：{{xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性。
2、指令语法：
功能：用于解析标签（包括：标签属性，标签体内容，绑定事件等等）。
举例：v-bind：href=“xxx” 或 简写为 ：href：“xxx”,xxx同样要写js表达式，且可以直接读取到data中所有的属性。
vue中有很多指令，且形式都是v-???，vue实例中出现重名时可进行分级处理
3、vue数据绑定：
vue中有两种数据绑定方式
1、单向绑定（v-bind）：数据只能从data流向页面
2、双向绑定（v-model）：数据不仅能从data流向页面，还可以从页面流向data。
备注：
1、双向绑定一般都应用在表单元素上（如：input、select等）
2、v-model:value可以简写成v-model，v-model默认收集的就是value值
4、el和data的两种写法：
1、el的两种写法：
- new Vue时候配置el属性
- 先创建vue实例，随后再通过v.$mount（'#root'）指定el的值
2、data的两种写法：
- 对象式
- 函数式
如何选择：用到组件时，data必须使用函数式，否则会报错。
3、原则：
由vue管理的函数，一定不要写箭头函数，一但写了箭头函数，this所指的就不再是vue实例而是window
5、MVVM模型
1、M:模型（MObel）：data中的数据
2、V:视图（view）：模板代码
3、VM：视图模型（viewMobel）：vue实例
发现：
1、data中的所有属性，最后都出现在了vm身上
2、vm身上所有的属性及vue原型上所有的属性，在vue模板中都可以直接使用
6、数据代理
1、vue中的数据代理：
通过vm对象来代理data对象中属性的操作（读/写）
2、vue中数据代理的好处：
更加方便的操作data中的数据
3、基本原理：
通过Object.defineProperty()把data对象中所有属性添加到vm上。
为每一个提娜佳到vm上的属性，都指定一个getter和setter。
在getter和setter内部去操作（读/写）data中对应的属性
7、事件处理：
7.1 事件的基本使用：
1、使用v-on:xxx 或@xxx绑定事件，其中xxx是事件名
2、事件的回调需要配置在methods对象中，最终会在vm中
3、methods中配置的函数，不要用箭头函数，否则this就不是vm了
4、methods中配置的函数，都是被vue所管理的函数，this的指向是vm 或 组件实例对象
5、@click='demo' 和 @click="demo（$event）"效果一致，但后者可以传参
7.2 vue中常用的事件修饰符：<修饰符可以连用>
1、prevent：阻止默认事件
2、stop：阻止事件冒泡
3、once：事件只触发一次
4、capture：使用事件的捕获模式
5、self：只有event、target是当前操作的元素时才触发事件
6、passive：事件的默认行为立即执行，无需等待回调执行完毕
7.3 键盘事件：
1、vue中常用的按键别名：
回车：enter
删除：delete（捕获删除和退格键）
推出：esc
空格：space
换行：tab（特殊，必须配合keydown使用）
上：up
下：down
左：left
右：right
2、vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case（短横线命名）
3、系统修饰符（用法特殊）：ctrl、alt、shift、meta
（1）配合keyup使用：按下修饰符的同时，再按下其他键，随后释放其他键，事件才触发
（2）配合keydown使用：正常触发事件
4、也可以使用keyCode去指定具体的按键（不推荐）
5、vue.config.keyCodes.自定义键名 = 键码，可以去定制按键别名
8、计算属性computed：
1、定义：要用的属性不存在，要通过已有属性计算得来
2、原理：底层接住了Object.defindproperty方法提供的getter和setter
3、get函数什么时候执行：
（1）初次读取时会执行一次
（2）当依赖的数据发生改变时会被再次调用
4、优势：与methods实现相比，内部有缓存机制，效率更高，调试方便
5、备注：
1.计算属性最终会出现在vm上，直接读取使用即可
2.如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生变化
8.1 姓名案例：
8.1.1 以计算属性实现：
当只有读取要求时可简写：
8.1.2 以methods的形式实现：
8.1.3 以插值语法的方式实现：
9、监视属性watch（侦听函数）：
1、当被监视的属性变化时，回调函数自动调用，进行相关操作
2、监视的属性必须存在，才能进行监视
3、监视的两种写法：
（1）new Vue 时传入watch配置
（2）通过vm.$watch监视
9.1 深度监视：
1、vue中的watch默认不监视对象内部值的改变（一层）
2、配置deep：true可以监视对象内部值的改变（多层）
备注：
1、vue自身可以监测对象内部值的改变，但vue提供的watch默认不可以
2、使用watch时根据数据的具体结构，决定是否采用深度监视
9.2简写
当无需immediate 和 deep时可简写
vm.$形式简写：
9.3 watch与computed的对比：
computed和watch之间的区别：
1、computed能完成的功能，watch都能完成
2、watch能完成的功能，computed不一定能完成，例如watch可以进行异步操作
两个重要小原则：
1、所被vue管理的函数，最好写成普通函数，这样this的指向才是vm 或 组件实例对象
2、所有不被vue所管理的函数（定时器的回调函数、ajax的回调函数等），最好写成箭头函数
这样this的指向才是vm或组件实例对象
10、绑定样式
10.1 class样式
写法：class='xxx' xxx可以是字符串、对象、数组
字符串写法适用于：类名不确定，需要动态获取
对象写法适用于：要绑定多个样式，个数不确定，名字也不确定
数组写法适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用
10. 2 style样式（不常用）
：style="{fontSize：xxx}"其中xxx是动态值
：style="[a,b]"其中a、b是样式对象
11、条件渲染
11.1 v-if
写法：
（1）v-if='表达式'
（2）v-else-if='表达式'
（3）v-else='表达式'
适用于：切换频率较低的场景
特点：不展示DOM元素直接被移除
注意：v-if可以和v-else-if、v-else一起使用，但要求结构不能被打断
template：内容模板，将内容包裹起来，与div作用相似，但自身在加载过程中不会被渲染（此处只可和v-if使用）
11.2 v-show
写法：v-show="表达式"
适用于：切换频率较高的场景
特点：不展示的DOM元素未被移除，仅仅是使用样式隐藏掉
3.备注：使用v-if时，元素可能无法获取到，而是用v-show一定可以获取到
12、列表渲染
12.1.1 基本列表：
v-for指令：
1、用于展示列表数据
2、语法：v-for='（item,index） in(of) xxx' ：key='yyy(index)' key值唯一
3、可遍历：数组、对象、字符串（使用较少）、指定次数（使用较少）
*12.1.2 key的基本原理
面试题：react、vue中的key有什么作用？（key的内部原理）
1、虚拟DOM中key的作用：
key是虚拟DOM对象的标识，当状态中的数据发生变化时，vue会根据【新数据】生成【新的虚拟DOM】,
随后vue进行【新虚拟DOM】和【旧虚拟DOM】的差异比较，比较规则如下：
2、对比规则：
（1）旧虚拟DOM中找到了与新虚拟DOM相同的key：
<1>若虚拟DOM中的内容未变，直接使用之前的真实DOM
<2>若虚拟DOM中的内容改变，则生成新的真实DOM，随后替换掉页面中之前的真实DOM
（2）旧虚拟DOM中未找到与新虚拟DOM相同的key：
创建新的真实DOM，随后渲染到页面
3、用index作为key可能会引发的问题：
（1）若对数据进行：逆序添加、逆序删除等破坏顺序的操作
会产生没有必要的真实DOM更新 ==> 界面效果无误，但效率低
（2）如果结构中还包括输入类的DOM：
会产生错误DOM的更新导致界面出现问题
4、开发中如何选择使用key？
1、最好使用每条数据的唯一标识作为key
2、如果不存在对数据的逆序添加、逆序删除等破坏顺序的操作，仅用于渲染列表用于展示
可以使用index作为key。
13、vue监视数据的原理：
1.vue会监视data中的所有层次的数据
2.如何监测对象中的数据？
通过setter实现监视，且要在new vue时就传入要监测的数据
（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()
特别注意Vue.set() 或 vm.$set() 不能给vm或vm的根数据对象添加属性
14、收集表单数据
若：input type='text',则v-model收集的是value值，用户输入的就是value值
若：input type='radio',则v-model收集的是value值，且要给标签配置value值
若：input type='checkbox'
1、没有配置input的value属性，那么收集的就是checked（勾选 or 未勾选，是布尔值）
2、配置input的value属性：
（1）v-model的初始值是非数组，那么收集的就是checked（勾选 or 未勾选，是布尔值）
（2）v-model的初始值是数组，那么收集的就是value组成的数组
备注：v-model的三个修饰符：
lazy：失去焦点再收集数据
number：输入字符串转为有效数字
trim：输入首尾空格过渡
5443
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
