共计 2348 个字符，预计需要花费 6 分钟才能阅读完成。
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>
正文完
