Vue2 快速入门

什么是 Vue.js

Vue.js 是一套用于构建用户界面的渐进式 JavaScript 框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。

环境搭建

使用 CDN

<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>

使用 Vue CLI

# 安装 Vue CLI
yarn global add @vue/cli

# 创建项目
vue create my-project

# 启动项目
cd my-project
yarn serve

第一个 Vue 应用

<div id="app">
  {{ message }}
</div>

<script>
new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})
</script>

Vue 实例

每个 Vue 应用都是通过 Vue 函数创建一个新的 Vue 实例开始的：

const vm = new Vue({
  // 选项
})

数据与方法

const data = { a: 1 }

const vm = new Vue({
  el: '#app',
  data: data,
  methods: {
    increment() {
      this.a++
    }
  }
})

vm.a === data.a // true

模板语法基础

文本插值

<span>Message: {{ msg }}</span>

绑定属性

<div v-bind:id="dynamicId"></div>
<!-- 简写 -->
<div :id="dynamicId"></div>

绑定事件

<button v-on:click="doSomething"></button>
<!-- 简写 -->
<button @click="doSomething"></button>

条件渲染

<div v-if="type === 'A'">A</div>
<div v-else-if="type === 'B'">B</div>
<div v-else>C</div>

列表渲染

<ul>
  <li v-for="item in items" :key="item.id">
    {{ item.text }}
  </li>
</ul>

表单输入绑定

<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>