Vue.js3学习篇--Vue模板应用

news2024/11/28 10:55:27

目录

一,模板基础

 1.模板插值

（1）基础插值

（2）HTML代码插值

（3）标签属性插值

2.模板指令

（1）定义

（2）指令参数

二.条件渲染

1.使用v-if指令渲染

2.使用v-show指令渲染

三.循环渲染

1.v-for指令

2.v-for指令的高级用法

四.实战

一,模板基础
 1.模板插值
（1）基础插值

        用法：模板插值是Vue中基础的模板用法，一般在HTML的标签中用“{{}}”进行变量插值，其可以将当前组件中定义的变量的值插入指定位置，并且这种插值会默认实现绑定的效果，当我们修改变量的值时，其也可以同步反馈到页面的渲染上

例如一个基础的Vue应用：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
<!--导入Vue-->
    <script src="https://unpkg.com/vue@next"></script>
    <title>Title</title>
</head>
<body>
<div style="text-align: center" id="Application">
    <h1>{{count}}</h1>
    <button v-on:click="clickButton">click</button>
</div>
<script>
    const App={
        data(){
            return{
                count:0
            }
        },
        methods:{
            clickButton(){
                this.count=this.count+1
            }
        }
    }
    Vue.createApp(App).mount("#Application")
</script>
</body>
</html>

效果：

当我们点击按钮时，次数累加

        一般情况是，某些组件的渲染是由变量控制的，如果我们想让它一旦渲染后就不能够再被修改，这可以使用v-once指令实现，被这个指令设置的组件在进行变量插值时只会插值一次

如果将上面的代码改为如下后，无论怎么点击按钮，标题都不改变：

<h1 v-once>这里的渲染内容不会改变：{{count}}</h1>
（2）HTML代码插值

        还有，如果要插入的文本为一段HTML代码时，直接使用双括号时就不能实现效果，双括号会将里面的变量解析成纯文本，写的代码什么样，渲染时就渲染什么样，

例如上面的例子定义App的数据：

插值是一个HTML代码

    data(){
            return{
                count:0,
                countHTML:"<span style='color: #FF0000'>0</span>"
            }
        }

插值位置：

  <h1>{{countHTML}}</h1>

再运行后，输出纯文本了：

        效果不是我们想的，对于HTML代码的插值，需要用v-html指令完成：

    <h1>模板内容：<span v-html="countHTML"></span></h1>

效果：

（3）标签属性插值

        对于标签属性的插值，双括号同样不好使，而是需要使用v-bind指令

例如：

<h1 v-bind:id="test">属性插值{{count}}</h1>

定义一个CSS样式：

 #h1{
            color: blue;
        }

然后在data中添加一个名为test的Vue组件属性：

 data(){
            return{
                count:0,
                countHTML:"<span style='color: #FF0000'>0</span>",
                test:"h1"
            }
        }

运行代码后，之前定义的count插值变量得到了一个CSS属性h1：

2.模板指令
（1）定义

        本质上，Vue中的模板指令也是HTML属性标签，其通常由前缀“v-”开头，例如之前看到的v-on，v-html，v-bind等。某些特殊的Vue指令还可以指定参数，参数和指令使用冒号进行分隔，例如：

v-bind:style
v-on:click
（2）指令参数

        还有就是指令的参数本身也可以是动态的，想换就换，例如定义一个区分id选择器和类选择器的组件样式，通过修改参数prop的值实现id选择器和类选择器之间的转换：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
<!--导入Vue-->
    <script src="https://unpkg.com/vue@next"></script>
    <title>Title</title>
    <style>
        #h1{
            color: blue;
        }
        .h1{
            color: #3e8e41;
        }
    </style>
</head>
<body>
<div style="text-align: center" id="Application">
    <h1>模板内容：<span v-html="countHTML"></span></h1>
    <h1 v-bind:id="test">属性插值{{count}}</h1>
    <!--prop是可变参数-->
    <h1 v-bind:[prop]="name" v-if="show">标题</h1>
    <button v-on:click="clickButton">click</button>
</div>
<script>
    const App={
        data(){
            return{
                count:0,
                countHTML:"<span style='color: #FF0000'>0</span>",
                test:"h1",
                show:true,
                prop:'class',   //prop:'id'
                name:'h1'
            }
        },
        methods:{
            clickButton(){
                this.count=this.count+1
            }
        }
    }
    Vue.createApp(App).mount("#Application")
</script>
</body>
</html>

当参数prop是class时：

当参数prop是id时：

实现了通过参数prop改变选择器类型

（3）语法糖

        语法糖是指在不影响功能的情况下，添加某些方法实现同样的效果，说白了就是缩写，Vue的v-bind和v-on是比较常用的指令，使用它们都有自己的语法糖。

        对于v-bind指令，可以省略v-bind直接用冒号“：”，例如：

<a v-bind:href="url">链接</a>
<img v-bind:src="imgUrl>
<!--缩写为-->
<a :href="url">链接</a>
<img :src="imgUrl>

        对于v-on指令可以直接用“@”来缩写，例如：

<button v-on:click="click">点击</button>
<!--缩写为-->
<button @click="click>点击</button>
二.条件渲染

        条件渲染是Vue控制HTML页面渲染的方式之一，一般通过v-if和v-show指令来实现

1.使用v-if指令渲染

        简单使用：

<h1 v-if="boolean">title</h1>

        上面的代码中boolean变量可以是布尔值有可以是条件语句，只有当boolean变量的值为真时或某个条件为真时当前标题元素才会被渲染，同时，if关键字还可以和else关键字结合使用组成if-else块

<h1 v-if="boolean">title</h1>
<p v-else>如果不显示title就显示段落</p>

        注意的是，v-else要紧接v-if使用才能构成if-else块，例如下面的代码就会出错：

<h1 v-if="boolean">title</h1>
<h1>不构成if-else块</h1>
<p v-else>如果不显示title就显示段落</p>

        在v-if和v-else之间，还可以插入任意多的v-else-if来实现多分支渲染，例如：

<h1 v-if="score==100">满分</h1>
<h1 v-else-if="score>=80&&score！==100">优秀</h1>
<h1 v-else-if="score<80&&score>=60>及格</h1>
<h1 v-else>不及格</h1>

        如果想通过通过标签控制多个标签元素有如下两种实现方法：

（1）使用div标签对要进行控制的元素进行包装：

<div v-if="boolean">
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
</div>

（2）使用template标签对元素进行分组：

<template v-if="boolean">
    <p>a</p>
    <p>c</p>
    <p>b</p>
    <p>d</p>
</template>

        它们都实现同时控制多个标签元素的渲染，只不过div标签不是也会被渲染出来，而templa标签则不会被渲染出来，但其内控制的标签默认属性display：none不显示出来

2.使用v-show指令渲染

        v-show指令的基本用法和v-if类似，不同的是v-show并不支持template模板，同样不可以和v-else结合使用，更加扯淡的是v-show无论条件的真假它都显示，v-show的渲染逻辑只是一种视觉上的渲染，它通常只是通过简单的切换CSS样式中的display属性来实现展示效果

简单使用：

<h1 v-show="boolean">title</h1>
三.循环渲染

        循环渲染一般是用来渲染列表这一类组件

1.v-for指令

        在Vue中，v-for指令可以将一个数组中的数据渲染为列表视图，数组的设置语法格式：

item in list
<!--或-->
item of list

类似于python中数组的语法，一个临时变量item循环迭代数组list

例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
<!--导入Vue-->
    <script src="https://unpkg.com/vue@next"></script>
    <title>Title</title>
</head>
<body>
<div>
    <div id="Application">
        <div v-for="item in list">
            {{item}}
        </div>
    </div>
</div>
<script>
const App={
    data(){
        return{
            list:[1,2,3,5,6,7]
        }
    }
}
Vue.createApp(App).mount("#Application")
</script>
</body>
</html>

渲染结果：

列表也可以是键值对，我们也可以获取列表的索引：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
<!--导入Vue-->
    <script src="https://unpkg.com/vue@next"></script>
    <title>Title</title>
</head>
<body>
<div>
    <div id="Application">
        <div v-for="(key,value,index) in list">
            {{index}}-{{value}}:{{key}}
        </div>
    </div>
</div>
<script>
const App={
    data(){
        return{
            list:{
                name:'hello',
                age:'time',
                school:'hello',
                title:'world'
            }
        }
    }
}
Vue.createApp(App).mount("#Application")
</script>
</body>
</html>

渲染效果：

2.v-for指令的高级用法

        v-for指令在渲染列表时，当我们调用如下这些函数对列表数据对象进行更新时，视图也会对于的更新，函数有：

push()        //向列表尾部追加一个元素
pop()        //删除列表尾部的一个元素
unshift()        //向列表头部插入一个元素
shift()        //删除列表头的一个元素
splice()        //对列表进行操作
sort()        //对列表进行排序操作
reverse()        //对列表进行逆序

例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
<!--导入Vue-->
    <script src="https://unpkg.com/vue@next"></script>
    <title>Title</title>
</head>
<body>
<div>
    <div id="Application">
        <div v-for="key in list">
           {{key}}
        </div>
        <button @click="sort">sort</button>
        <button @click="reverse">reverse</button>
        <button @click="push">push</button>
        <button @click="pop">pop</button>
        <button @click="shift">shift</button>
        <button @click="unshift">unshift</button>
        <button @click="splice">splice</button>
    </div>
</div>
<script>
const App={
    data(){
        return{
            list:[3,5,2,5,1,2,8,7],
        }
    },
    methods:{
        <!--原数据修改-->
        splice(){
          this.list.splice(1,1)
        },
        <!--头部删除-->
        shift() {
        this.list.shift()
            },
        <!--头部插入-->
        unshift(){
            var num=parseInt(Math.random()*10)
          this.list.unshift(num)
        },
        <!--尾部删除-->
        pop(){
            this.list.pop()
        },
        <!--排序-->
       sort(){
            this.list.sort()
        },
        <!--逆序-->
        reverse(){
          this.list.reverse()
        },
        <!--尾部追加-->
        push(){
            var num=parseInt(Math.random()*10)
           this.list.push(num)
        }
    }
}
Vue.createApp(App).mount("#Application")
</script>
</body>
</html>

效果：点击各个按钮实现对于的操作

四.实战

        实现一个简单的待办任务列表应用，其可以展示当前未完成的任务项，也可以添加新的任务以及删除以及完成的任务

看码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="Application">
    <!--输入框元素，用来新建待办任务-->
    <form @submit.prevent="addTask">
        <span>新建任务</span>
        <input v-model="taskText" placeholder="请输入任务..."/>
        <button>添加</button>
    </form>
    <!--有序列表-->
    <ol>
        <li v-for="(item,index) in todos">
            {{item}}
            <button @click="remove(index)">删除任务</button>
            <hr/>
        </li>
    </ol>
</div>
<script>
    const App={
        data(){
            return{
                //待办任务列表数据
            todos:[],
                //当前输入的待办任务
                taskText:""
            }
        },
        methods:{
            //添加一条待办任务
            addTask(){
              //判断输入框是否为空
              if(this.taskTest.length===0){
                  alert("请输入任务")
                  return
              }
              this.todos.push(this.taskText)
                this.taskText=""
            },
            remove(index){
                this.todos.splice(index,1)
            }
        }
    }
    Vue.createApp(App).mount("#Application")
</script>
</body>
</html>

效果：

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

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

相关文章

采集SEO方法-添加链接段落

采集SEO方法-添加链接段落

采集大量的文章数据&#xff0c;要想批量做SEO添加链接段落方法&#xff0c;可以使用简数采集器的处理规则实现。 简数采集器的一个处理规则&#xff0c;可以包含多种SEO方法&#xff0c;还可自由组合&#xff0c;强大灵活方便。 添加补充链接段落的SEO技巧&#xff1a; 1&a…
阅读更多...
vue2与vue3 v-model的区别

vue2与vue3 v-model的区别

目录 Vue 2中的v-model 默认使用 自定义使用 修饰符.sync (Vue2) Vue3.x 使用 v-model vue 3 的v-model使用原理 多个 v-model 使用 总结 Vue 2中的v-model 在Vue 2中&#xff0c;v-model是一个用于在子组件和父组件之间双向绑定数据的指令。当在子组件中使用v-mode…
阅读更多...
【数据结构】AVL树(C++实现)

【数据结构】AVL树(C++实现)

​ ​&#x1f4dd;个人主页&#xff1a;Sherry的成长之路 &#x1f3e0;学习社区&#xff1a;Sherry的成长之路&#xff08;个人社区&#xff09; &#x1f4d6;专栏链接&#xff1a;数据结构 &#x1f3af;长路漫漫浩浩&#xff0c;万事皆有期待 上一篇博客&#xff1a;【数据…
阅读更多...
性格敏感怎么办？改变性格敏感的方法有哪些？

性格敏感怎么办？改变性格敏感的方法有哪些？

有这么一群人&#xff0c;他们的情绪很容易受到外界的影响&#xff0c;就像一汪宁静的湖水&#xff0c;被风轻易地吹出皱纹。他们有着高度敏感的神经&#xff0c;外界稍微一点风吹草动&#xff0c;就会牵动他们紧张的情绪。 他们的思维就像脱缰的野马&#xff0c;生活中任何一…
阅读更多...
String 进阶

String 进阶

字符串拼接 // 常量与常量的拼接结果放在常量池 // 常量池中不会存在相同的常量 String str1 "a" "b"; System.out.println(str1 "ab");// 拼接时有一个为变量&#xff0c;则结果会放在堆中。 // 变量拼接的原理是 StringBuilder append 最后…
阅读更多...
C++代码示例：进制数简单生成工具

C++代码示例：进制数简单生成工具

文章目录 前言代码仓库内容代码&#xff08;有详细注释&#xff09;编译和运行命令结果总结参考资料作者的话 前言 C代码示例&#xff1a;进制数简单生成工具。 代码仓库 yezhening/Programming-examples: 编程实例 (github.com)Programming-examples: 编程实例 (gitee.com) …
阅读更多...
VSCode 在部分 Linux 设备上终端和文本编辑器显示文本不正常的解决方法

VSCode 在部分 Linux 设备上终端和文本编辑器显示文本不正常的解决方法

部分Linux设备上运行VSCode时&#xff0c;发现文本编辑器的缩放不明显&#xff0c;终端字体间距过大等。 这里以Kali Linux为例&#xff0c;其他Linux发行版请选择对应的系统内置的等宽字体 我们依次打开 设置 -> 外观 -> 字体 这里我们可以发现&#xff0c;Kali Linux默…
阅读更多...
华为云云耀云服务器L实例评测｜Elasticsearch的可视化Kibana工具安装 IK分词器的安装和使用

华为云云耀云服务器L实例评测｜Elasticsearch的可视化Kibana工具安装 IK分词器的安装和使用

前言 最近华为云云耀云服务器L实例上新&#xff0c;也搞了一台来玩&#xff0c;期间遇到各种问题&#xff0c;在解决问题的过程中学到不少和运维相关的知识。 本篇博客介绍Elasticsearch的可视化Kibana工具安装&#xff0c;以及IK分词器的安装和使用。 其他相关的Elasticsea…
阅读更多...
为什么需要工业物联网 (IIoT)？如何实施？

为什么需要工业物联网 (IIoT)？如何实施？

制造业数字化、网络化、智能化已经是大势所趋。这些特性都在改变着制造业的格局&#xff0c;进而影响着我们生活和工作的方式。工业物联网作为一种利用传感器、云计算、大数据和人工智能等技术&#xff0c;实现了工业设备、流程和服务的智能化&#xff0c;正逐渐成为制造业的发…
阅读更多...
【U8+】查看余额表只有科目，没有借贷方发生额以及余额。

【U8+】查看余额表只有科目，没有借贷方发生额以及余额。

【问题描述】 使用用友U8时&#xff0c; 查询发生额及余额表过程中&#xff0c; 打开报表后&#xff0c;只有科目列&#xff0c;所有金额列都没有。 并且点击【还原列宽】没有没有任何反应&#xff1b;点击【栏目】后&#xff0c;发现栏目设置中全部为空。 【解决方法】 跟踪…
阅读更多...
转转闲鱼交易猫链接源码搭建 独立后台

转转闲鱼交易猫链接源码搭建 独立后台

转转交易猫闲鱼后台源码&#xff0c;功能强大包含了多种模板和功能等等 后台一键生成链接&#xff0c;独立后台管理 教程&#xff1a;修改数据库账号 不会可以看源码里有教程 下载源码&#xff1a;https://pan.baidu.com/s/16lN3gvRIZm7pqhvVMYYecQ?pwd6zw3
阅读更多...
2023年汉字小达人市级比赛题型示例和全真在线练习题

2023年汉字小达人市级比赛题型示例和全真在线练习题

上一篇文章中&#xff0c;六分成长介绍了2023年汉字小达人市级比赛的相关安排和常见的问题解答&#xff0c;这篇文章我来给大家介绍具体的题型和典型试题&#xff0c;并且将这些模拟题做成了电子版&#xff0c;每次抽题150道&#xff0c;和市级比赛完全一样&#xff0c;尽早熟悉…
阅读更多...
PHP 反序列化漏洞：身份标识

PHP 反序列化漏洞：身份标识

文章目录 参考环境访问修饰符访问修饰符PHP 与访问修饰符 手写身份标识身份标识定义身份标识控制字符 NUL在 PHP 中如何表示空字符&#xff1f; 通过空字符尝试构建包含非公共属性对象的序列化文本 空字符的传输控制字符的不可打印性结论另辟蹊径URL 字符编码将非 ASCII 字符文…
阅读更多...
c#设计模式-结构型模式 之 组合模式

c#设计模式-结构型模式 之 组合模式

&#x1f680;简介 组合模式又名部分整体模式&#xff0c;是一种 结构型设计模式 &#xff0c;是用于把一组相似的对象当作一个 单一的对象 。组合模式 依据树形结构来组合对象 &#xff0c;用来表示部分以及整体层&#xff0c;它可以让你将对象组合成树形结构&#xff0c;并且…
阅读更多...
UE5报错及解决办法

UE5报错及解决办法

1、编译报错&#xff0c;内容如下&#xff1a; Unable to build while Live Coding is active. Exit the editor and game, or press CtrlAltF11 if iterating on code in the editor or game 解决办法 取消Enable Live Coding勾选
阅读更多...
摆脱推荐算法，实现万物皆可『RSS』

摆脱推荐算法，实现万物皆可『RSS』

前言 相信各位对推荐算法已经很熟悉了&#xff0c;平台基于推荐算法不断推送我们感兴趣的信息&#xff0c;但是身处推荐算法中心&#xff0c;有时我们可能感觉视野越来越闭塞&#xff0c;原来节约我们时间的推荐系统&#xff0c;这时却成了困住我们的信息茧房 那么也许 RSS&a…
阅读更多...
007：连续跌三天，第四天上涨的概率--可视化优化1

007：连续跌三天，第四天上涨的概率--可视化优化1

接着006&#xff0c;有一些问题&#xff0c;要手动改文件&#xff0c;麻烦&#xff0c;直接出来一个按钮&#xff0c;点击出现弹窗可以选择文件。 二来就是&#xff0c;所统计的数据&#xff0c;没有展示细节。应该展示的细节包括&#xff1a;股票代码&#xff0c;K线周期&…
阅读更多...
JDK11优化了哪些功能以及新增了哪些特性功能|JDK各个版本的特性分析

JDK11优化了哪些功能以及新增了哪些特性功能|JDK各个版本的特性分析

一、前言 上一期讲了JDK10的一些新特性&#xff0c;需要回顾的朋友们可以去该专栏回顾一下 这一期讲一讲JDK11的一些新功能 二、新增特性 以下是JDK 11的一些新增或变化的特性&#xff1a; 1. 纯字符串类型的 HTTP 客户端: JDK 11 引入了一个新的 HTTP 协议的客户端 API&…
阅读更多...
【STM32基础 CubeMX】定时器的使用

【STM32基础 CubeMX】定时器的使用

文章目录 前言一、定时器是什么二、CubeMX配置定时器三、代码分析3.1 CubeMX代码分析3.2 几个库函数以中断的方式开启定时器定时器中断函数 四、定时器应用4.1 定时器闪烁LED 总结 前言 在嵌入式系统开发中&#xff0c;精确地控制时间和时序是至关重要的。STM32微控制器提供了…
阅读更多...
错误：F13 is an invalid placement site

错误：F13 is an invalid placement site

在vivado中绑定引脚时提示&#xff1a;F13 is an invalid placement site f13引脚在板子上是接千兆网的rxclk端的。在进一步不排查出现这样的问题提示 Illegal to place instance u_gmii_to_rgmii/u_rgmii_rx/BUFIO_inst on site TIEOFF_X0Y326. The location site type (TIEOF…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023