Vue 学习笔记

基础知识

组件使用中的细节
1、用is来代替直接引用 <tr is="row"></tr> row is components;
2、在子组件中使用data 必须使用函数式返回的写法;
3、 ref 获取dom节点/组件 this.$refs.xx;
4、给组件绑定原生事件<child @click.native="handleClick"></child>

父子组件通信

父子组件通信使用 父组件直接绑定变量 子组件通过 props[]接收

不能直接修改父组件直接传递过来的数据 保存到子组件的data中

props可以校验数据 - 判断传递过来的值的类型是否与预期的相同

非父子组件通信

总线/观察者模式 Vue.prototype.bus = new Vue() 在全局中都可以使用到
发送用
this.bus.$emit("change",this.content)
接收
this.bus.$on("change",function(val){})

优化

减少ajax的请求 比如A、B、C三个组件都需要发送axios请求 但他们都是home.vue的子组件 所以我们在home.vue中发送一次axios请求便可以了

修改了proxyTable 需要重新启动本地服务器

vue-awesome-swiper 显示最后一张图片的时候 是因为刚开始接收的是一个空的数组
我们只需要在 <swiper :options="swiperOption" v-if="swiperList.length">加一个

v-if就可以解决
但是呢 这么写代码不够优雅 因为我们尽量不要在模板里面写逻辑性的代码
所以我们就通过计算属性computed写一个方法showSwiper 返回 swiperList.length

---

1、vue中 组件的复用意味着生命周期函数不会再被调用;
2、 是最顶层的出口，渲染最高级路由匹配到的组件。同样地，一个被渲染组件同样可以包含自己的嵌套 ，要在嵌套的出口中渲染组件，需要在 VueRouter 的参数中使用 children 配置；

<meta name="renderer" content="webkit"> <!-- 用在360中 -->
<meta name="force-rendering" content="webkit"> <!-- 用在其它 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- 针对 IE 浏览器 -->
<meta http-equiv="Cache-Control" content="no-transform"> <!-- 针对百度搜索 -->
<meta name="format-detection" content="telephone=no,email=no,adress=no">