03 2022 档案
摘要：ref属性：用于给元素或者子组件注册引用信息 当使用于html标签上时获取 真实DOM元素； 当使用于组件标签上时获取 组件的实例对象； 例：<h1 ref = "???" /> 获取：this.$refs.???
阅读全文
摘要：1.定义组件 使用Vue.extend(options)可以创建一个组件，其中options 和 new Vue(options)时传入的十分相似，但亦有区别： 组件不能配置el，最终所有的组件通过vm实例管理，vm决定着服务于哪个容器； 组件中data需要写成函数型，避免组件被复用时，数据存在引用
阅读全文
摘要：input 与 v-model <input type="text"> ，则v-model 双向绑定的即是value值； <input type="radio"> ，则v-model 绑定的value需要在标签中配置，否则得到的null； <input type="check"> ： 1.input
阅读全文
摘要：1.Vue监视data中所有层次的数据； 2.监视行为(对象)： 通过setter进行监视，并且在new Vue时就已经传入需监视的数据； 对象中追加的属性，Vue默认不做响应式处理； 如果需要后追加的属性进行响应式处理，使用以下API： Vue.set(target, propertyName/i
阅读全文
摘要：过滤器定义：对显示的数据进行特定格式化后再显示，一般适用于一些简单逻辑的处理 1.注册过滤器：全局注册：Vue.fliter(name,callback) 或者 局部注册： new Vue{filters:{}} 。 2.使用过滤器：{{ ??? | 过滤器名称 }} 或者 v-bind:属性 =
阅读全文
摘要：先来了解几个点... 1. 当数据发生变化时，vue是怎么更新节点的？ 要知道渲染真实DOM的开销是很大的，比如有时候我们修改了某个数据，如果直接渲染到真实dom上会引起整个dom树的重绘和重排，有没有可能我们只更新我们修改的那一小块dom而不要更新整个dom呢？diff算法能够帮助我们。 我们先根
阅读全文
摘要：v-for 1.展示列表数据； 2.语法：v-for = "(item, index) in ?? :key = "!!" 3.可遍历数组、对象、字符串、指定次数遍历 v-bind 单向绑定解析表达式， 简写 :??? v-model 双向数据绑定 v-on 绑定事件监听，简写 @??? v-tex
阅读全文
摘要：v-if：动态的向DOM树内添加或者删除DOM元素。可以配合template使用 v-show通过设置DOM元素的display样式属性控制显隐。当v-show赋值为false时，元素被隐藏，此时查看代码时，该元素上会多一个内联样式style=“display:none”。 区别 （1）编译过程：v
阅读全文
摘要：class 1.字符串形式：多用于 样式的类名不确定的情况，需要动态指定 <div :class="类名"></div> 2.数组形式：多用于 样式个数不确定、名称也不确定的情况 <div :class="数组名"></div> 3.对象形式：多用于 样式个数确定，名称也确定，但要动态决定使用与否
阅读全文
摘要：1.计算属性： ① 定义：使用的属性在vm上并不存在，而是通过vm上已有的属性计算所得； ② 原理：vue底层使用了Object.defineProperty方法所提供的getter与setter； ③ 所定义的函数将在初次读取，和当依赖数据发生改变时执行； ④ computed属性内部缓存机制，效
阅读全文
摘要：1. Vue为提供别名的按键，则可使用案件原始的key值绑定，但要转为caps-lock此种命名方式 @keyup.CapsLock="show" 无法触发事件 @keyup.caps-lock="show" 触发事件 2. tab需要配合keydown使用，否则tab自带的焦点转移功能会使事件无法
阅读全文
摘要：Vue模板语法 1.插值语法 ：用于解析标签体内容 写法：{{xx}}，xx为js表达式，且可以直接读取到data中的所有属性 例如：<p> hello，{{name}} </p> 2.指令语法：用于解析标签（包括：标签属性、标签体内容、绑定事件等等） 写法：v-bind:标签 ="xx" ,也可以
阅读全文
