手机淘宝搜：天降红包55 5月20日开始，每天领红包。
京示搜：天降红包369，5月28日开始

想让vue工作，就必须创建一个vue实例，并且传入一个配置对象 【el data 】

先有容器。之后创建实例，解析实例之后如果有容器里面需要的内容，将容器里面的东西进行替换 容器和实例之间是一一对应的关系

01 创建vue实例

1.想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象； 2.root容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法； 3.root容器里的代码被称为【Vue模板】； 4.Vue实例和容器是一一对应的； 5.真实开发中只有一个Vue实例，并且会配合着组件一起使用； 6.{{xxx}}中的xxx要写js表达式，且xxx可以自动读取到data中的所有属性； 7.一旦data中的数据发生改变，那么页面中用到该数据的地方也会自动更新；

02 模板语法

插值语法：{{XXX}} 使用方式单一，把指定的值放到指定的位置 , xxx为js表达式 指令语法：以 v-开头 【【微信】】 动态绑定值进行简写形式是 ： 指令语法用于解析标签 （包括：标签属性,标签体内容，绑定事件）

03 事件绑定

Vue中有2种数据绑定的方式： 1.单向绑定(【【微信】】)：数据只能从data流向页面。 2.双向绑定(v-model)：数据不仅能从data流向页面，还可以从页面流向data。 备注： 1.双向绑定一般都应用在表单类元素上（如：input、select等） 2.v-model:value 可以简写为 v-model，因为v-model默认收集的就是value值。

04 el和data的两种写法

el的两种写法

1.new Vue的时候创建el属性 2.先创建Vue实例，随后再通过vm.$mount(‘#root’)指定el属性

data的两种写法

注意：在组件学习中data必须使用函数式

05 MVVM模型

把数据放在指定的位置，写出模板代码，让vm框架将数据和模板建立连接，并且实现了数据的实时更新。vm 【【【微信】】，vue实例对象】,因此在文档中经常使用vm表示Vue, data里面的数据最终出现在了vm身上，vm 身上有的东西都可以在模板里面直接使用

MVVM模型

06 【【微信】】.defineProperty()

obj 需要定义属性的当前对象 prop 当前需要定义的属性名 {} 配置项

01数据代理

07事件

01 事件修饰符

Vue.js 为 v-on 提供了事件修饰符来处理 DOM 事件细节，如：event.【【微信】】() 或 event.【【微信】】()。

1.Vue中常用的按键别名： 回车 => enter 删除 => delete (捕获“删除”和“退格”键) 退出 => esc 空格 => space 换行 => tab (特殊，必须配合keydown去使用) 上 => up 下 => down 左 => left 右 => right

08计算属性 commputed

1.什么是属性 在vue中data中的内容就可以称之为属性

2.什么是计算属性 【computed】 拿着自己已有的属性进行加工计算，就是计算属性 在计算属性中，计算的整个过程可以配置成为一个对象

09 监视属性 watch

深度监视： (1).Vue中的watch默认不监测对象内部值的改变（一层）。 (2).配置deep:true可以监测对象内部值改变（多层）。 备注： (1).Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以！ (2).使用watch时根据数据的具体结构，决定是否采用深度监视。

computed和watch的区别

computed和watch之间的区别： 1puted能完成的功能，watch都可以完成。 2.watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作。 两个重要的小原则： 1.所被Vue管理的函数，最好写成普通函数，这样this的指向才是vm 或 组件实例对象。 2.所有不被Vue所管理的函数（定时器的回调函数、ajax的回调函数等、Promise的回调函数），最好写成箭头函数， 这样this的指向才是vm 或 组件实例对象。 计算属性 computed 监听属性watch

10绑定样式

11条件渲染

12列表渲染

v-for指令: 1.用于展示列表数据 2.语法：v-for=“(item, index) in xxx” :key=“yyy” 3.可遍历：数组、对象、字符串（用的很少）、指定次数（用的很少）

面试题：react、vue中的key有什么作用？（key的内部原理） 1. 虚拟DOM中key的作用： key是虚拟DOM对象的标识，当数据发生变化时，Vue会根据【新数据】生成【新的虚拟DOM】, 随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较，比较规则如>下： 2.对比规则： (1).旧虚拟DOM中找到了与新虚拟DOM相同的key： ①.若虚拟DOM中内容没变, 直接使用之前的真实DOM！ ②.若虚拟DOM中内容变了, 则生成新的真实DOM，随后替换掉页面中之前的真实DOM。 (2).旧虚拟DOM中未找到与新虚拟DOM相同的key 创建新的真实DOM，随后渲染到到页面。 3. 用index作为key可能会引发的问题： 1. 若对数据进行：逆序添加、逆序删除等破坏顺序操作: 会产生没有必要的真实DOM更新 ==> 界面效果没问题, 但效率低。 2. 如果结构中还包含输入类的DOM： 会产生错误DOM更新 ==> 界面有问题。 4. 开发中如何选择key?: 1.最好使用每条数据的唯一标识作为key, 比如id、手机号、身份证号、学号等唯一值。 2.如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表用于展示， 使用index作为key是没有问题的。

14列表过滤和列表排序

arr.sort(a,b) Array.prototype.sort()方法可以接受一个可选的回调函数作为参数，用来定义排序的方式。这个回调函数应该接受两个参数，我们称之为a和b。 a排序过程的第一个元素， b排序过程的第二个元素 // arr.sort中 前-后是升序 后-前-是降序

15数据代理

vm身上所有的数据和属性都来自与_data，_data中的1数据来自与data中传入的数据 vm._data=data

1）数据代理的步骤：

① 加工data 把自所写的数据【每一组key:value】都形成了【【微信】】 【加工数据实现了响应式】 ② vm._data=data

在我们模拟的数据监视中只考虑了第一层，在vue中的数据检测中使用了递归，可以一直进行查找。在vue中只要修改数据就会重新解析模板，虚拟dom之后进行对比

16 Vue检测数据的原理

vue.set

this.$set是Vue.js的一个方法，用于动态地为响应式对象添加一个新的属性，并确保新属性同样是响应式的，同时触发视图更新。这个方法接收3个参数：

①目标对象 ②要添加或更新的属性名 ③要添加或更新的属性值

this.$set() 只能为data中的某一个对象追加属性，而不能给data追加属性 调用Vue.set的时候第一个参数不能是vm,

Vue监视数据的原理：

数组里面的属性不是通过【【微信】】 进行数据监视的 上面的例子中通过vm 改变了数据，但是页面并没有检测到 数组方式的修改： 通过ja【【微信】】中push pop shift unshift splice sort reverse 进行数组里面数据的修改

① push: 该方法用于在数组的末尾添加一个或多个元素，并返回新的长度。 ② pop: 该方法用于删除并返回数组的最后一个元素。 ③ shift: 该方法用于删除并返回数组的第一个元素。 ④ unshift: 该方法用于在数组的开头添加一个或多个元素，并返回新的长度。 ⑤ plice: 该方法用于在数组中添加/删除项目，然后返回被删除的项目。该方法接受三个参数，第一个参数是开始位置，第二个参数是要删除的元素数量，第三个参数（可选）是要添加到数组中的新元素。 ⑥ sort: 该方法用于对数组的元素进行排序。默认情况下，它将元素转换为字符串，然后按照字符顺序进行排序。你可以提供一个比较函数来自定义排序方式。 ⑦ reverse: 该方法用于颠倒数组中元素的顺序。

vue中修改数据的方法是靠包装数组上面的常用方法实现的

17收集表单数据

18过滤器

19内置组件

19_1

【【微信】】 : 单向绑定解析表达式, 可简写为 :xxx v-model : 双向数据绑定 v-for : 遍历数组/对象/字符串 v-on : 绑定事件监听, 可简写为@ v-if : 条件渲染（动态控制节点是否存存在） v-else : 条件渲染（动态控制节点是否存存在） v-show : 条件渲染 (动态控制节点是否展示) v-text指令： 1.作用：向其所在的节点中渲染文本内容。 2.与插值语法的区别：v-text会替换掉节点中的内容，{{xx}}则不会。

19_2

v-html指令： 1.作用：向指定节点中渲染包含html结构的内容。 2.与插值语法的区别： (1).v-html会替换掉节点中所有的内容，{{xx}}则不会。 (2).v-html可以识别html结构。 3.严重注意：v-html有安全性问题！！！！ (1).在网站上动态渲染任意HTML是非常危险的，容易导致XSS攻击。 (2).一定要在可信的内容上使用v-html，永不要用在用户提交的内容上！

19_3

19_4

19_5

20 自定义指令

21 Vue生命周期

生命周期： 1.又名：生命周期回调函数、生命周期函数、生命周期钩子。 2.是什么：Vue在关键时刻帮我们调用的一些特殊名称的函数。 3.生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的。 4.生命周期函数中的this指向是vm 或 组件实例对象。

只要函数准备好，vue就会在合适的时候将函数钩出来进行调用

在beforeUpdata步骤中信息尚没有保持同步

vm.$【【微信】】 完全销毁一个实例，清理他与其他实例的连接，解绑它的全部指令及自定义事件*，原生的dom事件不会被清除， beforeDestroy步骤的时候你可以访问到数据调用到方法，但是对数据的修改不会再触发更新了 8个生命周期钩子 数据检测和数据代理 创建之前 beforeCreate created 挂载之前和挂载完毕：beforeMounted mounted 更新之前和更新完毕： beforeUpdate update 销毁之前和销毁完毕：beforeDestory desctory

常用的生命周期钩子： 1.mounted: 发送ajax请求、启动定时器、绑定自定义事件、订阅消息等【初始化操作】。 2.beforeDestroy: 清除定时器、解绑自定义事件、取消订阅消息等【收尾工作】。 关于销毁Vue实例 1.销毁后借助Vue开发者工具看不到任何信息。 2.销毁后自定义事件会失效，但原生DOM事件依然有效。 3.一般不会在beforeDestroy操作数据，因为即便操作数据，也不会再触发更新流程了。

22组件

22_0 组件化编程的好处

组件可以产生嵌套

模块化只关注解决js的问题 组件的定义――实现应用中局部功能代码和资源的集合 Vue中使用组件的三大步骤： 一、定义组件(创建组件) 二、注册组件 三、使用组件(写组件标签)

22.1注册组件

几个注意点： 1.关于组件名: 一个单词组成： 第一种写法(首字母小写)：school 第二种写法(首字母大写)：School 多个单词组成： 第一种写法(kebab-case命名)：my-school 第二种写法(CamelCase命名)：MySchool (需要Vue脚手架支持) 备注： (1).组件名尽可能回避HTML中已有的元素名称，例如：h2、H2都不行。 (2).可以使用name配置项指定组件在开发者工具中呈现的名字。

23VueComponent

关于VueComponent： 1.school组件本质是一个名为VueComponent的构造函数，且不是程序员定义的，是Vu【【微信】】生成的。

1.一个重要的内置关系：VueComponent.prototype.proto === Vue.【【微信】】.为什么要有这个关系：让组件实例对象（vc）可以访问到 Vue原型上的属性、方法

实例的隐式原型属性永远指向自己缔造者的原型对象 补充：

console.dir() 是 Ja【【微信】】 中的一个方法，它是浏览器控制台（或其他Ja【【微信】】环境，如Node.js）中的一个实用程序，用于显示一个对象及其子对象的属性和方法。这个方法的名字是 “directory” 的缩写，意为 “目录”，暗示它可以列出对象的结构。

24 vue脚手架 【【微信】】

/zh/guide/【【微信】】.html

第一步（仅第一次执行）：全局安装@vue/cli。 【【微信】】 @vue/cli //之后可以输入vue 测试是否安装成功 第二步：切换到你要创建项目的目录，然后使用命令创建项目 xxxx项目名称・ 【【微信】】 第三步：启动项目 npm run serve

备注：

1. 如出现下载缓慢请配置 npm 淘宝镜像：npm config set registry
2. Vue 脚手架隐藏了所有 webpack 相关的配置，若想查看具体的 webpakc 配置， 请执行：【【微信】】 > output.js

可以通过以下命令来查看自己是否安装了淘宝镜像：

如果返回的结果是，则表示已经成功配置了淘宝镜像。 如果返回的结果是/，则表示使用的是默认的npm镜像。

24.1 脚手架分析

├── node_modules ├── public │ ├── favicon.ico: 页签图标 │ └── index.html: 主页面 ├── src │ ├── assets: 存放静态资源 │ │ └── logo.png │ │── component: 存放组件 │ │ └── HelloWorld.vue │ │── App.vue: 汇总所有组件 │ │── main.js: 入口文件 ├── .【【淘密令】】: git 版本管制忽略的配置 ├── 【【网址】】nfig.js: babel 的配置文件 ├── package.json: 应用包配置文件 ├── README.md: 应用描述文件 ├── package-lock.json：包版本控制文

框里面的内容默认不进行修改

render

其实就是帮我们创建模板，加载组件。

为什么要用render？因为【【微信】】默认加载的是运行版本的Vue，它不认识 template和components这两个标签，所以只能用render。

render是一个重要的选项，它用于编写渲染逻辑并返回虚拟DOM节点。

vue 选项中的 render 函数若存在，则 Vue 构造函数不会从 template 选项或通过 el 选项指定的挂载元素中提取出的 HTML 模板编译渲染函数。

关于不同版本的Vue：

25 ref和props

ref

它允许我们获取对DOM元素、子组件实例或Vue实例的引用，以便在Vue组件的方法中进行操作或访问

props

props是用于在组件之间传递数据的选项。通过props，父组件可以向子组件传递数据，子组件可以使用这些数据进行渲染或执行其他操作。

26. mixin混入

mixin是一种用于组件复用的特殊机制 当两个组件共享一个配置，使用mixin将内容进行抽离，混合必须写在一个数组里

补充： ①默认暴露：default export 默认暴露是指在一个模块中，只能有一个默认暴露 其他模块可以通过import语句来引入这个默认暴露的对象 ②分别暴露： default 分别暴露是指在一个模块中，可以暴露多个值，每个值都有一个唯一的名称 其他模块可以通过import语句来引入这些分别暴露的对象

27 插件

在入口处（main.js）全局引用插件（只有入口处才能写大Vue，也就是vm）

1. 功能：用于增强Vue

2. 本质：包含install方法的一个对象，install的第一个参数是Vue，第二个以后的参数是插件使用者传递的数据。

3. 定义插件：

4. 使用插件：

定义插件之后在main.js 引入插件。之后使用Vue.use() 使用插件

28 scoped样式

解决方案：使style只对本组件生效！ scoped解决的痛点：

两个不同的组件，class属性重名

类选择器也都一样，但是颜色不同。

如果此时在app处同时引入这两个组件，就会引发样式冲突！

29 webStorage

1. 存储内容大小一般支持5MB左右（不同浏览器可能还不一样）

2. 浏览器端通过 Window.sessionStorage 和 Window.localStorage 属性来实现本地存储机制。..天猫618助力群2023,天猫618助力群2023,微信群互助群助力,这个天猫618 狂欢节助力失败是什么意思啊是一个支持和助力的。你想加入我们一起成为这个温暖群体的一员吗？

   本文地址： https://www.suitangyanyi.com//show-105949.html

   版权声明：除非特别标注原创，其它均来自互联网，转载时请以链接形式注明文章出处。
   • 淘宝下载电脑版
   分享到：