Vue.js 2 入门：数据驱动与生命周期

Vue 是一套渐进式框架，核心思想是数据驱动视图：改数据，DOM 自动更新，不用再手动 querySelector。

Hello World

<div id="app">
  <h1>{{ title }}</h1>
  <input v-model="title" />
  <button v-on:click="count++">点击 {{ count }} 次</button>
</div>

<script>
new Vue({
  el: '#app',
  data: { title: '我的第一个 Vue 应用', count: 0 },
})
</script>

输入框和标题通过 v-model 双向绑定，改输入框标题实时变化。

常用指令

• v-if / v-show：条件渲染。v-if 真正增删 DOM，v-show 只切 display，频繁切换用 v-show
• v-for：列表渲染，必须加 :key，帮 Vue 追踪每个节点身份
• v-bind:（简写 :）：绑定属性
• v-on:（简写 @）：绑定事件
• v-model：表单双向绑定，本质是 :value + @input 的语法糖

<li v-for="post in posts" :key="post.id">{{ post.title }}</li>

生命周期

实例从创建到销毁会经过一系列阶段，每个阶段都有钩子函数：

最常用的是 created/mounted 发请求，beforeDestroy 做清理。注意 SSR 场景下没有 mounted（服务器里没有 DOM）。