Vue.js 使用笔记

v-bind:class="{'class1': class1}"
v-on:click="showAlert"
v-bind:href="url"

数据双向绑定 ：

{{ message }}

数据过滤器 :
{{ message | filterA | filterB('xx',message)}}

filters: {
capitalize: function (x) {
do?
return x?
}
}

缩写 ：
v-bind 缩写




v-on 缩写

if -else -- if :

A

B

Not A/B/C

我们也可以使用 v-show 指令来根据条件展示元素：

v-for :

{{ site.name }}

{{ index }}. {{ key }} : {{ value }}

computed vs methods
computed 性能会更好，但是如果你不希望缓存，你可以使用 methods 属性。

计算后反转字符串: {{ reversedMessage }}

使用方法后反转字符串: {{ reversedMessage2() }}

computed: {
// 计算属性的 getter
reversedMessage: function () {
return this.message.split('').reverse().join('')
}
},
methods: {
reversedMessage2: function () {
return this.message.split('').reverse().join('')
}

watch : 用于监听数据变化时间
v-model = "kilometers"
watch : {
kilometers:function(val) {
this.kilometers = val;
this.meters = val * 1000;
}
}

事件管理 ： JQ的事件模式
Say hi

表单问题：