//指令
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>