• <img src="{{url}}" alt=""> 效果能出来,但是会报一个404错误

  • <img v-bind:src="url" alt=""> 效果可以出来,不会发404错误

  • 补充中…

随手解决了但原理还未完全搞懂的奇怪问题:

  • 如此绑定图片不使用require会报404:
    :src="userInfo.avater||require('../../assets/images/default-avater.png')"
vue响应式原理

是基于es5的Object.defineProperty实现的

关于模板:

{ { msg } }        数据更新模板变化
{ { *msg } }       数据只绑定一次
{ { { msg } } }    HTML转义输出

vue生命周期:

beforeCreate     组件实例刚刚被创建,属性都没有
created          实例已经创建完成,属性已经绑定
beforeMount      模板编译之前
mounted          模板编译之后(vue1.x是ready)
beforeUpdate     组件更新之前
updated          组件更新完毕
beforeDestroy    组件销毁前
destroyed        组件销毁后

created 后组件创建完毕,可以操作data数据,ajax请求可在此进行

mounted 通常加上nextTick使用

activated 配合keep-alive使用

计算属性的使用:

computed:{
    a:function() {     //默认调用get
        return 值
    },
    b() {
        return ..
    }
}

关于循环:

v-for="value in data"

现在这么写开发环境会提示错误,需要绑定key值;
因为vue实现了一套虚拟DOM来使操作数据可以重新渲染页面,
而key的作用主要是为了高效的更新虚拟DOM。
需要注意的是key值最好为唯一的标识符,不要以index作为key。

v-for="(item, index) in data" :key="item.id"

过渡(动画)

本质 css3: transtion ,animation

<transition name="fade">
    运动东西(元素,属性、路由....)
</transition>

class定义:
.fade-enter{}    //初始状态
.fade-enter-active{}  //变化成什么样  ->  当元素出来(显示)
.fade-leave{}
.fade-leave-active{} //变成成什么样   -> 当元素离开(消失)

关于通信

为什么使用vuex (状态管理器):

好处:

  • use Baidu or Google

缺点:

  • 引入了新的概念和层次
  • 频繁使用会增加代码耦合

解决了:

  • vue传参的方法对于多层嵌套的组件非常繁琐
  • vue对于父子组件是单向通信,对于兄弟组件间的状态传递无能为力
  • 将多个组件调用的相同数据统一管理,方便以后代码维护。

不使用vuex如何通信:eventbus

  • vue1.x中使用dispatch broadcast类似广播事件的做法,在2.0中已经废弃,改用eventbus,使用上感觉差不多。

总结:

父子组件单向数据传递使用prop,非父子组件通信使用eventBus,更复杂的多层嵌套的组件通信使用vuex。
使用vue要本着灵活高效为出发点。
为何vuex可以解决复杂的通信?因为它相当于将数据全局托管。

补充:

例如从A页面跳转到B页面,需要实现A页面点击立即先请求数据,请求完毕再跳转至B页面加载内容,这里使用eventbus做一个案例:

  • A组件中跳转至B组件的点击事件进行ajax请求,请求完毕后做以下逻辑:
self.$router.push({ name: "user_address" });
setTimeout(() => {
    self.$bus.$emit('addressLoad',res.content);
}, 1);
  • B页面中的create中创建bus监听:
this.$bus.$on("addressLoad", function(data) {
  self.addressData = data;
});

self指代ajax回调外面的this(vue实例)。
this.$bus为挂载在全局的一个空vue实例

因为A组件直接触发事件的话B组件还未创建监听,所以这里使用setTimeout将A组件中的触发事件放在低优先级的队列中执行。

vue非常灵活,该案例可能有更好的方法实现。