随笔分类 - 前端技术栈
摘要：Vue 过渡动画 单个元素与多个元素过渡 集成第三方过渡动画 单个元素过渡 <template> <div class="header"> <button @click="toggle">显示/隐藏</button> <transition name="island" appear> <div v-
阅读全文
摘要：$nextTick $nextTick在下一次dom更新结束之后执行 数据改变后，如果要基于新数据的dom去做一些事情，使用$nextTick，操作$nextTick的回调去处理 案例 editTask(item) { if (Object.prototype.hasOwnProperty.call
阅读全文
摘要：消息订阅与发布 订阅: pubsub.subscribe(name,callback) 发布: pubsub.publish(name,payload) 取消订阅: pubsub.unsubscribe(id) 案例 App.vue <script> import pubsub from "pubs
阅读全文
摘要：全局事件总线 事件总线其实就是vm或vc. 可以在任意组件之间通信。 具体实现是在beforeCreate里面将vm挂到Vue.prototype上去，因为VueComponent.prototype.proto Vue.prototype 在组件的beforeDestory中要把事件总线订阅的事件
阅读全文
摘要：组件自定义事件 事件解绑 组件销毁 组件标签上绑定事件，相当于给vc绑定自定义事件，此时用$emit触发. 组件内元素上绑定事件，事件的回调可以写在methods里面 子传父 v-on|once + $emit mounted + ref + $emit 案例 App.vue <template>
阅读全文
摘要：需要js手动设置inpu的indeterminate属性为true input:indeterminate::after { content: ""; display: block; height: 3px; width: 7px; margin: 40% auto; background-colo
阅读全文
摘要：Vue scoped lang scope: 样式作用域，防止组件样式污染 lang: 选择css扩展语言，如less <style scoped></style> <style lang="less"></style>
阅读全文
摘要：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
阅读全文
摘要：let a = { n: 1 } a.x = a = { n: 2 } console.log(a.x); /** 这道题打印undefined 第一行 开辟了堆内存o1, 存储{n:1} 第二行 a.x 指向后续的运算结果， 即此时o1.x = undefined a = {n:2}, 即开辟了堆
阅读全文
摘要：Vue生命周期 生命周期中的this指向vm或者组件实例对象 一般用的多的就mounted和beforeDestroy 挂载流程 new Vue() → beforeCreate 初始化生命周期和事件，但事件代理还未开始 无法通过vm访问data中的数据，methods中的方法 → created
阅读全文
摘要：自定义指令 何时调用? 指令所在的模板被解析时(如初次渲染，以及后续模板更新) 函数式 在vm实例的directives属性中，可以拿到element和bindings两个形参 对象式 bind 指令与元素建立联系 inserted 指令插入到页面 update 指令所在模板更新时调用 指令函数中的
阅读全文
摘要：Vue指令 内置指令 自定义指令 内置指令 v-show v-if v-text v-html v-cloak v-once v-pre v-text 向标签插入文本，标签也会当成文本解析 v-html 可以识别文本中的标签 容易导致XSS攻击 如果用，建议用在可信的内容上，而不是用户提交的内容上
阅读全文
摘要：过滤器 只适用于简单逻辑的处理，复杂逻辑不建议使用 配置 // 全局过滤器 Vue.filter('filter',function(value,arg){ return true }) // 局部过滤器 new Vue({ data:{}, filters:{ filter:function(){
阅读全文
摘要：列表渲染 可以遍历数组，对象，字符串以及指定次数 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="
阅读全文
浙公网安备 33010602011771号