01.Vue2入门

一、为什么要学习Vue

1.前端必备技能

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

3.提高开发效率

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

二、什么是Vue

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

Vue2官网：https://v2.cn.vuejs.org/

1.什么是构建用户界面

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

在这里插入图片描述

2.什么是渐进式

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

Vue的两种开发方式：

  1. Vue核心包开发

    场景：局部模块改造

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

    场景：整站开发

3.什么是框架

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

举个栗子

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

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

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

  • 库，类似工具箱，是一堆方法的集合，比如 axios、lodash、echarts等
  • 框架，是一套完整的解决方案，实现了大部分功能，我们只需要按照一定的规则去编码即可。

下图是 库 和 框架的对比。

在这里插入图片描述

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

咱们学框架就是学习的这些规则 官网

三、创建Vue实例

我们已经知道了Vue框架可以 基于数据帮助我们渲染出用户界面，那应该怎么做呢？

在这里插入图片描述

比如就上面这个数据，基于提供好的msg 怎么渲染后右侧可展示的数据呢？

核心步骤（4步）：

  1. 准备容器
  2. 引包（官网） — 开发版本/生产版本
  3. 创建Vue实例 new Vue()
  4. 指定配置项，渲染数据
    1. el:指定挂载点
    2. data提供数据

在这里插入图片描述

四、插值表达式 {{}}

插值表达式是一种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>

五、响应式特性

1.什么是响应式？

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

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

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

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

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

在这里插入图片描述

六、Vue开发者工具安装

  1. 通过谷歌应用商店安装（国外网站）
  2. 极简插件下载（推荐） https://chrome.zzzmh.cn/index

安装步骤：

在这里插入图片描述

安装之后可以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 v-on:事件名=“处理函数”>按钮
  • <button v-on:事件名=“处理函数(实参)”>按钮
  • 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: 100
      }
    })
  </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>

十二、小案例-波仔的学习之旅

需求：默认展示数组中的第一张图片，点击上一页下一页来回切换数组中的图片

实现思路：

1.数组存储图片路径 [‘url1’,‘url2’,‘url3’，…]

2.可以准备个下标index 去数组中取图片地址。

3.通过v-bind给src绑定当前的图片地址

4.点击上一页下一页只需要修改下标的值即可

5.当展示第一张的时候，上一页按钮应该隐藏。展示最后一张的时候，下一页按钮应该隐藏

 <div id="app">
    <button>上一页</button>
    <div>
      <img src alt="">
    </div>
    <button>下一页</button>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        list: [
          './imgs/11-00.gif',
          './imgs/11-01.gif',
          './imgs/11-02.gif',
          './imgs/11-03.gif',
          './imgs/11-04.png',
          './imgs/11-05.png',
        ]
      }
    })
  </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>

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

多种双拼方案的实现

多种双拼方案的实现

首发日期 2024-03-14, 以下为原文内容: 就像 GNU/Linux 用户, 虽然比例小, 却又分散为一堆不同的发行版. 双拼用户在拼音输入法之中的比例也很小, 同时也分为各种不同的双拼方案. 那么作为一个 双拼 输入法, 最重要的事情是什么呢 ? 嗯, 那当然是支持自定义双拼方案 ! 实际上…
阅读更多...
网络协议与层次划分：探索计算机网络体系结构

网络协议与层次划分：探索计算机网络体系结构

✨✨ 欢迎大家来访Srlua的博文&#xff08;づ&#xffe3;3&#xffe3;&#xff09;づ╭❤&#xff5e;✨✨ &#x1f31f;&#x1f31f; 欢迎各位亲爱的读者&#xff0c;感谢你们抽出宝贵的时间来阅读我的文章。 我是Srlua小谢&#xff0c;在这里我会分享我的知识和经验。&am…
阅读更多...
AWTK slider_circle 控件发布

AWTK slider_circle 控件发布

slider_circle 控件。 主要特色&#xff1a; 支持正向和反向支持设置滑块的半径支持背景线宽和颜色支持前景线宽和颜色支持设置是否显示值的文本支持设置起始角度和结束角度支持设置格式化值的格式字符串支持使用图片填充背景和前景 界面效果&#xff1a; 注意&#xff1a; …
阅读更多...
【绘图案例-绘图的方式1 Objective-C语言】

【绘图案例-绘图的方式1 Objective-C语言】

一、接下来，我们来说这个，绘图的方式 1.新建一个项目，Name：04-绘图的方式， 方式：就是，我要同样画一条线，然后，用不同的代码，把它写出来，这就叫方式， 我们在storyboard里边，还拖一个UIView，这些步骤都一样， 我们来一个，宽= 300， 高 = 300 ， 然后，再来一个水…
阅读更多...
zabbix配置

zabbix配置

1 下载zabbix 1 配置yum源 rpm -Uvh https://repo.zabbix.com/zabbix/5.0/rhel/7/x86_64/zabbix-release- 5.0-1.el7.noarch.rpm yum clean all yum makecache fast 完成后会出现zabbix.repo文件 2安装zabbix服务 yum -y install zabbix-server-mysql zabbix-web-mysql z…
阅读更多...
计算机网络——物理层（信道复用技术）

计算机网络——物理层（信道复用技术）

计算机网络——物理层&#xff08;信道复用技术&#xff09; 信道复用技术频分多址与时分多址 频分复用 FDM (Frequency Division Multiplexing)时分复用 TDM (Time Division Multiplexing)统计时分复用 STDM (Statistic TDM)波分复用码分复用 我们今天接着来看信道复用技术&am…
阅读更多...
20W-50W厚膜无感电阻TO-220封装技术规格散热说明

20W-50W厚膜无感电阻TO-220封装技术规格散热说明

EAK为设计工程师提供了一种开放式屏蔽基板器件&#xff0c;用于需要卓越热性能的应用&#xff0c;开发了一种额定功率高达 50W 的厚膜功率电阻器。该电阻器采用 TO-220 开放式屏蔽基板封装&#xff0c;并具有与基板粘合的绝缘锥形文丘里管&#xff0c;以实现最大的散热。 电阻器…
阅读更多...
鸿蒙Harmony应用开发—ArkTS声明式开发（容器组件：Counter）

鸿蒙Harmony应用开发—ArkTS声明式开发（容器组件：Counter）

计数器组件&#xff0c;提供相应的增加或者减少的计数操作。 说明&#xff1a; 该组件从API Version 7开始支持。后续版本如有新增内容&#xff0c;则采用上角标单独标记该内容的起始版本。 子组件 可以包含子组件。 接口 Counter() 从API version 9开始&#xff0c;该接口…
阅读更多...
Flask 专题

Flask 专题

[CISCN2019 总决赛 Day1 Web3]Flask Message Board 查看session解密 但不知道密钥&#xff0c;题目说FLASK,那肯定就是找密钥,发现输入什么都没有显示&#xff0c;只有author那里有回显在版上&#xff0c;所以尝试sstl&#xff0c;{{config}}找到密钥 扫目录发现有admin进入…
阅读更多...
Python数学建模-2.5Pandas库介绍

Python数学建模-2.5Pandas库介绍

2.5.1Pandas基本操作 Pandas是一个强大的Python数据分析库&#xff0c;它提供了快速、灵活且富有表现力的数据结构&#xff0c;设计初衷是为了处理关系型或标记型数据。Pandas的基本操作涵盖了数据的读取、处理、筛选、排序、分组、合并以及可视化等多个方面。 以下是一些Pan…
阅读更多...
判断闰年（C语言）

判断闰年（C语言）

一、运行结果&#xff1b; 二、源代码&#xff1b; # define _CRT_SECURE_NO_WARNINGS # include <stdio.h>int main() {//初始化变量值&#xff1b;int year 2000;//执行循环判断&#xff1b;while (year < 2010){//执行流程&#xff1b;//判断能否整除4&#xff1…
阅读更多...
配置IPv4静态路由示例

配置IPv4静态路由示例

配置IPv4静态路由示例 图1 配置IP静态路由组网图 组网需求配置思路操作步骤配置文件 组网需求 如图1所示&#xff0c;STA1、STA2和PC1属于不同网段&#xff0c;STA1在AP1中上线&#xff0c;STA2在AP2中上线&#xff0c;要求配置静态路由&#xff0c;使PC1与STA1和STA2能够互…
阅读更多...
python之万花尺

python之万花尺

1、使用模块 import sys, random, argparse import numpy as np import math import turtle import random from PIL import Image from datetime import datetime from math import gcd 依次使用pip下载即可 2、代码 import sys, random, argparse import numpy as np imp…
阅读更多...
Yolo系列算法-理论部分-YOLOv4

Yolo系列算法-理论部分-YOLOv4

0. 写在前面 YOLO系列博客&#xff0c;紧接上一篇Yolo系列算法-理论部分-YOLOv3-CSDN博客 1. YOLOv4-实战破局 2020年&#xff0c;YOLO系列的作者发表声明&#xff0c;出于道德方面的考虑&#xff0c;退出CV界&#xff0c;Alexey Bochkovskiy团队接手&#xff0c;正式推出YOLO…
阅读更多...
财富池指标公式--通达信主力资金指标公式，主力资金流向怎么看？

财富池指标公式--通达信主力资金指标公式，主力资金流向怎么看？

今日分享的通达信主力资金指标公式&#xff0c;是一个分析主力资金进出的指标。 具体信号说明&#xff1a; 当紫色的起涨点主力资金线和红色的拉升资金同时上传0线&#xff0c;并且紫色的拉升线超过资金线&#xff0c;大盘进入派发阶段&#xff0c;后市看涨&#xff0c;是参考…
阅读更多...
【python】成功解决使用 np.savetxt 出现ValueError: fname must be a string or file handle

【python】成功解决使用 np.savetxt 出现ValueError: fname must be a string or file handle

【python】成功解决使用 np.savetxt 出现ValueError: fname must be a string or file handle &#x1f308; 个人主页&#xff1a;高斯小哥 &#x1f525; 高质量专栏&#xff1a;Matplotlib之旅&#xff1a;零基础精通数据可视化、Python基础【高质量合集】、PyTorch零基础入…
阅读更多...
vue2点击左侧的树节点（el-tree）定位到对应右侧树形表格(el-table)的位置，树形表格懒加载

vue2点击左侧的树节点（el-tree）定位到对应右侧树形表格(el-table)的位置，树形表格懒加载

左侧树代码 <el-tree :data"treeData" node-key"id" default-expand-all"" //节点默认全部展开:expand-on-click-node"false" //是否在点击节点的时候展开或者收缩节点:props"defaultProps" node-click"handleNodeC…
阅读更多...
大数据架构设计

大数据架构设计

本博客地址&#xff1a;https://security.blog.csdn.net/article/details/136657478 一. 基本概念 1、解决传统数据架构无法及时响应用户请求的常用解决方法&#xff1a; ● 增加异步处理队列&#xff0c;通过工作处理层批量处理异步处理队列中的数据修改请求。 ● 建立数据库…
阅读更多...
uni-popup（实现自定义弹窗提示、交互）

uni-popup（实现自定义弹窗提示、交互）

一般提示框的样式&#xff0c;一般由设计稿而定&#xff0c;如果用uniapp的showmodel&#xff0c;那个并不能满足我们需要的自定义样式&#xff0c;所以最好的方式是我们自己封装一个&#xff01;&#xff08;想什么样就什么样&#xff09;&#xff01; 一、页面效果 二、使用…
阅读更多...
BUUCTF-----[GXYCTF2019]禁止套娃

BUUCTF-----[GXYCTF2019]禁止套娃

题目 目录扫描&#xff0c;扫到.git泄露&#xff0c;使用工具查看到index.php的源码 <?php include "flag.php"; echo "flag在哪里呢&#xff1f;<br>"; if(isset($_GET[exp])){if (!preg_match(/data:\/\/|filter:\/\/|php:\/\/|phar:\/\//i,…
阅读更多...
最新文章

Copyright @ 2022~2023