后端必备之Vue基础【黑马程序员】

news2024/12/27 12:38:42

黑马程序员4小时入门Vue传送门

1. 简介

Vue是一个操作JavaScript的框架，类似于jQuery，但比jQuery好用，是现在的主流

2. 测试例子

<!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>Documents</title>
  </head>
  <body>
    <div id="app">{{message}}</div>
    <script src="../Resources/vue.js"></script>
    <!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> -->

    <script>
      var app = new Vue({
        el: "#app",
        data: {
          message: "Hello, World!"
        },
      });
    </script>
  </body>
</html>
image-20230216201544358

3. el挂载点

<div id="app" class="app">{{message}}</div>
<script>
      var app = new Vue({
        // .app对应的是class选择器，div对应的是标签选择器，el都可以挂载
        el: "#app",			// 此处是el挂载点，#对应的是id选择器，因此data会出现在id为app的组件中
        data: {
          message: "Hello, World!",
        }
      });
    </script>

1. Vue实例的作用范围是什么呢？

Vue会管理el选项命中的元素及其内部的后代元素【即可以嵌套发挥作用】

2. 是否可以使用其他的选择器？

可以使用其他的选择器，但是建议使用ID选择器

3. 是否可以设置其他的dom元素呢？

可以使用其他的双标签，不能使用HTML和BODY

4. data数据对象

<div id="app">
      <!-- 字符串直接访问 -->
      <h1>{{message}}</h1>
      <!-- 键值对通过.key的方式访问 -->
      <h1>{{people.name}}</h1>
      <!-- 数组通过下标访问 -->
      <h1>{{children[0]}}</h1>
</div>
<script>
      var app = new Vue({
        el: "#app",
        // data内部可以放字符串，键值对，数组等
        data: {
          message: "Hello，World！",
          people:{
            name:"Melon",
            mobile:"123"
          },
          children:["a","b","c"]
        },
      });
    </script>
image-20230216203430842
  • Vue中用到的数据定义在data中
  • data中可以写复杂类型的数据
  • 渲染复杂类型数据时，遵守js的语法即可

5. Vue指令

5.1 v-text指令

v-text指令的作用是设置标签的内容，使用此标签会覆盖标签内原本的内容

<div id="app">
      <!-- 使用插值表达式{{}}读取data元素的内容，用+的方式拼接 -->
      <h1>{{message+'哈哈'}}</h1>
      <!-- Hello,World！不显示，其内容被v-text覆盖 -->
      <h1 v-text="message">Hello，World！</h1>
      <!-- v-text内也可用+进行拼接 -->
      <h1 v-text="message+'呀'"></h1>
</div>
<script>
      var app = new Vue({
        el: "#app",
        data: {
          message: "你好！"
        },
      });
</script>
image-20230216205323739

5.2 v-html指令

其大致与v-text一致，不过在引用部分有html语法时会被解析

<div id="app">
      <h1 v-text="message"></h1>
      <!-- 此时html语句会被渲染 -->
      <h1 v-html="message"></h1>
</div>
<script>
      var app = new Vue({
        el: "#app",
        data: {
          message: "<a href=www.baidu.com>百度</a>"
        },
      });
</script>
image-20230216210232381

5.3 v-on指令

v-on指令用于操作事件，@符号等价于v-on:

<div id="app">
      <input type="button" value="核武发射1" v-on:click="FBIWarnning" />
      <input type="button" value="核武发射2" @click="FBIWarnning" />
      <!-- dbl是double的意思即双击事件 -->
      <input type="button" value="双击发射" @dblclick="FBIWarnning" />
      <h1 @click="changeFood">{{food}}</h1>
</div>
<script>
      var app = new Vue({
        el: "#app",
        data: {
          food: "黯然销魂饭",
        },
        // method和data一样是关键字，内放函数
        methods: {
          FBIWarnning: function () {
            alert("一级戒备！！！！");
          },
          changeFood: function () {
            this.food += "不咋地";
          },
        },
      });
</script>
image-20230216212447528

多次点击“黯然销魂饭”会进行字符串的拼接

image-20230216212542949

传入参数

<!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>Documents</title>
  </head>
  <body>
    <div id="app">
      <!-- 为点击事件绑定两个参数，字符串参数需要用单引号 -->
      <input type="button" value="点击" @click="doIt('哎呀','妈呀！')">
      <!-- 锁定回车键按下时响应 -->
      <input type="text" @keyup.enter="sayHi">
    </div>
    <script src="../Resources/vue.js"></script>
    <!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> -->

    <script>
      var app = new Vue({
        el: "#app",
        methods:{
          // 传入的两个参数
          doIt:function(p1,p2){
            alert(p1)
            alert(p2)
          },
          sayHi:function(){
            alert("吃了没")
          }
        }
      });
    </script>
  </body>
</html>
image-20230228172354374

5.4 计数器实现

<!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>Documents</title>
  </head>
  <body>
    <div id="app">
      <!-- 计数器区域 -->
      <div class="input-num">
        <button @click="sub">-</button>
        <span>{{num}}</span>
        <button @click="add">+</button>
      </div>
    </div>
    <script src="../Resources/vue.js"></script>
    <!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> -->

    <script>
      var app = new Vue({
        el: "#app",
        data: {
          num: 1,
        },
        methods:{
          add:function(){
            if(this.num<10){
              this.num++;
            }else{
              alert('最大啦！')
            }
          },
          sub:function(){
            if(this.num>0){
              this.num--
            }else{
              alert('最小啦！')
            }
          }
        }
      });
    </script>
  </body>
</html>
image-20230221200617366

5.5 v-show指令

为true时当前组件显示，为false时当前组件隐藏

<!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>Documents</title>
  </head>
  <body>

    <div id="app"> 
      <input type="button" value="切换显示状态" @click="changeIsShow">
      <input type="button" value="累加年龄" @click="addAge">
      <!-- isShow()函数每次对布尔值取反，因此可以实现状态切换的功能 -->
      <img v-show="isShow" src="../Resources/good.jpg">
      <!-- 此处直接传入逻辑判断表达式也行 -->
      <img v-show="age>=18" src="../Resources/good.jpg">
    </div>
    <script src="../Resources/vue.js"></script>
    <!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> -->

    <script>
      var app = new Vue({
        el: "#app",
        data: {
          isShow:false,
          age:17
        },
        methods:{
          changeIsShow:function(){
            // 每次取反
            this.isShow=!this.isShow;
          },
          addAge:function(){
            this.age++;
          }
        }
      });
    </script>
  </body>
</html>

5.6 v-if指令

用法与v-show类似，不过其是直接操作DOM元素【即为false时，整体预计都会消失而不是只修改display样式】

5.7 v-bind指令

  • v-bind指令的作用是：为元素绑定属性
  • 完整写法是v-bind：属性名
  • 简写的话可以直接省略v-bind，只保留：属性名
<!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>Documents</title>
    <style>
      /* 自定义样式，.开头是类样式 */
      .active {
        border: 1px solid red;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <!-- src属性是地址，vue中可以使用v-bind进行如下绑定操作 -->
      <img v-bind:src="imgSrc" alt="" width="150" height="150" />
      <br />
      <!-- v-bind关键字可以省略 -->
      <img :src="imgSrc" alt="" width="150" height="150" />
      <br />
      <!-- 
      title属性是鼠标放到图片后会显示的内容，可用+拼接
      :class中的语法意思为active这个自定义样式是否发挥作用取决于isActive属性
      -->
      <img
        :src="imgSrc"
        alt=""
        :title="imgTitle+'123'"
        :class="{active:isActive}"
        @click="toggleActive"
        width="150"
        height="150"
      />
    </div>
    <script src="../Resources/vue.js"></script>
    <!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> -->

    <script>
      var app = new Vue({
        el: "#app",
        data: {
          imgSrc: "../Resources/good.jpg",
          imgTitle: "v-bind测试",
          isActive: false,
        },
        methods: {
          toggleActive: function () {
            this.isActive = !this.isActive;
          },
        },
      });
    </script>
  </body>
</html>
image-20230228163130879

5.8 v-for指令

  • v-for指令的作用是：根据数据生成列表结构
  • 数组经常和v-for结合使用
  • 语法是( item,index ) in数据
  • item和index可以结合其他指令一起使用
  • 数组长度的更新会同步到页面上，是响应式的
<!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>Documents</title>
  </head>
  <body>
    <div id="app">
      <ul>
        <!-- arr是存放在data中的列表，it对于其中具体元素，index对于索引 -->
        <!-- v-for会复制一整个组件，此处为复制 li 结构 -->
        <li v-for="(it,index) in arr">一线城市{{index+1}}：{{it}}</li>
      </ul>
      <!-- v-for 也可以配合其他语法进行使用，可操作到具体元素 -->
      <h2 v-for="item in meat" :title="item.name">
        <!-- map结构可以访问value -->
        {{item.name}}
      </h2>
    </div>
    <script src="../Resources/vue.js"></script>
    <!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> -->

    <script>
      var app = new Vue({
        el: "#app",
        data: {
          arr: ["北京", "上海", "广州", "深圳"],
          meat: [{ name: "牛肉" }, { name: "猪肉" }],
        },
      });
    </script>
  </body>
</html>
image-20230228171155380

5.9 v-model指令

  • v-model指令的作用是便捷的设置s和获取表单元素的值
  • 绑定的数据会和表单元素值相关联
<!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>Documents</title>
  </head>
  <body>
    <div id="app">
      <!-- text的内容与data中的message绑定 -->
      <input type="text" v-model="message" />
      <h2>{{message}}</h2>
    </div>
    <script src="../Resources/vue.js"></script>
    <!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> -->

    <script>
      var app = new Vue({
        el: "#app",
        data: {
          message: "哈哈",
        },
      });
    </script>
  </body>
</html>
image-20230302190843318

6. Axios

axios是一个专注于网络请求的库

<!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>Documents</title>
  </head>
  <body>
    <div id="app">
      <input type="button" value="获取笑话" @click="getJoke" />
      <br>
      <h3>{{joke}}</h3>
    </div>
    <script src="../Resources/vue.js"></script>
    <script src="../Resources/axios.js"></script>
    <!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> -->

    <script>
      var app = new Vue({
        el: "#app",
        data: {
          joke: "很好笑的笑话",
        },
        methods: {
          getJoke: function () {
            var that = this;
            // 向网站发送get请求【当然也有post请求，主要看接口要求】
            // then之后第一个function用来处理请求成功的情况，
            // 第2个function用来处理请求失败的情况
            axios.get("https://autumnfish.cn/api/joke").then(
              function (response) {
                // 在axios中this不再指向Vue对象，因此若要使用需要提前存储变量
                // response.data即从网站中获取的数据，不过需要哪部分数据还是得看网页数据得组成结构【类似于json，也可在Chrom利用F12查看】
                that.joke=response.data
              },
              function (err) {}
            );
          },
        },
      });
    </script>
  </body>
</html>
image-20230302194402355

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

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

相关文章

LeetCode-746. 使用最小花费爬楼梯

LeetCode-746. 使用最小花费爬楼梯

题目来源 746. 使用最小花费爬楼梯 动态规划 动态规划五部曲 1.确定dp数组以及下标的含义 使用动态规划&#xff0c;就要有一个数组来记录状态&#xff0c;本题只需要一个一维数组dp[i]就可以了。 dp[i]的定义&#xff1a;到达第i台阶所花费的最少体力为dp[i]。 2.确定递推…
阅读更多...
The simplest way to get started with Stable Diffusion on Ubuntu

The simplest way to get started with Stable Diffusion on Ubuntu

link1 link2 Stable Diffusion is a machine learning model that can generate images from natural language descriptions. Because it’s open source, it’s also easy to run it locally, which makes it very convenient to experiment with in your own time. The sim…
阅读更多...
万字长文漫谈高可用高并发技术

万字长文漫谈高可用高并发技术

互联网应用通常面向海量用户&#xff0c;其后台系统必须支撑高并发请求。在后端开发面试中&#xff0c;高并发技术也是一个常见的考察点。 那么&#xff0c;高并发系统通常是怎么设计的呢&#xff1f;需要采用哪些技术呢&#xff1f;本文就简单聊一聊高并发背后的各种技术栈。…
阅读更多...
蓝桥杯任意刷

蓝桥杯任意刷

这里写目录标题受伤的皇后全球变暖&#xff08;最大联通子集&#xff0c;一趟递归记得不要嵌套计数&#xff09;游园问题金额查错蓝肽子序列&#xff08;最长公共子序列&#xff09;受伤的皇后 #include <iostream> #include <bits/stdc.h> using namespace std; …
阅读更多...
运动带什么蓝牙耳机好，最适合运动佩戴的蓝牙耳机分享

运动带什么蓝牙耳机好，最适合运动佩戴的蓝牙耳机分享

运动时汗如雨下&#xff01;这可如何是好&#xff0c;这时候一款运动专用的防水耳机就成为人们的最爱。现在&#xff0c;市面上的耳机种类已经多到数不胜数。价格也不一&#xff0c;到底是一分钱一分货&#xff0c;还是打着低价卖你一个小型音响。到底怎么挑才能找到一款性价比…
阅读更多...
联邦学习（fate）从主机安装到实现联邦学习

联邦学习（fate）从主机安装到实现联邦学习

联邦学习&#xff08;fate&#xff09;从主机安装到实现联邦学习一、单机部署1.1虚拟机配置1.2安装python1.3端口检查1.4获取安装包&#xff0c;并解压1.5安装1.6启动1.7测试1.8安装FATE-Client、FATE-Test、FATE-Flow、jupyter notebook1.8.1FATE-Client、FATE-Test1.8.2FATE-…
阅读更多...
Newman+Jenkins实现接口自动化测试

Newman+Jenkins实现接口自动化测试

一、是什么Newman Newman就是纽曼手机这个经典牌子&#xff0c;哈哈&#xff0c;开玩笑啦。。。别当真&#xff0c;简单地说Newman就是命令行版的Postman&#xff0c;查看官网地址。 Newman可以使用Postman导出的collection文件直接在命令行运行&#xff0c;把Postman界面化运…
阅读更多...
【C++】stack 与 queue

【C++】stack 与 queue

stack 与 queuestackSTL 容器中 stack 的使用模拟实现 stackqueueSTL 容器中 queue 的使用模拟实现 queuestack 在数据结构中&#xff0c;我们了解到&#xff0c;stack 栈结构&#xff0c;是一种先进后出的结构&#xff0c;并且我们是使用顺序表来进行实现栈的操作的。 STL 容…
阅读更多...
如何使用FindFunc在IDA Pro中寻找包含指定代码模式的函数代码

如何使用FindFunc在IDA Pro中寻找包含指定代码模式的函数代码

关于FindFunc FindFunc是一款功能强大的IDA Pro插件&#xff0c;可以帮助广大研究人员轻松查找包含了特定程序集、代码字节模式、特定命名、字符串或符合其他各种约束条件的代码函数。简而言之&#xff0c;FindFunc的主要目的就是在二进制文件中寻找已知函数。 使用规则过滤 …
阅读更多...
C++回顾（六）—— 对象动态建立

C++回顾（六）—— 对象动态建立

6.1 new 和 delete 用法 6.1.1 概述 在软件开发过程中&#xff0c;常常需要动态地分配和撤销内存空间&#xff0c;例如对动态链表中结点的插入与删除。在C语言中是利用库函数malloc和free来分配和撤销内存空间的。C提供了较简便而功能较强的运算符new和delete来取代malloc和f…
阅读更多...
smart-doc Java Restful API 文档生成工具

smart-doc Java Restful API 文档生成工具

smart-doc简介 官方地址smart-doc smart-doc 是一款同时支持 JAVA REST API 和 Apache Dubbo RPC 接口文档生成的工具&#xff0c;smart-doc 在业内率先提出基于 JAVA 泛型定义推导的理念&#xff0c; 完全基于接口源码来分析生成接口文档&#xff0c;不采用任何注解侵入到业…
阅读更多...
vue基础学习笔记

vue基础学习笔记

1.v-text 设置标签的文本值&#xff0c;将标签内的内容完全替换为v-text绑定的值。 如果想要保留标签内的值&#xff0c;可以采用差值表达式的方式&#xff08;<h2>text{{message}}</h2>&#xff09; 内部值支持拼接 <!DOCTYPE html> <html lang"en…
阅读更多...
Unity Asset Bundle学习 - 加载网络资源

Unity Asset Bundle学习 - 加载网络资源

昨天调试了一下加载本地资源 Unity Asset Bundle学习 - 加载本地资源 今天试一下用Asset Bundle加载网络数据 接着按照文档走 发现 有问题 引用命名空间一直报错 按文档走不通 就直接百度查了 查了好多 这个东西有很多前辈的经验 直接拷贝代码拿过来用的 下面这段是测试没问题…
阅读更多...
技术分享 | OceanBase 集群扩容缩容

技术分享 | OceanBase 集群扩容缩容

作者&#xff1a;杨文 DBA&#xff0c;负责客户项目的需求与维护&#xff0c;会点数据库&#xff0c;不限于MySQL、Redis、Cassandra、GreenPlum、ClickHouse、Elastic、TDSQL等等。 本文来源&#xff1a;原创投稿 *爱可生开源社区出品&#xff0c;原创内容未经授权不得随意使用…
阅读更多...
面试官：为什么说ArrayList线程不安全？

面试官：为什么说ArrayList线程不安全？

本博客知识点收录于&#xff1a;⭐️《JavaSE系列教程》⭐️ 1&#xff09;线程安全与不安全集合 我们学习集合的时候发现集合存在由线程安全集合和线程不安全集合&#xff1b;线程安全效率低&#xff0c;安全性高&#xff1b;反之&#xff0c;线程不安全效率高&#xff0c;安…
阅读更多...
Yuga Labs发布“TwelveFold“进军BTC，新大陆的探索即将开启

Yuga Labs发布“TwelveFold“进军BTC，新大陆的探索即将开启

Yuga Labs 正在将新的 NFT 引入比特币区块链&#xff0c;并于 2 月 28 日推出了一个名为 TwelveFold 的系列。该系列是比特币网络上“刻在 satoshis 上”的 300 个生成作品的限量版。据官方说明&#xff0c;TwelveFold将限量发行三百幅的生成式NFT 画作&#xff0c;每件NFT 作品…
阅读更多...
AcWing3696. 构造有向无环图

AcWing3696. 构造有向无环图

先看题&#xff1a; 首先来看一下题目的要求&#xff1a;利用给定的边来构造一个有向无环图。 那么什么是有向无环图呢&#xff1f;我们来搜索一番&#xff1a;"所谓有向无环图其实就是&#xff1a;有方向的边&#xff1b;这些边在一个图中不会构成一个闭合的环路。"…
阅读更多...
学习大数据应该掌握哪些技能

学习大数据应该掌握哪些技能

想要了解大数据开发需要掌握哪些技术&#xff0c;不妨先一起来了解一下大数据开发到底是做什么的~ 1、什么是大数据&#xff1f; 关于大数据的解释&#xff0c;比较官方的定义是指无法在一定时间范围内用常规软件工具进行捕捉、管理和处理的数据集合&#xff0c;是需要新处理模…
阅读更多...
C++STL详解（四）—— vector模拟实现

C++STL详解（四）—— vector模拟实现

文章目录vector内置成员变量默认成员函数初始化列表构造迭代器区间构造函数赋个数赋值构造函数赋值构造的相关问题拷贝构造函数赋值运算符重载函数析构函数迭代器及迭代器相关函数begin和end范围for容量与扩容相关函数size和capacityreserveresizeemptyvector中的增删查改&…
阅读更多...
「攻略手册」：ShardingSphere 与 Java 应用性能优化

「攻略手册」：ShardingSphere 与 Java 应用性能优化

笔者曾经写过一篇文章&#xff0c;介绍 ShardingSphere 在具体代码细节上的优化案例&#xff0c;但文章中没有介绍如何发现代码优化点。本文将结合之前笔者在 ShardingSphere 相关性能问题排查、优化经验&#xff0c;简要地介绍 ShardingSphere 性能问题排查、优化应如何入手。…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023