Vue.js常見問題


1.Vuejs組件

vuejs構建組件使用

Vue.component('componentName',{ /*component*/ });

這里注意一點,組件要先注冊再使用,也就是說:

Vue.component('mine',{ template:'#mineTpl', props:['name','title','city','content'] }); var v=new Vue({ el:'#vueInstance', data:{ name:'zhang', title:'this is title', city:'Beijing', content:'these are some desc about Blog' } });

如果反過來會報錯,因為反過來代表先使用了組件的,但是組件卻沒注冊。

webpack報錯后,使用webpack --display-error-details可以排錯

2.指令keep-alive

在看demo的時候看到在vue-router寫着keep-alivekeep-alive的含義:
如果把切換出去的組件保留在內存中,可以保留它的狀態或避免重新渲染。為此可以添加一個keep-alive指令

<component :is='curremtView' keep-alive></component>

3.如何讓css只在當前組件中起作用

在每一個vue組件中都可以定義各自的css,js,如果希望組件內寫的css只對當前組件起作用,只需要在style中寫入scoped,即:

<style scoped></style>

4.vuejs循環插入圖片

在寫循環的時候,寫入如下代碼:

<div class="bio-slide" v-for="item in items"> <img src="{{item.image}}"> </div>

此時在控制台會出現警告
[Vue Warn]: src="{{item.image}}": interpolation in "src" attribute will cause a 404 request. Use v-bind:src instead.這里意思是在“src”屬性插值將導致404請求。使用v-bind:src代替。
所以替換成如下:

<div class="bio-slide" v-for="item in items"> <img v-bind:src="item.image"> </div>

這里需要主要,v-bind在寫的時候不能再用{{}},根據官方的說法:

<v-bind:href="url"></a>

這里 href 是參數,它告訴 v-bind 指令將元素的 href 特性跟表達式 url 的值綁定。可能你已注意到可以用特性插值href="{{url}}" 獲得同樣的結果:這樣沒錯,並且實際上在內部特性插值會轉為 v-bind 綁定。

5.綁定value到Vue實例的一個動態屬性上

對於單選按鈕,勾選框及選擇框選項,v-model綁定的value通常是靜態字符串(對於勾選框是邏輯值):

<!-- `toggle` 為 true 或 false --> <input type="checkbox" v-model="toggle">

但是有時候想綁定value到vue實例的一個動態屬性上,這時可以用v-bind實現,並且這個屬性的值可以不是字符串。例如綁定Checkbox的value到vue實例的一個動態屬性:

<input type="checkbox" v-model="toggle" v-bind:true-value="a" v-bind:false-value="b"> <p>{{toggle}}</p>

這里綁定后,並不是說就可以點擊后由true,false的切換變為a,b的切換,因為這里定義的動態a,b是scope上的a,b,並不能直接顯示出來,此時

//當選中時 vm.toggle === vm.a //當沒選中時 vm.toggle === vm.b

所以此時需要在data中定義a,b,即:

new Vue({ el:'...', data:{ a:'a', b:'b' } });

6.Vuejs在變化檢測問題

1.檢測數組

由於javascript的限制,vuejs不能檢測到下面數組的變化:

  1. 直接索引設置元素,如vm.item[0]={};

  2. 修改數據的長度,如vm.item.length

為了解決問題1,Vuejs擴展了觀察數組,為它添加一個$set()方法:

// 與 `example1.items[0] = ...` 相同,但是能觸發視圖更新 example1.items.$set(0, { childMsg: 'Changed!'})

問題2,需要一個空數組替換items

除了$set(),vuejs也為觀察數組添加了$remove()方法,用於從目標數組中查找並刪除元素,在內部調用了splice()。因此,不必:

var index = this.items.indexOf(item) if (index !== -1) { this.items.splice(index, 1) }

只需:

this.items.$remove(item);

2.檢測對象

受ES5的顯示,Vuejs不能檢測到對象屬性的添加或刪除。因為Vuejs在初始化時候將屬性轉化為getter/setter,所以屬性必須在data對象才能讓Vuejs轉換它,才能讓它是響應的,例如:

var data = { a: 1 } var vm = new Vue({ data: data }) // `vm.a` 和 `data.a` 現在是響應的 vm.b = 2 // `vm.b` 不是響應的 data.b = 2 // `data.b` 不是響應的

不過,有辦法在實例創建之后添加屬性並且讓它是響應的。對於Vue實例,可以使用$set(key,value)實例方法:

vm.$set('b', 2) // `vm.b` 和 `data.b` 現在是響應的

對於普通數據對象,可以使用全局方法Vue.set(object, key, value):

Vue.set(data, 'c', 3) // `vm.c` 和 `data.c` 現在是響應的

有時你想向已有對象上添加一些屬性,例如使用 Object.assign() 或 _.extend() 添加屬性。但是,添加到對象上的新屬性不會觸發更新。這時可以創建一個新的對象,包含原對象的屬性和新的屬性:

 
// 不使用 `Object.assign(this.someObject, { a: 1, b: 2 })` this.someObject = Object.assign({}, this.someObject, { a: 1, b: 2 })

7.關於vuejs頁面閃爍{{message}}

在vuejs指令中有v-cloak,這個指令保持在元素上直到關聯實例結束編譯。和CSS規則如[v-cloak]{display:none}一起用時,這個指令可以隱藏未編譯的Mustache標簽直到實例准備完畢。用法如下:

[v-cloak]{ display:none; }
<div v-cloak>{{message}}</div>

這樣<div>不會顯示,直到編譯結束

 

更多vue.js代碼示例請參考http://www.cnblogs.com/wrcold520/category/830771.html






 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM