Vue新手村（一）

目录

1、Vue简介——Vue的特点

2、Vue的第一个页面

3.Vue的简单使用介绍

3.1、{{ }}的使用

3.2、v-text和v-html

3.2.1、v-text和{{ }}的区别

3.2.2、v-html和v-text的区别

3.3、v-on【事件绑定】

3.3.1、绑定事件的语法

 3.3.2、语法简化

3.3.3、传参

3.4、v-show和v-if

3.5、v-bind

3.5.1、基础语法

3.5.2、语法简化加新技巧

3.6、v-for

3.7、v-model双向绑定

1、Vue简介——Vue的特点

  1. Vue是一个JavaScript框架，优点就是简化了页面的js操作【BootStrap是一个css框架，封装css的】
  2. 易用、高效、灵活

2、Vue的第一个页面

        打开VSCode，创建一个test.html文件，引入Vue.js:

//开发版本:
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
//生产版本:
<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

        我们在学习期间，使用开发环境的版本就可以了，一般上线时才会更换为生产环境的~

        一般建议把引用放在html标签的最后面哈~

第一个页面如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="test">
        年龄：{{age}}
    </div>
</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    new Vue({
        el:"#test",
        data:{
            age:18
        }
    })
</script>

效果：

 里面的内容说明：

        在Script标签里面，我们new了一个Vue对象，把数据信息都是放在对象中的。这个对象中，具体格式，如下：

el:"#app"， //指定vue作用范围
data:{
    //用来给vue实例绑定一系列数据
}，
methods:{
    //方法
}

        通过上数的例子，也可以了解到：

  1. new的这个vue对象只有在el中所指作用范围内才会起到效果【建议使用id，具有唯一性】；
  2. 数据信息都是放在data中的，方法都放在methods中；
  3. 访问data中的数据需要{{  }}【其他使用我们下面继续说】

3.Vue的简单使用介绍

3.1、{{ }}的使用

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="test">
        年龄：{{age}}  </br>
        {{age+1}}</br>
        {{name.length}}</br>
        {{name.toUpperCase()}}</br>
    </div>
</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    new Vue({
        el:"#test",
        data:{
            age:18,
            name:"abc"
        }
    })
</script>

效果：

        总结：

                使用{{ }}获取data中的数据时，可以使用表达式、运算符、调用方法等相关操作【不能使用++】

3.2、v-text和v-html

3.2.1、v-text和{{ }}的区别

        v-text用途：用来获取data中的数据，将数据以文本的形式渲染到指定的标签内部，类似于JavaScript中的innerText

v-text代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="test">
        <div>年龄：{{age}}  </div>

        <div v-text="age"></div>
    </div>
</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    new Vue({
        el:"#test",
        data:{
            age:18,
        }
    })
</script>

效果：

看起来好像和{{ }}差不多~

v-text和{{ }}的区别：

代码改动: 

效果展示：

v-text把标签中之前的值也给抹去了~
我把网络放在弱网环境下：

区别总结:

  1. 使用v-text取值会将标签中的原有的数据覆盖，使用{{ }}（插值表达式）的形式不会覆盖
  2. {{ }}（插值表达式）在弱网环境下会出现插值闪烁，而v-text不会

3.2.2、v-html和v-text的区别

        v-html的用途：用来获取data中的数据，将数据中含有的html标签解析，再渲染到指定的标签的内部，类似于JavaScript中的innerHTML

v-html代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="test">
        <div>1年龄：{{age}}  </div>

        <div v-text="age">2年龄：</div>
        <div v-html="age">3年龄：</div>
    </div>
</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    new Vue({
        el:"#test",
        data:{
            age:18,
        }
    })
</script>

看起来和v-text没有区别哈，再看：

代码变更：

效果：

区别总结:

  1. v-html会html标签解析，而v-text只会把他们看做是一个文本

3.3、v-on【事件绑定】

3.3.1、绑定事件的语法

        我们先来回顾一下，js中事件三要素

  1. 事件源：发生事件源头就是事件源，一般指的是html标签
  2. 事件：发生特定动作 如：onclick单击，dbclick双击...
  3. 监听器：事件处理程序，一般指的是事件处理函数

        vue事件v-on，大家看代码，结合着理解一下：

例1：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="test">
        <div>1年龄：{{age}}  </div>
        <button v-on:click="test1">点我</button>
      
    </div>
</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    new Vue({
        el:"#test",
        data:{
            age:18
        },
        methods:{
            test1:function() {
                alert('hhhhhh')
            }
        }
    })
</script>

例2：

为什么是this.age，而不是this.data.age呢，我们打印vue对象来看看：

打开浏览器的console： 

 3.3.2、语法简化

3.3.3、传参

3.4、v-show和v-if

  1. v-show:用来控制页面中某个标签是否展示
  2. v-if：用来控制页面元素是否展示

代码展示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="test">
        <div>1年龄：{{age}}  </div>
        <button v-show="true">v-show111</button>
        <button v-show="false">v-show222</button>
        <button v-if="true">v-if111</button>
        <button v-if="false">v-if222</button>
    </div>
</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    let vue = new Vue({
        el:"#test",
        data:{
            age:18
        },
        methods:{
           
        }
    });
    console.log(vue)
</script>

效果展示，只展示了值为true的：

再来看个案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="test">
        <div>1年龄：{{age}}  </div>
        <button v-show="isShow" @click="test1">v-show111</button>
        <button v-if="isShow" @click="test2">v-if111</button>
    </div>
</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    let vue = new Vue({
        el:"#test",
        data:{
            age:18,
            isShow:true
        },
        methods:{
           test1() {
                this.isShow = !this.isShow
           },
           test2() {
                this.isShow = !this.isShow
           }
        }
    });
    console.log(vue)
</script>

重要点：

小结：

  1. 在使用v-show时可以直接书写boolean值控制元素展示,也可以通过变量控制标签展示和隐藏。
  2. 在v-show中可以通过boolean表达式控制标签的展示和隐藏3.v-if、vshow : 作用: 都是用来控制页面中标签是否展示和隐藏 使用: 标签:v-if
  3. ="true false",v-show="true false"
  4. 区别:
    • v-show: 底层在控制页面标签是否展示时底层使用的是css 中 display 属性来标签展示和隐藏。推荐使用: v-show 在数据量比较大和控制显示状态切换频繁时。
    • v-if: 底层在控制页面标签是否展示时底层是直接操作dom元素，通过对dom元素删除和添加来控制标签的展示和隐藏

3.5、v-bind

3.5.1、基础语法

v-bind：用来绑定标签的属性，从而通过vue动态修改标签属性

代码展示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .aaa {
            background-color: blue;
        }
        .bbb {
            background-color: red;
        }
    </style>
</head>
<body>
    <div id="test">
        <div>1年龄：{{age}}  </div>
        <button v-bind:class="cla" @click="test1">v-show111</button>
    </div>
</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    let vue = new Vue({
        el:"#test",
        data:{
            age:18,
            cla:"aaa"
        },
        methods:{
           test1() {
                this.cla="bbb"
           }
        }
    });
    console.log(vue)
</script>

点击后，颜色就会变了~

3.5.2、语法简化加新技巧

不止是class，除了value，其他的都可以~

3.6、v-for

v-for：作用就是用来对 对象进行遍历（数组也是对象的一种）

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="test">
        <div>1年龄：{{age}}  </div>

        <!-- 遍历对象 -->
        <div v-for="(value,key,index) in user">
            {{index}}_{{key}}: {{value}};
        </div>

        <!-- 遍历数组 -->
        <div v-for="(name,index) in names">
            {{index}}_{{name}}
        </div>

        <!-- 变量含有对象的数组 -->
        <div v-for="(user,index) in users">
            方1：{{index}}___{{user}}
            方2：{{index}}___name:{{user.name}};age"{{user.age}};bir:{{user.bir}}
        </div>

    </div>
</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    let vue = new Vue({
        el:"#test",
        data:{
            age:18,
            user:{
                name:"小龙",
                age:18,
                bir:"2003"
            },
            names:["龙","陈","CL"],
            users:[
                {name:"小龙",age:18,bir:2003},
                {name:"小c",age:20,bir:2004},
                {name:"小l",age:22,bir:2002},
            ]

        },
        methods:{
           test1() {
                this.cla = !this.cla
           }
        }
    });
    console.log(vue)
</script>

效果：

3.7、v-model双向绑定

v-model：作用是用来绑定标签元素的值与vue实例对象中的data数据保持一致，从而实现双向的数据绑定

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="test">
        <div>1年龄：{{age}}  </div>
        <input type="text" v-model="age">
    </div>
</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    let vue = new Vue({
        el:"#test",
        data:{
            age:18
        },
        methods:{
        }
    });
    console.log(vue)
</script>

所谓的双向绑定，就是指表单中的数据变化，vue实例data数据也会变化，vue中data的值变化，表单的值也会变化

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

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

相关文章

excel统计分析——两因素有重复方差分析

excel统计分析——两因素有重复方差分析

参考资料&#xff1a;生物统计学 无重复观测值的两因素方差分析只能研究两个因素的主效应&#xff0c;不能考察因素间的交互作用&#xff0c;只有在确定因素间不存在交互作用时才能进行无重复观测值的试验和分析。为了准确估计因素的主效应、交互作用和随机误差&#xff0c;每个…
阅读更多...
设计模式之原型模式【创造者模式】

设计模式之原型模式【创造者模式】

学习的最大理由是想摆脱平庸&#xff0c;早一天就多一份人生的精彩&#xff1b;迟一天就多一天平庸的困扰。各位小伙伴&#xff0c;如果您&#xff1a; 想系统/深入学习某技术知识点… 一个人摸索学习很难坚持&#xff0c;想组团高效学习… 想写博客但无从下手&#xff0c;急需…
阅读更多...
第121场双周赛题解：揭秘算法竞赛中的数位挑战与解题策略

第121场双周赛题解：揭秘算法竞赛中的数位挑战与解题策略

需要多掌握解题套路 比赛地址 100157. 大于等于顺序前缀和的最小缺失整数 class Solution:def missingInteger(self, nums: List[int]) -> int:# Step 1: Find the longest consecutive prefixi 0 for i in range(1, len(nums)):if nums[i] ! nums[i - 1] 1:breakelse:…
阅读更多...
Zookeeper三节点搭建

Zookeeper三节点搭建

一、安装前准备 安装JDK&#xff08;之前已经安装了&#xff09; 拷贝apache-zookeeper-3.5.7-bin.tar.gz安装包到Linux系统下 解压到指定目录 在/opt/module/zookeeper-3.5.7/这个目录下创建zkData&#xff0c;在/opt/module/zookeeper-3.5.7/zkData目录下创建一个myid的…
阅读更多...
第 121 场 LeetCode 双周赛题解

第 121 场 LeetCode 双周赛题解

A 大于等于顺序前缀和的最小缺失整数 模拟&#xff1a;先求最长顺序前缀的和 s s s &#xff0c;然后从 s s s 开始找没有出现在 n u m s nums nums 中的最小整数 class Solution { public:int missingInteger(vector<int> &nums) {unordered_set<int> vis(…
阅读更多...
MySQL数据管理（二）

MySQL数据管理（二）

DML语言 DML &#xff08;数据操作语&#xff09;&#xff1a;用于操作数据库对象中所包含的数据 DML包括&#xff1a; INSERT&#xff08;添加数据语句&#xff09;UPDATE&#xff08;更新数据语句&#xff09;DELETE&#xff08;删除数据语句&#xff09; 一、添加数据 …
阅读更多...
Matlab三维绘图

Matlab三维绘图

绘制三维图plot3 t0:pi/50:10*pi; xsin(t); ycos(t); zt; plot3(x,y,z); 产生栅格数据点meshgrid 这个接口在绘制三维图像里面相当重要&#xff0c;很多时候要将向量变成矩阵才能绘制三维图。 x0:0.5:5; y0:1:10; [X,Y]meshgrid(x,y); plot(X,Y,o); x和y是向量&#xff0c;…
阅读更多...
qt三大控件

qt三大控件

1.QListWidget控件 先在ui界面将 QListWidget拖出来竖直对齐 再去代码中实现文本插入 两种插入方式 方法1 //listWidget使用 有左右中间对齐需求QListWidgetItem * itemnew QListWidgetItem("床前明月光"); // //上面只是独立的一句话,没有关联起来ui-&g…
阅读更多...
Android AAudio

Android AAudio

文章目录 基本概念启用流程基本流程HAL层对接数据流计时模型调试 基本概念 AAudio 是 Android 8.0 版本中引入的一种音频 API。 AAudio 提供了一个低延迟数据路径。在 EXCLUSIVE 模式下&#xff0c;使用该功能可将客户端应用代码直接写入与 ALSA 驱动程序共享的内存映射缓冲区…
阅读更多...
HarmonyOS4.0系统性深入开发15Want概述

HarmonyOS4.0系统性深入开发15Want概述

Want概述 Want的定义与用途 Want是对象间信息传递的载体&#xff0c;可以用于应用组件间的信息传递。其使用场景之一是作为startAbility()的参数&#xff0c;包含了指定的启动目标以及启动时需携带的相关数据&#xff0c;如bundleName和abilityName字段分别指明目标Ability所…
阅读更多...
模拟算法（模拟算法 == 依葫芦画瓢）万字

模拟算法（模拟算法 == 依葫芦画瓢）万字

模拟算法 基本思想引入算法题替换所有的问号提莫攻击Z字形变换外观数列数青蛙 基本思想 模拟算法 依葫芦画瓢解题思维要么通俗易懂&#xff0c;要么就是找规律&#xff0c;主要难度在于将思路转换为代码。 特点&#xff1a;相对于其他算法思维&#xff0c;思路比较简单&#x…
阅读更多...
线性代数 --- 为什么LU分解中L矩阵的行列式一定等于正负1？

线性代数 --- 为什么LU分解中L矩阵的行列式一定等于正负1？

以下是关于下三角矩阵L的行列式一定等于-1的一些说明 笔者的一些话(写在最前面)&#xff1a; 这是一篇小文&#xff0c;是我写的关于求解矩阵行列式的一篇文章中的一部分。之所以把这一段专门提溜出来&#xff0c;是因为这一段相对于原文是可以完全独立的&#xff0c;也是因为我…
阅读更多...
YOLOv5改进 | 检测头篇 | 增加辅助检测头利用AFPN改进Head（附详细修改教程）

YOLOv5改进 | 检测头篇 | 增加辅助检测头利用AFPN改进Head（附详细修改教程）

一、本文介绍 本文给大家带来的改进机制是利用今年新推出的AFPN（渐近特征金字塔网络）来优化检测头，AFPN的核心思想是通过引入一种渐近的特征融合策略，将底层、高层和顶层的特征逐渐整合到目标检测过程中。这种渐近融合方式有助于减小不同层次特征之间的语义差距，提高特征…
阅读更多...
在VM下使用Composer完成快照方式的软件制作

在VM下使用Composer完成快照方式的软件制作

Composer允许您构建软件、应用程序、偏好设置文件或是文档的安装包&#xff0c;安装包可以部署到远程电脑或是作为镜像流程的一部分。构建软件包的第一步就是创建包源&#xff0c;根据要打包的软件&#xff0c;Composer允许您监视软件的安装和使用驱动器上已存在的文件来创建包…
阅读更多...
python豆瓣实例，抓取多页数据-应用到知识点：随时数，xpath，间隔请求sleep

python豆瓣实例，抓取多页数据-应用到知识点：随时数，xpath，间隔请求sleep

源代码： <!DOCTYPE html> <html lang="zh-CN" class="ua-windows ua-webkit"> <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><meta name="renderer" content=&q…
阅读更多...
计算机网络-VLAN原理与配置

计算机网络-VLAN原理与配置

之前我们学习了以太网的基础知识&#xff0c;了解了网络交换设备的发展&#xff0c;交换机的工作原理&#xff0c;广播域和冲突域。 一、概述 还简单了解了以太网的CSMA/CD通讯机制&#xff0c;以太网是建立在CSMA/CD (Carrier Sense Multiple Access/Collision Detection&…
阅读更多...
【LMM 014】NExT-GPT：能够输入和生成任意模态的多模态大模型

【LMM 014】NExT-GPT：能够输入和生成任意模态的多模态大模型

论文标题&#xff1a;NExT-GPT:Any-to-Any Multimodal Large Language Model 论文作者&#xff1a;Shengqiong Wu, Hao Fei*, Leigang Qu, Wei Ji, Tat-Seng Chua 作者单位&#xff1a; NExT Lab, National University of Singapore 论文原文&#xff1a;https://arxiv.org/abs…
阅读更多...
学习笔记——C++运算符之逻辑运算符

学习笔记——C++运算符之逻辑运算符

作用&#xff1a;用于根据表达式的真值返回真值或假值 逻辑运算符有以下符号&#xff1a; #include<bits/stdc.h> using namespace std; int main(){// 逻辑运算符 非 !int a10;//在c中&#xff0c;除了0均是真 cout<<!a<<endl;//0 cout<<!!a<<…
阅读更多...
《MySQL系列-InnoDB引擎06》MySQL锁介绍

《MySQL系列-InnoDB引擎06》MySQL锁介绍

文章目录 第六章 锁1 什么是锁2 lock与latch3 InnoDB存储引擎中的锁3.1 锁的类型3.2 一致性非锁定读3.3 一致性锁定读3.4 自增长与锁3.5 外键和锁 4 锁的算法4.1 行锁的三种算法4.2 解决Phantom Problem 5 锁问题5.1 脏读5.2 不可重复读5.3 丢失更新 6 阻塞7 死锁 第六章 锁 开…
阅读更多...
解决使用localhost或127.0.01模拟CORS失效

解决使用localhost或127.0.01模拟CORS失效

解决使用localhost或127.0.01模拟CORS失效 前言问题发现问题解决 前言 CORS (Cross-Origin Resource Sharing) 指的是一种机制&#xff0c;它允许不同源的网页请求访问另一个源服务器上的某些资源。通常情况下&#xff0c;如果 JavaScript 代码在一个源中发起了 AJAX 请求&…
阅读更多...
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站