Vue 基础入门教程（一） | 极客日志

JavaScript大前端

Vue 基础入门教程（一）

综述由AI生成Vue 是一套渐进式 JavaScript 框架，用于动态构建用户界面。内容涵盖 Vue 核心概念、HelloWorld 示例、v-bind 与 v-model 指令、el 与 data 配置方式、Object.defineProperty 原理、事件处理及修饰符、计算属性等。通过代码示例演示了数据绑定、事件监听和计算属性的实现方法，帮助开发者快速掌握 Vue 基础语法与工作原理。

MqEngine发布于 2025/1/19更新于 2026/6/320 浏览

1，Vue 介绍

1.1，介绍

Vue 是一套用来动态构建用户界面的渐进式 JavaScript 框架。

构建用户界面：把数据通过某种办法变成用户界面
渐进式：Vue 可以自底向上逐层的应用，简单应用只需要一个轻量小巧的核心库，复杂应用可以引入各式各样的 Vue 插件

1.2，特点

采用组件化模式，提高代码复用率、且让代码更好维护
使用虚拟 DOM 和 Diff 算法，尽量复用 DOM 节点。如果数据修改，不需要重新拼串，在虚拟 DOM 层会通过 Diff 算法比较与原数据的差异，从而复用原数据
声明式编码，让编码人员无需直接操作 DOM，提高开发效率，不需要像命令式编码一样将每一步操作都通过代码编写

2，HelloWorld

首先需要引入 Vue，通过本地文件引入，或通过网络引入：https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js
想要让 Vue 工作，就需要创建一个 Vue 实例，给这个实例传入一些数据，比如 data（定义数据）、methods（定义方法）等，并将这个实例绑定给页面的 div 标签（称为容器）
在容器的标签中通过 {{}} （插值表达式）编写 JS 表达式可以直接获取 data 中的数据，一旦 data 中的数据发生改变，那么页面中用到该数据的地方也会自动更新

2.1 代码示例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>初识 Vue</title>
    <!-- 通过网络引入 Vue -->
    <script type="text/javascript" src="./js/vue-2.5.17.js"></script>
</head>
<body>
    <!-- 准备好一个容器 -->
    <div id="root">
        <!-- 获取 Vue 实例中 data 中的数据 -->
        <h1>Hello，{{name}}，{{address}}

相关免费在线工具

Keycode 信息
查找任何按下的键的javascript键代码、代码、位置和修饰符。在线工具，Keycode 信息在线工具，online
Escape 与 Native 编解码
JavaScript 字符串转义/反转义；Java 风格 \uXXXX（Native2Ascii）编码与解码。在线工具，Escape 与 Native 编解码在线工具，online
JavaScript / HTML 格式化
使用 Prettier 在浏览器内格式化 JavaScript 或 HTML 片段。在线工具，JavaScript / HTML 格式化在线工具，online
JavaScript 压缩与混淆
Terser 压缩、变量名混淆，或 javascript-obfuscator 高强度混淆（体积会增大）。在线工具，JavaScript 压缩与混淆在线工具，online
Base64 字符串编码/解码
将字符串编码和解码为其 Base64 格式表示形式即可。在线工具，Base64 字符串编码/解码在线工具，online
Base64 文件转换器
将字符串、文件或图像转换为其 Base64 表示形式。在线工具，Base64 文件转换器在线工具，online

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-bind</title>
    <!-- 通过网络引入 Vue -->
    <script type="text/javascript" src="./js/vue-2.5.17.js"></script>
</head>
<body>
    <div id="root">
        <!-- 插值表达式获取 data 中的属性值 -->
        <h3>你好，{{name}}</h3>
        <!-- 单向绑定 data 中的属性值赋值给 href 属性 -->
        <a v-bind:href="school.url.toUpperCase()">点我去{{school.name}}学习</a>
        <!-- 简写方式 -->
        <a :href="school.url">点我去学习</a>
    </div>
    <script type="text/javascript">
        //阻止 vue 在启动时生成生产提示
        Vue.config.productionTip = false
        new Vue({
            el:'#root',
            data:{
                name:'Jack',
                school:{
                    name:'霍格沃茨',
                    url:'http://www.baidu.com',
                }
            }
        })
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-model</title>
    <!-- 通过网络引入 Vue -->
    <script type="text/javascript" src="./js/vue-2.5.17.js"></script>
</head>
<body>
    <div id="root">
        <!-- 普通写法 -->
        双向数据绑定：<input type="text" v-model:value="name"><br/>
        <!-- 简写 -->
        双向数据绑定：<input type="text" v-model="name"><br/>
        <div>data 属性的值：{{name}}</div>
    </div>
</body>
<script type="text/javascript">
    new Vue({
        el:'#root',
        data:{
            name:'Bruno Mars'
        }
    })
</script>
</html>

new Vue({
    el: '#root', //绑定 id 为 root 的容器
    data: { //定义数据
    }
})

const vm = new Vue({
    data: { //定义数据
    }
})
vm.$mount('#root') //绑定 id 为 root 的容器

new Vue({
    el: '#root', //定义 data 对象，然后在其中定义属性
    data: {
        name:'Nicki Minaj'
    }
})

new Vue({
    el: '#root', //定义 data 函数，然后在返回值中定义属性
    data(){
        return{
            //返回值是定义的数据
            name:'Nicki Minaj'
        }
    }
})

let number = 18
let person = {
    name:'张三',
    sex:'男',
    age:number //age 值为 18
}

let person = {
    name:'张三',
    sex:'男',
}
Object.defineProperty(person,'age',{
    value:18, //这个属性值为 18
    enumerable:true, //控制属性是否可以枚举（被遍历），默认值是 false
    writable:true, //控制属性是否可以被修改，默认值是 false
    configurable:true //控制属性是否可以被删除，默认值是 false
})

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
</body>
<script type="text/javascript">
    let number = 12
    let person = {
        name:'张三',
        sex:'男',
    }
    Object.defineProperty(person,'age',{
        //当有人读取 person 的 age 属性时，get 函数（getter）就会被调用，且返回值就是 age 此时的值
        get(){
            console.log('有人读取 age 属性，get 方法被调用')
            return number //返回定义的 number 变量值
        },
        //当有人修改 person 的 age 属性时，set 函数（setter）就会被调用，且参数是要赋予 age 属性的值
        set(value){
            console.log('有人修改 age 属性，set 方法被调用，修改值为',value)
            //age 的值取决于 number，修改 number 的值就可以修改 age 的值
            //并没有直接修改 age 属性值
            number = value
        }
    })
</script>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-model</title>
    <!-- 通过网络引入 Vue -->
    <script type="text/javascript" src="./js/vue-2.5.17.js"></script>
</head>
<body>
    <div id="root">
        <h2>欢迎来到{{name}}学习</h2>
        <!-- 调用函数时没有传递任何参数 -->
        <button @click="showInfo1">点我提示信息 1</button>
    </div>
</body>
<script type="text/javascript">
    const vm = new Vue({
        el:'#root',
        data:{
            name:'霍格沃茨',
        },
        //定义的方法要写在 methods 对象中
        methods:{
            showInfo1(event){
                //event 表示事件对象，target 表示发生这个事件时的标签
                //event 可以更改成其他的任何字母（都表示事件对象）
                console.log(event.target) //innerText 表示标签中的文本
                console.log(event.target.innerText)
            },
        }
    })
</script>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-model</title>
    <!-- 通过网络引入 Vue -->
    <script type="text/javascript" src="./js/vue-2.5.17.js"></script>
</head>
<body>
    <div id="root">
        <h2>欢迎来到{{name}}学习</h2>
        <!-- 调用函数时没有传递任何参数 -->
        <button @click="showInfo1($event, 22)">点我提示信息 1</button>
    </div>
</body>
<script type="text/javascript">
    const vm = new Vue({
        el:'#root',
        data:{
            name:'霍格沃茨',
        },
        //定义的方法要写在 methods 对象中
        methods: {
            showInfo1(event, number) {
                // event 表示事件对象，number 表示接收的实参
                console.log(event.target)
                console.log('参数数字是' + number)
            },
        }
    })
</script>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-model</title>
    <!-- 通过网络引入 Vue -->
    <script type="text/javascript" src="./js/vue-2.5.17.js"></script>
</head>
<body>
    <div id="root">
        <h2>欢迎来到{{name}}学习</h2>
        <!-- a 标签的默认行为是跳转到指定的页面，prevent 阻止跳转，只执行函数 -->
        <a href="http://www.baidu.com" @click.prevent="showInfo">点我提示信息</a>
    </div>
</body>
<script type="text/javascript">
    const vm = new Vue({
        el:'#root',
        data:{
            name:'霍格沃茨',
        },
        //定义的方法要写在 methods 对象中
        methods: {
            showInfo1(event, number) {
                // event 表示事件对象，number 表示接收的实参
                console.log(event.target)
                console.log('参数数字是' + number)
            },
        }
    })
</script>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-model</title>
    <!-- 通过网络引入 Vue -->
    <script type="text/javascript" src="./js/vue-2.5.17.js"></script>
</head>
<body>
    <div id="root">
        <h2>欢迎来到{{name}}学习</h2>
        <!-- div 标签是外层标签，拥有与内层标签一致的点击事件 -->
        <div @click = "showInfo2">
            <!-- 默认点击按钮之后，内部标签的事件触发，外部标签的事件也会随之触发（事件冒泡） -->
            <!-- 使用 stop 阻止了事件冒泡，不会触发外层标签的同一事件 -->
            <button @click.stop = "showInfo"> 按钮 </button>
        </div>
    </div>
</body>
<script type="text/javascript">
    new Vue({
        el:'#root',
        data:{
            name:'霍格沃茨'
        },
        methods:{
            showInfo(){ alert('showInfo 同学你好！') },
            showInfo2(){ alert('showInfo2 同学你好！') }
        }
    })
</script>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-model</title>
    <!-- 通过网络引入 Vue -->
    <script type="text/javascript" src="./js/vue-2.5.17.js"></script>
</head>
<body>
    <div id="root">
        <h2>欢迎来到{{name}}学习</h2>
        <div>
            <!-- 事件只会执行一次，之后再点击也不会触发事件了 -->
            <button @click.once="showInfo"> 按钮 </button>
        </div>
    </div>
</body>
<script type="text/javascript">
    new Vue({
        el:'#root',
        data:{
            name:'霍格沃茨'
        },
        methods:{
            showInfo(){ alert('showInfo 同学你好！') },
        }
    })
</script>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 通过网络引入 Vue -->
    <script type="text/javascript" src="./js/vue-2.5.17.js"></script>
</head>
<body>
    <div id="root">
        <!-- 只有按下并抬起回车键后才会执行对应的方法 -->
        <input type="text" placeholder="请按下对应的按键" @keyup.enter="showInfo"></input>
    </div>
</body>
<script type="text/javascript">
    new Vue({
        el:'#root',
        methods:{
            // event 是事件对象
            showInfo(event){
                //获取按键名
                console.log(event.key)
                //获取按键编码
                console.log(event.keyCode)
            }
        }
    })
</script>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 通过网络引入 Vue -->
    <script type="text/javascript" src="./js/vue-2.5.17.js"></script>
</head>
<body>
    <div id="root">
        姓：<input type="text" v-model="firstName">
        <br/><br/>
        名：<input type="text" v-model="lastName">
        <br/><br/>
        <!-- 调用两次计算属性 -->
        全名：<span>{{fullName}}</span>
        <br/><br/>
        全名：<span>{{fullName}}</span>
    </div>
</body>
<script type="text/javascript">
    const vm = new Vue({
        el:'#root',
        data:{
            firstName:'张',
            lastName:'三',
        },
        methods: {},
        // 定义计算属性必须使用 computed 对象
        computed:{
            // 一个新的属性 fullName，需要通过已有的属性计算出来
            fullName:{
                // 读取计算属性的值
                get(){
                    console.log('计算属性被调用了')
                    // this 表示 Vue 实例，读取 data 中的属性
                    // 计算属性 fullName 依赖已有的属性
                    return this.firstName + '-' + this.lastName
                },
                // 修改计算属性的值
                set(value){
                    console.log('set',value)
                    const arr = value.split('-')
                    // 修改 data 中的属性（依赖的已有属性）
                    this.firstName = arr[0]
                    this.lastName = arr[1]
                }
            }
        }
    })
</script>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 通过网络引入 Vue -->
    <script type="text/javascript" src="./js/vue-2.5.17.js"></script>
</head>
<body>
    <div id="root">
        姓：<input type="text" v-model="firstName">
        <br/><br/>
        名：<input type="text" v-model="lastName">
        <br/><br/>
        <!-- 调用两次计算属性 -->
        全名：<span>{{fullName}}</span>
        <br/><br/>
        全名：<span>{{fullName}}</span>
    </div>
</body>
<script type="text/javascript">
    const vm = new Vue({
        el:'#root',
        data:{
            firstName:'张',
            lastName:'三',
        },
        methods: {},
        computed:{
            //完整写法
            /*
            fullName:{
                get(){
                    console.log('get 被调用了')
                    return this.firstName + '-' + this.lastName
                }
            }
            */
            //简写
            //fullName 直接当作 get 方法来用
            fullName(){
                console.log('get 被调用了')
                return this.firstName + '-' + this.lastName
            }
        }
    })
</script>
</html>

Vue 基础入门教程（一）

1，Vue 介绍

1.1，介绍

1.2，特点

2，HelloWorld

2.1 代码示例：

微信扫一扫，关注极客日志

更多推荐文章

相关免费在线工具

3，v-bind 指令

3.1，基本语法：

3.2，简写：

3.3，代码示例：

4，v-model 指令

4.1，基本语法：

4.2，简写：

4.3，代码示例：

5，el 与 data 的两种写法

5.1，el 的两种写法

5.1.1，第一种写法

5.1.2，第二种写法

5.2，data 的两种写法

5.2.1，对象式

5.2.2，函数式

6，Object.defineProperty 方法

6.1，方法介绍

6.2，代码示例：

6.4，get()、set() 方法：

7，事件处理

7.1，基本使用

7.1.1，基本语法：

7.1.2，简写：

7.1.3，代码示例：

7.2，$event

7.2.1，代码示例：

7.2.2，总结

7.3，事件修饰符

7.3.1，事件修饰符有 6 种：

7.3.2，prevent 事件

7.3.3，stop 事件

7.3.4，once 事件

7.4，按键修饰符

7.4.1，使用方式：

7.4.2，作用：

7.4.3，常用的按键修饰符有 9 个

8，计算属性

8.1，基本概念

8.1.1，代码示例：

8.1.2，运行结果：

8.2，简写形式

8.2.1 代码示例：

微信扫一扫，关注极客日志

更多推荐文章

相关免费在线工具