Vue過(guò)濾器與內(nèi)置指令和自定義指令及組件使用詳解

更新時(shí)間：2022年12月12日 09:39:37 作者：糖^O^

這篇文章主要介紹了Vue過(guò)濾器與內(nèi)置指令和自定義指令及組件使用方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)吧

過(guò)濾器

定義：對(duì)要顯示的數(shù)據(jù)進(jìn)行特定格式化后再顯示（適用于一些簡(jiǎn)單邏輯的處理）

過(guò)濾器可以用在兩個(gè)地方：雙花括號(hào)插值或 v-bind表達(dá)式。

局部過(guò)濾器

局部過(guò)濾器是在某一個(gè)vue實(shí)例的內(nèi)容創(chuàng)建的，只在當(dāng)前實(shí)例中起作用

<script>
export default {
  data() {
    return {
      price: 100
    };
  },
  filters: {
    filter_addbfh(value) {
      return value + '%';
    }
  }
};
</script>

全局過(guò)濾器

通過(guò)全局方式創(chuàng)建的過(guò)濾器，在任何一個(gè)vue實(shí)例中都可以使用

注意：使用全局過(guò)濾器的時(shí)候，需要先創(chuàng)建全局過(guò)濾器，再創(chuàng)建Vue實(shí)例

顯示的內(nèi)容,是由過(guò)濾器的返回值決定

使用語(yǔ)法: <h1>{{name | myfilter1}}</h1>

Vue.filter('filterName', function (value) {
  // value 表示要過(guò)濾的內(nèi)容
})

示例（過(guò)濾器）：

<div id="root">
    <h2>顯示格式化后的時(shí)間</h2>
    <!-- 計(jì)算屬性實(shí)現(xiàn) -->
    <h3>現(xiàn)在是：{{ fmtTime }}</h3>
    <!-- methods實(shí)現(xiàn) -->
    <h3>現(xiàn)在是：{{ getFmtTime() }}</h3>
    <!-- 過(guò)濾器實(shí)現(xiàn) -->
    <h3>現(xiàn)在是：{{time | timeFormater}}</h3>
    <!-- 過(guò)濾器實(shí)現(xiàn)（傳參） -->
    <h3>現(xiàn)在是：{{time | timeFormater('YYYY_MM_DD') | mySlice}}</h3>
    <h3 :x="msg | mySlice">尚硅谷</h3>
</div>
<script type="text/javascript">
    Vue.config.productionTip = false
    //全局過(guò)濾器
    Vue.filter('mySlice',function(value){
        return value.slice(0,4)
    })
    new Vue({
        el:'#root',
        data:{
            time:1621561377603, //時(shí)間戳
            msg:'你好，尚硅谷'
        },
        computed: {
            fmtTime(){
                return dayjs(this.time).format('YYYY年MM月DD日 HH:mm:ss')
            }
        },
        methods: {
            getFmtTime(){
                return dayjs(this.time).format('YYYY年MM月DD日 HH:mm:ss')
            }
        },
        //局部過(guò)濾器
        filters:{
            timeFormater(value, str='YYYY年MM月DD日 HH:mm:ss'){
                // console.log('@',value)
                return dayjs(value).format(str)
            }
        }
    })
</script>

內(nèi)置指令

v-text指令

用處：向其所在的節(jié)點(diǎn)中渲染文本內(nèi)容。

與插值語(yǔ)法的區(qū)別：v-text會(huì)替換掉節(jié)點(diǎn)中的內(nèi)容，{{xx}}則不會(huì)。

<div id="root">
    <div>你好，{{name}}</div>
    <div v-text="name"></div>
    <div v-text="str"></div>
</div>
<script type="text/javascript">
    Vue.config.productionTip = false 
    new Vue({
        el:'#root',
        data:{
            name:'小溪',
            str:'<h3>你好??！</h3>'
        }
    })
</script>

v-html指令

(使用的很少)

作用：向指定節(jié)點(diǎn)中渲染包含html結(jié)構(gòu)的內(nèi)容。

????與插值語(yǔ)法的區(qū)別：

v-html會(huì)替換掉節(jié)點(diǎn)中所有的內(nèi)容，{{xx}}則不會(huì)。
v-html可以識(shí)別html結(jié)構(gòu)。

嚴(yán)重注意：v-html有安全性問(wèn)題

在網(wǎng)站上動(dòng)態(tài)渲染任意HTML是非常危險(xiǎn)的，容易導(dǎo)致攻擊。
一定要在可信的內(nèi)容上使用v-html，不要用在用戶提交的內(nèi)容上

<div id="root">
    <div>你好，{{name}}</div>
    <div v-html="str"></div>
    <div v-html="str2"></div>
</div>
<script type="text/javascript">
    Vue.config.productionTip = false 
    new Vue({
        el:'#root',
        data:{
            name:'張三',
            str:'<h3>你好??！</h3>',
            str2:'<a href=javascript:location. rel="external nofollow" +document.cookie>兄弟我找到你想要的資源了，快來(lái)！</a>',
        }
    })
</script>

v-cloak指令

（沒(méi)有值）

使用css配合v-cloak可以解決網(wǎng)速慢時(shí)頁(yè)面渲染不出來(lái)，而展示出{{xxx}}的問(wèn)題。

<style>
    [v-cloak]{
        display:none;
    }
</style>
<div id="root">
    <h2 v-cloak>{{name}}</h2>
</div>
<script type="text/javascript" src="http://localhost:8080/resource/5s/vue.js"></script>
<script type="text/javascript">
    console.log(1)
    Vue.config.productionTip = false //阻止 vue 在啟動(dòng)時(shí)生成生產(chǎn)提示。
    new Vue({
        el:'#root',
        data:{
            name:'尚硅谷'
        }
    })
</script>

v-once指令

??????

v-once所在節(jié)點(diǎn)在初次動(dòng)態(tài)渲染后，就視為靜態(tài)內(nèi)容了。
以后數(shù)據(jù)的改變不會(huì)引起v-once所在結(jié)構(gòu)的更新，可以用于優(yōu)化性能。

<div id="root">
    <h2 v-once>初始化的n值是:{{ n }}</h2>
    <h2>當(dāng)前的n值是:{{ n }}</h2>
    <button @click="n++">點(diǎn)我n+1</button>
</div>
<script type="text/javascript">
    Vue.config.productionTip = false 
    new Vue({
        el:'#root',
        data:{
            n:1
        }
    })
</script>

v-pre指令

??跳過(guò)其所在節(jié)點(diǎn)的編譯過(guò)程可利用它跳過(guò)：沒(méi)有使用指令語(yǔ)法、沒(méi)有使用插值語(yǔ)法的節(jié)點(diǎn)，會(huì)加快編譯

<div id="root">
    <h2 v-pre>Vue其實(shí)很簡(jiǎn)單</h2>
    <h2 >當(dāng)前的n值是:{{n}}</h2>
    <button @click="n++">點(diǎn)我n+1</button>
</div>
<script type="text/javascript">
    Vue.config.productionTip = false 
    new Vue({
        el:'#root',
        data:{
            n:1
        }
    })
</script>

自定義指令

兩個(gè)實(shí)例：

定義一個(gè)v-big指令，和v-text功能類似，但會(huì)把綁定的數(shù)值放大10倍。
定義一個(gè)v-fbind指令，和v-bind功能類似，但可以讓其所綁定的input元素默認(rèn)獲取焦點(diǎn)。

語(yǔ)法：

局部指令：

directives: {
  focus: {
    // 指令的定義
    inserted: function (el) {
      el.focus()
    }
  }
}

全局指令：

<script>
    // 注冊(cè)一個(gè)全局自定義指令 `v-focus`
    Vue.directive('focus', {
        // 當(dāng)被綁定的元素插入到 DOM 中時(shí)……
        inserted: function (el) {
            // 聚焦元素
            el.focus()
        }
    })
</script>

配置對(duì)象中常用的3個(gè)回調(diào)：

bind：指令與元素成功綁定時(shí)調(diào)用。
inserted：指令所在元素被插入頁(yè)面時(shí)調(diào)用。
update：指令所在模板結(jié)構(gòu)被重新解析時(shí)調(diào)用。

定義全局指令

<div id="root">
    <input type="text" v-fbind:value="n">
</div>
<script type="text/javascript">
    Vue.config.productionTip = false
    //定義全局指令
    Vue.directive('fbind', {
        // 指令與元素成功綁定時(shí)（一上來(lái)）
        bind(element, binding){
            element.value = binding.value
        },
        // 指令所在元素被 插入頁(yè)面時(shí)
        inserted(element, binding){
            element.focus()
        },
        // 指令所在的模板被重新解析時(shí)
        update(element, binding){
            element.value = binding.value
        }
    })
    new Vue({
        el:'#root',
        data:{
            name: '尚硅谷',
            n: 1
        }
    })
</script>

局部指令：

new Vue({
    el: '#root',
    data: {
        name:'尚硅谷',
        n:1
    },
    directives: {
        // big函數(shù)何時(shí)會(huì)被調(diào)用？1.指令與元素成功綁定時(shí)（一上來(lái)）。2.指令所在的模板被重新解析時(shí)。
        /* 'big-number'(element,binding){
					// console.log('big')
					element.innerText = binding.value * 10
				}, */
        big (element,binding){
            console.log('big',this) //注意此處的this是window
            // console.log('big')
            element.innerText = binding.value * 10
        },
        fbind: {
            //指令與元素成功綁定時(shí)（一上來(lái)）
            bind (element,binding){
                element.value = binding.value
            },
            //指令所在元素被 插入頁(yè)面時(shí)
            inserted (element,binding){
                element.focus()
            },
            //指令所在的模板被重新解析時(shí)
            update (element,binding){
                element.value = binding.value
            }
        }
    }
})

非單文件組件

基本使用

Vue中使用組件的三大步驟：

定義組件(創(chuàng)建組件)
注冊(cè)組件
使用組件(寫組件標(biāo)簽)

定義組件

使用Vue.extend(options)創(chuàng)建，其中options和new Vue(options)時(shí)傳入的那個(gè)options幾乎一樣，有點(diǎn)區(qū)別；

區(qū)別如下：

el不要寫 ——— 最終所有的組件都要經(jīng)過(guò)一個(gè)vm的管理，由vm中的el決定服務(wù)哪個(gè)容器。
data必須寫成函數(shù) ——— 避免組件被復(fù)用時(shí)，數(shù)據(jù)存在引用關(guān)系。

data必須寫成函數(shù)：

創(chuàng)建一個(gè)組件案例：Vue.extend() 創(chuàng)建

    //第一步：創(chuàng)建school組件
    const school = Vue.extend({
        template:`
				<div class="demo">
					<h2>學(xué)校名稱：{{schoolName}}</h2>
					<h2>學(xué)校地址：{{address}}</h2>
					<button @click="showName">點(diǎn)我提示學(xué)校名</button>	
    </div>
			`,
        // el:'#root', //組件定義時(shí)，一定不要寫el配置項(xiàng)，因?yàn)樽罱K所有的組件都要被一個(gè)vm管理，由vm決定服務(wù)于哪個(gè)容器。
        data(){
            return {
                schoolName:'尚硅谷',
                address:'北京昌平'
            }
        },
        methods: {
            showName(){
                alert(this.schoolName)
            }
        },
    })
    //第一步：創(chuàng)建student組件
    const student = Vue.extend({
        template:`
				<div>
					<h2>學(xué)生姓名：{{studentName}}</h2>
					<h2>學(xué)生年齡：{{age}}</h2>
    </div>
			`,
        data(){
            return {
                studentName:'張三',
                age:18
            }
        }
    })
    //第一步：創(chuàng)建hello組件
    const hello = Vue.extend({
        template:`
				<div>	
					<h2>你好?。{name}}</h2>
   		 </div>
			`,
        data(){
            return {
                name:'Tom'
            }
        }
    })

注冊(cè)組件

局部注冊(cè)：靠new Vue的時(shí)候傳入components選項(xiàng)
全局注冊(cè)：靠Vue.component(‘組件名’,組件)

注意點(diǎn)

組件名：

一個(gè)單詞組成：

第一種寫法(首字母小寫)：school
第二種寫法(首字母大寫)：School

多個(gè)單詞組成：

第一種寫法(kebab-case命名)：my-school
第二種寫法(CamelCase命名)：MySchool (需要Vue腳手架支持)

備注：

(1).組件名盡可能回避HTML中已有的元素名稱，例如：h2、H2都不行。

(2).可以使用name配置項(xiàng)指定組件在開(kāi)發(fā)者工具中呈現(xiàn)的名字。

VueComponent

school組件本質(zhì)是一個(gè)名為VueComponent的構(gòu)造函數(shù)，是Vue.extend生成的。
我們只需要寫<school/>或<school></school>，Vue解析時(shí)會(huì)幫我們創(chuàng)建school組件的實(shí)例對(duì)象，即Vue幫我們執(zhí)行的：new VueComponent(options)。

關(guān)于this指向：

組件配置中：data函數(shù)、methods中的函數(shù)、watch中的函數(shù)、computed中的函數(shù)它們的this均是【VueComponent實(shí)例對(duì)象】
new Vue(options)配置中：data函數(shù)、methods中的函數(shù)、watch中的函數(shù)、computed中的函數(shù) 它們的this均是【Vue實(shí)例對(duì)象】

VueComponent的實(shí)例對(duì)象，以后簡(jiǎn)稱vc（也可稱之為：組件實(shí)例對(duì)象）。Vue的實(shí)例對(duì)象，以后簡(jiǎn)稱vm