H5W3
当前位置:H5W3 > 其他技术问题 > 正文

【前端技术】vue的常用属性-filters、watch、computed和ref

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(过滤器名字,回调函数)
过滤器传参:
默认第一个参数是管道符前的数值,调用的时候不需要传进去
image
image

2、监听器watch

一次只能监听一个属性
基本数据类型-简单监听
复杂数据类型-深度监听
image

3、计算属性computed

可以同时监听多个属性
默认只有getter
对象返回一个函数
image

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>

本文地址:H5W3 » 【前端技术】vue的常用属性-filters、watch、computed和ref

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址