#vue2.5
1.特性:双向绑定 spa单页面
2..vue文件包含(template即html,script即js,style即css)
3.data：vue的对象数据、 methods：vue的对象方法、watch：设置vue对象的监听方法
模板指令：
v-text(文字)、v-html(文字加标签)、{{}} ==》数据渲染
v-if(动态)、v-show(非动态) ==》控制模块显示隐藏
v-for ==》循环渲染
v-on v-on:click == @click ==》事件绑定
v-bind 可以简写(:) :class、:src ==》属性绑定
v-for="(item,index) in list" :key="index" :class={class名:index==定义变量} //tab切换用的较多
启动服务后自动运行浏览器 :config->index.js->autoOpenBrowser设置为true 启动服务自行打开页面 或者在 package.json "scripts": {"dev": "webpack-dev-server --open --inline --progress --config build/webpack.dev.conf.js",.....},添加--open
4.组件需要先在用的父级应用 import 自己起名字(尽量驼峰形式) from './xxx' 然后components里注册后才能使用 在template中使用驼峰形式转换分割线
(导入: import myFirstCom from '../compontents/index.vue' 注册: compontents{ myFirstCom } 引用 <my-first-com></my-first-com>)
监听list数组;
watch：{
list：{ ==>监听的变量
handler(list){
Store.save(list);
}
}
}
list:Store.fetch() ==>调用
5.父子之间通信
父传子 props 在父组件定义数据，子组件通过props接收
父级 : :父组件发送自定义参数:要发送的数据 (:msg="father send info")
子级: props['父组件发送自定义参数'] (props['msg'])
子传父 $on() $emit()
##直接级父子关系
父组件 @父组件自定义事件名:父组件里方法名() 例:(@tellChilderInfo="getChilderInfo")
子this.$emit('父组件自定义事件名','向父组件传递的数据'); 例:(this.$emit('tellChilderInfo'))
非父子 eventHub 就是创建一个事件中心，相当于中转站，可以用它来传递事件和接收事件
在共有组件中，创建一个空的 Vue 实例作为事件中心 let Hub=new Vue()
组件A: @触发事件='方法名' 在方法中通信 (@click='getInfo')
methods:{
getInfo(){
Hub.$emit('自定义事件','要传递的数据')
}
}
组件B: Hub.$on('自定义事件','接收传递的数据') //可以写在本组件方法里
全局方法 main.js中给data添加一个 名字为Hub的空vue对象
// 根组件（this.$root)
new Vue({
el: '#app',
..............
render: h => h(App),
data: {
Hub: new Vue() ##空的实例放到根组件下，所有的子组件都能调用
}
})
组件A :this.$root.Hub.$emit('自定义事件', 发送数据) //触发 例:==>this.$root.Hub.$emit('YOUR_EVENT_NAME', 123)
组件B :this.$root.Hub.$on('自定义事件', (接收参数) => { //接收
console.log(yourData)
})
beforeDestroy() { //结束后要销毁
this.$root.Hub.$off('YOUR_EVENT_NAME')
}
....未完待续!!!