vue
Crush_In
这个作者很懒,什么都没留下…
展开
-
解释vue的响应式原理
Vue 的响应式原理是核心是通过 ES5 的保护对象的 Object.defindeProperty 中的访问器属性中的 get 和 set 方法data 中声明的属性都被添加了访问器属性当读取 data 中的数据时自动调用 get 方法当修改 data 中的数据时自动调用 set 方法检测到数据的变化,会通知观察者 Wacher观察者 Wacher自动触发重新render 当前组件生成新的虚拟 DOM 树Vue 框架会遍历并对比新虚拟 DOM树和旧虚拟DOM树中每个节点的差别,并记录下来,不原创 2020-09-27 18:39:43 · 163 阅读 · 0 评论 -
Vue中三种常见的组件通信
父组件向子组件通信子组件通过 props 属性,绑定父组件数据,实现双方通信子组件向父组件通信将父组件的事件在子组件中通过 $emit 触发非父子组件、兄弟组件之间的数据传递/*新建一个Vue实例作为中央事件总嫌*/let event = new Vue();/*监听事件*/event.$on('eventName', (val) => { //......do something});/*触发事件*/event.$emit('eventName', 'this is a原创 2020-09-25 10:27:22 · 216 阅读 · 0 评论 -
Vue实现Tab切换效果
通过Vue实现简单的Tab切换实现思路是点击上方的标题,下方的内容随之发生改变,上方和下方用的是两个块,是兄弟节点,所以需要点击tab标题和下方内容一一对应,基予两个模块若下标相同是一个内容实现的。Tab切换第一步先要把HTML写好,这个第一步很关键,主要分为两块结构 <div id="App"> <ul class="tab-tilte"> <li>标题一</li> <li>原创 2020-09-24 13:55:00 · 9399 阅读 · 0 评论 -
v-model双向绑定原理 实现自定义v-model命令
v-model双向绑定原理<input type="text" v-model="变量">首先,变量值和input的value属性进行单向数据绑定,value获得了变量的值其次,通过@input="变量=$event.target.value"来将值绑定到变量上这样就实现了双向绑定<input type="text" v-model="变量">相同<input type="text" :value="变量" @input="变量=$event.target.va原创 2020-09-24 08:10:39 · 301 阅读 · 0 评论 -
Vue 生命周期(简化的不能再简化了)
beforecreate => 实例刚在内存中被创建出来,还没有初始化好 data 和 methods 属性created => 实例已经在内存中创建OK,此时 data 和 methods 已经创建OK,此时页面没有创建出来beforeMount => 此时已经完成了模板的编译,但是还没有挂载到页面中mounted => 此时,已经将编译好的模板,挂载到了页面指定的容器中显示beforeUpdate => 状态更新之前执行此函数, 此时 data原创 2020-09-23 15:25:01 · 223 阅读 · 0 评论 -
Vue 中你可能用得到的指令
1. v-textv-text主要用来更新textContent,可以等同于JS的text属性2. v-html双大括号的方式会将数据解释为纯文本,而非HTML。为了输出真正的HTML,可以用v-html指令。它等同于JS的innerHtml属性。3. v-prev-pre主要用来跳过这个元素和它的子元素编译过程。4. v-cloak这个指令是用来保持在元素上直到关联实例结束时进行编译。5.v-oncev-once关联的实例,只会渲染一次。6.v-ifv-if可以实现条件渲染原创 2020-09-23 09:33:46 · 142 阅读 · 0 评论