Vue2
sanda_nd
这个作者很懒,什么都没留下…
展开
-
-53 全局事件总线
this.$bus.$emit('xxx',数据)为了节省空间,因此需要在使用后销毁事件。原创 2023-04-02 20:02:41 · 151 阅读 · 0 评论 -
-1 搭建 Vue 开发环境
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档。原创 2022-09-06 19:28:57 · 221 阅读 · 0 评论 -
-2 Hello World 小案例
1、想让 Vue 工作,必须创建一个 Vue 实例,且传入一个配置对象2、root 容器中的代码被称为 Vue模板3、root 容器里的代码符合 html 规范,只是混入了一个 Vue 语法4、Vue 实例和容器是一一对应的5、真实开发中只有一个 Vue 实例,并且会配合组件一起使用6、{{xxx}}中的 xxx 要写 js表达式 ,当 data 中的数据发生改变,则页面中用到该数据的地方都将发生改变7、 注意区分:js表达式 和 js代码。原创 2022-09-06 20:00:37 · 12236 阅读 · 0 评论 -
-3 模板语法
(以 v-bind 为例) v-bind:href='xxx' 简写为 :href='xxx', xxx 同样要写 js表达式 ,且可以直接访问 data 中的所有属性。(标签属性、标签体内容、绑定事件.....):{{xxx}} ,xxx 是js表达式。原创 2022-09-08 18:19:16 · 103 阅读 · 0 评论 -
-4 数据绑定
2、由于 v-model 默认收集的就是 value 值,因此可以简写。数据不仅能从 data 流向页面,还可以从页面流向 data。上(如 input , select 等)1、双向绑定一般都应用在。数据只能从 data 流向页面。原创 2022-09-08 18:26:57 · 119 阅读 · 0 评论 -
-5 el 与 data 的两种写法
2、先创建 Vue 实例,随后再通过。目前两种都可以,当学到组件时必须使用。数,this 就不是 Vue 实例了。由 Vue 管理的函数不能写。原创 2022-09-23 09:45:17 · 145 阅读 · 0 评论 -
-6 MVVM模型
2、vm 身上所有的属性 及 Vue 原型上所有的属性,在 Vue 模板中可以直接使用。: 视图模型(ViewModel),Vue 实例。: 模型(Model),data 中的数据。1、data 中所有的属性最后都出现在。视图(view),模块代码。原创 2022-09-23 10:09:04 · 118 阅读 · 0 评论 -
-7 Object.defineproperty 方法
Object.defineproperty 方法原创 2022-09-24 12:27:15 · 106 阅读 · 0 评论 -
-8 Vue 中的数据代理
更加方便的操作 data 中的数据。把 data 对象中所有属性添加到。内部,去操作 data 中对应的属性。上的属性,都指定一个。原创 2022-09-24 12:34:04 · 402 阅读 · 0 评论 -
-9 事件处理
3、methods 配置的函数不要用箭头函数,否则 this 会指向 window。4、methods 配置的函数,都是被 Vue 管理的函数,this 的指向是。2、事件的回调需要配置在。效果一样,但后者可以传参。中,最后会在 vm 上。原创 2022-09-24 21:34:19 · 166 阅读 · 0 评论 -
-10 事件修饰符
只有 event.target 是当前操作的元素才触发事件。: 事件的默认行为立即执行,无需等待事件回调完毕。: 使用事件的捕获模式。原创 2022-09-25 10:18:51 · 73 阅读 · 0 评论 -
-11 键盘事件
4、也可以使用 keyCode 去指定具体的按键(不推荐)键,可以使用按键原始的 key 值去绑定,但注意要转为。使用时,需要按下和松开另一个按键(随便一个键)(windows 徽标键)2、Vue 未提供别名的按。,可以去定制按键别名。原创 2022-09-25 11:06:49 · 278 阅读 · 0 评论 -
-12 姓名案例(插值语法)
姓名案例(插值语法)原创 2022-09-26 14:29:26 · 65 阅读 · 0 评论 -
-13 姓名案例(methods语法)
姓名案例(methods语法)原创 2022-09-26 14:32:11 · 78 阅读 · 0 评论 -
-14 姓名案例(计算属性)
(2)、如果计算属性要被修改,那必须写 set 函数去响应修改,且 set 中要引起计算时依赖的数据发生改变。:借助了 Object.defineproperty 方法中的 getter 和 setter。(1)、计算属性最终会出现在 vm 上,直接读取使用即可。:与 methods 方法相比,内部有缓存机制,效率更高,调试方便。(2)、当依赖的数据发生改变时会被再次调用。(1)、初次读取时会执行一次。:要用的属性不存在,要用已有的属性计算得来。原创 2022-09-27 16:41:52 · 89 阅读 · 0 评论 -
-15 天气案例
天气案例原创 2022-09-27 17:15:51 · 108 阅读 · 0 评论 -
-16 监视属性
1、当监视的属性变化时,回调函数自动调用,进行相关操作2、监视的属性必须存在,才能监视。原创 2022-09-28 08:41:35 · 144 阅读 · 0 评论 -
-17 深度监视
1、Vue 中的 watch 默认不监视对象内部值的改变(一层)Vue 本身可以监视对象内部值的改变(多层)可以监视对象内部值的改变(多层)原创 2022-09-28 08:51:37 · 116 阅读 · 0 评论 -
-18 监视属性简写
可简写为:可简写为:原创 2022-09-29 10:17:53 · 101 阅读 · 0 评论 -
-19 绑定 class 样式
绑定 class 样式原创 2022-09-29 10:40:59 · 156 阅读 · 0 评论 -
-20 绑定 style 样式
绑定 style 样式原创 2022-09-30 10:13:46 · 169 阅读 · 0 评论 -
-21 条件渲染
使用 v-if 时,元素可能无法获取到;而使用 v-show 一定能获取到。:v-if 和 v-else-if 、v-else 一起使用,但要求结构不能被打断。:不展示的 DOM 元素未被移除,仅仅用样式隐藏掉。:不展示 DOM 元素,直接被移除。:切换频率较低的场景。:切换频率较高的场景。原创 2022-09-30 10:16:57 · 106 阅读 · 0 评论 -
-22 列表渲染
数组、对象、字符串(用得少)、指定次数(用得少)1、用于展示列表数据。原创 2022-10-01 11:06:00 · 113 阅读 · 0 评论 -
-23 key 的内部原理
(1)若对数据进行 逆序添加 等破坏顺序操作 ==> 会产生没有必要的真实DOM更新,效率降低。(2)如果结构中包含输入类的DOM ==> 会产生错误的DOM更新,界面显示出现问题。若虚拟DOM中内容没有改变,则直接使用之前的真实DOM。若虚拟DOM中内容发生改变,则生成新的真实DOM。的标识,当状态中的数据发生变化时,Vue 会根据 [新数据] 生成。(2) 如果不存在破坏顺序的操作,就可以使用 index 作为。(1) 最好使用每条数据的唯一标识作为。相同的key,创建真实DOM,渲染页面。原创 2022-10-01 11:13:29 · 190 阅读 · 0 评论 -
-24 列表过滤
用watch实现:用computed实现:原创 2022-10-02 08:58:50 · 123 阅读 · 0 评论 -
-25 列表排序
列表排序:点击按钮进行排序:原创 2022-10-02 09:37:35 · 94 阅读 · 0 评论 -
-26 Vue.set()方法
共有两种写法Vue.set(对象,'属性名','属性值')this.$set(对象,'属性名','属性值')原创 2022-10-02 16:34:47 · 113 阅读 · 0 评论 -
-27 Vue 检测数据的原理(数组)
点击按钮后效果:原创 2022-10-02 16:57:25 · 100 阅读 · 0 评论 -
-28 总结 Vue 监视数据
使用这些 API :push()、shift()、unshift()、splice()、sort()、reverse()- 注意: Vue.set()和vm.$set() 不能给 vm 或 vm 的根数据对象 添加属性。Vue.set(位置,属性名/索引,属性值)或。vm.$set(位置,属性名/索引,属性值)通过 setter 实现监视,且要在 new Vue() 就传入要监视的数据。- 对象中后添加的属性,Vue 默认不做响应式处理。- Vue.set()或vm.$set()原创 2022-10-03 10:43:14 · 491 阅读 · 0 评论 -
-29 收集表单数据
如果配置了 value 值,若 v-model 初始值为数组,则收集value组成的数组。2、,v-model 收集的是 value 值,需要给标签配置 value 值。1、,v-model 收集的是 value 值,用户输入的就是 value 值。- 如果没有配置 value 值,则收集的是 checked 值(布尔值)若 v-model 初始值为非数组,则收集 checked 值。4、备注:v-model 的三个修饰符。原创 2022-10-03 10:56:46 · 134 阅读 · 0 评论 -
-30 过滤器
过滤器可以接收额外参数,多个过滤器可以串联。- 没有改变原本的数据,而是产生新的数据。对要显示的数据进行特定格式化后再显示。{{xxx | 过滤器名}}原创 2022-10-04 09:46:06 · 75 阅读 · 0 评论 -
-31 v-text 指令
v-text 会替换掉节点中的内容。向其所在的文本中渲染文本内容。原创 2022-10-04 09:57:55 · 88 阅读 · 0 评论 -
-32 v-html 指令
(2) 一定要在可信的内容上使用 v-html,永远不要用在用户提交的内容上。(1) 在网站上动态渲染任意 html 是非常危险的,容易导致。向指定节点中渲染包含 html 结构的内容。会替换掉节点中的所有内容,可以识别 html 结构。v-html 有安全性问题。原创 2022-10-05 09:13:06 · 262 阅读 · 0 评论 -
-33 v-clock 指令
2、使用 css 配合 v-cloak 可以解决网速慢时,页面展示出{{xxx}}的问题。1、本质是一个特殊属性,Vue 实例创建完毕并接管容器后,会删掉 cloak 属性。原创 2022-10-05 09:16:00 · 248 阅读 · 0 评论 -
-34 v-once 指令
2、以后的数据改变不会影响 v-once 结构改变。所在节点在初次渲染后,就视为。原创 2022-10-06 15:59:59 · 108 阅读 · 0 评论 -
-35 v-pre 指令
2、可利用它跳过:没有使用指令语法,没有使用插值语法的节点,会加快编译。1、跳过其所在节点的编译过程。原创 2022-10-06 16:02:40 · 81 阅读 · 0 评论 -
-36 自定义指令_函数式
放大十倍。原创 2022-10-06 16:10:05 · 96 阅读 · 0 评论 -
-37 自定义指令_对象式
自定义指令_对象式原创 2022-10-06 16:18:22 · 105 阅读 · 0 评论 -
-38 自定义指令_总结
5、指令名含有多个单词时,要用 - 连接,不能使用驼峰命名法。4、指令定义时不加 v-,使用时要加 v-指令所在模板结构重新解析时调用。3、配置对象中常用的三个回调。指令所在元素插入页面时调用。指令与元素成功绑定时调用。原创 2022-10-07 10:31:24 · 87 阅读 · 0 评论 -
-39 引出生命周期
4、生命周期函数中的 this 指向 vm 或 组件实例对象。2、Vue 在关键时刻帮我们调用一些特殊名称的函数。3、生命周期函数的名字不可更改,但具体内容可以更改。原创 2022-10-07 10:38:40 · 75 阅读 · 0 评论