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>
发表回复