快速上手
数据绑定 {{ }}，见 message 字段
动态绑定属性 v-bind:attr，简写 :attr，见 attr_test 字段，is_attr_test 字段
条件判断 v-if v-else-if v-else，见 if_test 字段
显示/隐藏 v-show，与 v-if 不同的是，它总是渲染，只通过 display 来控制显示隐藏，经常需要切换显示隐藏的，用 v-show更好
循环 v-for，见 for_test 字段， v-for 建议都绑定一个唯一的key，见v-for
控件绑定 v-model，见 input_value 字段
事件绑定 v-on:event，简写 @event，见 method_test 方法
- 输入框变化前/后，分别点击
- vue内的变量能直接使用
js的方法 .stop修饰符可以停止冒泡- 更多事件修饰符
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>基础使用</title>
<style type="text/css">
.red {
background-color: red;
}
.blue {
background-color: blue;
}
.yellow {
color: yellow;
}
</style>
<script src="./vue.js"></script>
</head>
<body>
<div id="app" v-bind:class="attr_test">
<p :class="{blue: is_attr_test}">{{ message }}</p>
<p v-bind:class="[attr_test, 'yellow']">{{ message }}</p>
<p v-if="if_test >= 100">满分</p>
<p v-else-if="if_test >= 60">及格</p>
<p v-else>不及格</p>
<p v-show="is_show">display</p>
<div v-for="v,k in for_test" :key="k">
<p>{{k}} - {{v}} </p>
</div>
<input type="text" id="input" v-model="input_value" />
<div v-on:click="method_test">
<button type="button" v-on:click="method_test">点 我</button>
</div>
<div @click="method_test">
<button type="button" @click.stop="method_test">点 我</button>
</div>
</div>
</body>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
message: 'Hello World!',
attr_test : "red",
is_attr_test : true,
if_test : 90,
is_show: true,
for_test: {
"first" : "aaa",
"second": "bbb",
"third": "ccc"
},
input_value: "haha"
},
methods: {
method_test: function() {
alert(this.input_value.substr(1));
}
}
});
</script>
</html>