vue note 01

NO IMAGE
1 Star2 Stars3 Stars4 Stars5 Stars 給文章打分!
Loading...

資料繫結方式:

1.普通的文字 可以使用 “Mustache”語法 (雙大括號) {{data}}

javascript表示式:每個繫結都只能包含單個表示式
<p>{{ok?'Yes':'No'}}</p>
<p>{{ number   1 }}</p>
<p>{{ msg.split('').reverse().join('') }}</p>

2.v-once <p v-once>{{msg}}</p>

4.v-bind

v-on:click ='showDialog'
@click ='showDialog'

計算屬性

基於它們的依賴進行快取的,只有在它的相關依賴發生改變時才會重新求值。

computed: {
now: function () {
return Date.now()
}
}

計算屬性預設只有 getter ,也可以自定義setter屬性

// ...
computed: {
fullName: {
// getter
get: function () {
return this.firstName   ' '   this.lastName
},
// setter
set: function (newValue) {
var names = newValue.split(' ')
this.firstName = names[0]
this.lastName = names[names.length - 1]
}
}
}
// ...

現在再執行 vm.fullName = 'John Doe'

<p :class="{ active:isActive,'text-danger':hasError }" >some message</p>


陣列語法:

//陣列執行分支判斷
<p :class="[isActive?activeClass:'',errorClass]"> some message </p>
//or
//陣列語法中使用物件語法
<p :class="[{activeClass:isActive},errorClass]"> some message </p>

條件渲染 v-if

列表渲染 v-for

(item, index)

v-for

v-for

一個元件的v-for

//為了傳遞迭代資料到元件裡,我們要用 props
//*不自動注入 item 到元件裡的原因是,因為這使得元件會與 v-for 的運作緊密耦合。在一些情況下,明確資料的來源可以使元件可重用*
<my-component
v-for="(item, index) in items"
v-bind:item="item"
v-bind:index="index"
v-bind:key="item.id"
></my-component>

!

當源資料為json 格式物件

要修改 vue $data裡面的 源資料 檢查注意事項


#

由於 JavaScript 的限制,Vue 不能檢測以下變動的陣列:
1.直接賦值來設定一個項或者陣列長度
如:

vm.items[indexOfItem] = newValue
vm.items.length = newLength

解決方法:
使用vue 物件的set方法 或者 陣列內建 方法splice

//設定一個項
// Vue.set 
Vue.set(vm.items, indexOfItem, newValue)
// Array.prototype.splice
vm.items.splice(indexOfItem, 1, newValue)
//改變陣列的長度
vm.items.splice(newLength)

??

那麼怎麼解決? 這裡Vue 物件的set方法又可以幫到我們
eg: Vue.set(object, key, value)

向以上 data中新增一個項 如下:

Vue.set(vm.userProfile, 'age', 27)

你還可以使用 vm.$set 例項方法,它只是全域性 Vue.set 的別名:
=>

this.$set(this.userProfile, 'age', 27)

var vm = new Vue({
data: {
userProfile: {
name: 'Anika',
age:27
}
}
})

相關文章

程式語言 最新文章