Vue框架快速上手

文章目录

[1 Vue框架介绍](#1 Vue框架介绍)
[2 MVVM模式](#2 MVVM模式)
[3 Vue快速入门](#3 Vue快速入门)
- [3.1 基本用法](#3.1 基本用法)
- [3.2 内容渲染指令](#3.2 内容渲染指令)
- [3.3 属性绑定指令](#3.3 属性绑定指令)
- [3.4 使用JavaScript表达式](#3.4 使用JavaScript表达式)
- [3.5 事件绑定指令](#3.5 事件绑定指令)
- [3.6 条件渲染指令](#3.6 条件渲染指令)
- [3.7 列表渲染指令](#3.7 列表渲染指令)
- [3.8 v-for中的key](#3.8 v-for中的key)

1 Vue框架介绍

Vue是一套用于构建用户界面的渐进式框架。
Vue.js提供了MVVM数据绑定和一个可组合的组件系统，具有简单、灵活的API。
其目标是通过尽可能简单的API实现响应式的数据绑定和可组合的视图组件。

2 MVVM模式

MVVM是Model-View-ViewModel的缩写，它是一种基于前端开发的架构模式，其核心是提供对View和ViewModel的双向数据绑定。
Vue提供了MVVM风格的双向数据绑定，核心是MVVM中的VM，也就是ViewModel，ViewModel负责连接View和Model，保证视图和数据的一致性。

3 Vue快速入门

3.1 基本用法

Vue.js 是一个用于构建用户界面的渐进式JavaScript框架。它的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进DOM的系统。

html 复制代码

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

<script>
  // 创建Vue应用
  const app = Vue.createApp({
    data() {
      return {
        message: 'Hello Vue!'
      }
    }
  })
  
  // 挂载到DOM
  app.mount('#app')
</script>

说明：

Vue.createApp() 创建Vue应用实例
data() 函数返回响应式数据
{``{ }} 是插值表达式，用于显示数据
app.mount('#app') 将应用挂载到指定的DOM元素

3.2 内容渲染指令

Vue提供了多种内容渲染指令，用于将数据渲染到模板中。

html 复制代码

<div id="app">
  <!-- 文本插值 -->
  <p>{{ message }}</p>
  
  <!-- v-text指令 -->
  <p v-text="message"></p>
  
  <!-- v-html指令（注意XSS风险） -->
  <p v-html="htmlContent"></p>
</div>

<script>
  Vue.createApp({
    data() {
      return {
        message: 'Hello Vue!',
        htmlContent: '<strong>加粗文本</strong>'
      }
    }
  }).mount('#app')
</script>

说明：

{``{ }} 是最基本的文本插值
v-text 更新元素的textContent
v-html 更新元素的innerHTML，会解析HTML标签
注意：v-html 有XSS安全风险，只用于信任的内容

3.3 属性绑定指令

使用 v-bind 或简写 : 可以动态绑定HTML属性。

html 复制代码

<div id="app">
  <!-- 绑定href属性 -->
  <a :href="url">访问网站</a>
  
  <!-- 动态绑定class -->
  <div :class="{ active: isActive, 'text-danger': hasError }">
    动态类名
  </div>
  
  <!-- 绑定style -->
  <div :style="{ color: textColor, fontSize: fontSize + 'px' }">
    动态样式
  </div>
  
  <!-- 绑定disabled属性 -->
  <button :disabled="isDisabled">提交</button>
</div>

<script>
  Vue.createApp({
    data() {
      return {
        url: 'https://vuejs.org',
        isActive: true,
        hasError: false,
        textColor: '#3498db',
        fontSize: 16,
        isDisabled: false
      }
    }
  }).mount('#app')
</script>

说明：

: 是 v-bind: 的简写
可以绑定任何HTML属性
动态class可以是对象、数组或字符串
动态style可以是对象或数组

3.4 使用JavaScript表达式

Vue模板中支持完整的JavaScript表达式。

html 复制代码

<div id="app">
  <!-- 字符串操作 -->
  <p>{{ message.toUpperCase() }}</p>
  
  <!-- 数学运算 -->
  <p>数量: {{ count + 1 }}</p>
  
  <!-- 三元表达式 -->
  <p>{{ isActive ? '激活' : '未激活' }}</p>
  
  <!-- 方法调用 -->
  <p>{{ formatDate(now) }}</p>
  
  <!-- 属性中的表达式 -->
  <p :title="'提示: ' + message">悬停查看提示</p>
</div>

<script>
  Vue.createApp({
    data() {
      return {
        message: 'hello vue',
        count: 5,
        isActive: true,
        now: new Date()
      }
    },
    methods: {
      formatDate(date) {
        return date.toLocaleDateString()
      }
    }
  }).mount('#app')
</script>

说明：

支持完整的JavaScript表达式语法
每个绑定只能包含单个表达式
不支持语句（如if、for等控制流）
可以使用模板中定义的方法

3.5 事件绑定指令

使用 v-on 或简写 @ 来监听DOM事件。

html 复制代码

<div id="app">
  <!-- 基本事件处理 -->
  <button @click="handleClick">点击我</button>
  
  <!-- 内联表达式 -->
  <button @click="count++">增加: {{ count }}</button>
  
  <!-- 传递参数 -->
  <button @click="sayHello('Vue')">打招呼</button>
  
  <!-- 访问事件对象 -->
  <button @click="handleEvent($event)">事件对象</button>
  
  <!-- 事件修饰符 -->
  <form @submit.prevent="onSubmit">
    <input @keyup.enter="submit">
  </form>
</div>

<script>
  Vue.createApp({
    data() {
      return {
        count: 0
      }
    },
    methods: {
      handleClick() {
        alert('按钮被点击了!')
      },
      sayHello(name) {
        alert(`Hello, ${name}!`)
      },
      handleEvent(event) {
        console.log('事件类型:', event.type)
      },
      onSubmit() {
        console.log('表单提交被阻止了')
      },
      submit() {
        console.log('按下了回车键')
      }
    }
  }).mount('#app')
</script>

说明：

@ 是 v-on: 的简写
可以传递参数和事件对象
支持事件修饰符：.stop、.prevent、.once等
支持按键修饰符：.enter、.esc、.space等

3.6 条件渲染指令

Vue提供了多种条件渲染指令来控制元素的显示与隐藏。

html 复制代码

<div id="app">
  <!-- v-if指令 -->
  <p v-if="score >= 90">优秀</p>
  <p v-else-if="score >= 60">及格</p>
  <p v-else>不及格</p>
  
  <!-- v-show指令 -->
  <p v-show="isVisible">我会显示/隐藏</p>
  
  <!-- 切换显示 -->
  <button @click="toggle">切换显示</button>
  <div v-if="show">使用v-if切换</div>
  <div v-show="show">使用v-show切换</div>
</div>

<script>
  Vue.createApp({
    data() {
      return {
        score: 85,
        isVisible: true,
        show: true
      }
    },
    methods: {
      toggle() {
        this.show = !this.show
      }
    }
  }).mount('#app')
</script>

v-if vs v-show：

v-if 是真正的条件渲染，元素会被销毁/重建
v-show 只是切换CSS的display属性
v-if 有更高的切换开销，v-show 有更高的初始渲染开销
频繁切换使用 v-show，很少改变使用 v-if

3.7 列表渲染指令

使用 v-for 指令基于数组或对象渲染列表。

html 复制代码

<div id="app">
  <!-- 遍历数组 -->
  <ul>
    <li v-for="(item, index) in fruits" :key="item.id">
      {{ index + 1 }}. {{ item.name }} - ￥{{ item.price }}
    </li>
  </ul>
  
  <!-- 遍历对象 -->
  <ul>
    <li v-for="(value, key) in user">
      {{ key }}: {{ value }}
    </li>
  </ul>
  
  <!-- 遍历数字范围 -->
  <div>
    <span v-for="n in 5" :key="n">⭐</span>
  </div>
</div>

<script>
  Vue.createApp({
    data() {
      return {
        fruits: [
          { id: 1, name: '苹果', price: 5 },
          { id: 2, name: '香蕉', price: 3 },
          { id: 3, name: '橙子', price: 4 }
        ],
        user: {
          name: '张三',
          age: 25,
          city: '北京'
        }
      }
    }
  }).mount('#app')
</script>

说明：

v-for 可以遍历数组、对象和数字范围
遍历数组：(item, index) in items
遍历对象：(value, key, index) in object
遍历数字：n in 10 (从1到10)
必须为每个项提供 :key 属性

3.8 v-for中的key

key 属性是Vue识别节点的通用机制，对v-for的高效更新至关重要。

html 复制代码

<div id="app">
  <h3>没有key的问题（使用索引）</h3>
  <button @click="addItemToStart">在开头添加项目</button>
  <ul>
    <li v-for="(item, index) in items" :key="index">
      {{ item.name }} <input type="text" placeholder="输入内容">
    </li>
  </ul>
  
  <h3>正确使用key（使用唯一ID）</h3>
  <button @click="addItemToStart2">在开头添加项目</button>
  <ul>
    <li v-for="item in items2" :key="item.id">
      {{ item.name }} <input type="text" placeholder="输入内容">
    </li>
  </ul>
</div>

<script>
  Vue.createApp({
    data() {
      return {
        items: [
          { name: '项目A' },
          { name: '项目B' },
          { name: '项目C' }
        ],
        items2: [
          { id: 1, name: '项目A' },
          { id: 2, name: '项目B' },
          { id: 3, name: '项目C' }
        ],
        nextId: 4
      }
    },
    methods: {
      addItemToStart() {
        this.items.unshift({ name: '新项目' })
      },
      addItemToStart2() {
        this.items2.unshift({ 
          id: this.nextId++, 
          name: '新项目' 
        })
      }
    }
  }).mount('#app')
</script>

key的重要性：

唯一标识：帮助Vue识别每个节点的身份
高效更新：实现高效的虚拟DOM diff算法
状态保持：保持组件内部状态（如表单输入值）

使用原则：

使用唯一且稳定的值作为key
不要使用索引作为key（当列表顺序变化时会有问题）
理想情况下，key应该对应数据的唯一标识符（如id）