模板语法 文本
使用{{}}进行数据绑定

// 这里的msg为data或props参数 Message: {{ msg }}

原始html

// 这里的rawHtm为ldata或props参数


属性

使用表达式

{{ number + 1 }}{{ ok ? 'YES' : 'NO' }}{{ message.split('').reverse().join('') }}

指令
指令带有v前缀的属性

现在你看到我了


参数

// 使用v-bind绑定参数,href为参数 ... // 使用v-on进行事件绑定，click为事件名 ...

动态参数

... ...

修饰符

...

缩写
v-bind

v-bind -> : ...->...

v-on

v-on -> @ ...->...

计算属性和侦听器 计算属性

Original message: "{{ message }}"
【vue基本语法】Computed reversed message: "{{ reversedMessage }}"


var vm = new Vue({ el: '#example', data: { message: 'Hello' }, computed: { // 计算属性的 getter reversedMessage: function () { // `this` 指向 vm 实例 return this.message.split('').reverse().join('') } } })

结果:

Original message: "Hello"Computed reversed message: "olleH"

计算属性默认只有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] } }

侦听器

{{ fullName }}

var vm = new Vue({ el: '#demo', data: { firstName: 'Foo', lastName: 'Bar', fullName: 'Foo Bar' }, // 当对于的属性发生变化时会执行方法 watch: { firstName: function (val) { this.fullName = val + ' ' + this.lastName }, lastName: function (val) { this.fullName = this.firstName + ' ' + val } } })

Class与Style绑定 可以传入对象

// 当对应的class为true时才会被设置上

可以传入数组

data: { activeClass: 'active', errorClass: 'text-danger' }

绑定内联样式

条件渲染 v-if

Vue is awesome!

也可以加入v-else

Vue is awesome! Oh no

可以在