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>
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。