给样式背景赋值：
:style="{backgroundImage:'url(' + otherInfo.head_image + ')'}"
<img :src="'__ROOT__/upload/'+mesay.message" v-if="message.type == 'text'"
2.监听器--watch的使用：
watch : {
firstName: function(val){ //firstName是data里的v-model绑定的值
this.fullName = val;
}
}
3. v-cloak的使用：
在style里 ： [v-cloak]{diaplay:none;}
再在html标签 里增加v-cloak属性
4.注意它们区别：v-text,v-html,v-pre ,v-model.laze
5.过滤器的使用：
<body>
<div id="app">
<div class="test">{{msg|upper|lower}}</div>
</div>
</body>
<script type="">
//全局过滤器,过滤器名。方法。对属性同样可用，只是没了大括号
Vue.filter('upper',function(value,arg1){ //第二个参数开始可以传自己的参数
return value.charAt(0).toLowerCase()+value.slice(1);
})；
//局部过滤器
var app = new Vue({
el:'#app',
data:{
msg:''
},
filters: { //局部过滤器.html里直接调用名称，可多个，后者在前者基础上接着过滤
upper: function(v){
return v.charAt(0).toLowerCase()+v.slice(1);
}
}
})
</script>
</html>
6.生命周期的三个阶段：挂载，更新，销毁。 销毁如何执行：调用this.$destory();其它方法都会被销毁。
7.修改响应式数据：直接vue修改与实例修改
Vue.set(vm.list,1,'test'); //将data里的list里的1号位元素修改为test值。
vm.$set(vm.list,1,'test');//实例方式修改
8.组件的命名，注册，使用，插棤，调试。
组件注意：1.命名注意驼峰式的在模板字符串中可以使用，但在根组件里要转成-的形式使用。
2. DATA返回必须返回函数.
3. 组件外层用div包起来。
4. 模板内容可以是模板字符串。
组件分全局组件与局部组件：
全局： Vue.component(组件名，{data:function(){},template:'字符串'})；
局部：data同级增加components:{'template-name':{data:function(){},template:字符串}} //第二个参数可以先声明变量，局部组件只能在父组件里使用。
组件通讯与传值：
父传子：props.
父组件里：<menu-list :title="title"></menu-list> //:title会传给子组件，写死的值就可以不要：
子组件里：Vue.component('menu-list',{props:['title'],data:function(){},template:'.....' });//子组件可以直接调用 title;
注意：字符串模板中，驼峰传值驼峰接收可以。但标签里只能横线传，可以驼峰接收。
props属性：String,Number,Boolean,Array,Object.
子传父：$emit;
子组件里： <button @click='$emit("parent-attr")'>add</button> //parent-attr要写到父组件的属性里。
父组件里： <my-cmp @parent-attr='handle'></my-cmp> //父组件的methods里写一个handle的方法可监测执行到。
同级相传: 自定义事件或叫事件总线. (建立事件通讯--监听与销毁--触发事件)
//1.在组件的mounted里监听.
var hub = new Vue(); //建立事件总线，实例化.
//以下为组件A
data:function()
{ return {
num:0,
}
},
methods:{
handel:function(){
hub.$emit('jerry',1); //jerry为对方(兄弟)组件事件名，1为传过去的值.
}
},
mounted:{ //这里监听
hub.$on('tom-event',(val)=>{ //val为接收传过来的值,tom-event对自身事件的命名
this.num+= 1;
});
} ,
template:`<div>jerry{{num}},<button @click='handel'>点击</button></div>`
插槽：基本插槽，自命名插槽，作用域插槽.
基本插槽:1.子组件模板中写个<slot>这里自定义内容，可写可不写</slot>,父组件里的此组件名里加入slot：<my-comp><slot>这是父组件传来的内容</slot></my-comp>;
命名插槽:1.子组件模板中写个<slot name="header">这里自定义内容，可写可不写</slot>,父组件里的此组件名里加入slot：<my-comp><slot name="header">这是父组件传来的内容</slot></my-comp>;
作用域插槽:场景如:父组件传个list到子组件，要求子组件里某个list高亮显示.
//父组件里增加属性
<my-comp :psend="lists">
<template slot-scope="slotPr">//需要自定义一个slot-slit-scope名字
<strong v-if="slotPr.info.id==pdex" class="current">{{slotPr.info.name}}</strong>
<span v-else>{{ slotPr.info.name}}</span>
</template>
</my-comp>
//子组件内容如下
<ul>
<li v-for="item in psend" :key="item.id">
<slot :info="item">{{ item.name}}</slot>//定义一个info传上去
</li>
</ul>