Vue配置项（实例属性）
这篇总结主要介绍Vue配置项
1. el : 挂载点
推荐使用 id 选择器
不可以是 HTML 和 Body
写法：方法一：直接在data对象种直接指定容器el:'#root'方法二：Vue . $mount('#root')
2. data : 数据存储
语法： 模板语法 {{ data数据 }}
特点：响应式，data数据变化了，页面会自动更新
写法：第一种对象式:
data:{
name:'某某'
}第二种函数式
data() {
return{
name:'黑马'
}
}注意：由Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不再指向Vue实例了,而是指向window，都必须要写成普通函数
3. methods 存储方法
this指向 vue实例
如何在在methods中访问vue数据？ this.属性名
注意
1.使用的事件的回调需要配置在methods对象中，最终会在vm上2.methods中配置的函数，不要用箭头函数！否则this就不是vm了3.methods中配置的函数，都是被vue所管理的函数，this的指向是vm 或 组件实例对象
4. computed 计算属性
作用： 解决模板语法冗余
原理：底层借助了Obeject.defineproperty方法提供的getter和setter。
语法：
//简写 只用get方法时才能简写
computed:{
//简写
fullName(){
return this.xing + this.ming
}
}
//全写
computed:{
fullName:{
get(){},
set(value){}
}
}
//value就是你修改的值----fullName
//也就是说你计算的那个计算的属性的当时的状态
//get方法必须写return
//set则是不写优势：
与methods相比，内部有缓存机制，保存了第一次读取时的数据，以后只有依赖数据未发生改变，就不会调用getter，直接读取缓存，效率更高，调试方便
get函数什么时候执行？1.初次读取时会执行一次2.当依赖的数据发生改变时会再次调用
计算属性虽然在书写的时候是一个函数，但最终还是会被vue处理成一个属性，直接写他的方法名即可
5. watch : 侦听器
作用 ： 侦听vue中某一个数据变化
语法：
//深度监听 写在Vue实例里面
watch: {
data中的数据属性: {
immediate:true, //初始化时让handler调用一下
//什么时候调用handler？当被监视的属性发生改变时
//参数 newValue 新值 oldValue旧值
handler(newValue, oldValue) {
log(newValue,oldValue)
}
}
}
//写在Vue实例外面
vm.$watch('data中的数据属性', {
immediate: true, //初始化时让handler调用一下
//什么时候调用handler？当被监视的属性发生改变时
//参数 newValue 新值 oldValue旧值
handler(newValue, oldValue) {
log(newValue,oldValue)
}
})
//简写 即不进行深度监听才能使用简写
watch: {
//完整
/*hot: {
//immediate:true,//初始化时，让handler调用以下
//handler什么时候调用？当hot发生改变时
handler(newValue, oldValue) {
console.log('hot被修改了', newValue, oldValue);
}
}*/
//简写
hot(newValue, oldValue) {
console.log('hot被修改了', newValue, oldValue);
}
}
// 写在外面
vm.$watch('hot', function (newValue, oldValue) {
console.log('hot被修改了', newValue, oldValue);
})应用场景： 数据的变化 需要执行相同的业务(实时监听数据的变化)
何时被调用？
1.当被监视的属性发生改变时
2.immediate为true时，初始化自动调用
注意：
1.当监视属性变化时，handler回调函数自动调用
2.监视的属性必须存在，才能监视
watch与computed之间的区别
1.computed能完成的功能，watch都可以完成2.watch能完成的功能，computed不一定能完成，例如watch可以进行异步操作3.计算属性是无法维护异步操作的数据的
两个重要的原则1.所被Vue管理的函数，最好写成普通函数，这样this的指向才是vm 或 组件对象2.所有不被vue所管理的函数（定时器的回调函数，ajax的回调函数 promise的回调函数等），最好写成箭头函数，这样的this才指向vm 或 组件实例对象
6. name:
vue-devtools工具中的组件名由name决定
命名规范：大驼峰 + 横杠命名法多个单词组成
7. components 注册组件
当你创建了一个父子组件，在父组件中使用子组件，如何使用？
1.导入子组件
2.在components中注册子组件
3.在模板中使用子组件
8. props 传值接收
父给传子传值，使用props接收
9. directives 自定义指令
自定义语法何时会被调用？
1.指令与元素成功绑定时
2.指令所在模板被重新解析时
两种注册方式
//局部指令 写在Vue实例
new Vue({
directives:{
指令名 : {
// (1)inserted : 指令第一次使用执行
inserted(el,binding){
// el是指令所在的dom , binding.value是指令值
},
// (2)update : 指令值变化
update(el,binding){
}
}
}
})
// 全局指令 全局自定义指令(在main.js注册,任何组件使用
Vue.directive( '指令名' , {
inserted(el,binding){},
update(el,binding){}
} )
配置对象中常用的3种回调名：1.bind函数：指令与元素成功绑定时调用2.inserted函数：指令被添加在标签上时，自动被调用3.update函数：指令所在模板结构被重新调用
这里面的回调函数，同样是能收到element,binding两个参数
备注
1.指定定义时不加v-，但使用时要加v-
2.指令名如果是多个单词，要使用kebeb-case命名方式，不要使用camelCase命名
10. filters过滤器
语法：
第一步：在data配置项中，配置 data数据中的属性名
第二步：data数据中的属性名 | filters中的方法名
第三步：创建filters配置项，方法名(data数据中的属性名)，这里面是形参
1.只能使用在插值表达式和v-bind属性绑定
2.过滤器应该添加在表达式的尾部，由管道符进行调试 |3.filters与data配置项同级，过滤器必须要有返回值 return
4.使用filters，最终的值是filters的返回值，而不是data中的属性名的值
过滤器函数形参中的val，永远都是管道符前面的那个值
5.本质是一个函数，并且只支持在vue2使用
<div id="root">
<p>{{name | a}}</p> //data中的属性名 | filters中的方法名
</div>
<script>
Vue.config.productionTip = false
new Vue ({
el:'#root',
data:{
name:'hello vue' //配置数据
},
filters:{
a(val) { //val拿到data中的属性名
//charAt(索引值)，获取字符串对应的字符
//toUpperCase()，让字符串大写
let first = val.charAt(0).toUpperCase()
//sclice(从哪截取，到哪结束)
let last = val.slice(1)
return `${first}${last}`
}
}
})
</script>私有过滤器和全局过滤器
私有过滤器：在filters配置项中定义的过滤器方法，只能在当前的vm实例所控制的el区域使用
全局过滤器：在vue实例对象外部定义的方法，能够让所有vue实例都能使用
语法：Vue.filter(全局过滤器的方法名，全局过滤器的处理函数)
例如：Vue.filter('方法名',(data中配置属性名)=>{ return 返回值 })
注意：1.全局过滤器的单词是filter，最后面没有s2.全局需要定义在vue实例对象的前面，因为js是单线程的3.如果全局过滤器和私有过滤器名字一致，此时按照就近原则，调用私自的过滤器，不会调用全局的过滤器
<div id="root">
<p>{{name | a}}</p>
</div>
<div id="root2">
<p>{{name | a}}</p>
</div>
<script>
Vue.config.productionTip = false
//全局过滤器
Vue.filter('a',(val)=> {
return val.charAt(0).toUpperCase() + val.slice(1)
})
new Vue ({
el:'#root',
data:{
name:'hello vue'
},
//私有过滤器
//在调用时，采取就近原则，调取自身的过滤器
filters:{
a(val) {
//charAt(索引值)，获取字符串对应的字符
//toUpperCase()，让字符串大写
let first = val.charAt(0).toUpperCase()
//sclice(从哪截取，到哪结束)
let last = val.slice(1)
return `${first}${last}`
}
}
})
new Vue ({
el:'#root2',
data:{
name:'sb，今天不开心'
}
})
</script>11. _mixin混入(配置项)
功能：可以将多个组件共用的配置提取成一个混入对象，再将这个混合对象引入data中的数据比mixin传过来的数据优先级更高在写mixins配置项时，一定要记得加s
步骤
1.创建一个混入文件，mixin.js
2.在混入文件中定义混合，例如：
export const mixin = {
data(){...},
methods:{...}
}3.在需要是使用混入的组件中，使用混入，例如：
1.全局混入：在main中引入mixin import {mixin} from '../mixin'
在main中配置mixin Vue.mixin(mixin)
2.局部混入：在局部组件中引入mixin
在局部组件中配置mixins:['xxx']
