随笔分类 - 前端技术栈 / Vue
摘要：Vue plugin 插件 插件用于增强Vue 插件本质上是一个具有install方法的对象，install方法中可以拿到一个Vue实例和一个使用者传递的options作为参数，在这个方法里去增强 定义插件 export const myPlugin = {install(Vue,options){
阅读全文
摘要：Vue mixins 混入： 把多个组件共用的配置抽取成一个混入对象 全局混入：Vue.mixin(xxx) 局部混入：mixins:[xxx] 数据冲突，以组件生命的数据为主 生命钩子重复，mixin和组件的生命钩子都触发，并且mixin中的钩子先执行 定义mixin export const m
阅读全文
摘要：Vue props props主要是接收外部传进来的属性 外部传进来的属性不允许直接改，如果一定要改，请复制一份props的数据到data中，修改data 声明属性 <Island name="island1" :age="18" sex="male" /> <Island name="island
阅读全文
摘要：Vue ref 用于获取组件实例 <template> <div id="app"> <HelloWorld ref="ref1" /> <h1 @click="show">点我输出ref</h1> </div> </template> <script> import HelloWorld from
阅读全文
摘要：Vue生命周期 生命周期中的this指向vm或者组件实例对象 一般用的多的就mounted和beforeDestroy 挂载流程 new Vue() → beforeCreate 初始化生命周期和事件，但事件代理还未开始 无法通过vm访问data中的数据，methods中的方法 → created
阅读全文
摘要：自定义指令 何时调用? 指令所在的模板被解析时(如初次渲染，以及后续模板更新) 函数式 在vm实例的directives属性中，可以拿到element和bindings两个形参 对象式 bind 指令与元素建立联系 inserted 指令插入到页面 update 指令所在模板更新时调用 指令函数中的
阅读全文
摘要：过滤器 只适用于简单逻辑的处理，复杂逻辑不建议使用 配置 // 全局过滤器 Vue.filter('filter',function(value,arg){ return true }) // 局部过滤器 new Vue({ data:{}, filters:{ filter:function(){
阅读全文
摘要：Vue指令 内置指令 自定义指令 内置指令 v-show v-if v-text v-html v-cloak v-once v-pre v-text 向标签插入文本，标签也会当成文本解析 v-html 可以识别文本中的标签 容易导致XSS攻击 如果用，建议用在可信的内容上，而不是用户提交的内容上
阅读全文
摘要：列表渲染 可以遍历数组，对象，字符串以及指定次数 demo <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initia
阅读全文
摘要：条件渲染 v-show 实质上是display:none,适用于切换频繁的场景 v-show可以拿到dom， v-if不一定 v-if 实质上是dom的增删，适用于切换不频繁的场景 写法: v-if v-else-if v-else template template只能和v-if一起使用，不能和v
阅读全文
摘要：Vue样式 绑定class样式 bind字符串形式 bind对象形式 arr数组形式 内联样式 styleObj对象 styleArr数组 demo <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="
阅读全文
摘要：Vue watch 主要用于监听属性的变化，去做一些类似发送请求这样的工作 可以拿到变化前后的属性值 可以检测对象深层次属性以及是否在初始化就触发 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="v
阅读全文
摘要：Vue事件 事件处理 事件修饰符 键盘事件 事件处理 事件绑定: v-on:click 事件不传参：v-on:click="fn" 事件传参：v-on:click="fn(arg,$event)" v-on也可以写成@click <div id="root"> <h1 v-on:click="sho
阅读全文
摘要：Vue 计算属性 定义:根据data中的已有属性计算得到一个新的属性 原理:根据defineProperty方法提供的getter和setter 优点: 对比methods, 优点在于有缓存，可以复用。 特点： 计算属性中的get函数调用时机： 初次读取改属性 该属性的依赖属性变化时 vm中有dat
阅读全文
摘要：MVVM M: model 模型 对应data数据 V: 视图 模板 其实就是html页面 VM: 视图模型 对应vue实例对象 vm通过dom listener和data-binding 为页面和数据建立连接 V ←--> VM ←--> M 数据代理 通过一个对象代理另一个对象中属性的操作, 其
阅读全文
摘要：数据绑定 v-bind是单向数据绑定， 即数据流向页面，反过来页面不会流向数据 v-model是双向数据绑定 不是所有的标签都支持v-model，只能用于表单类元素/输入类元素，即有value的元素 <!DOCTYPE html> <html lang="en"> <head> <meta char
阅读全文
摘要：模板语法 插值语法 指令语法 插值语法一般用于标签体中 指令语法一般用于标签属性，用于解析标签属性 v-bind是单向数据绑定， 即数据影响页面，反过来页面不会影响数据 <script src="../lib/vue.js"></script> <body> <div id="root"> <h1>
阅读全文
摘要：Vue入门 配置对象 vue配置对象，就是new Vue(params)的params el: 指定容器，一般写选择器字符串，或者给一个dom元素，如果选到多个容器，也只用第一个容器，el和root是一对一的关系 data: 数据，提供给el指定的容器去使用, 也只能给容器使用，并且需要配合模板语法
阅读全文
摘要：Vue简介 什么是vue? 一套用于构建用户界面的渐进式JavaScript 如何理解渐进式？ 渐，就是逐渐 进，就是递进 渐进式就是表示Vue可以自底层向上逐层应用 如果是小型应用，只需要引入vue核心库即可，打包完只有100kb 如果是大型应用，可以继续引入其他的vue插件库 特点 采用组件化模
阅读全文
摘要：computed 为什么要有computed属性而不直接在模板表达式里计算？ 为了将复杂逻辑从模板计算中解脱出来，模板设计的初衷是简单计算和数据显示，在模板中进行过于繁琐的计算会降低代码的可维护性。 computed主要用于根据已有属性生成新的属性.当然不根据已有属性生成也是可行的,不过一般不建议这
阅读全文
