全局的东西：
组件、过滤器 让大家直接用 全局不带s
component filter表示全局 components filters局部
- filter 过滤器
- watch单个监视
- computed 群体监视
- slot 留坑插槽
filter – 过滤器
定义：
function(原数据，参数1，参数2){return 结果}
调用
{{ '数据' | 过滤器名(参数1,,参数2) }}
demo
// 过滤器可以给数据显示进行添油加醋
// 示例：将input输入的值进行翻转显示，通过filters
var App = {template:`<div><input type='text' v-model='myText' /> 不带参数的{{myText|myreverse}}带参数的,参数可以无限增加{{myText|myreverse('en')}} </div>`,data:function(){return {myText:""}},//组件内的过滤器filters:{// filter return的值用于最终的展示reverse:function(dataStr){//参数1就是传递的原数据// 变数组 翻转 变字符串return dataStr.split("").reverse().join(""); // 显示的内容}}
}new Vue({el:"#app",components:{"app":App},template:`<app/>`
})// 全局过滤器 使用{{ "xxx" | myreverse("arg1") }}
Vue.filter("myreverse",function(data,arg1){return arg1 + ':' + data.split("").reverse().join("");;
})
watch --单个监视
使用
watch:{
// key属于data属性的属性名、两个参数表示改变前、改变后key:function(newV,oldV){console.log(newV,oldV)}
}
复杂类型监视（对象和数组）
// 深度监视: object||array
stus:{deep:true,//深度handler:function(newv,oldv){// 因为只赋了一个rose值，所以只监听一次console.log("监视复杂数据成功");console.log(newv)}
}
demo示例
// 示例：监视input输入的值，进行弹框var App = {template:`<div><input type='text' v-model='myText' />{{myText}}<button @click="stus[0].name='rose'">改变stus[0].name的属性值</button></div>`,data:function(){return {myText:"111",stus:[{name:"jack"}]}},watch:{//监视复杂类型,无法监视、原因是因为监视的是对象的地址，地址没改改的是同地址的属性// stus:function(){// console.log("监视失败，写法有问题");// },// 深度监视: object||arraystus:{deep:true,//深度handler:function(newv,oldv){// 因为只赋了一个rose值，所以只监听一次console.log("监视复杂数据成功");console.log(newv)}},// key属于data属性的属性名myText:function(newV,oldV){console.log(newV,oldV)if(newV == "i love you"){alert("我不爱你")}}}}
computed – 群体监视
demo：计算 (a+b)*c
// 示例：计算 (a+b)*c
var App = {template:`<div><input type='text' v-model='n1' />+<input type='text' v-model='n2' />*<input type='text' v-model='rate' />= {{result}}</div>`,data:function(){return {n1:0,n2:0,rate:0}},computed: {result:function (){//监视对象，写在函数内部// 凡是函数内部有this相关属性，改变都会触发当前函数// 包含原值不变，缓存不调函数的优化机制（原值复制粘贴不会触发监听）console.log('监听到了~')return ((this.n1-0) + (this.n2-0))*this.rate;}},
}new Vue({el:"#app",components:{"app":App},template:`<app/>`
})
slot – 留坑插槽
slot其实就是父组件传递的DOM结构
<slot></slot>是vue的内置组件
使用步骤：
1、定义子组件使用slot留坑，外部填入html
let MyLi = {template:`<li><slot></slot></li>`}
2、注册子组件，供父组件使用
Vue.component('my-li',MyLi);
3、父组件使用，填坑（<my-li>内部的东西都属于填坑用的，写什么结构，就显示什么结构）
let App = {template:`<div><ul><my-li>111111</my-li><my-li><button>我是按钮</button></my-li></ul></div>`
}
另：具名slot的定义、使用
var MySlot = {template: `<li>以下预留第一个坑<slot name='one'></slot> <hr>以下预留第二个坑<slot name='two'></slot> </li>`
}
注册子组件一样的
具名slot的使用
var App = {template: `<div><ul><my-Myslot><h1 slot='two'>我是1，对应第一个坑</h1><h1 slot='one'>我是2，对应第二个坑</h1></my-Myslot></ul></div>`
}