Vue的基础使用

news2025/10/30 18:49:26

一、为什么要学习Vue

1.前端必备技能

2.岗位多，绝大互联网公司都在使用Vue

3.提高开发效率

4.高薪必备技能（Vue2+Vue3）

二、什么是Vue

概念：Vue (读音 /vjuː/，类似于 view) 是一套 构建用户界面 的 渐进式 框架

Vue2官网：Vue.js

1.什么是构建用户界面

基于数据渲染出用户可以看到的界面

2.什么是渐进式

 所谓渐进式就是循序渐进，不一定非得把Vue中的所有API都学完才能开发Vue，可以学一点开发一点

Vue的两种开发方式：

  1. Vue核心包开发

    场景：局部模块改造

  2. Vue核心包&Vue插件&工程化

    场景：整站开发

3.什么是框架

所谓框架：就是一套完整的解决方案

举个例子：

如果把一个完整的项目比喻为一个装修好的房子，那么框架就是一个毛坯房。

我们只需要在“毛坯房”的基础上，增加功能代码即可。

提到框架，不得不提一下库。

  • 库，类似工具箱，是一堆方法的集合，比如 axios、lodash、echarts等

  • 框架，是一套完整的解决方案，实现了大部分功能，我们只需要按照一定的规则去编码即可。

框架的特点：有一套必须让开发者遵守的规则或者约束  

三、创建Vue实例

核心步骤（4步）：

  1. 准备容器

  2. 引包（官网） — 开发版本/生产版本

  3. 创建Vue实例 new Vue()

  4. 指定配置项，渲染数据

    • el:指定挂载点
    • data提供数据
<div id="app">
    {{ mgs }}
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>

<script>
    const app =new Vue({
       el : '#app',
       data: {
         msg: 'Hello'
       }
    })
</script>

总结：创建Vue实例需要执行哪4步

四、插值表达式 {{}}

插值表达式是一种Vue的模板语法

我们可以用插值表达式渲染出Vue提供的数据

、

1.作用：利用表达式进行插值，渲染到页面中

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

以下的情况都是表达式：

money + 100
money - 100
money * 10
money / 10 
price >= 100 ? '真贵':'还行'
obj.name
arr[0]
fn()
obj.fn()

2.语法

插值表达式语法：{{ 表达式 }}

<h3>{{title}}<h3>

<p>{{nickName.toUpperCase()}}</p>

<p>{{age >= 18 ? '成年':'未成年'}}</p>

<p>{{obj.name}}</p>

<p>{{fn()}}</p>

3.错误用法

1.在插值表达式中使用的数据 必须在data中进行了提供
<p>{{hobby}}</p>  //如果在data中不存在 则会报错

2.支持的是表达式，而非语句，比如：if   for ...
<p>{{if}}</p>

3.不能在标签属性中使用 {{  }} 插值 (插值表达式只能标签中间使用)
<p title="{{username}}">我是P标签</p>

4.总结

1.插值表达式的作用是什么

2.语法是什么

3.插值表达式的注意事项

五、响应式特性

1.什么是响应式？

简单理解就是数据变，视图对应变。

2.如何访问 和 修改 data中的数据（响应式演示）

data中的数据, 最终会被添加到实例上

① 访问数据： "实例.属性名"

② 修改数据： "实例.属性名"= "值"

3.总结

  1. 什么是响应式

  2. 如何访问和修改data中的数据呢

六、Vue开发者工具安装

  1. 通过谷歌应用商店安装（国外网站）

  2. 极简插件下载（推荐） 极简插件官网_Chrome插件下载_Chrome浏览器应用商店

安装步骤：

安装之后可以F12后看到多一个Vue的调试面板

七、Vue中的常用指令

概念：指令（Directives）是 Vue 提供的带有 v- 前缀 的 特殊 标签属性。

为啥要学：提高程序员操作 DOM 的效率。

vue 中的指令按照不同的用途可以分为如下 6 大类：

  • 内容渲染指令（v-html、v-text）

  • 条件渲染指令（v-show、v-if、v-else、v-else-if）

  • 事件绑定指令（v-on）

  • 属性绑定指令 （v-bind）

  • 双向绑定指令（v-model）

  • 列表渲染指令（v-for）

指令是 vue 开发中最基础、最常用、最简单的知识点。

八、内容渲染指令

内容渲染指令用来辅助开发者渲染 DOM 元素的文本内容。常用的内容渲染指令有如下2 个：

  • v-text（类似innerText）

  • 使用语法：<p v-text="uname">hello</p>，意思是将 uame 值渲染到 p 标签中
  • 类似 innerText，使用该语法，会覆盖 p 标签原有内容

  • v-html（类似 innerHTML）

  • 使用语法：<p v-html="intro">hello</p>，意思是将 intro 值渲染到 p 标签中
  • 类似 innerHTML，使用该语法，会覆盖 p 标签原有内容
  • 类似 innerHTML，使用该语法，能够将HTML标签的样式呈现出来。

代码演示：

 <div id="app">
    <h2>个人信息</h2>
	// 既然指令是vue提供的特殊的html属性，所以咱们写的时候就当成属性来用即可
    <p v-text="uname">姓名：</p> 
    <p v-html="intro">简介：</p>
  </div> 

<script>
        const app = new Vue({
            el:'#app',
            data:{
                uname:'张三',
                intro:'<h2>这是一个<strong>非常优秀</strong>的boy<h2>'
            }
        })
</script>

九、条件渲染指令

条件判断指令，用来辅助开发者按需控制 DOM 的显示与隐藏。条件渲染指令有如下两个，分别是：

  1. v-show

    1. 作用： 控制元素显示隐藏

    2. 语法： v-show = "表达式" 表达式值为 true 显示， false 隐藏

    3. 原理： 切换 display:none 控制显示隐藏

    4. 场景：频繁切换显示隐藏的场景

  2. v-if

    1. 作用： 控制元素显示隐藏（条件渲染）

    2. 语法： v-if= "表达式" 表达式值 true显示， false 隐藏

    3. 原理： 基于条件判断，是否创建 或 移除元素节点

    4. 场景： 要么显示，要么隐藏，不频繁切换的场景示例代码：

       <div id="app">
    <div class="box">我是v-show控制的盒子</div>
    <div class="box">我是v-if控制的盒子</div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        flag: false
      }
    })
  </script>

  3. v-else 和 v-else-if

    1. 作用：辅助v-if进行判断渲染

    2. 语法：v-else v-else-if="表达式"

    3. 需要紧接着v-if使用

示例代码：

 <div id="app">
    <p>性别：♂ 男</p>
    <p>性别：♀ 女</p>
    <hr>
    <p>成绩评定A：奖励电脑一台</p>
    <p>成绩评定B：奖励周末郊游</p>
    <p>成绩评定C：奖励零食礼包</p>
    <p>成绩评定D：惩罚一周不能玩手机</p>
  </div>
  
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>

    const app = new Vue({
      el: '#app',
      data: {
        gender: 2,
        score: 95
      }
    })
  </script>

十、事件绑定指令

使用Vue时，如需为DOM注册事件，及其的简单，语法如下：

  • <button v-on:事件名="内联语句">按钮</button>

  • <button v-on:事件名="处理函数">按钮</button>

  • <button v-on:事件名="处理函数(实参)">按钮</button>

  • v-on: 简写为 @

  1. 内联语句

    <div id="app">
    <button @click="count--">-</button>
    <span>{{ count }}</span>
    <button v-on:click="count++">+</button>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        count: 10
      }
    })
  </script>

  2. 事件处理函数

    注意：

    • 事件处理函数应该写到一个跟data同级的配置项（methods）中

    • methods中的函数内部的this都指向Vue实例

      <div id="app">
    <button>切换显示隐藏</button>
    <h1 v-show="isShow">小白程序员</h1>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        isShow: true
      }
    })
  </script>

  3. 给事件处理函数传参

    • 如果不传递任何参数，则方法无需加小括号；methods方法中可以直接使用 e 当做事件对象

    • 如果传递了参数，则实参 $event 表示事件对象，固定用法。

      <style>
    .box {
      border: 3px solid #000000;
      border-radius: 10px;
      padding: 20px;
      margin: 20px;
      width: 200px;
    }
    h3 {
      margin: 10px 0 20px 0;
    }
    p {
      margin: 20px;
    }
  </style>

 <div id="app">
    <div class="box">
      <h3>小黑自动售货机</h3>
      <button>可乐5元</button>
      <button>咖啡10元</button>
      <button>牛奶8元</button>
    </div>
    <p>银行卡余额：{{ money }}元</p>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        money: 100
      }
    })
  </script>

 

十一、属性绑定指令

  1. 作用：动态设置html的标签属性 比如：src、url、title

  2. 语法：v-bind:属性名=“表达式”

  3. v-bind:可以简写成 => :

比如，有一个图片，它的 src 属性值，是一个图片地址。这个地址在数据 data 中存储。

则可以这样设置属性值：

  • <img v-bind:src="url" />

  • <img :src="url" /> （v-bind可以省略）

     <div id="app">
    <img v-bind:src="imgUrl" v-bind:title="msg" alt="">
    <img :src="imgUrl" :title="msg" alt="">
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        imgUrl: './imgs/10-02.png',
        msg: 'hello 波仔'
      }
    })
  </script>

十二、列表渲染指令

Vue 提供了 v-for 列表渲染指令，用来辅助开发者基于一个数组来循环渲染一个列表结构。

v-for 指令需要使用 (item, index) in arr 形式的特殊语法，其中：

  • item 是数组中的每一项

  • index 是每一项的索引，不需要可以省略

  • arr 是被遍历的数组

此语法也可以遍历对象和数字

//遍历对象
<div v-for="(value, key, index) in object">{{value}}</div>
value:对象中的值
key:对象中的键
index:遍历索引从0开始

//遍历数字
<p v-for="item in 10">{{item}}</p>
item从1 开始

十三、v-for中的key

语法： key="唯一值"

作用：给列表项添加的唯一标识。便于Vue进行列表项的正确排序复用。

为什么加key：Vue 的默认行为会尝试原地修改元素（就地复用）

实例代码：

<ul>
  <li v-for="(item, index) in booksList" :key="item.id">
    <span>{{ item.name }}</span>
    <span>{{ item.author }}</span>
    <button @click="del(item.id)">删除</button>
  </li>
</ul>

注意：

  1. key 的值只能是字符串 或 数字类型

  2. key 的值必须具有唯一性

  3. 推荐使用 id 作为 key（唯一），不推荐使用 index 作为 key（会变化，不对应）

十四、双向绑定指令

所谓双向绑定就是：

  1. 数据改变后，呈现的页面结果会更新

  2. 页面结果更新后，数据也会随之而变

作用： 给表单元素（input、radio、select）使用，双向绑定数据，可以快速 获取 或 设置 表单元素内容

语法：v-model="变量"

需求：使用双向绑定实现以下需求

  1. 点击登录按钮获取表单中的内容

  2. 点击重置按钮清空表单中的内容

<div id="app">
    账户：<input type="text"> <br><br>
    密码：<input type="password"> <br><br>
    <button>登录</button>
    <button>重置</button>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        username: '',
        password: ''
      },
    })
  </script>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2241032.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Innovus Flexible H-tree and Multi-tap Clock Flow Lab实操系列教程（Day1）

Innovus Flexible H-tree and Multi-tap Clock Flow Lab实操系列教程（Day1）

我们都知道时钟树综合在数字IC后端实现中的重要性。做clock tree主要有传统clock tree做法&#xff0c;H tree&#xff0c;Flexible H-tree&#xff0c;fishbone等做法。接下去小编将拿cadence官方的这份Innovus Flexible H-tree and Multi-Tap Clock Flow和对应的lab data来做…
阅读更多...
【MySQL】MySQL数据库安装以及报错处理技巧

【MySQL】MySQL数据库安装以及报错处理技巧

前言&#xff1a; 本节内容讲述在Ubuntu环境下怎么进行MySQL的安装。 以及一些安装过程中遇到的报错如何处理的问题。 ps:注意&#xff0c; 本篇文章不是图形化界面的MySQL安装教程哦。想要安装图形化界面的MySQL的友友们可以另寻资源了。 目录 更新软件包列表 安装M…
阅读更多...
ISP——你可以从这里起步（二）

ISP——你可以从这里起步（二）

接上一篇&#xff0c;上一篇是原理篇&#xff0c;这一篇是实战篇&#xff0c;为了实现下面框图中的不完美ISP。 第一章 做一张RAW图自己用 不是所有的人都能获得raw图&#xff0c;即使获得了raw图也需要对应的sensor参数才能把它用起来&#xff0c;所以我找了一条野路子可以把…
阅读更多...
CTF攻防世界小白刷题自学笔记14

CTF攻防世界小白刷题自学笔记14

fileclude&#xff0c;难度&#xff1a;1&#xff0c;方向&#xff1a;Web 题目来源:CTF 题目描述:好多file呀&#xff01; 给一下题目链接&#xff1a;攻防世界Web方向新手模式第17题。 打开一看&#xff0c;这熟悉的味道&#xff0c;跟上一篇文章基本一摸一样的&#xff…
阅读更多...
CTFHub每日练习

CTFHub每日练习

文章目录 技能树CTF Web信息泄露目录遍历PHPINFO备份文件下载网站源码bak文件vim缓存.DS_Store Git泄露Logstash index方法一方法二 密码口令弱口令 技能树 CTF Web 信息泄露 目录遍历 PHPINFO 备份文件下载 网站源码 当开发人员在线上环境中对源代码进行了备份操作&#x…
阅读更多...
使用CNN进行验证码识别：深度学习与图像预处理教程

使用CNN进行验证码识别：深度学习与图像预处理教程

验证码&#xff08;CAPTCHA&#xff09;广泛用于区分人类和自动化程序&#xff08;如机器人&#xff09;&#xff0c;通常由扭曲的字母、数字或符号组成。为了实现验证码的自动识别&#xff0c;深度学习尤其是卷积神经网络&#xff08;CNN&#xff09;非常有效。本文将带你一起…
阅读更多...
Springboot采用jasypt加密配置

Springboot采用jasypt加密配置

目录 前言 一、Jasypt简介 二、运用场景 三、整合Jasypt 2.1.环境配置 2.2.添加依赖 2.3.添加Jasypt配置 2.4.编写加/解密工具类 2.5.自定义加密属性前缀和后缀 2.6.防止密码泄露措施 2.61.自定义加密器 2.6.2通过环境变量指定加密盐值 总结 前言 在以往的多数项目中&#xff0…
阅读更多...
讯飞、阿里云、腾讯云：Android 语音合成服务对比选择

讯飞、阿里云、腾讯云：Android 语音合成服务对比选择

在 移动端 接入语音合成方面&#xff0c;讯飞和腾讯云等都是优秀的选择&#xff0c;但各有其特点和优势。咱们的需求是需要支持普通话/英语/法语三种语言&#xff0c;以下是对各个平台的详细比较&#xff1a; 一、讯飞语音合成介绍 与语音听写相反&#xff0c;语音合成是将一段…
阅读更多...
python爬虫获得店铺的所有商品

python爬虫获得店铺的所有商品

在编写Python爬虫以获取店铺的所有商品信息时&#xff0c;通常涉及到发送HTTP请求、解析响应内容以及处理API返回的数据。以下是一个详细的Python爬虫示例&#xff0c;用于获取店铺的商品信息。这个示例假设API返回的是JSON格式的数据&#xff0c;并且需要API密钥进行认证。 步…
阅读更多...
java程序打包及执行 jar命令及运行jar文件

java程序打包及执行 jar命令及运行jar文件

java程序打包及执行 jar命令及运行jar文件 打包命令&#xff1a; 安装完成jdk之后采用 jar命令进行打包 jar -cvfe ddd.jar -C bin/ddd.java 打包 ddd.java 文件 jar -cvfe dddd.jar -C . 注意 -C 后面的点. 表示当前目录下所有 如图&#xff1a; 运行jar 文件 java -class…
阅读更多...
计算机视觉空域处理完整版——超详细图文解

计算机视觉空域处理完整版——超详细图文解

空域处理 图像空域处理 a.线性滤波b.非线性滤波c.二值图像处理方法 数学形态学连通成分标记 “点运算”是在不改变图像大小、几何形状以及局部结构的情况下&#xff0c;对像素值进行修改&#xff0c;新图像的像素值只与 原图像同一位置的像素值有关。 灰度级变换(线性变换,非…
阅读更多...
【HarmonyOS】Hdc server port XXXX has been used.Configure environment variable

【HarmonyOS】Hdc server port XXXX has been used.Configure environment variable

【HarmonyOS】Hdc server port XXXX has been used.Configure environment variable 一、 问题背景&#xff1a; 无法调试debug应用&#xff0c;IDE右下角显示该弹窗&#xff1a; Hdc server port XXXX has been used.Configure environment variable ‘OHOS_HDC_SERVER_POR…
阅读更多...
立体工业相机提升工业自动化中的立体深度感知

立体工业相机提升工业自动化中的立体深度感知

深度感知对仓库机器人应用至关重要&#xff0c;尤其是在自主导航、物品拾取与放置、库存管理等方面。 通过将深度感知与各种类型的3D数据&#xff08;如体积数据、点云、纹理等&#xff09;相结合&#xff0c;仓库机器人可以在错综复杂环境中实现自主导航&#xff0c;物品检测…
阅读更多...
深度解析：Android APP集成与拉起微信小程序开发全攻略

深度解析：Android APP集成与拉起微信小程序开发全攻略

目录 一、背景以及功能介绍 二、Android开发示例 2.1 下载 SDK 2.2 调用接口 2.3 获取小程序原始Id 2.4 报错提示&#xff1a;bad_param 2.4.1 错误日志 2.4.2 解决方案 相关推荐 一、背景以及功能介绍 需求&#xff1a;产品经理需要APP跳转到公司的小程序(最好指定页…
阅读更多...
stream学习

stream学习

Stream流 定义 Steam流&#xff0c;用于操作集合或者数组中的数据&#xff0c;大量结合了Lamda表达式的语法风格&#xff0c;代码简洁。 重点&#xff1a; 流只能收集一次 ​ 获取Stream流 Stream流要与数据源建立连接。 1.list ​ 直接调用steam()即可 // list List<Stri…
阅读更多...
python基础大杂烩

python基础大杂烩

命令提示符程序&#xff0c;输入python&#xff0c;运行python程序 代码通过解释器程序翻译给计算机去执行 命令提示符输入的python本质上就是调用D:/dev/python/python3.12.5/python.exe这个解释器程序 有python程序将输入的代码翻译成二进制的0和1&#xff0c;去向计算机去运…
阅读更多...
嵌入式硬件实战提升篇(一)-泰山派RK3566制作多功能小手机

嵌入式硬件实战提升篇(一)-泰山派RK3566制作多功能小手机

引言&#xff1a;主要针对于嵌入式全栈内容的知识点汇总并对于linux等相关驱动知识点进行串联&#xff0c;用大家参考学习&#xff0c;并用到了嘉立创提供的泰山派RK3566作为学习的主控。 实物演示如下所示&#xff1a; 目录 一、硬件设计 1.转接电路 2.背光电路 3.音频接…
阅读更多...
用两行命令快速搭建深度学习环境（Docker/torch2.5.1+cu118/命令行美化+插件），包含完整的 Docker 安装步骤

用两行命令快速搭建深度学习环境（Docker/torch2.5.1+cu118/命令行美化+插件），包含完整的 Docker 安装步骤

深度学习环境的配置过于繁琐&#xff0c;所以我制作了两个基础的镜像&#xff0c;希望可以帮助大家节省时间&#xff0c;你可以选择其中一种进行安装&#xff0c;版本说明&#xff1a; base 版本基于 pytorch/pytorch:2.5.1-cuda11.8-cudnn9-devel&#xff0c;默认 python 版本…
阅读更多...
11个c语言编程练习题

11个c语言编程练习题

0. 钞票和硬币 money.c 读取一个带有两个小数位的浮点数&#xff0c;代表货币价值。将该值分解为多种钞票和硬币的和&#xff0c;要求使用的钞票和硬币的总数量尽可能少。 货币面值有100&#xff0c;50&#xff0c;20&#xff0c;10&#xff0c;5&#xff0c;1&#xff0c;0.…
阅读更多...
LaTeX之四：如何兼容中文（上手中文简历和中文论文）、在win/mac上安装新字体。

LaTeX之四：如何兼容中文（上手中文简历和中文论文）、在win/mac上安装新字体。

改成中文版 如果你已经修改了.cls文件和主文档&#xff0c;但编译后的PDF仍然显示英文版本&#xff0c;可能有以下几个原因&#xff1a; 编译器问题&#xff1a;确保你使用的是XeLaTeX或LuaLaTeX进行编译&#xff0c;因为它们对Unicode和中文支持更好。你可以在你的LaTeX编辑器…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023