随笔分类 - Vue
摘要：前言 本文主要是实现一个简单版的vue.js.可以实现双向数据响应 开始 compile解析模板代码 解析模板语法,识别v-指令,给每个节点都添加上一个update更新方法,并将更新方法座位回调传递给订阅者watcher class Compile{ constructor(vm,root){ th
阅读全文
摘要：vuex的基本使用 想要实现一个简单的vuex,先来了解一下它的使用 大致就是store中的数据通过辅助函数或者this.$store.state.属性的方式渲染到组件身上,当组件进行数据修改的时候通过this.$store.dispacth的方式来调用actions中的函数,actions中的函数
阅读全文
摘要：前言 要做成如下的Message弹出框,该弹出框是一个JS类型组件 使用方法如下 Message({ title:"城市定位", content:this.city, toggleClick:()=>{ this.city = "上海" return this.city; } }); 组件分类 UI
阅读全文
摘要：前言 目标是自己实现一个vue-router插件,路径是hash模式 需求分析 需求一，spa页面不刷新。有两种方法： 第一种，利用hash不刷新页面的特性。（本文内容） 第二种利用history api，浏览器特性在url改变时浏览器不会发出请求 需求二，根据url显示对应的内容，这里涉及几个关键
阅读全文
摘要：安装Vetur插件 code-首选下-用户代码片段-新建全局代码片段-在输入框中新建名称为vue.json 删除json文件内容,把下面的内容复制粘贴上 { "Print to console": { "prefix": "vue", "body": [ "<!-- $0 -->", "<templ
阅读全文
摘要：前言 在开发大数据监控时,主要的技术栈时echarts+vue,因为echarts在生成每一个图表的时候,都会执行一些公共方法(初始化,resize等),使用全局混入的方法，可以被任意子组件调用到 mixin全局混入 mixin文件 新建一个mixin/echartMixin.js文件,内部值如下
阅读全文
摘要：问题 在vue项目中使用了iframe,iframe和vue页面交互使用了postMessage,如下代码,发现一个bug,重新进入这个页面,1就会多打印,次数和进入页面的次数相同 //iframe window.parent.postMessage({ info:2 }) //di.vue mou
阅读全文
摘要：//事件队列const eventList={}//封装监听 const $on=function(eventName,callback){ if(!enentList[eventName]){ enentList[eventName]=[]; } enentList[eventName].push
阅读全文
摘要：父传子 第一种方法 通过自定义属性 //父组件 <template> <div id="app"> <HelloWorld msg='你好di'></HelloWorld> </div> </template> //子组件 <template> <div> {{msg}} </div> </temp
阅读全文
摘要：前言 在vuex中我们使用v-model来修改vuex.state中的数据,没有经过mutation函数.在严格模式中会抛出错误 解决 第一种方法是将v-model拆分成:value+@input,并且要在mutation中定义input的函数,比较麻烦 <input v-model="obj.me
阅读全文
摘要：场景 computed:适用于一个多个数据影响一个数据 watch:适用于一个数据影响多个数据 功能 computed是计算属性用于计算,返回计算后的值 watch是侦听器用于监听一个数据变化执行相应的回调函数 使用 computed函数内部要有return返回值 watch函数有新旧两个值的参数,
阅读全文
摘要：前言 路由钩子函数有3个参数 to:表示路由要去哪里(是一个对象类型) from:表示路由从哪里来(是一个对象类型) next:next()执行管道中的下一个钩子;next(false)中断导航,浏览器的地址会重置到from地址;next({path:"/'})跳转到path路径对应的地址,该方法在
阅读全文
摘要：渲染 父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted 从外到内,在从内到外 子组件更新 父beforeUpdate->子beforeUpdate->子up
阅读全文
摘要：前言 路由传参都会涉及到路由配置项中的props 布尔模式的路由传参 正常情况下的传参通过在路由表中定义/:属性,在路由表对应的component中用$route.params.属性接收.这种传值方式有一个弊端,就是$route和路由形成了耦合,让组件只能在特定的路由上使用.如下,User组件的$r
阅读全文
摘要：mixin混入 对于生命周期来说,先执行混入的生命周期后执行组件的生命周期 自定义指令 自定义指令的主要目的是为了操作原生的dom 渲染函数render 我们使用渲染函数可以更加灵活的完成模板上的逻辑.比如v-if和v-else-if判断多个情况,不如使用render来执行,当然render的写法会
阅读全文
摘要：beforeCreate 实例初始化之后执行的钩子函数,在此时data、computed、watch、mehtods都还没有完成. 我们可以在这里做loading显示 created 实例创建完成,此时data、computed、watch、mehtods、props都已经完成,但是dom还没有挂载
阅读全文
摘要：页面首次加载的时候不会执行更新的生命周期 页面首次渲染完成后,即页面已经出现内容了.此时beforeUpdate和Updated生命周期钩子函数并没有被执行.只有在数据再次发生改变的时候才会触发更新函数 为什么可以在created中去做异步数据的请求 看上图,created在执行的时候,已经完成了数
阅读全文
浙公网安备 33010602011771号