本文共 1455 字，大约阅读时间需要 4 分钟。

Vue.js基础入门与进阶指南

1. Vue.js基础使用

1.1 Hello World示例

   
  
    
    
     
      { {msg} }
     
  
    
  
    
    
     
      { {1 + 2} }
     
  
    
  
    
    
     
      { {msg + '----' + 123} }
     
  
    
   

• el：指定 Vue 实例的挂载目标（可用 CSS 选择器或 DOM 元素）
• data：数据对象，用于存储和管理应用的数据

1.2 插值语法

• Vue 的插值语法允许在 HTML 标签中直接使用 JavaScript 表达式
• 支持基本计算和属性访问，如 {{ msg }}

1.3 Vue 实例运行流程

2. Vue 模板语法

2.1 前端渲染

Vue 的核心特点是通过前端模板渲染，提升开发效率

2.2 模板语法概述

• 差值表达式：{{ }} 或 {{ }}
• 指令：以 v- 开头，用于控制 DOM 样式、事件和数据绑定
• 事件绑定：通过 v-on:事件名 绑定 DOM 事件
• 属性绑定：通过 v-bind:属性名 绑定 DOM 属性
• 样式绑定：通过 v-bind:style 绑定 CSS 样式
• 分支和循环：v-if、v-else、v-for 等用于控制结构

2.3 指令详解

2.3.1 v-cloak 指令

• 用于解决插值表达式的闪动问题
• 原理：先隐藏标签内容，待数据渲染后移除隐藏样式

2.3.2 v-text 指令

• 用于将数据内容渲染到 DOM 中
• 不会导致闪动问题
• 数据更新会同步到 DOM 中

2.3.3 v-html 指令

• 用于渲染 HTML 内容
• 注意安全性，避免使用未经信任的内容

2.3.4 v-pre 指令

• 跳过 Vue 编译过程，直接输出原始内容
• 适用于静态内容或性能敏感场景

2.3.5 v-once 指令

• 只编译一次，插值内容不再更新
• 适用于不需要动态更新的场景

2.3.6 v-model 双向绑定

• Vue 的核心指令，实现 MVVM 模型
• 支持输入绑定、动态更新等操作

3. 事件绑定

3.1 基本用法

   
  
    
    
     
      { {num} }
     
  
    
  
    
    
     点击
  
    
   

3.2 事件参数传递

   
  
    
    
     点击
  
    
   

3.3 事件修饰符

• .stop：阻止事件冒泡
• .prevent：阻止默认行为
• 按键修饰符：.enter、.esc、.delete 等

4. 属性绑定

4.1 简单绑定

跳转

4.2 动态绑定

跳转

5. 样式绑定

5.1 类型绑定

5.2 样式绑定

6. 分支结构

6.1 条件判断

   
    优秀
   
   
    良好
   
   
    一般
   

6.2 显示与隐藏

• v-show 与 v-if 的区别：
  • v-show 控制 CSS display 属性
  • v-if 控制 DOM 存在性

7. 循环结构

7.1 数组循环

   
  
    
{ {item} }
   

7.2 对象循环

   
    
  { {v + k + i} }
   

7.3 组合使用

注意：v-for 优先级高于 v-if

转载地址：http://vcsu.baihongyu.com/