写在前面：温故而知新，最近在系统的复习vue，我会把几个章节分开发出来，欢迎大家指正
vue：动态构建用户界面的渐进式JavaScript 框架
英文官网: https://vuejs.org/
中文官网: https://cn.vuejs.org/
1.vue的特点遵循 MVVM 模式
编码简洁, 体积小, 运行效率高, 适合移动/PC 端开发
它本身只关注 UI, 也可以引入其它第三方库开发项目
2.与其它 JS 框架的关联 借鉴 Angular 的模板和数据绑定技术借鉴 React 的组件化和虚拟 DOM 技术 3.Vue 周边库vue-cli: vue 脚手架
vue-resource
axios
vue-router: 路由
vuex: 状态管理
element-ui: 基于 vue 的 UI 组件库(PC 端)
4.vue特点 采用组件化模式，提高代码复用率，让代码更好的维护 声明式编码，让编码人员无需直接 *** 作DOM元素，提高开发效率 使用虚拟DOM+优秀的Diff算法，尽量复用DOM节点。 5.前置知识(熟悉即可)： 4.初识Vue
初识Vue
{xxx}}中的xxx要写js表达式，且xxx可以自动读取到data中的所有属性；
7.一旦data中的数据发生改变，那么页面中用到该数据的地方也会自动更新；
注意区分：js表达式 和 js代码(语句)
1.表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方：
(1). a
(2). a+b
(3). demo(1)
(4). x === y ? 'a' : 'b'
2.js代码(语句)
(1). if(){}
(2). for(){}
-->
{{name}}
模板的理解：
html 中包含了一些 JS 语法代码，语法分为两种，分别为：
插值语法（双大括号表达式）
指令（以 v开头）
插值语法：
功能: 用于解析标签体内容语法: {{xxx}} ，xxxx 会作为 js 表达式解析指令语法：
功能: 解析标签属性、解析标签体内容、绑定事件举例：v-bind:href = ‘xxxx’ ，xxxx 会作为 js 表达式被解析，v-bind是单向数据绑定说明：Vue 中有有很多的指令，此处只是用 v-bind 举个例子
模板语法
{xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性。
2.指令语法：
功能：用于解析标签（包括：标签属性、标签体内容、绑定事件.....）。
举例：v-bind:href="xxx" 或 简写为 :href="xxx"，xxx同样要写js表达式，
且可以直接读取到data中的所有属性。
备注：Vue中有很多的指令，且形式都是：v-????，此处我们只是拿v-bind举个例子。
-->
插值语法
你好，{{name}}
指令语法
点我去{{school.name}}学习1
点我去{{school.name}}学习2
数据绑定
单向数据绑定：
双向数据绑定：
el与data的两种写法
你好，{{name}}
1.M：模型（Model）：对应data中的数据
2.V：视图（View）：模板
3.VM：视图模型（ViewModel）：Vue实例对象
Vue中的代码体现：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Cd5mrzFx-1653524484600)(http://www.kaotop.com/file/tupian/20220528/image-20220508121547352.png)]
理解MVVM
学校名称：{{name}}
学校地址：{{address}}
{1+1}}
测试一下2：{{$options}}
测试一下3：{{$emit}}
测试一下4：{{_c}} -->
Object.defineProperty()方法介绍
回顾Object.defineproperty方法
在创建data对象时，vm通过Object.defineproperty()方法将data中的属性添加到vm上，为每一个添加到vm上的属性，都指定一个getter/setter，通过数据代理，在getter/setter内部去 *** 作（读/写）data中对应的属性。
Vue中的数据代理
学校名称：{{name}}
学校地址：{{address}}
事件的基本使用
欢迎来到{{name}}学习
Vue中的事件修饰符：
1.prevent：阻止默认事件（常用）；
2.stop：阻止事件冒泡（常用）；
3.once：事件只触发一次（常用）；
4.capture：使用事件的捕获模式；
5.self：只有event.target是当前 *** 作的元素时才触发事件；
6.passive：事件的默认行为立即执行，无需等待事件回调执行完毕；
事件修饰符
欢迎来到{{name}}学习
点我提示信息
div1
div2
1
2
3
4
键盘事件
欢迎来到{{name}}学习
姓名案例_计算属性实现
姓：
名：
测试：
全名：{{fullName}}
{fullName}}
全名：{{fullName}}
全名：{{fullName}} -->
姓名案例_计算属性实现
姓：
名：
全名：{{fullName}}
天气案例_监视属性
今天天气很{{info}}
Watch和computed的区别:
3.深度监视computed支持缓存，只有依赖数据发生改变,才会重新进行计算;而watch不支持缓存，数据变,直接会触发相应的 *** 作
computed不支持异步，当computed内有异步 *** 作时无效，无法监听数据的变化，而watch支持异步
computed属性值会默认走缓存，计算属性是基于它们的响应式依赖进行缓存的，也就是基于data中声明过或者父组件传递的props中的数据通过计算得到的值;而watch监听的函数接收两个参数，第一个参数是最新的值，第二个参数是输入之前的值
如果一个属性是由其它属性计算而来的，这个属性依赖其它属性，多对一或者一对一，一般用computed；而当一个属性发生变化时，需要执行对应的 *** 作，一对多，一般用watch
深度监视：
(1) Vue中的watch默认不监测对象内部值的改变（一层）。
(2) 配置deep:true可以监测对象内部值改变（多层）。
(3) watch配置deep:true 开启深度监听
备注：
(1).Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以！
(2).使用watch时根据数据的具体结构，决定是否采用深度监视。
watch:{
//监视多级结构中某个属性的变化
/* 'numbers.a':{
handler(){
console.log('a被改变了')
}
} */
//监视多级结构中所有属性的变化
numbers:{
//开启深度监听
deep:true,
handler(){
console.log('numbers改变了')
}
}
}
天气案例_监视属性_简写
今天天气很{{info}}
ps：vue所管理的函数不要使用箭头函数，如methods，computed
5.watch和computed的对比computed和watch之间的区别：
1.computed能完成的功能，watch都可以完成。
2.watch能完成的功能，computed不一定能完成，例如：watch可以进行异步 *** 作。
两个重要的小原则：
1.所被Vue管理的函数，最好写成普通函数，这样this的指向才是vm 或 组件实例对象。
2.所有不被Vue所管理的函数（定时器的回调函数、ajax的回调函数等、Promise的回调函数），最好写成箭头函数，这样this的指向才是vm 或 组件实例对象。
9.绑定样式Class 与 Style 绑定 — Vue.js (vuejs.org)
绑定样式
{{name}}
{{name}}
{{name}}
{{name}}
{{name}}
条件渲染
当前的n值是:{{n}}
{name}} -->
{name}} -->
{name}} -->
{name}} -->
你好
很好
北京
基本列表
人员列表（遍历数组）
{{p.name}}-{{p.age}}
汽车信息（遍历对象）
{{k}}-{{value}}
测试遍历字符串（用得少）
{{char}}-{{index}}
测试遍历指定次数（用得少）
{{index}}-{{number}}
面试题：react、vue中的key有什么作用？（key的内部原理）
虚拟DOM中key的作用： key是虚拟DOM对象的标识，当数据发生变化时，Vue会根据【新数据】生成【新的虚拟DOM】, 随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较，比较规则如下：
对比规则： (1).旧虚拟DOM中找到了与新虚拟DOM相同的key：
①.若虚拟DOM中内容没变, 直接使用之前的真实DOM！
②.若虚拟DOM中内容变了, 则生成新的真实DOM，随后替换掉页面中之前的真实DOM。
(2).旧虚拟DOM中未找到与新虚拟DOM相同的key，创建新的真实DOM，随后渲染到到页面。
用index作为key可能会引发的问题：
1.若对数据进行：逆序添加、逆序删除等破坏顺序 *** 作:
会产生没有必要的真实DOM更新 ==> 界面效果没问题, 但效率低。
2.如果结构中还包含输入类的DOM：
会产生错误DOM更新 ==> 界面有问题。
开发中如何选择key?
1.最好使用每条数据的唯一标识作为key, 比如id、手机号、身份z号、学号等唯一值。
2.如果不存在对数据的逆序添加、逆序删除等破坏顺序 *** 作，仅用于渲染列表用于展示，使用index作为key是没有问题的。
原理图：
key的原理
人员列表（遍历数组）
{{p.name}}-{{p.age}}
列表过滤
人员列表
{{p.name}}-{{p.age}}-{{p.sex}}
列表排序
人员列表
{{p.name}}-{{p.age}}-{{p.sex}}
数据劫持（数据代理） - 简书 (jianshu.com)
Vue监视数据的原理：
vue会监视data中所有层次的数据。如何监测对象中的数据?如何监测数组中的数据?通过setter实现监视，且要在new Vue时就传入要监测的数据。
(1).对象中后追加的属性，Vue默认不做响应式处理
(2).如需给后添加的属性做响应式，请使用如下API： Vue.set(target，propertyName/index，value) 或 vm.$set(target，propertyName/index，value)
在Vue修改数组中的某个元素一定要用如下方法：通过包裹数组更新元素的方法实现，本质就是做了两件事：
(1).调用原生对应的方法对数组进行更新。
(2).重新解析模板，进而更新页面。
1.使用这些API:push()、pop()、shift()、unshift()、splice()、sort()、reverse() /(这些方法会更改原数组)
2.使用Vue.set() 或 vm.$set()3.变更方法，顾名思义，会变更调用了这些方法的原始数组。相比之下，也有非变更方法，例如 filter()、concat() 和 slice()。它们不会变更原始数组，而总是返回一个新数组。当使用非变更方法时，可以用新数组替换旧数组：
特别注意：Vue.set() 和 vm.$set() 不能给vm 或 vm的根数据对象(vm__data__)上，添加属性！！！
总结数据监视
学生信息
姓名：{{student.name}}
年龄：{{student.age}}
性别：{{student.sex}}
爱好：
{{h}}
朋友们：
{{f.name}}--{{f.age}}
ps：v-mdoel尽量不要绑定props的数据
收集表单数据
过滤器
{ xxx | 过滤器名}} 或 v-bind:属性 = "xxx | 过滤器名"
3.v-model不可以和过滤器一起用
备注：
1.过滤器也可以接收额外参数、多个过滤器也可以串联
2.并没有改变原本的数据, 是产生新的对应的数据
-->
显示格式化后的时间
现在是：{{fmtTime}}
现在是：{{getFmtTime()}}
现在是：{{time | timeFormater}}
现在是：{{time | timeFormater('YYYY-MM-DD')}}
现在是：{{time | timeFormater('YYYY-MM-DD') | mySlice }}
学习
{{msg2 | mySlice2}}
1.作用：向其所在的节点中渲染文本内容。
2.与插值语法的区别：v-text会替换掉节点中的内容，{{xx}}则不会。
v-text指令
{xx}}则不会。
-->
你好，{{name}}
v-html指令
{xx}}则不会。
(2).v-html可以识别html结构。
3.严重注意：v-html有安全性问题！！！！
(1).在网站上动态渲染任意HTML是非常危险的，容易导致XSS攻击。
(2).一定要在可信的内容上使用v-html，永不要用在用户提交的内容上！
-->
你好，{{name}}
v-cloak指令
{xxx}}的问题。
-->
{{name}}
v-once指令
初始化的n值是:{{n}}
当前的n值是:{{n}}
v-pre指令
Vue其实很简单
当前的n值是:{{n}}
自定义指令
{{name}}
当前的n值是：
放大10倍后的n值是：
(一)Vue.directive指令(自定义指令) - 简书 (jianshu.com)
16.vue生命周期
分析生命周期
当前的n值是：{{n}}
生命周期
欢迎学习Vue
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）