后端快速学习Vue【day1介绍】

• • 1. Vue.js what is it?

• 2. Vue.js download or install

• 3. Hello Vue.js

• 4. {{}}

• 5. Property binding

• 6. User InterAction

• 7. Bidirectional data binding

• 8. if and for

• 9. Component application

1. Vue.js what is it?

---

Vue (读音 /vjuː/) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库 (opens new window)结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

2. Vue.js download or install

---

CDN：

NPM

最新稳定版

$ npm install vue@next

3. Hello Vue.js

---

{{message}}

---

4. {{}}

---

Data driven view

{{}} 插值表达式

count: {{counter}}

---

5. Property binding

---

除了文本插值，我们还可以像这样绑定元素的 attribute：

鼠标放这来

---

6. User InterAction

---

为了让用户和应用进行交互，我们可以用 v-on 指令添加一个事件监听器，通过它调用在实例中定义的方法

点我加1

{{count}}

---

注意在这个方法中，我们更新了应用的状态，但没有触碰 DOM——所有的 DOM 操作都由 Vue 来处理，你编写的代码只需要关注逻辑层面即可。

---

7. Bidirectional data binding

---

Vue 还提供了 v-model 指令，它能轻松实现表单输入和应用状态之间的双向绑定

{{message}}

---

8. if and for

---

控制切换一个元素是否显示也相当简单：

看得见我吗

<button @click=“reverse”>点击切换显示状态