下面的例子包含了基本文法，綁定事件和雙向綁定
<!DOCTYPE html>
<html >
<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>
![vue項目：npm打包-S和-D差別：[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)