1.vue对象
我们可以这么创建对象，但是建议用template模板构造对象
var MyComponent = Vue.extend({
// extension options
})
// all instances of `MyComponent` are created with
// the pre-defined extension options
var myComponentInstance = new MyComponent()
属性
var data = { a: 1 }
var vm = new Vue({
data: data
})
vm.a === data.a // -> true
// setting the property also affects original data
vm.a = 2
data.a // -> 2
// ... and vice-versa
data.a = 3
vm.a // -> 3
除了自定义的属性，vue还定义了$开头的属性
var data = { a: 1 }
var vm = new Vue({
el: '#example',
data: data
})
vm.$data === data // -> true
vm.$el === document.getElementById('example') // -> true
// $watch is an instance method
vm.$watch('a', function (newVal, oldVal) {
// this callback will be called when `vm.a` changes
})
2.vue声明周期
其他还有mounted, updated, and destroyed
var vm = new Vue({
data: {
a: 1
},
created: function () {
// `this` points to the vm instance
console.log('a is: ' + this.a)
}
})
// -> "a is: 1"
Paste_Image.png
3.Template 语法
（1）text
<span>Message: {{ msg }}</span>
//只绑定一次
<span v-once>This will never change: {{ msg }}</span>
//Raw HTML
<div v-html="rawHtml"></div>
（2）attribute
<div v-bind:id="dynamicId"></div>
<button v-bind:disabled="someDynamicCondition">Button</button>
支持JavaScript语法
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
<div v-bind:id="'list-' + id"></div>
只支持一条语句,下面的不起作用，且只能访问Math
and Date全局属性，不能访问用户自定义的
<!-- this is a statement, not an expression: -->
{{ var a = 1 }}
<!-- flow control won't work either, use ternary expressions -->
{{ if (ok) { return message } }}
（3）过滤器
{{ message | capitalize }}
new Vue({
// ...
filters: {
capitalize: function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
}
}
})
可链式调用
{{ message | filterA | filterB }}
//因为是函数，所以可以直接加参数
//arg1为第二个参数，arg1为第三个参数
{{ message | filterA('arg1', arg2) }}
（4）Directives 指令 v-
<p v-if="seen">Now you see me</p>
（5）简写
v-bind
<!-- full syntax -->
<a v-bind:href="url"></a>
<!-- shorthand -->
<a :href="url"></a>
v-on
<!-- full syntax -->
<a v-on:click="doSomething"></a>
<!-- shorthand -->
<a @click="doSomething"></a>
