//指令
v-if="shown"
v-for="item in items"
v-bind:title="message"
v-pre 跳過沒有指令的編譯,加快編譯速度
v-once 只渲染元素和組件一次,用于優化更新性能
v-bind簡寫冒號:
v-on簡寫 @
//使用
var app = new VUE({
el: '#myapp',
data: {
message: 'Hello VUE!'
}
})
//注冊一個全局組件
VUE.component('to-item', {
props: ['todo'],
template: '<li>{{todo.message}}</li>'
})
//其他
//計算屬性有緩存,method沒有緩存,對于比較耗費性能的最好用計算屬性
2018.09.27
new VUE({
props: Array | Object,
data(){}, // 使用箭頭函數的話 this不再指向vue實例
data: vm => {a: vm.someAttr}, // 但可以通過參數獲取
methods: {
a: () => {this.xxx...} // 不應該使用箭頭函數來定義method 因為this綁定的是父級作用域
},
watch: {
name(){}, // 同樣不應使用箭頭函數
},
el: docElement, // 根實例
render(){}, // render函數優先于template
template: '',
})
1. 對于data屬性中的 _ 或者 $開頭的屬性,不會代理,即通過this._xxx獲取不到,但可以通過this.$data._xxx來獲取
2. vue API中的函數一般不使用箭頭函數
<template>
{{ .../* 可以訪問Date Math等內置全局變量 */ }}
<template>
在模板表達式中,不應該訪問用戶自定義的全局變量。
// 修飾符
<form v-on:submit.prevent="onSubmit"> ... </form>
// 綁定class
<div class="static"
v-bind:class="{ active: isActive, 'text-danger': hasError }">
</div>
// v-show 只切換元素的display屬性,元素始終保留在dom中
// v-if 在切換時有更高的性能開銷,而 v-show 在初始渲染時有更高的性能開銷。
// 因此,如果需要頻繁切換,推薦使用 v-show,如果條件在運行時改變的可能性較少,推薦使用 v-if
// 數組操作 注意事項:https://vue.docschina.org/v2/guide/list.html
var vm = new Vue({
data: {
items: ['a', 'b', 'c']
}
})
vm.items[1] = 'x' // 不是響應的
vm.items.length = 2 // 不是響應的
// $event 可以獲取子組件回傳的數據
<blog-post
...
v-on:enlarge-text="postFontSize += $event"
></blog-post>