Vue過濾器與內(nèi)置指令和自定義指令及組件使用詳解
更新時間：2022年12月12日 09:39:37 作者：糖^O^
這篇文章主要介紹了Vue過濾器與內(nèi)置指令和自定義指令及組件使用方法，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)吧
過濾器
定義： 對要顯示的數(shù)據(jù)進行特定格式化后再顯示（適用于一些簡單邏輯的處理）
過濾器可以用在兩個地方：雙花括號插值 或 v-bind表達式。
局部過濾器
局部過濾器是在某一個vue實例的內(nèi)容創(chuàng)建的，只在當前實例中起作用
<script>
export default {
data() {
return {
price: 100
};
},
filters: {
filter_addbfh(value) {
return value + '%';
}
}
};
</script>全局過濾器
通過全局方式創(chuàng)建的過濾器，在任何一個vue實例中都可以使用
注意：使用全局過濾器的時候，需要先創(chuàng)建全局過濾器，再創(chuàng)建Vue實例
顯示的內(nèi)容,是由過濾器的返回值決定
使用語法: <h1>{{name | myfilter1}}</h1>
Vue.filter('filterName', function (value) {
// value 表示要過濾的內(nèi)容
})示例（過濾器）：
<div id="root">
<h2>顯示格式化后的時間</h2>
<!-- 計算屬性實現(xiàn) -->
<h3>現(xiàn)在是：{{ fmtTime }}</h3>
<!-- methods實現(xiàn) -->
<h3>現(xiàn)在是：{{ getFmtTime() }}</h3>
<!-- 過濾器實現(xiàn) -->
<h3>現(xiàn)在是：{{time | timeFormater}}</h3>
<!-- 過濾器實現(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
//全局過濾器
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>
內(nèi)置指令
v-text指令
用處：向其所在的節(jié)點中渲染文本內(nèi)容。
與插值語法的區(qū)別：v-text會替換掉節(jié)點中的內(nèi)容，{{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指令
(使用的很少)
作用：向指定節(jié)點中渲染包含html結(jié)構(gòu)的內(nèi)容。
????與插值語法的區(qū)別：
- v-html會替換掉節(jié)點中所有的內(nèi)容，{{xx}}則不會。
- v-html可以識別html結(jié)構(gòu)。
嚴重注意：v-html有安全性問題
- 在網(wǎng)站上動態(tài)渲染任意HTML是非常危險的，容易導(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>兄弟我找到你想要的資源了，快來！</a>',
}
})
</script>v-cloak指令
（沒有值）
使用css配合v-cloak可以解決網(wǎng)速慢時頁面渲染不出來，而展示出{{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 在啟動時生成生產(chǎn)提示。
new Vue({
el:'#root',
data:{
name:'尚硅谷'
}
})
</script>
v-once指令
??????
- v-once所在節(jié)點在初次動態(tài)渲染后，就視為靜態(tài)內(nèi)容了。
- 以后數(shù)據(jù)的改變不會引起v-once所在結(jié)構(gòu)的更新，可以用于優(yōu)化性能。
<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指令
??跳過其所在節(jié)點的編譯過程 可利用它跳過：沒有使用指令語法、沒有使用插值語法的節(jié)點，會加快編譯
<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功能類似，但會把綁定的數(shù)值放大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個回調(diào)：
- bind：指令與元素成功綁定時調(diào)用。
- inserted：指令所在元素被 插入頁面時調(diào)用。
- update：指令所在模板結(jié)構(gòu)被重新解析時調(diào)用。
定義全局指令
<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函數(shù)何時會被調(diào)用？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中使用組件的三大步驟：
- 定義組件(創(chuàng)建組件)
- 注冊組件
- 使用組件(寫組件標簽)
定義組件
使用Vue.extend(options)創(chuàng)建，其中options和new Vue(options)時傳入的那個options幾乎一樣，有點區(qū)別；
區(qū)別如下：
- el不要寫 ——— 最終所有的組件都要經(jīng)過一個vm的管理，由vm中的el決定服務(wù)哪個容器。
- data必須寫成函數(shù) ——— 避免組件被復(fù)用時，數(shù)據(jù)存在引用關(guān)系。
data必須寫成函數(shù)：
創(chuàng)建一個組件案例：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">點我提示學(xué)校名</button>
</div>
`,
// el:'#root', //組件定義時，一定不要寫el配置項，因為最終所有的組件都要被一個vm管理，由vm決定服務(wù)于哪個容器。
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'
}
}
})
注冊組件
- 局部注冊：靠new Vue的時候傳入components選項
- 全局注冊：靠Vue.component(‘組件名’,組件)
注意點
組件名：
一個單詞組成：
- 第一種寫法(首字母小寫)：school
- 第二種寫法(首字母大寫)：School
多個單詞組成：
- 第一種寫法(kebab-case命名)：my-school
- 第二種寫法(CamelCase命名)：MySchool (需要Vue腳手架支持)
備注：
(1).組件名盡可能回避HTML中已有的元素名稱，例如：h2、H2都不行。
(2).可以使用name配置項指定組件在開發(fā)者工具中呈現(xiàn)的名字。
VueComponent
- school組件本質(zhì)是一個名為VueComponent的構(gòu)造函數(shù)，是Vue.extend生成的。
- 我們只需要寫
<school/>或<school></school>，Vue解析時會幫我們創(chuàng)建school組件的實例對象，即Vue幫我們執(zhí)行的：new VueComponent(options)。
關(guān)于this指向：
- 組件配置中：data函數(shù)、methods中的函數(shù)、watch中的函數(shù)、computed中的函數(shù)它們的this均是【VueComponent實例對象】
- new Vue(options)配置中：data函數(shù)、methods中的函數(shù)、watch中的函數(shù)、computed中的函數(shù) 它們的this均是【Vue實例對象】
VueComponent的實例對象，以后簡稱vc（也可稱之為：組件實例對象）。Vue的實例對象，以后簡稱vm
內(nèi)置關(guān)系
VueComponent.prototype.__proto__ === Vue.prototype
到此這篇關(guān)于Vue過濾器與內(nèi)置指令和自定義指令及組件使用詳解的文章就介紹到這了,更多相關(guān)Vue過濾器內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
v-if和v-show可能是日常開發(fā)中最常用的兩個指令，雖然看上去兩者功能是類似的，但是兩者還是存在很大區(qū)別的。接下來通過本文給大家分享vue渲染時閃爍{{}}的問題及解決方法，感興趣的朋友一起看看吧2018-03-03
這篇文章主要為大家詳細介紹了Vue3如何結(jié)合Vant實現(xiàn)簡單的登錄功能,文中的示例代碼講解詳細,有需要的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-04-04
如何使用Vue3的onMounted鉤子函數(shù)及vue3中onMounted的用法詳解
本文詳細介紹了Vue3中的`onMounted`鉤子函數(shù)的前世今生,包括其在Vue2中的前身`mounted`鉤子,以及Vue3中使用Composition?API的`onMounted`鉤子的用法,文章涵蓋了`onMounted`的多種用法,感興趣的朋友跟隨小編一起看看吧2024-11-11
Vuerouter的beforeEach與afterEach鉤子函數(shù)的區(qū)別
本文詳細的介紹了Vuerouter的beforeEach與afterEach鉤子函數(shù)的區(qū)別和使用，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-12-12
這篇文章主要介紹了vue-cli 3.x配置跨域代理的實現(xiàn)方法，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
這篇文章主要介紹了vue3在jsx中使用component組件方式,具有很好的 參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要介紹了vue vant中picker組件的使用說明，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
vue3.0?router路由跳轉(zhuǎn)傳參問題(router.push)
這篇文章主要介紹了vue3.0?router路由跳轉(zhuǎn)傳參問題(router.push)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-02-02
詳解vue3.2中setup語法糖<script?lang="ts"?setup>
Vue 3.2 引入了語法,這是一種稍微不那么冗長的聲明組件的方式,下面這篇文章主要介紹了詳解vue3.2中setup語法糖<script?lang="ts"setup>的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-01-01
下面小編就為大家分享一篇vue注冊組件的幾種方式總結(jié)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03