大咖揭秘Java人都栽在了哪？点击免费领取《大厂面试清单》，攻克面试难关~>>>

• 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&.........