- 引入vue.js
<script src="vue.min.js"></script>
<script src="vue-router.min.js"></script>
- 创建vue对象，绑定id
<body>
<div id="app">
</div>
<script src="vue.min.js"></script>
<script src="vue-router.min.js"></script>
<script>
new Vue({
el: '#app',
data: {
},
methods:{
},
})
</script>
</body>
Vue的语法
- 插值绑定
{{message}}
- 单向绑定
<h1 v-bind:title="message">标题</h1>
<h1 :title="message">标题</h1>//可省略v-bind,用:代替
- 双向绑定
<input type="text" v-model="text"/>{{text}}
- 事件绑定
<button type="submit" v-on:click="fun()">提交</button>
//使用@替换v-on:
<button type="submit" @click="fun()">提交</button>
//阻止事件的提交，执行自定义的方法
<form action="save" v-on:submit.prevent="onSubmit">
<input type="text" id="name" v-model="user.name" />
<button type="submit">保存</button>
</form>
- v-if
<input type="checkbox" v-model="ok" />是否同意
<h1 v-if="ok">同意</h1>
<h1 v-else>不同意</h1>
- v-for
<table>
<tr v-for="(user,index) in userList">
<td>{{index}}</td>
<td>{{user.id}}</td>
<td>{{user.username}}</td>
</tr>
</table>