1、过滤器
组件过滤器filters
1、作用:对以后数据添枝加叶
2、语法：申明在组件内应用filters对象，返回一个函数，函数肯定要有返回值
3、调用：template中调用过滤器：数据属性|过滤器名字
var Content = { template: ` <div> <input type = number v-model = "msg"/> <h2>{{msg|RmbData}}</h2> </div> `, data(){ return{ msg:10 } }, filters:{ RmbData(value){ return '$'+value } } }全局过滤器filter
语法：Vue.filter(过滤器名字,回调函数)
过滤器传参：
默认第一个参数是管道符前的数值,调用的时候不须要传进去
2、监听器watch
一次只能监听一个属性
根本数据类型-简略监听
简单数据类型-深度监听
3、计算属性computed
能够同时监听多个属性
默认只有getter
对象返回一个函数
setter的实现
和methods比拟
1、计算属性有缓存，methods 没有
2、计算属性间接绑定属性不须要调用，methods要通过事件去调用
4、获取DOM元素
作用：通过 ref 这个属性为子组件赋予一个 ID 援用，能够操作原生dom（倡议少用，因为vue操作的虚构dom ）
应用：1、template中标签通过 ref="XXX"绑定属性
2、js中通过：this.$refs.XXX调用
返回后果的两种状况：
1、如果在组件外部标签绑定ref属性，应用$refs.xxx获取到的是原生jsdom对象
2、如果是组件绑定ref属性，那么this.$refs.xxx获取的是组件对象
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>获取DOM</title></head><body> <script src="../node_modules/vue/dist/vue.js"></script> <div id="app"> <App/> </div> <script> // $refs操作的是原生DOM，倡议少用，因为Vue中大部分操作虚构DOM 这样性能更高 var Test = { data() { return { msg:"获取DOM" } }, template:`<div class= "main" id = "d1" > <input v-model = "msg"/> <h2> {{msg}}</h2> </div>` } var App = { data() { return { msg:"获取DOM", isShow:true } }, template: ` <div> <Test v-if="isShow" ref = "test"></Test> <button ref = "btn" >扭转生死</button> </div> `, components:{ Test }, // created(){ // console.log( this.$refs.btn); // }, // beforeMount(){ // console.log( this.$refs.btn); // }, mounted(){ // 获取template里标签的dom元素，获取到的时原生jsDOM console.log( this.$refs.btn); // 获取template里组件的dom元素，获取到的是组件对象 console.log( this.$refs.test); } } new Vue({ el:"#app", components:{ App } }) </script></body></html>5、$nextTick办法
作用：$nextTick办法是在更新循环完结后执行提早回调，在批改数据之后应用$nextTick办法能够在回调中获取更新后的DOM
动静操作DOm的时候会用到该办法
例子：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>获取DOM</title></head><body> <script src="../node_modules/vue/dist/vue.js"></script> <div id="app"> <App /> </div> <script> // 需要，动态显示input标签，给标签增加光标事件fouce var App = { data() { return { msg: "获取DOM", isShow: false } }, template: ` <div> <input type =number ref = "input" v-if="isShow"/> <button ref = "btn" >扭转生死</button> </div> `, mounted() { // 动静操作DOM元素的显示暗藏 this.isShow = true; // dom更新循环完结后获取到更新后的DOM this.$nextTick(() => { this.$refs.input.focus(); }) // 存在获取不到到dom,因为这是同步 console.log(this.$refs.input); } } new Vue({ el: "#app", components: { App } }) </script></body></html>