vue的經常使用屬性-filters、watch、computed和ref

時間 2020-09-30

標籤 vue 經常使用屬性 filters watch computed ref 简体版

原文原文鏈接

一、過濾器

組件過濾器filters

一、做用:對當前數據添油加醋
二、語法：聲明在組件內使用filters對象，返回一個函數，函數必定要有返回值
三、調用：template中調用過濾器：數據屬性|過濾器名字html

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(過濾器名字,回調函數)
過濾器傳參：
默認第一個參數是管道符前的數值,調用的時候不須要傳進去

vue

二、監聽器watch

一次只能監聽一個屬性
基本數據類型-簡單監聽
複雜數據類型-深度監聽
node

三、計算屬性computed

能夠同時監聽多個屬性
默認只有getter
對象返回一個函數
緩存

setter的實現

和methods比較

一、計算屬性有緩存，methods 沒有
二、計算屬性直接綁定屬性不須要調用，methods要經過事件去調用app

四、獲取DOM元素

做用：經過 ref 這個屬性爲子組件賦予一個 ID 引用，能夠操做原生dom（建議少用，由於vue操做的虛擬dom ）
使用：一、template中標籤經過 ref="XXX"綁定屬性
二、js中經過：this.$refs.XXX調用
返回結果的兩種狀況：
一、若是在組件內部標籤綁定ref屬性，使用$refs.xxx獲取到的是原生jsdom對象
二、若是是組件綁定ref屬性，那麼this.$refs.xxx獲取的是組件對象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>

 // $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>

五、$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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。