随笔分类 -  Vue学习

Vue响应式原理（MVVM）
摘要：Vue实现的核心逻辑，跟Watcher，Observer，Dep三者密切相关，而这三者的关系其实是一个简单的发布-订阅的设计模式。也就是，数据状态一旦发生了变化，则会通知对应的订阅者，让订阅者执行对应的业务逻辑。 下面来梳理Watcher，Observer，Dep三者： Observer观察者，用来 阅读全文
posted @ 2020-03-14 16:32 Lorasysu 阅读(252) 评论(0) 推荐(0)
非父子组件间传值（二）
摘要：上回通过总线机制实现了非父子组件间的传值，这篇随笔将使用vue的生态机制vuex实现数据共享。 这是官方文档中的图片： state存储的是数据本身，在所有组件中都可以通过$store.state.data访问； this.dispatch('event', data)调用actions，在actio 阅读全文
posted @ 2020-03-04 12:27 Lorasysu 阅读(141) 评论(0) 推荐(0)
“去哪儿”项目小结
摘要：该项目是学习vue的时候在慕课网上看《Vue2.5 开发去哪儿网 App 从零基础入门到实战项目》做的，目的是提升自己的实战能力，处理在开发过程需要注意的问题。 组件的实现 首页 header用vuex获取城市信息 轮播通过vue-awosome-swiper实现 景点图文通过axios获取数据 城 阅读全文
posted @ 2020-03-04 12:13 Lorasysu 阅读(197) 评论(0) 推荐(0)
插槽
摘要：使用场景：用于父组件传递DOM元素给子组件在没有插槽的情况下组件标签内的内容无法被显示，而在组件声明<slot>元素后，标签的内容就会跑到这里。具名插槽：插槽有名字，就可以在特定的区域应用特定的插槽内容；没有名字视为默认插槽。具体实现为在组件标签内定义属性slot，为内容添加名字；而在组件的<slo 阅读全文
posted @ 2020-02-22 15:43 Lorasysu 阅读(180) 评论(0) 推荐(0)
非父子组件间传值（一）
摘要：非父子组件间传值有两种方法，一种是vuex共享数据，另一种是发布订阅模式/观察者模式/总线/Bus。这篇随笔主要总结总线机制的学习心得： 首先通过在Vue.prototype上挂载一个bus属性，指向vue实例；接下来在调用Vue或者创建组件时都会有bus属性。 Vue.prototype.bus= 阅读全文
posted @ 2020-02-22 14:43 Lorasysu 阅读(1397) 评论(0) 推荐(0)
计算属性，方法，侦听器
摘要：计算属性某例：data:{ a:xx, b:yy,},computed:{ c:function() { return this.a+this.b }}调用时插值表达式{{c}}缓存机制：当计算属性里的变量a，b没有被改变，不会重新计算 方法也能实现同样的功能在methods中定义，但没有缓存机制， 阅读全文
posted @ 2020-02-19 17:45 Lorasysu 阅读(153) 评论(0) 推荐(0)
Vue实例的生命周期函数
摘要：vue实例在某一个时间点会自动执行的函数；共11个，无需放在methods，直接放在实例中即可。（官方文档图） 首先实例的事件和生命周期初始化beforeCreate：实例刚在内存中被创建出来，此时，还没有初始化好 data 和 methods 属性；created：实例已经在内存中创建OK，此时  阅读全文
posted @ 2020-02-19 17:42 Lorasysu 阅读(404) 评论(0) 推荐(0)
父组件与子组件的相互传值——以todolist为例
摘要：作为一个简单的Todolist操作，本文令文本框下方显示的<li>成为组件。实现功能：文本框添加文本，提交后会在下方显示；点击下方<li>，对应项会消失。实现效果如下 点击hello后： 具体实现逻辑 <div id='app'> <input type='text' v-model="inputV 阅读全文
posted @ 2020-02-18 18:20 Lorasysu 阅读(250) 评论(0) 推荐(0)
Vue及JQuery实现todolist以及MVP,MVVM模式的理解
摘要：Vue 是一套用于构建用户界面的渐进式JavaScript框架，通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。初学Vue的时候，第一个实现是todolist。 <body> <div id='app'> <input type='text' v-model="inputValue"/ 阅读全文
posted @ 2020-02-17 22:54 Lorasysu 阅读(183) 评论(0) 推荐(0)