• <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非常灵活，该案例可能有更好的方法实现。