随笔分类 - Vue
摘要：案例： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src=
阅读全文
摘要：3.5 属性绑定 1.Vue如何动态处理属性？ v-bind 指令用法 <a v-bind:href='url'>跳转</a> 缩写形式 <a :href='url'>跳转</a> 2.v-model的底层实现原理分析 <input v-bind:value="msg" v-on:input = "
阅读全文
摘要：事件绑定 1.Vue如何处理事件？ v-on 指令用法 <input type = 'button' v-on:click = 'num++'/> v-on 简写形式 <input type = 'button' @click = 'num++'/> 2.事件函数的调用方式 直接绑定函数名称 <bu
阅读全文
摘要：指令 1.什么是指令？ 指令的本质就是自定义属性 指令的格式：以v-开始（如：v-cloak） 2.v-cloak指令用法 插值表达式存在的问题：“闪动” 如何解决该问题：使用v-cloack指令 解决该问题的原理：先隐藏，替换好值之后在显示最终值 1.提供样式 2.在插值表达式所在标签中添加v-c
阅读全文
摘要：#1.Vue概述 Vue.js的创建者：尤雨溪 2014年2月，Vue.js正式发布 2015年10月27日，正式发布1.0.0 2016年4月27日，发布2.0的预览版本 ##Vue：渐进式JavaScript框架 声明式渲染->组件系统->客户端路由->集中式状态管理->项目构建 官网：http
阅读全文
摘要：父组件向子组件传值 1. 组件内部通过props接收传递过来的值 Vue.component('menu-item', { props: ['title'], template: '<div>{{ title }}</div>' }) 2. 父组件通过属性将值传递给子组件 例 <!DOCTYPE h
阅读全文
摘要：全局组件注册语法 1.组件注册语法 Vue.component(组件名称, { data: 组件数据, template: 组件模板内容 }) // 注册一个名为 button-counter 的新组件 Vue.component('button-counter', { data: function
阅读全文
摘要：变异方法和替换数组 1. 变异方法(修改原有数据) push() 接收任意数量的参数，把它们逐个添加到数组末尾，并返回修改后数组的长度 pop() 从数组末尾移除最后一项，减少数组的length值，然后返回移除的项 shift() 移除数组中的第一个项并返回该项，同时数组的长度减1 unshift(
阅读全文
摘要：过滤器 1.过滤器的作用是什么？ 格式化数字，比如将字母格式化大写，日期格式化等 2. 自定义过滤器 Vue.filter(‘过滤器名称’, function(value){ // 过滤器业务逻辑 }) 3. 过滤器的使用 <div>{{msg | upper}}</div> <div>{{msg
阅读全文
摘要：侦听器 1. 侦听器的应用场景 数据变化时执行异步或开销较大的操作 2. 侦听器的用法 watch: { firstName: function(val){ // val表示变化之后的值 this.fullName = val + this.lastName; }, lastName: functi
阅读全文
摘要：计算属性 1. 为何需要计算属性？ 表达式的计算逻辑可能会比较复杂，使用计算属性可以使模板内容更加简洁 2. 计算属性的用法 <div id="app"> <div>{{msg}}</div> <div>{{reverseString}}</div> </div> computed: { rever
阅读全文
摘要：自定义指令 1. 为何需要自定义指令？ 内置指令不满足需求 2. 自定义指令的语法规则（获取元素焦点） Vue.directive('focus' { inserted: function(el) { // 获取元素的焦点 el.focus(); } }) 3.自定义指令用法 <input type
阅读全文
摘要：1.Vue如何处理事件？ v-on 指令用法 <input type = 'button' v-on:click = 'num++'/> v-on 简写形式 <input type = 'button' @click = 'num++'/> 2.事件函数的调用方式 直接绑定函数名称 <button
阅读全文
摘要：问题：有时候网速较慢，导致 Vue 来不及渲染数据，这时页面就会先显示出 Vue 源代码，闪动一下后才显示出渲染后的页面和数据。 这个问题可以用 v-cloak指令来解决。 1.提供样式 2.在插值表达式所在标签中添加v-cloak指令 [v-cloak] { display: none; } <d
阅读全文
摘要：生命周期（Vue2） 1. 主要阶段 挂载（初始化相关属性） ① beforeCreate ② created ③ beforeMount ④ mounted 更新（元素或组件的变更操作） ① beforeUpdate ② updated 销毁（销毁相关属性） ① beforeDestroy ② d
阅读全文
