vue 对象+Template 语法

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

Message: {{ msg }}
//只绑定一次
This will never change: {{ msg }}
//Raw HTML

（2）attribute

Button

支持JavaScript语法

{{ number + 1 }}

{{ ok ? 'YES' : 'NO' }}

{{ message.split('').reverse().join('') }}

只支持一条语句,下面的不起作用，且只能访问Math
and Date全局属性，不能访问用户自定义的

{{ var a = 1 }}


{{ 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-

Now you see me

（5）简写
v-bind

v-on