Vue.js基础入门

Code知行合壹2026-01-06 13:31

文章目录

快速上手

Vue 是什么

Vue 是一个用于 构建用户界面的渐进式框架，极大提升开发效率

Vue 的两种使用方式：

  1. Vue 核心包开发，适用于局部模块改造
  2. Vue 核心包 & Vue 插件 工程化开发，适用于整站开发

创建 Vue 实例

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
</head>
<body>
    <!-- 
    创建Vue实例，初始化渲染
    1.准备容器（Vue所管理的范围）
    2.引包（开发版本包 / 生产版本包)
    3.创建实例
    4.添加配置项 => 完成渲染 -->
    <div id="app">
        {{ msg }}
    </div>
    <script>
        const app = new Vue({
            // 通过el配置选择器，制定Vue管理的是哪个盒子
            el: '#app',
            // 通过data提供渲染的数据
            data: {
                msg: 'Hello World'
            }
        })
    </script>
</body>
</html>

插值表达式

插值表达式是一种 Vue 的模板语法，利用表达式进行插值，渲染到页面中

表达式：是可以被求值的代码，JS引擎会将其计算出一个结果

语法：{{ 表达式 }}

注意：

1.使用的数据必须存在 （data）

2.支持的是表达式，而非语句，比如：if for

3.不能在标签属性中使用 {{ }} 插值，例如<div name="{{ username }}"></div>

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <p>{{ nickname }}</p>
        <p>{{ nickname.toUpperCase() }}</p>
        <p>{{ nickname + 'hello'}}</p>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                nickname: 'tony'
            }
        })
    </script>
</body>
</html>

响应式特性

数据改变，视图会自动更新，使用 Vue 开发，关注业务的核心逻辑，根据业务修改数据即可

开发者工具

安装 Vue 开发者工具Chrome浏览器插件，调试 Vue 应用

打开 Vue 运行的页面，调试工具中 Vue 栏，即可查看修改数据，进行调试。

指令

Vue 会根据不同的【指令】，针对标签实现不同的【功能】

指令：带有 v- 前缀的特殊标签属性

常用指令

指令 用途说明 示例
v-text 更新元素的文本内容（等价于 {{}} 插值，但不解析 HTML） <span v-text="msg">
v-html 更新元素的 innerHTML（注意 XSS 风险） <div v-html="htmlContent"></div>
v-show 根据表达式切换元素的 display CSS 属性（始终渲染 DOM） <div v-show="isVisible">Hello</div>
v-if / v-else-if / v-else 条件性地渲染元素（为 false 时不渲染 DOM） <div v-if="type === 'A'">A</div><div v-else>B</div>
v-for 基于源数据多次渲染元素或组件（支持数组、对象、数字） <li v-for="(item, index) in items" :key="item.id">{{ item.name }}</li>
v-on（简写 @） 绑定事件监听器 <button @click="handleClick">Click</button>
v-bind（简写 :） 动态绑定 HTML attribute 或组件 prop <img :src="imageUrl" :alt="imageAlt">
v-model 在表单控件或组件上创建双向数据绑定 <input v-model="message">
v-pre 跳过该元素及其子元素的编译（用于显示原始 Mustache 标签） <span v-pre>{{ this will not be compiled }}</span>
v-cloak 保持在元素上直到关联实例结束编译（常配合 CSS 隐藏未编译模板） <div v-cloak>{{ message }}</div>
v-once 只渲染元素和组件一次（后续更新不再响应） <span v-once>{{ msg }}</span>

指令修饰符

通过指令修饰符可实现一些处理，简化代码

v-on（事件）修饰符

修饰符 作用 示例
.stop 阻止事件冒泡（等价于 event.stopPropagation()） <div @click.stop="doThis"></div>
.prevent 阻止默认行为（等价于 event.preventDefault()） <form @submit.prevent="onSubmit"></form>
.capture 在捕获阶段触发事件处理函数 <div @click.capture="doThis">...</div>
.self 只有当事件是从该元素本身触发时才触发回调 <div @click.self="doThis">... </div>
.once 事件只触发一次 <button @click.once="doThis"> </button>
.passive 表示事件处理器不会调用 preventDefault()（提升滚动性能） <div @scroll.passive="onScroll"> </div>

可链式使用：@click.stop.prevent="handler"

v-model（表单）修饰符

修饰符 作用 示例
.lazy 将输入同步从 input 事件改为 change 事件（失焦或回车时更新） <input v-model.lazy="msg">
.number 自动将用户输入转为 Number 类型（若无法转换则返回原字符串） <input v-model.number="age">
.trim 自动去除用户输入的首尾空白 <input v-model.trim="name">

注意：.number 不会把空字符串转成 0，而是保留为空字符串。

v-bind 相关（Vue 3 新增）

修饰符 作用 示例 版本
.prop 强制绑定为 DOM property（而非 attribute） <div v-bind.prop="someObject"> Vue 2 支持
.attr 显式绑定为 HTML attribute（Vue 3.2+） <div v-bind.attr="attrs"> Vue 3.2+

实际开发中较少手动使用 .prop / .attr，多数情况 Vue 会自动判断。

键盘事件修饰符（用于 v-on）

修饰符 作用 示例
.enter 回车键 <input @keyup.enter="submit">
.tab Tab 键 <input @keydown.tab="onTab">
.delete 捕获"删除"和"退格"键 <input @keyup.delete="clear">
.esc Esc 键 <div @keyup.esc="close">
.space 空格键 <button @keydown.space="pause">
.up / .down / .left / .right 方向键 <input @keydown.up="moveUp">

也可使用按键码（Vue 2 支持，Vue 3 已废弃）；推荐使用上述别名。

可组合使用：@keyup.enter.exact（仅 Enter，不包含其他修饰键）

系统修饰键（用于 v-on）

用于检测是否按下了特定系统键（如 Ctrl、Alt 等）：

修饰符 作用 示例
.ctrl Ctrl 键 <input @keyup.ctrl.enter="submit">
.alt Alt 键 <button @click.alt="doSomething">
.shift Shift 键 <input @click.shift="selectRange">
.meta Meta 键（Mac 上是 ⌘，Windows 上是 Win 键） <input @keyup.meta.s="save">
.exact 仅当按下指定键、无其他键时才触发 <button @click.exact="onlyClick">

提示：在 Vue 3 中，所有事件修饰符的行为与 Vue 2 基本一致，但移除了对数字 keyCode 的支持。

v-bind 对于样式控制的增强

操作class

绑定方式 语法示例 特点 适用场景
对象语法 :class="{ active: isActive, 'text-danger': hasError }" 按布尔值动态开关类名 条件切换样式（如激活、错误状态）
数组语法 :class="[activeClass, errorClass]" 或 :class="[{ active: isActive }, baseClass]" 组合多个类，可嵌套对象 多个确定类 + 部分条件类
字符串/变量 :class="classString" （classString: 'active text-danger'） 直接绑定完整类字符串 简单场景，灵活性低（不推荐复杂逻辑）

操作style

js 复制代码 
v-bind:style="{ css属性名1: css属性值1, css属性名2: css属性值2}"

计算属性

基础语法

基于现有的数据，计算出来的新属性。依赖的数据变化，自动重新计算。

语法：

  1. 声明在computed 配置项中，一个计算属性对应一个函数
  2. 使用起来和普通属性一样使用 {{ 计算属性名}}

计算属性→ 可以将一段求值的代码进行封装

js 复制代码 
const app = new Vue({
     el: '#app',
     data: {
        list: [
            {id: 1, name: '篮球1', num: 1},
            {id: 2, name: '篮球2', num: 2},
            {id: 3, name: '篮球3', num: 3}
        ]
     },
     computed: {
        // totalCount() {
        //     let total = this.list.reduce((sum, item) => sum+item.num , 0)
        //     return total
        // }
        // 完整写法
        totalCount: {
            get() {
                let total = this.list.reduce((sum, item) => sum+item.num , 0)
                return total
            },
            set(value) {
                console.log('set');
            }
        }
     }
})

计算属性与方法

computed 计算属性

作用：封装了一段对于数据的处理，求得一个结果。计算属性会对计算出来的结果缓存，再次使用直接读取缓存，依赖项变化了，会自动重新计算→ 并再次缓存

语法：

  1. 写在computed配置项中
  2. 作为属性，直接使用→ this.计算属性、 {{ 计算属性 }}

methods 方法

作用：给实例提供一个方法，调用以处理业务逻辑。

语法：

  1. 写在methods 配置项中
  2. 作为方法，需要调用 → this.方法名( ) 、 {{ 方法名() }} 、 @事件名="方法名"

监听器

监听器用于监视数据变化，执行一些业务逻辑或异步操作。

语法：

  1. 简单写法 → 简单类型数据，直接监视
  2. 完整写法 → 添加额外配置项
js 复制代码 
const app = new Vue({
     el: '#app',
     data: {
        words: '',
        obj: {
            words: ''
        }
     },
     watch: {
        // 简单写法
        // 属性名(newValue, oldValue)
        // '对象.属性名'(newValue, oldValue)
        // 'obj.words'(newValue, oldValue) {
        //     console.log(newValue, oldValue);
        // },
        // 完整写法
        obj: {
            deep: true, //  对复杂类型深度监视
            immediate: true, //  初始化立刻执行一次handler方法
            handler(newValue, oldValue) {
                console.log(newValue["words"], oldValue["words"]);
                
            }
        }
     }
})

生命周期

四个阶段

Vue生命周期：一个Vue实例从创建到销毁的整个过程

生命周期四个阶段：①创建 ②挂载 ③更新 ④销毁

生命周期函数

js 复制代码 
const app = new Vue({
     el: '#app',
     data: {
        count: 100
     },
    //  1.创建阶段（准备数据）
    beforeCreate() {
        console.log('响应式数据准备好之前', this.count);
        
    },
    // 2.渲染阶段
    created() {
        console.log('响应式数据准备好之后', this.count);
        
    },
    beforeMount() {
        console.log('模板渲染好之前');
        
    },
    mounted() {
        console.log('模板渲染好之后');
        
    },
    // 3.更新阶段
    beforeUpdate() {
        console.log('beforeUpdate');
        
    },
    updated() {
        console.log('updated');
    },
    //4.销毁阶段
    beforeDestroy() {
        console.log('beforeDestroy');
    } ,
    destroyed() {
        console.log('destroyed');
        
    }
})
相关推荐
这个一个非常哈10 小时前
element之，自定义form的label
前端·javascript·vue.js
李瑞丰_liruifengv10 小时前
Claude Agent SDK 最简玩法：几行代码配合 Markdown 轻松搭建 Agent
javascript·人工智能·程序员
Hashan11 小时前
Vue 3 中 v-for 动态组件 ref 收集失败问题排查与解决
前端·vue.js·前端框架
bobringtheboys11 小时前
[el-tag]使用多个el-tag,自动判断内容是否超出
前端·javascript·vue.js
尽欢i11 小时前
用 return“瘦身“if-else：让代码少嵌套、好维护
前端·javascript
程序员Agions11 小时前
小程序"邪修"秘籍：那些官方文档不会告诉你的骚操作
前端·javascript
小白探索世界欧耶！~11 小时前
用iframe实现单个系统页面在多个系统中复用
开发语言·前端·javascript·vue.js·经验分享·笔记·iframe
一只爱吃糖的小羊12 小时前
从 AnyScript 到 TypeScript：如何利用 Type Guards 与 Type Predicates 实现精准的类型锁死
前端·javascript·typescript
持续升级打怪中12 小时前
ES6 Promise 完全指南：从入门到精通
前端·javascript·es6
AC赳赳老秦12 小时前
前端可视化组件开发：DeepSeek辅助Vue/React图表组件编写实战
前端·vue.js·人工智能·react.js·信息可视化·数据分析·deepseek
热门推荐
01GitHub 镜像站点02安娜的档案(Anna’s Archive) 镜像网站/国内最新可访问入口（持续更新）03Linux下V2Ray安装配置指南04手把手教你通过Gemini3 pro 学生认证，白用一年，手慢无！05Labelme从安装到标注：零基础完整指南06jdk21下载、安装（Windows、Linux、macOS）07GitLab 零基础入门指南：从安装到项目管理全流程08UV安装并设置国内源09【踩坑笔记】50系显卡适配的 PyTorch 安装102025-04-03 Latex学习1——本地配置Latex + VScode环境