Vue入门

最新推荐文章于 2025-07-31 16:12:34 发布
最新推荐文章于 2025-07-31 16:12:34 发布
阅读量803 收藏 21
点赞数 26
CC 4.0 BY-SA版权
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_63690570/article/details/148483412

  • Vue 是一套前端框架，免除原生JavaScript中的DOM操作，简化书写。

  • 基于MVVM(Model-View-ViewModel)思想，实现数据的双向绑定，将编程的关注点放在数据上。

  • 官网： Vue.js

框架：是一个半成品软件，是一套可重用的、通用的、软件基础代码模型。基于框架进行开发，更加快捷、更加高效。

Vue快速入门

vue入门

  • 新建HTML页面，引入Vue.js文件

<script src="js/vue.js"></script>

  • 在JS代码区域，创建Vue核心对象，定义数据模型

<script>
    new Vue({
        el: "#app",
        data: {
            message: "Hello Vue!"
        }
    })
</script>

  • 编写视图

<div id="app">
    <input type="text" v-model="message">
    {{ message }}
</div>

插值表达式：

  • 形式：{{表达式}}。

  • 内容可以是：

    • 变量

    • 三元运算符

    • 函数调用

    • 算术运算

Vue常用指令

指令：HTML 标签上带有 v- 前缀 的特殊属性，不同指令具有不同含义。例如：v-if，v-for…

常用指令：

指令作用
v-bind为HTML标签绑定属性值，如设置 href , css样式等
v-model在表单元素上创建双向数据绑定
v-on为HTML标签绑定事件
1. v-if 2. v-else-if 3. v-else条件性的渲染某元素，判定为true时渲染,否则不渲染
v-show根据条件展示某元素，区别在于切换的是display属性的值
v-for列表渲染，遍历容器的元素或者对象的属性

v-bind 和 v-model

v-bind

为HTML标签绑定属性值，如设置 href , css样式等

<a v-bind:href="url">传智教育</a> 
// 省略版
<a :href="url">传智教育</a>
<script>
  new Vue({
     el: "#app",
     data: {
        url: "https://www.itcast.cn"
     }
  })
</script>

v-model

在表单元素上创建双向数据绑定

<input type="text" v-model="url">

综合实例

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue-指令-v-bind</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
​
    <a v-bind:href="url">链接1</a>
    <a :href="url">链接2</a>
    
    <input type="text" v-model="url">
​
    </div>
</body>
<script>
    //定义Vue对象
    new Vue({
        el: "#app", //vue接管区域
        data:{
           url: "https://www.baidu.com"
        }
    })
</script>
</html>

结果，当修改括号中的地址，前面两个超链接的url也会随之改变：

v-on

为HTML标签绑定事件

<input type="button" value="按钮" v-on:click="handle()">

或者

<input type="button" value="按钮" @click="handle()">
<script>
    new Vue({
        el: "#app",
        data: {
    //...
        },
        methods: {
            handle:function(){
                alert('我被点击了');
            }
        },
    })
</script>

实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue-指令-v-on</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
​
        <input type="button" value="点我一下" v-on:click="handle()">
​
        <!-- <input type="button" value="点我一下" > -->
​
    </div>
</body>
<script>
    //定义Vue对象
    new Vue({
        el: "#app", //vue接管区域
        data:{
           
        },
        methods: {
            handle: function(){
                alert("你点我了一下...");
            }
        }
    })
</script>
</html>

v-if 和 v-show

指令作用
1. v-if 2. v-else-if 3. v-else条件性的渲染某元素，判定为true时渲染,否则不渲染
v-show根据条件展示某元素，区别在于切换的是display属性的值

v-if

年龄{{age}},经判定为:
<span v-if="age <= 35">年轻人</span>
<span v-else-if="age > 35 && age < 60">中年人</span>
<span v-else>老年人</span>

代码实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue-指令-v-if与v-show</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        
        年龄<input type="text" v-model="age">经判定,为:
        <span v-if="age <= 35">年轻人(35及以下)</span>
        <span v-else-if="age > 35 && age < 60">中年人(35-60)</span>
        <span v-else>老年人(60及以上)</span>
​
        <br><br>
​
    </div>
</body>
<script>
    //定义Vue对象
    new Vue({
        el: "#app", //vue接管区域
        data:{
           age: 20
        },
        methods: {
            
        }
    })
</script>
</html>

结果中，三个span标签，只显示符合结果的那个：

v-show

年龄{{age}},经判定为:
<span v-show="age <= 35">年轻人</span>

代码实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue-指令-v-if与v-show</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        
        年龄<input type="text" v-model="age">经判定,为:
        <span v-show="age <= 35">年轻人(35及以下)</span>
        <span v-show="age > 35 && age < 60">中年人(35-60)</span>
        <span v-show="age >= 60">老年人(60及以上)</span>
​
        <br><br>
​
    </div>
</body>
<script>
    //定义Vue对象
    new Vue({
        el: "#app", //vue接管区域
        data:{
           age: 20
        },
        methods: {
            
        }
    })
</script>
</html>

结果中，条件不成立也会渲染，但是通过css的样式display控制元素的展示：

v-for

列表渲染，遍历容器的元素或者对象的属性

<div v-for="addr in addrs">{{addr}}</div>
// 第一个参数 addr 代表遍历的元素，第二个参数 index 代表遍历的索引
<div v-for="(addr,index) in addrs">{{index + 1}} : {{addr}}</div>
data: {
   . . .
   addrs: ['北京','上海','广州','深圳','成都','杭州']
},

代码实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue-指令-v-for</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        
        <div v-for="addr in addrs">{{addr}}</div>
​
        <hr>
​
        <div v-for="(addr, index) in addrs">{{index + 1}} : {{addr}}</div>
​
    </div>
</body>
<script>
    //定义Vue对象
    new Vue({
        el: "#app", //vue接管区域
        data:{
           addrs:["北京", "上海", "西安", "成都", "深圳"]
        },
        methods: {
            
        }
    })
</script>
</html>

结果：

案例

通过Vue完成表格数据的渲染展示，将下面的数据渲染展示到表格当中

data: {
    users: [{
        name: "Tom",
        age: 20,
        gender: 1,
        score: 78
    },{
        name: "Rose",
        age: 18,
        gender: 2,
        score: 86
    },{
        name: "Jerry",
        age: 26,
        gender: 1,
        score: 90
    },{
        name: "Tony",
        age: 30,
        gender: 1,
        score: 52
    }]
}

代码实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue-指令-案例</title>
    <script src="js/vue.js"></script>
</head>
<body>
    
    <div id="app">
        
        <table border="1" cellspacing="0" width="60%">
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>成绩</th>
                <th>等级</th>
            </tr>
            
            <tr align="center" v-for="(user,index) in users">
                <td>{{index + 1}}</td>
                <td>{{user.name}}</td>
                <td>{{user.age}}</td>
                <td>
                    <span v-if="user.gender == 1">男</span>
                    <span v-if="user.gender == 2">女</span>
                </td>
                <td>{{user.score}}</td>
                <td>
                    <span v-if="user.score >= 85">优秀</span>
                    <span v-else-if="user.score >= 60">及格</span>
                    <span style="color: red;" v-else>不及格</span>
                </td>
            </tr>
        </table>
​
    </div>
​
</body>
​
<script>
    new Vue({
        el: "#app",
        data: {
            users: [{
                name: "Tom",
                age: 20,
                gender: 1,
                score: 78
            },{
                name: "Rose",
                age: 18,
                gender: 2,
                score: 86
            },{
                name: "Jerry",
                age: 26,
                gender: 1,
                score: 90
            },{
                name: "Tony",
                age: 30,
                gender: 1,
                score: 52
            }]
        },
        methods: {
            
        },
    })
</script>
</html>

结果：

Vue生命周期

生命周期：指一个对象从创建到销毁的整个过程。

生命周期的八个阶段：每触发一个生命周期事件，会自动执行一个生命周期方法(钩子)。

状态阶段周期
beforeCreate创建前
created创建后
beforeMount挂载前
mounted挂载完成
beforeUpdate更新前
updated更新后
beforeDestroy销毁前
destroyed销毁后

mounted：挂载完成，Vue初始化成功，HTML页面渲染成功。（发送请求到服务端，加载数据）

  • <script>
    new Vue({
        el: "#app",
        data: {
            
        },
        mounted() {
            console.log("Vue挂载完毕,发送请求获取数据");
        },
        methods: {
           
        },
    })
</script>

  • 代码实例

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue-指令-v-for</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
​
    </div>
</body>
<script>
    //定义Vue对象
    new Vue({
        el: "#app", //vue接管区域
        data:{
           
        },
        methods: {
            
        },
        mounted () {
            alert("vue挂载完成,发送请求到服务端")
        }
    })
</script>
</html>

总结

  1. Vue是什么？

    Vue是一个基于MVVM模型的前端js框架。

  2. Vue常用指令?

    v-bind、v-model、v-on、v-if、v-show、v-for

  3. Vue生命周期?

    mounted

Qian Xiaoo
关注
Vue 基础入门
我的的博客哦
05-17 2万+
🔰Vue 是 一 套用于动态构建用户界面的渐进式JavaScript框架。🔰特点：采用组件化模式，提高代码复用率，且让代码更好维护。声明式编码，让编码人员无需直接操作DOM，提高开发效率。使用虚拟DOM+优秀的Diff算法，尽量复用DOM节点。
Vue框架快速上手
m0_63450142的博客
05-27 245
Vue是一套用于构建用户界面的渐进式框架。Vue.js提供了MVVM数据绑定和一个可组合的组件系统，具有简单、灵活的API。其目标是通过尽可能简单的API实现响应式的数据绑定和可组合的视图组件。
vue入门
weixin_42795092的博客
09-23 1928
官方给出的概念：Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的前端框架。
Vue学习-Vue入门
weixin_59357453的博客
04-02 4505
这是一篇vue学习记录
Vue基础知识总结 1：Vue入门
热门推荐
学Java，找哪吒
06-23 8万+
Vue基础教程系列，打造精品专栏。
Vue入门——初步了解
秋书一叶的博客
11-25 3612
Vue的简单介绍及快速入门
vue入门小练习
wu1113_的博客
09-21 1985
vue入门小练习
Vue入门教程
tttalk的博客
12-23 5329
一、Vue介绍 简介：Vue.js（ /vjuː/） 是一套构建用户界面的渐进式框架, Vue只关注视图层， 采用自底向上增量开发的设计。 特点：响应式编程、组件化。 优势:轻量级框架、简单易学、双向数据绑定、组件化、数据和结构的分离、虚拟DOM、运行速度快。 注：这里是基于Vue2的教程，现在已经出了Vue3,但是还没完全普及，并且Vue3基本兼容Vue2，所以可以先学Vue2，再去了解Vue3的更新，后面会更新这部分内容。 二、安装 一般有三种方式：本地下载、CDN和NPM(推荐)。 1.本地下载地址：
vue 快速入门
2301_80035594的博客
11-03 2807
Vue.js（通常简称为 Vue）是一个开源的JavaScript框架，用于构建用户界面和单页面应用程序（SPA）。
Vue入门学习小案例-小王记事本
04-05
Vue入门学习小案例-小王记事本 Vue入门学习小案例-小王记事本 Vue入门学习小案例-小王记事本 Vue入门学习小案例-小王记事本 Vue入门学习小案例-小王记事本 Vue入门学习小案例-小王记事本 Vue入门学习小案例-小王...
vue入门知识PPT
03-26
在本Vue入门知识PPT中，作者分享了一些基础到进阶的知识点，帮助初学者快速掌握Vue。 一、Vue的基本结构 Vue应用由一个根Vue实例构成，通过`new Vue()`来创建。在这个实例中，我们可以定义数据、方法、计算属性和...
vue入门.pdf
10-10
vue从安装到入门, 1,安装环境:node.js(vue开发必须的环境) 2,使用淘宝镜像,(加快速度的) 3,vue的几种安装方法, 4,vue的几大组件 5,vue的基本方法的使用的讲解demo 6,入门
ppt课件-第1章 Vue入门.zip
03-22
本课件“ppt课件-第1章 Vue入门.zip”是针对初学者设计的，旨在帮助学习者快速掌握Vue的基础知识和核心概念。 在Vue.js中，主要知识点包括： 1. **MVVM模式**：Vue采用Model-View-ViewModel架构，提供数据绑定和...
VUE入门
06-20
在“VUE入门”这门课程中，你将深入学习Vue的核心概念和技术，以便将它有效地应用到实际项目中。 首先，我们要理解Vue的**双向数据绑定**。这是Vue的一大亮点，它使得视图与模型之间的数据自动同步。Vue通过`v-...
Vue3 中 toValue 与 unref 深度解析：异同、场景与最佳实践
前端知识分享喵
07-30 896
Vue3中的toValue和unref都是响应式数据解包工具，但存在关键差异：unref仅解包ref对象，而toValue在unref基础上增加了对函数类型的支持，会自动执行函数并返回结果。toValue更适合处理动态计算和多种输入类型的场景，如组合式函数参数标准化；unref则在简单解包和性能敏感场景更具优势。开发者需注意两者对reactive对象和函数参数的不同处理方式，根据实际需求选择合适工具。
Vue.js 完全指南：从入门到精通
imlsp12356的博客
07-29 842
Vue.js 是一个渐进式 JavaScript 框架，用于构建用户界面。与其他大型框架不同，Vue 被设计为可以逐步采用 —— 你可以只使用它的核心库（视图层），也可以结合其生态系统（路由、状态管理等）构建复杂应用。响应式数据绑定组件化开发虚拟 DOM指令系统过渡动画系统Vue.js 凭借其易学易用、灵活高效的特点，成为前端开发的首选框架之一。从简单的交互组件到复杂的单页应用，Vue 都能胜任。
Vue 中使用 Dexie.js
最新发布
欢迎大家一起攻克bug
07-31 304
本文介绍了如何在Vue项目中使用Dexie.js实现客户端数据存储的方案。主要内容包括：1）Dexie.js的安装与数据库初始化配置；2）在Vue组件中实现CRUD操作；3）创建Vue插件形式全局使用数据库；4）高级功能如响应式数据绑定、分页查询和事务处理；5）最佳实践包括错误处理、性能优化和数据库升级；6）完整的Todo应用示例。文章展示了Dexie.js与Vue结合能有效构建离线优先的应用程序，提供良好的用户体验。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值