下面的例子包含了基本语法，绑定事件和双向绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>the first vue program</h1>
<div id="app">
<p>文本绑定，和悬浮说明</p>
<span v-bind:title="hoverMessage">{{message}}</span>
<hr>
<p>if else 和 elseif</p>
<p>is ok?</p>
<p v-if="ok==='y'">yes</p>
<p v-else-if="ok==='n'">no</p>
<p v-else>don't know</p>
<hr>
<p>for循环</p>
<li v-for="item in items">
{{item.elem}}
</li>
<hr>
<p>绑定事件</p>
<button v-on:click="sayHi">点击弹出alert</button>
<hr>
<p>双向动态绑定</p>
<p>输入文本：<input type="text" v-model="myText"/></p>
<p>输入的文本：{{myText}}</p>
<input type="radio" name="single" value="单选1" v-model="danxuan">单选1
<input type="radio" name="single" value="单选2" v-model="danxuan">单选2
<p>选中了：{{danxuan}}</p>
<input type="checkbox" id="多选1" value="多选1" v-model="duoxuan">多选1
<input type="checkbox" id="多选2" value="多选2" v-model="duoxuan">多选2
<p>选中了：{{duoxuan}}</p>
下拉框：<select v-model="xialakuang">
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<p>选中了：{{xialakuang}}</p>
</div>
<script src="vue/vue.js"></script>
<script>
var vm = new Vue({
el: "#app", // el就是element的意思
data: {
message: "start vue!",
hoverMessage: "hoverMessage",
ok: 'n',
items: [
{elem: "elem1"},
{elem: "elem2"},
{elem: "elem3"}
],
hi: "hello world",
myText: "",
danxuan: "",
duoxuan: [],
xialakuang: "C"
},
methods: { // 方法必须卸载这里面
sayHi: function() {
alert(this.hi);
}
}
});
</script>
</body>
</html>