Vue基礎語法（四）

vue的生命週期鉤子函式

所有的生命週期鉤子自動繫結this到上下文例項中，因此可以訪問資料對property和方法進行運算，這意味著不蹦使用箭頭函式來定義乙個生命週期方法。參考官方文件

生命週期鉤子一共有十乙個，這裡只寫八個

<

template
>
<
div>
div>
template
>
<
script
>
export 
default
},components: {},
methods: {},
beforecreate() ,
created() ,
beforemount() ,
mounted() ,
beforedestroy() ,
destroyed() ,
beforeupdate() ,
updated() 
}script
>

vue的三種模板語法

這三個裡面都可以加表示式而不僅僅是變數 比如name+『lee』

<

template
>
<
div>
<
div>}
div>
<
div 
v-text
="name"
>
div>
<
div 
v-html
="name"
>
div>
div>
template
>
<
script
>
export 
default
},methods: {}
}script
>

vue的計算屬性、方法和偵聽器

<

template
>
<
div>
} }
div>
template
>
<
script
>
export 
default
},//
第一種方法
//computed: 
//},
//第二種方法
//methods: //}
//第三種方法
watch: ,
lastname() 
}}script
>
<
style 
scoped
>
style
>

computed中的get和set方法的使用

<

template
>
<
div>}
div>
template
>
<
script
>
export 
default
},computed: ,
set: 
function
(value) }}}
script
>

條件渲染

不推薦v-if和v-for同時使用，因為v-for具有比v-if更高的優先順序  參考風格指南

<

template
>
<
div>
<
input 
type
="button"
@click
="show = !show"
/>
<
div 
v-if
="show"
>}
div>

<

div

v-show

="show"

>}

div>

div>

template
>
<
script
>
export 
default
},methods: {}
}script
>

Vue基礎語法

指令 1.1 資料繫結指令 v pre 填充原始資訊 1.顯示原始資訊跳過編譯過程 v once 只編譯一次 應用場景 顯示的資訊後續不需要修改。1.2 雙向資料繫結type text v model username 1.3 事件繫結type button v on click num type ...

Vue 基礎語法

lang en charset utf 8 模板語法 v指令入門title src script head root div div div v html test2 my.age div div 物件，裡面有兩個最基本屬性，是固定屬性 要寫在 id 為 root 的 div 下面 const co...

Vue基礎語法

常用控制項 基本練習 class繫結 使用方式 v bind class expression expression的型別 字串 陣列 物件 style繫結 v bind style expression expression的型別 字串 陣列 物件 vue通過由點 表示的指令字尾來呼叫修飾符，st...