【Vue】自定义指令directives、过滤器filters、计算属性computed、数据变化监测watch、Vue.set(target,key,value)方法、nextTick方法

Moon里

已于 2024-04-03 11:07:07 修改

阅读量881

点赞数 15

分类专栏： Vue 文章标签： vue.js 前端

于 2024-03-25 15:26:53 首次发布

本文链接：https://blog.csdn.net/qq_57567877/article/details/137015055

版权

Vue 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

vue

自定义指令directives
过滤器filters
计算属性computed
数据变化监测watch
set方法
nextTick方法

自定义指令directives

做想的事情不拘泥于原有的指令

<body>
<div class="app">

    <input type="text" value="username" v-foucs>
    <input type="text">

    <div v-haha></div>

</div>
<script src="vue.min.js"></script>
<script>
    let myData={}

    let myMethods={}

    new Vue({
        el:".app",
        data:myData,
        methods:myMethods,

        directives:{ //设置自定义指令的

            foucs:{ //自定义指令的名称，在html中使用的时候就是v-foucs
                inserted:function (el){ //inserted函数表示当绑定了该指令的元素被插入到dom的时候就会立即触发它（el表示使用了自定义指令的页面元素）
                    console.log(el);
                    el.focus();
                }
            },
            haha:{
                inserted:function (el){ //当这个元素出现的时候，这个元素要干什么事情
                    console.log(el);
                    el.innerHTML="hahhahah"
                }
            }
        },
    })

    /*
      自定义指令：指令（Directives），带有v- 前缀的特殊指令(原有指令：v-if/v-for/v-bind...)

      v-haha:自己定义的指令
    */
</script>
</body>

过滤器filters

把不满足要求的数据变成想要的数据

<div class="app">
    <h1>{{message | capitalize}}</h1>

    <ul>
        <li v-for="item in fruits">
            {{item.fruitname}}-----{{item.price | filterPrice}}
        </li>
    </ul>

</div>
<script src="vue.min.js"></script>
<script>
    let myData={
        message:"hello",
        fruits:[
            {fruitname:"桂圆",price:"15"},
            {fruitname:"蓝莓",price:"20"},
            {fruitname:"香蕉",price:"30"},
            {fruitname:"猕猴桃",price:"23"},
            {fruitname:"西瓜",price:"5"},
        ],
    }
    
    let myMethods={}

    let myFilters={

        capitalize:function (value){ //capitalize是自己命名的函数
            console.log(value);
            //处理charAt(number)
            let result=value.charAt(0).toUpperCase()+value.slice(1)
            console.log(result);
            return result;
        },

        filterPrice:function (price){
            console.log(price)
            return "$"+price*2+".00"; //处理完的数据返回页面去显示
        }
    }


    new Vue({
        el: ".app",
        data: myData,
        methods: myMethods,
        filters:myFilters,  //过滤
    })

</script>

计算属性computed

可以直接绑定在页面，返回什么东西，页面就绑定和使用什么

<div class="app">
    <h1>{{aDouble}}</h1><hr>


    <h1>模糊查询</h1>
    <input type="text" v-model="searchText">

    <h3>所有数据</h3>
    <ul>
        <li v-for="item in fruits">{{item.fruitName}}------{{item.price}}</li>
    </ul>

    <h3>筛选之后的数据</h3>
    <!--不使用computed-->
    <ul>
        <li v-for="item in queryParam()">{{item.fruitName}}------{{item.price}}</li>
    </ul>

    <!--使用computed-->
    <ul>
        <li v-for="item in queryParam2">{{item.fruitName}}------{{item.price}}</li>
    </ul>


</div>
<script src="vue.min.js"></script>
<script>
    let myData={
        a:2,
        searchText:"",
        fruits:[
            {fruitName:"桂圆",price:"15元"},
            {fruitName:"蓝莓",price:"20元"},
            {fruitName:"香蕉",price:"30元"},
            {fruitName:"猕猴桃",price:"23元"},
            {fruitName:"西瓜",price:"5元"},
            {fruitName:"哈密瓜",price:"8元"},
        ],
    };

    let myMethods={
        queryParam(){
			// console.log(this); 这里this指向vue对象
            console.log("进入函数")

            /*1.拿到输入框的值*/
            /*2.输入框的值和水果名字比对*/

             /*解决办法1.把this存到一个变量中再拿到里面去用*/
            //  let newThis=this;
            //  let result=this.fruits.filter(function (item){
            //      console.log(item)
            //      console.log(this) //在回调函数这个里面searchText拿不到，这里的this指向Windows对象
			//      console.log(newThis.searchText)
			// 	 return item.fruitName.indexOf(newThis.searchText)!=-1
            // })
			// return result;


            /*解决方法2.箭头函数会指向(它爹指向谁就是谁)原始对象*/
            let result=this.fruits.filter((item)=>{
                // console.log(item)
                // console.log(this.searchText)
				if(item.fruitName.indexOf(this.searchText)!=-1 || item.price.indexOf(this.searchText)!=-1){
					return item;
				}
			})
            console.log(result)
            return result
        }
    };

    let myComputed={ //可以直接绑定在页面，返回什么东西，页面就绑定和使用什么
        aDouble: function () {
            return this.a * 2
        },

        queryParam2:function (){
            let result=this.fruits.filter((item)=>{
				if(item.fruitName.indexOf(this.searchText)!=-1 || item.price.indexOf(this.searchText)!=-1){
					return item;
				}
            })
            return result
        }
    }


    new Vue({
        el:".app",
        data:myData,
        methods:myMethods,
        computed:myComputed, //计算
    })


/*
    js6中的数组方法：arr.filter()

    let number=[1,2,3,4,5,6,7,8,9];
    let newNum=number.filter((item)=>{
                         return item>5
                    })
    console.log(newNum)
*/

</script>

数据变化监测watch

Vue的watch它可以用来监测VUE实例（new Vue）上的数据变动

<div class="app">

    <h2>watch的常见用法1</h2>
    <input type="text" v-model="message">
    <span>{{copeMessage}}</span>


    <h2>深度监听</h2>
    <input type="text" v-model="mySon.hisClass.classAddress">
    <span>{{copeMessage2}}</span>


    <h2>同时绑定触发多个handler</h2>
    <input type="text" v-model="message3">
    <span>{{copeMessage3}}</span>


</div>
<script src="vue.min.js"></script>
<script>
    let myData={
            message:"hello",
            copeMessage:"",

            /*如何深度监听复杂数据，因为watch只能监听到mySon无法再深入监听里面的内容*/
            mySon:{
                hisClass:{
                    className:"class7",
                    classAddress:"成都高新区777号"
                }
            },
			copeMessage2:"",

			message3:"啦啦啦啦",
			copeMessage3:"",
    },

	myWatch={
			//当监测的数据发生变化，可以做相应的一些事情
            /*message(value){
                console.log(value)
                this.copeMessage=value
            }*/
            message: "handleMessage",//绑定方法，注意不打""是变量（当message被myWatch观测到发生变化的时候触发这个handleMessage方法）


            /*深度监听*/
            mySon:{
                handler:"handleDeepMessage", //属性handler绑定触发的函数
                deep:true,  //默认：false
                immediate:true, //immediate监听的数据有初始值的话，那就把它的初始值用起来
            },


            /*触发多个(方法)事件*/
            message3: [
                {
                    handler:"handleMessage2" //value
                },
                {
                    handler:"handleMessage3" //*
                },
                {
                    handler:function (){
                        this.copeMessage3+="......" //......
                    }
                },
            ],

    },

	myMethods={
            handleMessage(value){
                console.log("method上的handleMessage这个方法被触发")
                this.copeMessage=value;
            },

            handleDeepMessage(value){
                console.log("method上的handleDeepMessage这个方法被触发")
                this.copeMessage2=value.hisClass.classAddress;
            },


            handleMessage2(value){
                console.log("method上的handleMessage2这个方法被触发")
                this.copeMessage3=value;
            },
            handleMessage3(value){
                console.log("method上的handleMessage3这个方法被触发")
                this.copeMessage3=this.copeMessage3+"*";
            },

    };


    new Vue({
        el:".app",
        data:myData,
        methods:myMethods,
		watch:myWatch, /*Vue的watch它可以用来监测VUE实例（new Vue）上的数据变动*/
    })

</script>

set方法

vue管理的变量（如data中定义的变量）必须生成get和set方法，有的时候赋值的过程，虽然数据变化了，但是赋值的对象里面并没有get和set方法，vue就不会根据它的属性改变去更新视图。Vue.set(target,key,value)

<div class="app">

    <ul>
        <li v-for="(item,index) in fruits" :key="index">
            {{item.fruitName}}----{{item.price}}
            <button @click="changeData(index)">修改数据的错误方式</button>
            <button @click="setData(index)">使用set修改数据</button>
        </li>
    </ul>

    <div>
        {{msg}}
        <button @click="changeMsg">修改msg</button>
    </div>

</div>
<script src="vue.min.js"></script>
<script>
    let myData={
		fruits:[
			{fruitName:"桂圆",price:"15"},
			{fruitName:"蓝莓",price:"20"},
			{fruitName:"香蕉",price:"30"},
			{fruitName:"猕猴桃",price:"23"},
			{fruitName:"西瓜",price:"5"},
		],
		msg:"123",
    },

	myMethods={
		changeData(index){
			console.log(index)
			//不会更改到页面上
			this.fruits[index]={fruitName:"改良猕猴桃",price:"23"}
			console.log(this.fruits)
		},

		changeMsg(){
			this.msg="大家好呀"
		},

		setData(index){
			/*
			* set语法：
			*   Vue.set(target数据源,key具体的数据,value改成什么样)
			*/
			Vue.set(this.fruits,index,{fruitName:"改良猕猴桃",price:"277"})
			console.log(this.fruits)
		}
    }



    new Vue({
        el:".app",
        data:myData,
        methods:myMethods,
    })


    /*在vue中有的时候会遇到数据更新但是视图不会更新的情况：

	原因：
		vue管理的变量（如data中定义的变量）必须生成get和set方法，有的时候赋值的过程，虽然数据变化了，但是赋值的对象里面并没有get和set方法，vue就不会根据它的属性改变去更新视图。
    */

</script>

nextTick方法

使用$nextTick()，获取更新后的Dom的vue方法；如果不使用可能造成页面的数据已经更新了但是我拿到的却是上一次的旧的数据，而不是dom节点上的最新的数据

<div class="app">

    <div ref="aa">{{msg}}</div>
    <button @click="getMsg">点击获取</button>
    <button @click="changeMsg">点击修改</button>

</div>
<script src="vue.min.js"></script>
<script>
    let myData={
            msg:"hello",
	},

	myMethods={
		getMsg(){
			// console.log(document.getElementById("div1")) 传统方式获取节点
			console.log(this.$refs.aa) //获取节点
			console.log(this.$refs.aa.innerText) //获取节点内的文本
		},

		changeMsg(){
			this.msg="新值"
			console.log(this.$refs.aa.innerText) //改成新值后立马打出来看，不是获取的改变后的值，而是初始值

			//解决方案：使用$nextTick，是获取更新后的DOM的vue的方法
			this.$nextTick(()=>{
				console.log(this.$refs.aa.innerText)
			})
		},
	}


    new Vue({
        el:".app",
        data:myData,
        methods:myMethods,
    })

</script>