<br><p> </svg> <p>想让vue工作，就必须创建一个vue实例，并且传入一个配置对象 【el data 】</p> <p>先有容器。之后创建实例，解析实例之后如果有容器里面需要的内容，将容器里面的东西进行替换 <mark>容器和实例之间是一一对应的关系</mark></p> <h4>01 创建vue实例</h4> <p>1.想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象； 2.root容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法； 3.root容器里的代码被称为【Vue模板】； 4.Vue实例和容器是一一对应的； 5.真实开发中只有一个Vue实例，并且会配合着组件一起使用； 6.{{xxx}}中的xxx要写js表达式，且xxx可以自动读取到data中的所有属性； 7.一旦data中的数据发生改变，那么页面中用到该数据的地方也会自动更新；</p> <h4>02 模板语法</h4> <p>插值语法：{{XXX}} 使用方式单一，把指定的值放到指定的位置 , xxx为js表达式 指令语法：以 v-开头 【【微信】】 动态绑定值进行简写形式是 ： 指令语法用于解析标签 （包括：标签属性,标签体内容，绑定事件）</p> <h4>03 事件绑定</h4> <p>Vue中有2种数据绑定的方式： 1.单向绑定(【【微信】】)：数据只能从data流向页面。 2.双向绑定(v-model)：数据不仅能从data流向页面，还可以从页面流向data。 备注： 1.双向绑定一般都应用在表单类元素上（如：input、select等） 2.v-model:value 可以简写为 v-model，因为v-model默认收集的就是value值。</p> <h4>04 el和data的两种写法</h4> <p>el的两种写法</p> <p>1.new Vue的时候创建el属性 2.先创建Vue实例，随后再通过vm.$mount(‘#root’)指定el属性</p> <p>data的两种写法</p> <p>注意：在组件学习中data必须使用函数式</p> <h4>05 MVVM模型</h4> <p> 把数据放在指定的位置，写出模板代码，让vm框架将数据和模板建立连接，并且实现了数据的实时更新。vm 【【【微信】】，vue实例对象】,因此在文档中经常使用vm表示Vue, data里面的数据最终出现在了vm身上，vm 身上有的东西都可以在模板里面直接使用</p> <h5>MVVM模型</h5> <h4>06 【【微信】】.defineProperty()</h4> <p>obj 需要定义属性的当前对象 prop 当前需要定义的属性名 {} 配置项</p> <h5>01数据代理</h5> <h4>07事件</h4> <h5>01 事件修饰符</h5> <p>Vue.js 为 v-on 提供了事件修饰符来处理 DOM 事件细节，如：event.【【微信】】() 或 event.【【微信】】()。</p> <blockquote> <p>1.Vue中常用的按键别名： 回车 => enter 删除 => delete (捕获“删除”和“退格”键) 退出 => esc 空格 => space 换行 => tab (特殊，必须配合keydown去使用) 上 => up 下 => down 左 => left 右 => right</p> </blockquote> <h4>08计算属性 commputed</h4> <p>1.什么是属性 在vue中data中的内容就可以称之为属性</p> <p>2.什么是计算属性 【computed】 拿着自己已有的属性进行加工计算，就是计算属性 在计算属性中，计算的整个过程可以配置成为一个对象</p> <h4>09 监视属性 watch</h4> <p>深度监视： (1).Vue中的watch默认不监测对象内部值的改变（一层）。 (2).配置deep:true可以监测对象内部值改变（多层）。 备注： (1).Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以！ (2).使用watch时根据数据的具体结构，决定是否采用深度监视。</p> <p>computed和watch的区别</p> <blockquote> <p>computed和watch之间的区别： 1puted能完成的功能，watch都可以完成。 2.watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作。 两个重要的小原则： 1.所被Vue管理的函数，最好写成普通函数，这样this的指向才是vm 或 组件实例对象。 2.所有不被Vue所管理的函数（定时器的回调函数、ajax的回调函数等、Promise的回调函数），最好写成箭头函数， 这样this的指向才是vm 或 组件实例对象。 <strong>计算属性</strong> computed <strong>监听属性</strong>watch </p> </blockquote> <h4>10绑定样式</h4> <h4>11条件渲染</h4> <h4>12列表渲染</h4> <blockquote> <p>v-for指令: 1.用于展示列表数据 2.语法：v-for=“(item, index) in xxx” :key=“yyy” 3.可遍历：数组、对象、字符串（用的很少）、指定次数（用的很少）</p> </blockquote> <blockquote> <p>面试题：react、vue中的key有什么作用？（key的内部原理） <mark>1. 虚拟DOM中key的作用：</mark> key是虚拟DOM对象的标识，当数据发生变化时，Vue会根据【新数据】生成【新的虚拟DOM】, 随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较，比较规则如>下： <mark>2.对比规则：</mark> (1).旧虚拟DOM中找到了与新虚拟DOM相同的key： ①.若虚拟DOM中内容没变, 直接使用之前的真实DOM！ ②.若虚拟DOM中内容变了, 则生成新的真实DOM，随后替换掉页面中之前的真实DOM。 (2).旧虚拟DOM中未找到与新虚拟DOM相同的key 创建新的真实DOM，随后渲染到到页面。 <mark>3. 用index作为key可能会引发的问题：</mark> 1. 若对数据进行：逆序添加、逆序删除等破坏顺序操作: 会产生没有必要的真实DOM更新 ==> 界面效果没问题, 但效率低。 2. 如果结构中还包含输入类的DOM： 会产生错误DOM更新 ==> 界面有问题。 <mark>4. 开发中如何选择key?:</mark> 1.最好使用每条数据的唯一标识作为key, 比如id、手机号、身份证号、学号等唯一值。 2.如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表用于展示， 使用index作为key是没有问题的。</p> </blockquote> <h4>14列表过滤和列表排序</h4> <blockquote> <p>arr.sort(a,b) Array.prototype.sort()方法可以接受一个可选的回调函数作为参数，用来定义排序的方式。这个回调函数应该接受两个参数，我们称之为a和b。 a排序过程的第一个元素， b排序过程的第二个元素 // arr.sort中 <mark>前-后</mark>是升序 <mark>后-前</mark>-是降序</p> </blockquote> <h4>15数据代理</h4> <p> vm身上所有的数据和属性都来自与_data，_data中的1数据来自与data中传入的数据 <mark>vm._data=data</mark></p> <h5>1）数据代理的步骤：</h5> <p>① 加工data 把自所写的数据【每一组key:value】都形成了【【微信】】 【加工数据实现了响应式】 ② vm._data=data</p> <p>在我们模拟的数据监视中只考虑了第一层，在vue中的数据检测中使用了递归，可以一直进行查找。在vue中只要修改数据就会重新解析模板，虚拟dom之后进行对比</p> <h4>16 Vue检测数据的原理</h4> <h5>vue.set</h5> <p>this.$set是Vue.js的一个方法，用于动态地为响应式对象添加一个新的属性，并确保新属性同样是响应式的，同时触发视图更新。这个方法接收3个参数：</p> <blockquote> <p>①目标对象 ②要添加或更新的属性名 ③要添加或更新的属性值</p> </blockquote> <p>this.$set() 只能为data中的某一个对象追加属性，而不能给data追加属性 调用Vue.set的时候第一个参数不能是vm,</p> <p>Vue监视数据的原理：</p> <p><strong>数组里面的属性不是通过【【微信】】 进行数据监视的</strong> 上面的例子中通过vm 改变了数据，但是页面并没有检测到 <strong>数组方式的修改：</strong> 通过ja【【微信】】中push pop shift unshift splice sort reverse 进行数组里面数据的修改</p> <blockquote> <p>① push: 该方法用于在数组的末尾添加一个或多个元素，并返回新的长度。 ② pop: 该方法用于删除并返回数组的最后一个元素。 ③ shift: 该方法用于删除并返回数组的第一个元素。 ④ unshift: 该方法用于在数组的开头添加一个或多个元素，并返回新的长度。 ⑤ plice: 该方法用于在数组中添加/删除项目，然后返回被删除的项目。该方法接受三个参数，第一个参数是开始位置，第二个参数是要删除的元素数量，第三个参数（可选）是要添加到数组中的新元素。 ⑥ sort: 该方法用于对数组的元素进行排序。默认情况下，它将元素转换为字符串，然后按照字符顺序进行排序。你可以提供一个比较函数来自定义排序方式。 ⑦ reverse: 该方法用于颠倒数组中元素的顺序。</p> </blockquote> <p>vue中修改数据的方法是靠包装数组上面的常用方法实现的</p> <h4>17收集表单数据</h4> <h4>18过滤器</h4> <h4>19内置组件</h4> <h5>19_1</h5> <blockquote> <p>【【微信】】 : 单向绑定解析表达式, 可简写为 :xxx v-model : 双向数据绑定 v-for : 遍历数组/对象/字符串 v-on : 绑定事件监听, 可简写为@ v-if : 条件渲染（动态控制节点是否存存在） v-else : 条件渲染（动态控制节点是否存存在） v-show : 条件渲染 (动态控制节点是否展示) v-text指令： 1.作用：向其所在的节点中渲染文本内容。 2.与插值语法的区别：v-text会替换掉节点中的内容，{{xx}}则不会。</p> </blockquote> <h5>19_2</h5> <blockquote> <p>v-html指令： 1.作用：向指定节点中渲染包含html结构的内容。 2.与插值语法的区别： (1).v-html会替换掉节点中所有的内容，{{xx}}则不会。 (2).v-html可以识别html结构。 3.严重注意：v-html有安全性问题！！！！ (1).在网站上动态渲染任意HTML是非常危险的，容易导致XSS攻击。 (2).一定要在可信的内容上使用v-html，永不要用在用户提交的内容上！</p> </blockquote> <h5>19_3</h5> <h5>19_4</h5> <h5>19_5</h5> <h4>20 自定义指令</h4> <h4>21 Vue生命周期</h4> <p>生命周期： 1.又名：生命周期回调函数、生命周期函数、生命周期钩子。 2.是什么：Vue在关键时刻帮我们调用的一些特殊名称的函数。 3.生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的。 4.生命周期函数中的this指向是<mark>vm</mark> 或 <mark>组件实例对象</mark>。</p> <p> 只要函数准备好，vue就会在合适的时候将函数钩出来进行调用</p> <p>在beforeUpdata步骤中信息尚没有保持同步</p> <p>vm.$【【微信】】 完全销毁一个实例，清理他与其他实例的连接，解绑它的全部指令及自定义事件*，原生的dom事件不会被清除， beforeDestroy步骤的时候你可以访问到数据调用到方法，但是对数据的修改不会再触发更新了 8个生命周期钩子 数据检测和数据代理 创建之前 beforeCreate created 挂载之前和挂载完毕：beforeMounted mounted 更新之前和更新完毕： beforeUpdate update 销毁之前和销毁完毕：beforeDestory desctory </p> <blockquote> <p>常用的生命周期钩子： 1.mounted: 发送ajax请求、启动定时器、绑定自定义事件、订阅消息等【初始化操作】。 2.beforeDestroy: 清除定时器、解绑自定义事件、取消订阅消息等【收尾工作】。 关于销毁Vue实例 1.销毁后借助Vue开发者工具看不到任何信息。 2.销毁后自定义事件会失效，但原生DOM事件依然有效。 3.一般不会在beforeDestroy操作数据，因为即便操作数据，也不会再触发更新流程了。</p> </blockquote> <h4>22组件</h4> <h5>22_0 组件化编程的好处</h5> <p> 组件可以产生嵌套</p> <p>模块化只关注解决js的问题 <mark>组件的定义――实现应用中局部功能代码和资源的集合</mark> Vue中使用组件的三大步骤： 一、定义组件(创建组件) 二、注册组件 三、使用组件(写组件标签)</p> <h5>22.1注册组件</h5> <p>几个注意点： 1.关于组件名: 一个单词组成： 第一种写法(首字母小写)：school 第二种写法(首字母大写)：School 多个单词组成： 第一种写法(kebab-case命名)：my-school 第二种写法(CamelCase命名)：MySchool (需要Vue脚手架支持) 备注： (1).组件名尽可能回避HTML中已有的元素名称，例如：h2、H2都不行。 (2).可以使用name配置项指定组件在开发者工具中呈现的名字。</p> <h4>23VueComponent</h4> <p>关于VueComponent： 1.school组件本质是一个名为VueComponent的<mark>构造函数</mark>，且不是程序员定义的，是Vu【【微信】】生成的。</p> <blockquote> <p>1.一个重要的内置关系：VueComponent.prototype.<strong>proto</strong> === Vue.【【微信】】.为什么要有这个关系：让组件实例对象（vc）可以访问到 Vue原型上的属性、方法</p> </blockquote> <p>实例的隐式原型属性永远指向自己缔造者的原型对象 <strong>补充：</strong></p> <blockquote> <p>console.dir() 是 Ja【【微信】】 中的一个方法，它是浏览器控制台（或其他Ja【【微信】】环境，如Node.js）中的一个实用程序，用于显示一个对象及其子对象的属性和方法。这个方法的名字是 “directory” 的缩写，意为 “目录”，暗示它可以列出对象的结构。</p> </blockquote> <h4>24 vue脚手架 【【微信】】</h4> <p>/zh/guide/【【微信】】.html</p> <blockquote> <p>第一步（仅第一次执行）：全局安装@vue/cli。 【【微信】】 @vue/cli //之后可以输入vue 测试是否安装成功 第二步：切换到你要创建项目的目录，然后使用命令创建项目 xxxx项目名称・ 【【微信】】 第三步：启动项目 npm run serve</p> </blockquote> <p>备注：</p> <ol><li>如出现下载缓慢请配置 npm 淘宝镜像：npm config set registry </li><li>Vue 脚手架隐藏了所有 webpack 相关的配置，若想查看具体的 webpakc 配置， 请执行：【【微信】】 > output.js</li></ol> <p><strong>可以通过以下命令来查看自己是否安装了淘宝镜像：</strong></p> <p>如果返回的结果是，则表示已经成功配置了淘宝镜像。 如果返回的结果是/，则表示使用的是默认的npm镜像。</p> <h5>24.1 脚手架分析</h5> <p>├── 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：包版本控制文</p> <p>框里面的内容默认不进行修改 </p> <h6>render</h6> <p>其实就是帮我们创建模板，加载组件。</p> <p>为什么要用render？因为【【微信】】默认加载的是运行版本的Vue，它不认识 template和components这两个标签，所以只能用render。</p> <p>render是一个重要的选项，它用于编写渲染逻辑并返回虚拟DOM节点。</p> <p>vue 选项中的 render 函数若存在，则 Vue 构造函数不会从 template 选项或通过 el 选项指定的挂载元素中提取出的 HTML 模板编译渲染函数。</p> <p><strong>关于不同版本的Vue：</strong></p> <h4>25 ref和props</h4> <h6>ref</h6> <p>它允许我们获取对DOM元素、子组件实例或Vue实例的引用，以便在Vue组件的方法中进行操作或访问</p> <h6>props</h6> <p>props是用于在组件之间传递数据的选项。通过props，父组件可以向子组件传递数据，子组件可以使用这些数据进行渲染或执行其他操作。</p> <h4>26. mixin混入</h4> <p>mixin是一种用于组件复用的特殊机制 当两个组件共享一个配置，使用mixin将内容进行抽离，混合必须写在一个数组里</p> <blockquote> <p>补充： ①默认暴露：default export 默认暴露是指在一个模块中，只能有一个默认暴露 其他模块可以通过import语句来引入这个默认暴露的对象 ②分别暴露： default 分别暴露是指在一个模块中，可以暴露多个值，每个值都有一个唯一的名称 其他模块可以通过import语句来引入这些分别暴露的对象</p> </blockquote> <h4>27 插件</h4> <p>在入口处（main.js）全局引用插件（只有入口处才能写大Vue，也就是vm）</p> <ol><li> <p>功能：用于增强Vue</p> </li><li> <p>本质：包含install方法的一个<strong>对象</strong>，install的第一个参数是Vue，第二个以后的参数是插件使用者传递的数据。</p> </li><li> <p>定义插件：</p> </li><li> <p>使用插件：</p> </li></ol> <p>定义插件之后在main.js 引入插件。之后使用Vue.use() 使用插件</p> <h4>28 scoped样式</h4> <p>解决方案：使style只对本组件生效！ scoped解决的痛点：</p> <p>两个不同的组件，class属性重名</p> <p>类选择器也都一样，但是颜色不同。</p> <p>如果此时在app处同时引入这两个组件，就会引发样式冲突！</p> <h4>29 webStorage</h4> <ol><li> <p>存储内容大小一般支持5MB左右（不同浏览器可能还不一样）</p> </li><li> <p>浏览器端通过 Window.sessionStorage 和 Window.localStorage 属性来实现本地存储机制。</p<br>..天猫618助力群2023,天猫618助力群2023,微信群互助群助力,这个天猫618 狂欢节助力失败是什么意思啊是一个支持和助力的。你想加入我们一起成为这个温暖群体的一员吗？
本文地址：
/show-105949.html
版权声明：除非特别标注原创，其它均来自互联网，转载时请以链接形式注明文章出处。
