- demo的三部分结构
- 判断:v-if、v-else-if、v-else
- 循环:v-for
- 事件绑定 v-on:eventType
- 内容输入的双向绑定v-model
源码:Github
demo的三部分结构
- 通过
script src
引入``vue相关
js`文件
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
- 在
body
中的div
里通过id
绑定``vue`对象
<div id="app"> <!-- message output --> <h1>{{message}}</h1></div>
- 在
js
代码里实现对象的绑定,初始化值、成员函数已经其他在生命周期里可能存在的钩子函数。
<script> var vm = new Vue({ el: "#app", data: { message: "hello Vue", ok: true, items: [{ value: "List item 1" }, { value: "List item 2" }, { value: "List item 3" }], username: "", input2: "", }, methods: { clickButton: function() { this.message = "button clicked ... "; this.ok = false; } }, })</script&.........