vue基礎

1.Vue中的v-on:click可以簡寫為@click

2.vue元件的定義可以寫為Vue.component(‘item’,{

template:’

’

})

在上面的div中用就可以了

Vue執行個體的生命周期鈎子函數

Vue的生命周期函數就是Vue執行個體在某一個時間點自動執行的函數

得詳細的看那張官網的生命周期圖示

生命周期中首先執行beforecrea()函數 然後是執行created()函數

然後根據圖示 他會問有沒有el挂載點 如果有 會問有沒有template模闆有的話

就會渲染template模闆上的内容 如果沒有的話就把el挂載點上的div渲染出來 是以 el挂載點上的div上可以不寫任何東西 直接寫在el挂載點下面

的 template:'

hello word 就行了模闆渲染前會執行beforeMount函數 hellowolod也就是模闆渲染到頁面後 Mounted函數會被執行

在組建被銷毀 還沒銷毀之前beforeDestroy函數執行 銷毀後 destroyed執行 (可以在控制台用vm.$destroy()銷毀Vue執行個體)

但資料發生改變的時候beforeupdate一瞬間執行 改變之後 updated函數執行

Vue的模闆文法

v-text 和 v-html 後面的值都可以與data中的值做綁定 凡是v-指令 後面都是一個js的表達式 也就是js的運作環境 {{}}中也是可以寫簡單的

js的表達式的

Vue中的計算屬性 偵聽器

計算屬性是寫在computed:{}裡面的函數中的

例如:data:{

first: ‘Lee’,

last:‘del’

},

computed:{

fullName:function(){

return this.first + " " +this.last

}

裡面的fullName可以直接插值

{{fullName}} 中

計算屬性是有一個緩存的機制 如果計算以來的值沒發生改變 他就計算一次 拿上文舉例就是this.first和this.last 如果改變就會重新計算一次 這樣提高性能

用methods:{

fullName:function(){

return this.first + " " +this.last

}

也可以計算 但是沒有緩存機制 是以就計算來說還是用computed比較好 是以computed是跟data裡面的一樣的調用 跟methods寫一樣的書寫方式

如果想讓data中資料發生改變 fullName也同時發生改變 除了上述兩種方法之外 亦可以使用 偵聽器、

watch:{

first:function(){

this.fullName = this.first + " " +this.last

}，

last:function(){

this.fullName = this.first + " " +this.last

}

}

使用偵聽器也可以緩存機制 但是watch比較computed複雜 是以用于計算時還是最好用computed

計算屬性的setter 和 getter

computed中的get方法就是在computed:{

fullName:{

get:function(){

return this.first + " " +this.last

}

}實際上跟沒寫差不多

但是

set:function(value){

裡面的value會接收到get中的retrun出來的值 可以進行一些操作 例如

var arr = value.split(’’)

this.first = arr[0]

this.last = arr[1]

這樣一來 computed依賴的資料發生改變 就得重新計算一次

Vue 綁定樣式

1.class的對象綁定 首先 定義一個點選事件 然後 :class={active:isactive}在data中寫 isactive=false 在methods中寫 this.isactive=!isactive

然後在style 中寫active color：red 就可以實作點選變紅 再點選恢複原來的顔色 也可以this.active=this.active===‘active’?"":‘active’

也可以用style來綁定

可以通過數組的方式進行綁定:style= “[styleobj,{fontsize:‘20px’}]”

在data中寫上 styleobj:{ color:black}

再點選事件中寫上 this.styleobj.color = this.styleobj.color===‘black’?‘red’:‘black’

}

}

v-if 和 v-show

v-if是根據變量的false true 删除添加節點

v-show是根據變量的存在于否在css上隐藏顯示

Vue中的key值得作用

如果v-if 有一個input框 v-else有一個input框 當改變變量時從if切換到else Vue有一個複用機制 在if中的input框中填寫的内容也不會

清空 這時候如果在每個input中添加一個key Vue就會知道這個在Vue中是唯一的 就不會複用了

v-for 清單循環 v-for="(item,index) of list" :key=“id” 一般後端傳回資料 會傳回id id就是這條資料唯一标示

如果想在Vue中在數組中添加一項 是不能通過下标的形式來改變的 如果通過下表形式頁面不會響應 隻能通過Vue給的七個處理數組的方法來改變數組

七個方法是 push pop shift UNshift splice sort reverse

在最外層的标簽寫上template 占位符 循環會執行裡面的标簽循環 但是最外層的沒有标簽

對象的循環

v-for="(item,key,index)of duixiang" 對象中加一項也是得用Vue給的方法 直接更改引用但是比較麻煩 這時候可以使用

Vue中的set方法Vue.set(vm.duixiang,‘鍵’，‘值’)

數組中的set方法跟對象差不多

Vue元件使用
           

Vue元件使用的細節點

is屬性寫在标簽上面 例如 其中row是一個子元件 主要是為了解決很多父标簽下面必須寫子标簽的問題

在子元件中data是一個函數 同時這個函數必須傳回一個對象 主要是子元件需要多次調用 這樣寫可以讓子元件之間的資料不會互相影響

在Vue中如果需要操作dom可以用ref=‘mingchneg’ 可以在Vue執行個體中通過this. r e f s . m i n g c h n e g . i n n e r H T M L 來 進 行 d o m 節 點 的 輸 出 當 在 子 組 件 上 寫 r e f 在 父 組 件 的 實 例 中 寫 t h i s . refs.mingchneg.innerHTML 來進行dom節點的輸出 當在子元件上寫ref 在父元件的執行個體中寫this. refs.mingchneg.innerHTML來進行dom節點的輸出當在子元件上寫ref在父元件的執行個體中寫this.refs.mingcheng擷取到的是這個元件的引用資料

Vue元件父子傳遞資料

Vue中父元件向子元件傳值都是通過屬性的方式 子元件不能修改父元件傳遞過來的資料 如果想要改變資料 要從根源上修改 也可以在子元件的

data中複制父元件傳遞過來的資料 傳遞資料的原理是 先定義一個const conut={寫子元件的東西}, 再在父元件的執行個體中注冊conut 通過components來注冊 在父元件

的标簽中寫上conut标簽 在conut标簽上定義一個屬性進行傳值 在子元件的{props:[]}

校驗父元件傳遞過來的值

接收并使用子元件接收可以限制類型props:{mingcheng:string} 如果不符合會

報錯 如果想要傳數字或字元串可以在後面寫上[number,string] 也可以寫 props:{

countent:{

type:string, 規定傳過來的類型

required:true, 必須要傳這個屬性

default:‘default value’ 如果不傳這個屬性 預設顯示的值

validator:function(value){ 傳入的屬性的值的長度必須大于五

return value.length>5

}

}

}

Vue元件子父傳遞資料

Vue總子元件向父元件傳值 通過事件的方式 在子元件的執行個體中 this.$emit{‘名稱’,‘值’} 在子元件标簽上寫 @名稱=“新名稱” 在根執行個體中寫

新名稱函數

Vue元件監聽子元件上面的原生事件

為什麼要監聽子元件上面的原生事件 因為如果注冊了一個子元件 在子元件上面寫了個@click 在再Vue根執行個體下寫函數并不會被觸發 隻有在

子元件的執行個體模闆總寫函數 并寫自定義事件才可以 但是這樣太麻煩了是以就有了監聽子元件上面的原生事件的需求了

可以在子元件标簽上面寫@click.native=“事件名” 這樣就可以在根執行個體上面擷取到點選事件了

Vue非父子之間傳值

1.可以使用vuex

2.可以使用bus/總線/釋出訂閱模式/觀察者模式

Vue.prototype.bus = new Vue()

this.bus.$emit(‘change’,this.content)

具體項目在寫

Vue插槽

1.插槽的使用場景

如果父元件傳子元件一個标簽 子元件收到後得在外層包裹個div 在這個div上得寫v-html指令 但是傳遞的多的時候太複雜

父元件傳标簽可以直接把标簽插入到子元件标簽中 在子元件的執行個體模闆中寫上solt标簽就可以 solt也可以定義預設内容

但是如果需要傳遞兩個标簽 怎麼差別solt标簽 這個時候就該用到具名插槽了 隻要在子元件标簽中的插槽标簽上面 slot屬性=“名稱”

下面的執行個體模闆中的solt中的标簽上面加上一個name=“名稱” 就可以區分插進來的标簽了

2.作用域插槽

首先父元件調用子元件給子元件一個作用域插槽 這個插槽一定是在子元件标簽下以

{{props.item}}

這裡面的props是子元件的執行個體中的資料 在子元件的執行個體化模闆中寫入 這裡的:item與h1中的item相對應

Vue中的動态元件和 v-once指令

動态元件就是根據子元件中的:is=“type” is中的後面的資料的變化而變化