Vue新手村（一）

news2024/11/18 22:39:32

目录

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.coloradmin.cn/o/1362915.html

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

相关文章

组合数据(Python实现)

组合数据(Python实现)

一、主要目的&#xff1a; 1&#xff0e;熟悉组合数据的类型。 2&#xff0e;掌握列表、元组、字典、集合等组合数据的创建、访问方法。 3&#xff0e;掌握组合数据推导式的使用方法 4&#xff0e;熟悉组合数据的常见应用。 二、主要内容和结果展示&#xff1a; 1. 使用两…
阅读更多...
Zookeeper-Zookeeper分布式一致性协议ZAB源码分析（流程图）

Zookeeper-Zookeeper分布式一致性协议ZAB源码分析（流程图）

流程图 ZAB责任链模式
阅读更多...
二手买卖、废品回收小程序 在app.json中声明permission scope.userLocation字段 教程说明

二手买卖、废品回收小程序 在app.json中声明permission scope.userLocation字段 教程说明

处理二手买卖、废品回收小程序 在app.json中声明permission scope.userLocation字段 教程说明 sitemapLocation 指明 sitemap.json 的位置&#xff1b;默认为 ‘sitemap.json’ 即在 app.json 同级目录下名字的 sitemap.json 文件 找到app.json这个文件 把这段代码加进去&…
阅读更多...
每日一题——LeetCode997

每日一题——LeetCode997

方法一 个人方法&#xff1a; 这题的意思就是1-n里面找到一个数&#xff0c;它不指向任何数&#xff0c;其他数都要指向它 找到没有指向任何数的那个idx&#xff0c;如果不存在这样的数那么就返回-1如果找到了这样的数&#xff0c;还要继续判断其它的所有数是否都指向它&…
阅读更多...
斯坦福家用机器人开源项目

斯坦福家用机器人开源项目

模仿学习在机器人技术领域取得了显著进展&#xff0c;它通过学习人类的演示来完成任务&#xff0c;并展示出了令人印象深刻的表现。然而&#xff0c;目前的研究大多集中在桌面操作上&#xff0c;缺乏实现通用移动性和灵活性所需的关键要素。 在这项研究中&#xff0c;开源项目…
阅读更多...
chatglm部署问题

chatglm部署问题

问题&#xff1a; ModuleNotFoundError: No module named ‘transformers_modules.’ 解决方法&#xff1a; 卸载重装 pip uninstall transformerspip install transformers -i https://mirror.baidu.com/pypi/simple
阅读更多...
PySimpleGUI图形界面实例｜PDF表格转换Excel文件

PySimpleGUI图形界面实例｜PDF表格转换Excel文件

目录 实例要求 原始文件 输出文件 运行界面 完整代码 代码分析 遍历表格 布局界面 控件简介 写入表格 事件循环 实例要求 使用PySimpleGUI做一个把单位考勤系统导出的pdf文件合并输出Excel的应用&#xff0c;故事出自&#xff1a; https://hannyang.blog.csdn.net…
阅读更多...
应用OpenCV绘制箭头

应用OpenCV绘制箭头

绘制箭头函数 方法&#xff1a;函数cv2.arrowedLine( ) 语法格式&#xff1a;cv2.arrowedLine(img, pt1, pt2, color[, thickness[, line_type[, shift[, tipLength]]]]) 参数说明&#xff1a; img&#xff1a;要画的直线所在的图像&#xff0c;也称为画布。。 pt1&#x…
阅读更多...
Python从入门到网络爬虫（MySQL链接）

Python从入门到网络爬虫（MySQL链接）

前言 在实际数据分析和建模过程中&#xff0c;我们通常需要从数据库中读取数据&#xff0c;并将其转化为 Pandas dataframe 对象进行进一步处理。而 MySQL 数据库是最常用的关系型数据库之一&#xff0c;因此在 Python 中如何连接 MySQL 数据库并查询数据成为了一个重要的问题…
阅读更多...
【数据库】聊聊常见的索引优化-上

【数据库】聊聊常见的索引优化-上

数据库对于现有互联网应用来说&#xff0c;其实是非常重要的后端存储组件&#xff0c;而大多数系统故障都是由于存储所导致的&#xff0c;而数据库是重中之重&#xff0c;所以为了比较好掌握SQL的基本优化手段&#xff0c;打算用两篇文章从基本的联合索引优化、group by/order …
阅读更多...
Transformer-MM-Explainability

Transformer-MM-Explainability

two modalities are separated by the [SEP] token&#xff0c;the numbers in each attention module represent the Eq. number. E h _h h​ is the mean&#xff0c; ∇ \nabla ∇A : ∂ y t ∂ A {∂y_t}\over∂A ∂A∂yt​​for y t y_t yt​ which is the model’s out…
阅读更多...
动态编译 - Dynamically Compile and Load External Java Classes

动态编译 - Dynamically Compile and Load External Java Classes

文章目录 概述Code 概述 动态编译和加载外部Java类的核心流程可以概括为以下几个步骤&#xff1a; 读取源代码: 首先&#xff0c;需要获取到外部的Java源代码。这通常是通过读取文件、网络资源或者数据库中的源代码字符串来实现的。编译源代码: 接下来&#xff0c;需要使用Ja…
阅读更多...
Oracle VM VirtualBox xx needs the Micrsoft Visual C++ 2019错误

Oracle VM VirtualBox xx needs the Micrsoft Visual C++ 2019错误

错误展示 解决方法 重修安装 Visual C 文件 1、前往官网 C 中 Windows 编程概述 | Microsoft Learn 2、找到对应的包 左边导航栏依次选择&#xff1a; 部署本机桌面应用程序-----重新分发Visual C 文件-----最新受支持的Visual C可再发型程序包下载 根据自己电脑系统进行选…
阅读更多...
数据结构：树详解

数据结构：树详解

创建二叉树 给出了完整的先序遍历序列&#xff0c;子树为空用’#’表示&#xff0c;所以这样我们在通过先序遍历序列创建二叉树时我们直到先序遍历序列是先进行根结点&#xff0c;然后左子树最后右子树的顺序进行遍历的&#xff0c;所以对于完整的先序遍历序列我们可以直到先序…
阅读更多...
指定日期D的年份和月份返回日期D所在的月份：（1）第一天是星期几？（2）该月共有多少天？calendar.monthrange(year,month)

指定日期D的年份和月份返回日期D所在的月份：（1）第一天是星期几？（2）该月共有多少天？calendar.monthrange(year,month)

【小白从小学Python、C、Java】 【计算机等考500强证书考研】 【Python-数据分析】 指定日期D的年份和月份 返回日期D所在的月份&#xff1a; &#xff08;1&#xff09;第一天是星期几&#xff1f; &#xff08;2&#xff09;该月共有多少天&#xff1f; calendar.monthrange(…
阅读更多...
CMU15-445-Spring-2023-Project #1 - 前置知识（lec01-06）

CMU15-445-Spring-2023-Project #1 - 前置知识（lec01-06）

Lecture #01_ Relational Model & Relational Algebra Databases 数据库是相互关联的数据的有组织集合&#xff0c;对现实世界的某些方面进行建模。区别于DBMS&#xff08;MySQL、Oracle&#xff09;。 Flat File Strawman 数据库以CSV文件的形式存储&#xff0c;并由D…
阅读更多...
梦想家内容管理系统（Dreamer CMS）跨站请求伪造漏洞

梦想家内容管理系统（Dreamer CMS）跨站请求伪造漏洞

梦想家内容管理系统&#xff08;Dreamer CMS&#xff09;跨站请求伪造漏洞 目标:GitHub - iteachyou-wjn/dreamer_cms: Dreamer CMS 梦想家内容发布系统采用流行的SpringBoot搭建&#xff0c;支持静态化、标签化建站。不需要专业的后台开发技能&#xff0c;会HTML就能建站&…
阅读更多...
真核微生物基因组质量评估工具EukCC的安装和详细使用方法

真核微生物基因组质量评估工具EukCC的安装和详细使用方法

介绍&#xff1a; GitHub - EBI-Metagenomics/EukCC: Tool to estimate genome quality of microbial eukaryotes 安装&#xff1a; docker&#xff1a; docker pull microbiomeinformatics/eukcc 推荐conda 环境&#xff1a; conda install -c conda-forge -c bioconda …
阅读更多...
Jenkins修改全局maven配置后不生效解决办法、以及任务读取不同的settings.xml文件配置

Jenkins修改全局maven配置后不生效解决办法、以及任务读取不同的settings.xml文件配置

一、修改Global Tool Configuration的maven配置不生效 说明&#xff1a;搭建好jenkins后&#xff0c;修改了全局的settings.xml&#xff0c;导致读取settings一直是之前配置的。 解决办法一 Jenkins在创建工作任务时&#xff0c;会读取当前配置文件内容&#xff0c;固定在这…
阅读更多...
Spring+Vue实战项目环境准备跑通程序

Spring+Vue实战项目环境准备跑通程序

SpringVue 源项目 后端&#xff1a; 首先在GitHub上克隆项目到本地&#xff08;zip包下载/sourcetree拉取/gitbash克隆&#xff09;。 https://github.com/songboriceman/doubao_community_backend 然后下载Lombok安装到你的IDE&#xff08;eclipse&#xff09;。 https://p…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023