vue初级

最新推荐文章于 2025-12-18 14:39:46 发布
原创 最新推荐文章于 2025-12-18 14:39:46 发布 · 624 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #javascript #前端

本文档是Vue.js的初级教程，介绍了Vue的基本概念和渐进式框架的特点。内容包括Vue的创建工程、导入资源，详细讲解了Vue的入门案例，如文本插值、表单绑定、条件判断等核心指令的使用。此外，还涵盖了Vue的生命周期和异步操作，适合前端初学者入门。

Vue快速入门

Vue介绍

在互联网产品快速迭代的背景下，前端开发人员不仅要编写页面，还要通过ajax+js完成页面动态效果，压力较大。

为了解决这个问题，一款前端的渐进式框架==Vue==就诞生了。

==渐进式框架==：一个前端项目可以使用vue一两个特性，也可以整个项目都用vue。

入门案例

需求：视图Div获取input中输入的文字

创建工程

导入资源

js代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>01-入门案例</title>
​
</head>
<body>
    <h3>获取input中输入的文字</h3>
    <input type="text" id="myInput">
    <div style="border:red 1px solid; height: 25px;" id="myDiv"></div>
    <script>
        // 给input绑定键盘弹起事件
        document.getElementById('myInput').onkeyup=function () {
            // 获取input文本框的值
            let val = this.value;
            // 显示到div中
            document.getElementById('myDiv').innerHTML=val;
        }
    </script>
​
</body>
</html>

vue代码

视图：负责页面渲染，主要由HTML+CSS构成。脚本：负责业务数据模型（Model）以及数据的处理逻辑。

步骤：

  1. 引入vue的js类库

  2. 编写视图

  3. 编写脚本

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>01-入门案例</title>
​
    <!--1.引入vue的js类库-->
    <script src="../js/vue-2.6.12.js"></script>
</head>
<body>
<!--2.将视图交给vue管理-->
<div id="app">
    <h3>获取input中输入的文字</h3>
    <input type="text" v-model="message">
    <div style="border:red 1px solid; height: 25px;">{{message}}</div>
</div>
​
<!--3.将js脚本vue管理-->
<script>
    const app = new Vue({
        el: '#app', // 管理视图，通过css选择器
        data:{  // 管理js变量（模型）
            message:''
        },
        methods:{ // 管理js方法（函数）
​
        }
    });
</script>
​
</body>
</html>

入门详解

  • html视图：视图用于展示Vue模型中的数据，定义时必须使用双标签

  • ==注意：不能使用body标签，通过使用div==

    <div id="app"></div>

  • Vue 核心对象：每一个 Vue 程序都是从一个 Vue 核心对象开始的。

    let app = new Vue({
 选项列表;
});

  • 选项列表

    1. el选项：指定的vue控制视图区域。(根据css选择器获取)
​
2. data选项：用于保存当前Vue对象中的数据。支持js的各种数据类型
​
3. methods选项：用于定义方法。方法可以直接通过对象名调用，或者用this来调用(代表当前Vue对象)。

  • 数据绑定

    * 在视图部分获取脚本部分的数据: {{插值表达式}}

Vue常用指令【重点】

  • 指令：是带有 v- 前缀的特殊属性，不同指令具有不同含义。例如 v-html，v-if，v-for。

  • 使用指令时，通常编写在标签的属性上，值（内容）可以使用 JS 的表达式。

  • 常用指令:

文本插值

  • {{插值表达式}}：将数据输出到页面视图中

  • v-text：将数据输出到元素内部，如果输出的数据有HTML代码，会作为普通文本输出

  • v-html：将数据输出到元素内部，如果输出的数据有HTML代码，会被渲染

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue-2.6.12.js"></script>
​
</head>
<body>
<div id="app">
​
    <!--
        {{插值表达式}}：展示vue管理的变量
            缺点：网络波动，在等待期间直接显示插值表达式原文
        v-text：相当于js中innerText（文本）
        v-html：相当于js中innterHTML（超文本）
    -->
    插值表达式：{{message}} <br>
    v-text：<span v-text="message"></span> <br>
    v-html：<span v-html="message"></span> <br>
​
</div>
<script>
    setTimeout(function () {
        const app = new Vue({
            el:'#app', // 管理视图
            data:{ // 管理变量
                message:'<b>哈哈哈~~~</b>'
            },
            methods:{ // 管理方法
​
            }
        });
    },2000)
​
</script>
</body>
</html>

表单绑定

==表单：采集用户输入的数据，发送给服务器端==

* 插值表达式(包括v-text和v-html)可以看做是单向绑定，数据影响了视图渲染，但是反过来就不行
​
* v-model是双向绑定，视图（View）和模型（Model）之间会互相影响
​
* 目前v-model的可使用元素有：input、select、textarea
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue-2.6.12.js"></script>
​
</head>
<body>
<div id="app">
​
    <h3>姓名：</h3>
    <input type="text" v-model="username">
    <div>您写的姓名是:{{username}}</div>
​
​
    <h3>性别：</h3>
    <input type="radio" value="男" v-model="gender"> 男 <br>
    <input type="radio" value="女" v-model="gender"> 女 <br>
    <div>您选择的性别是:{{gender}}</div>
​
​
    <h3>爱好：</h3>
    <input type="checkbox" value="抽烟" v-model="hobbies">抽烟<br>
    <input type="checkbox" value="喝酒" v-model="hobbies">喝酒<br>
    <input type="checkbox" value="烫头" v-model="hobbies">烫头<br>
    <div>您选择的爱好是:{{hobbies}}</div>
​
​
    <h3>段位：</h3>
    <select v-model="level">
        <option value="">请选择</option>
        <option value="青铜">青铜</option>
        <option value="白银">白银</option>
        <option value="王者">王者</option>
    </select>
    <div>您选择的段位是:{{level}}</div>
​
​
</div>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            username:'', // 用户名
            gender:'', // 性别
            hobbies:[],// 爱好
            level:'' // 段位
        }
​
    })
</script>
</body>
</html>

小结

  1. 单向绑定：vue管理的模型修改，视图也就同步修改了

  2. 双向绑定：vue管理的视图（input、select、textarea）和模型，可以相互影响

绑定属性

* 对于HTML标签属性，如果想要动态传值，不能使用{{}}，而应该使用专门的属性绑定语法
    标准语法：   v-bind:属性名="Vue中的变量"
    简写语法：         :属性名='Vue中的变量'
<!DOCTYPE html>
<html lang="zh-CN" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue-2.6.12.js"></script>
​
</head>
<body>
<div id="app">
​
    <h3>属性绑定基本使用</h3>
    改变图片的地址和大小<br>
    图片地址:
    <select v-model="imgSrc">
        <option value="../img/vue.png">vue</option>
        <option value="../img/lj.jpg">雷军</option>
    </select>
    图片宽度: <input type="text" v-model="imgWidth">
    <br>
    <img v-bind:src="imgSrc" :width="imgWidth">
​
</div>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            imgSrc: "../img/vue.png",
            imgWidth: "100px"
        },
    })
</script>
</body>
</html>

列表循环

* 在vue中使用v-for实现数组的遍历，格式如下:
* v-for="(item,index) in items"
    items：要遍历的List
    item： 每次遍历得到的临时变量
    index：每次遍历的索引，从0开始计数(可省略)
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue-2.6.12.js"></script>
</head>
<body>
<div id="app">
​
    <!--
        for循环
            1）简单： user in userList
            2）完整：(user,index) in userList
    -->
    <ul>
        <li v-for="(user,index) in userList">{{user.name}} -- {{index}}</li>
    </ul>
</div>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            userList: [
                {id: 1, name: 'jack', address: '北京昌平'},
                {id: 2, name: 'lucy', address: '上海虹桥'},
                {id: 3, name: 'jerry', address: '天津宝坻'}
            ]
        }
    })
</script>
</body>
</html>

条件判断

* 语法：
    v-if="布尔表达式"
    v-else-if="布尔表达式"
    v-else
* 注意：
    v-else元素必须紧跟在带v-if或者v-else-if元素的后面，否则它将不会被识别
    v-if还可以和v-for联合使用，当二者出现在一起时，会先遍历再判断条件
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue-2.6.12.js"></script>
​
</head>
<body>
<div id="app">
    <!--从文本框输入成绩, 然后判断成绩是否及格  >=80：优秀 、60>=：及格   <60：不及格-->
    <h3>考试成绩练习</h3>
    请输入成绩:<input type="text" v-model="score"><br>
    你本次考试成绩:
    <span v-if="score>=80">优秀</span>
    <span v-else-if="score>=60">及格</span>
    <span v-else>不及格</span>
​
​
    <!--遍历users, 但是要求只显示性别为女的用户-->
​
    <!--
        v-if：如果满足条件显示，不满足不显示（页面不会渲染元素）
        v-show：如果满足调节键显示，不满足不显示（页面会渲染元素）
    -->
    <h3>用户列表</h3>
    <ul>
        <li v-for="user in users" v-if="user.gender=='女'">{{user}}</li>
    </ul>
​
    <ul>
        <li v-for="user in users" v-show="user.gender=='女'">{{user}}</li>
    </ul>
​
​
</div>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            score: 15,
            users: [
                {name: 'jack', gender: '女'},
                {name: 'lucy', gender: '女'},
                {name: 'jerry', gender: '男'}
            ]
        }
    })
</script>
</body>
</html>

事件绑定

* 事件绑定
    1) 标准语法   v-on:事件名="js片段或函数名"   如果不想页面爆红,需要单独引入名称空间
    2) 简化语法   @事件名="js片段或函数名"       推荐使用
<!DOCTYPE html>
<html lang="zh-CN" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue-2.6.12.js"></script>
​
</head>
<body>
<div id="app">
    <b>数量：</b>
    <button @click="diff()">-</button>
    <span>{{num}}</span>
    <button v-on:click="num++">+</button>
</div>
<script>
    const app = new Vue({
        el: '#app',
        data: {// 成员变量
            num: 1
        },
        methods:{ // 定义方法
            diff(){
                console.log(this.num); // 输出成员变量
                if (this.num > 1) {
                    this.num--;
                }
            }
        }
    })
</script>
</body>
</html>

知识小结

<!--Vue对象模板-->
<script>
    const app = new Vue({
        el: "#app",// 管理视图（html+css）
        data: {}, // 管理模型（数据）
        methods: {} // 管理方法（函数）
    });
</script>
​
1. 单方向赋值
    html文本: <span v-text="" v-html="">{{插值表达式}}</span>
    html属性: <img :src="vue变量"/>
​
2. 双向绑定
    <input type="text" v-model="vue变量"/>
​
3. 遍历循环
    <li v-for="(item,index) in list"></li>
​
4. 判断
    <span v-if="表达式1"></span>
    <span v-else-if="表达式2"></span>
    <span v-else></span>
​
5. 事件绑定
    <a @click="js代码或函数"></a>

Vue高级使用【理解】

生命周期

生命周期经历的八个阶段

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue-2.6.12.js"></script>
</head>
<body>
<div id="app">
​
</div>
<script>
    const app = new Vue({
        el: '#app',
        data: {
​
        },
        methods: {
            find(){
                alert('查询后台数据。。。')
            }
        },
        // created是vue生命周期创建后触发的函数，与methods同级
        created(){
            // 类似于 window.onload
           this.find();
        }
​
    })
</script>
</body>
</html>

Vue异步操作

在Vue中发送异步请求，本质上还是AJAX。我们可以使用axios这个插件来简化操作！

常用方法

// 执行get请求
axios.get('/url?name=admin&password=123').then(resp=>{
    console.log(resp.data);
})
​
​
// 执行get请求参数比较多的时候
axios.get('/url',{
    params:{
        name: 'admin',
        password: '123'
    }
}).then(resp=>{
    console.log(resp.data);
})
​
​
//执行post请求
axios.post('/url', {
    name: 'admin',
    password: '123'
}).then(resp=>{
    console.log(resp.data);
})

Vue概念

* MVVM是Model-View-ViewModel的简写，它本质上就是MVC的改进版；MVVM就是将其中的View的状态和行为抽象化，让我们将视图UI和业务逻辑分开。
    - M： 即Model，模型，指的就是数据
    - V： 即View， 视图，指的就是页面
    - VM：即View-Model，指的是模型和数据的双向绑定(即view和Model互相影响，Model变了，view随之改变；view变了，Model也随之改变)
    
* MVC和MVVM的使用区别
    在MVC模式中，
        开发人员需要从后端获取到数据(Model)，然后通过操作DOM渲染视图(View)。
        如果用户改变了视图(view)，开发人员还需要再通过DOM获取改变之后的数据，同步到Model中。
    在MVVM模式中，
        Model和View是绑定的，Model变了，view自动变化；view变了，Model自动变化。
        因此，程序员只需要关注Model即可。
        
* 基于MVVM模式的前端框架三巨头：Vue、React、AngularJS

Alexuuu
关注
全网最新的vue.js下载和安装的3种方法(2023年）
念兮为美
03-08 2万+
全网最新的vue.js下载和安装的3种方法(2023年），比如官网直接下载vue.js源代码，使用npm install下载，使用使用bower下载，以及Windows系统如何下载bower
vue.js2.6.12下载
09-30
vue.js2.6.12下载，只需引用该js到项目中，就可以使用vue了....................................
Vue.jsv2.6.12.rar
05-07
Vue.jsv2.6.12.rar
Vue.js v2.6.7
02-24
Vue.js v2.6.7 脚本 Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的渐进式框架。 Vue 只关注视图层， 采用自底向上增量开发的设计。 Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
vue v2.6.12 前端框架
03-14
前端框架vue
Vue初级前端1-2年常见面试题
01-20
对于1-2年经验的Vue初级前端开发者，面试中常见的知识点涵盖了多个方面，包括但不限于浏览器原理、HTML基础、CSS样式、JavaScript与TypeScript语言特性、Vue 2和Vue 3的核心概念以及Webpack、Nginx等工具的使用。...
vue初级-中级-高级面试题
03-04
Vue.js 是一款流行的前端JavaScript框架，用于构建用户界面。它以简单、易学和高效而闻名，具有以下特点和优势： 1. 响应式数据绑定：Vue.js 的核心是其响应式系统，允许开发者通过声明式的方式实现数据与视图的...
Vue初级语法，版本1
04-15
在"Vue初级语法，版本1"中，我们主要探讨Vue的基础概念和关键特性，包括： 1. **Vue安装**：Vue.js可以通过下载js文件并将其放置在HTML `<head>`标签内来引入。注意，正确的位置对于避免页面闪烁至关重要，应确保它...
vue初级资料--------新手上路
07-22
Vue的核心库专注于视图层，易于学习且集成到现有项目中，同时提供了丰富的插件生态系统，如vue-router用于路由管理，vuex用于状态管理，vue-cli作为脚手架工具简化项目搭建，vue-resource或axios用于Ajax请求，以及...
vue初级，中级，高级，终结，学习视频
05-08
vue初级学习视频，中级学习视频，高级学习视频，终结学习视频
vue-2.6.12_vue_
10-01
vue安装包，好用的安装包，谁用谁知道，你来下载哦
Vue.js2.6
12-29
2.6 vue
Vue_v2.6.12_源代码解析，代码逐行中文注释，解析的是npm_run_dev_生成的
09-09
Vue_v2.6.12_源代码解析，代码逐行中文注释，解析的是npm_run_dev_生成的版本，通_vue-source-code-analysis
Vue.js v2.6.12——使用组件化时遇到的大乌龙事件
shinyolive的博客
12-24 1303
先看组件化定义的两段代码： 代码01： Vue.component('button-counter', { data: function () { return { count: 0 }; }, template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>' }); 代码02： Vue.component('counter', { template = '&l
vue2.6.12移动端配置
weixin_43719925的博客
07-04 1177
禁止私自转载。运营公众号、社交账号，请坚持原创。勿做知识剽窃者！ vue-cli4 全面配置(持续更新)   细致全面的 vue-cli4 配置信息。涵盖了使用 vue-cli 开发过程中大部分配置需求。   不建议直接拉取此项目作为模板，希望能按照此教程按需配置，或者复制 vue.config.js 增删配置,并自行安装所需依赖。   vue-cli3 配置见 vue-cli3 分支。 其他系列 ★ Blog ★ Nuxt.js 全面配置 目录 √ 配置多环境变量 √ 配置基础 vue.config.j
分析vue2.6.12源码
MiemieWan的博客
05-11 1056
一、调试环境搭建 1.拉取源码 git clone https://github.com/vuejs/vue.git 2.全局安装rollup：vue打包用rollup，开发时打包用webpack npm i -g rollup 3.安装依赖 npm i 4.在package.json中scripts.dev中添加--sourcemap，用于调试代码时查找源码 "dev": "rollup -w -c scripts/config.js --sourcemap --environm.
vue2.6.12安装sass方法及遇见问题总结
suwen_02的博客
04-02 1440
安装方法 1. cnpm install node-sass -D 2. cnpm install sass-loader -D mac 第一行改成sudo cnpm install node-sass -D // sudo npm install node-sass --unsafe-perm --save-dev 报错 1. 没有安装sass-loader **Can't resolve 'sass-loader'** 2.sass-loader版本过高 默认安装版本是11.0.1 **TypeE
vue 2.6尝鲜
yanzhi的博客
02-12 748
在大年三十Vue团队发布了Vue 2.6。官宣请看这里。 纸上得来终觉浅，接下来动手实践一下新版本的slots、动态指令参数、显示创建响应式对象三个新功能，其他的新功能这里暂不实践。 slots Vue 2.6中将普通插槽（slot）和作用域插槽（scope slot）统一在v-slot指令语法下。 需要注意的是v-slot指令只能用在template标签或者引用的组件标签上。 默认作用域...
elementplus组件中el-calendar组件自定义日期单元格内容及样式
最新发布
m0_62508027的博客
12-18 210
el-calendar自定义日期单元格的内容
Vue初级开发面试题
09-16
以下是一些可能在 Vue 初级开发面试中出现的题目： ### 基础概念类 1. 什么是 Vuex，它的核心是什么？ Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式，每一个 Vuex 应用的核心就是 store（仓库），“store” ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值