Vue学习笔记2 - Vue常用指令

news2024/10/7 20:32:12

上一章 【Vue学习笔记2 -naxVue是什么 】讲了Vue的基本概念。

本章来学习一下Vue常用指令。

1，v-text 绑定文本

2，v-html 绑定 html

3，v-for for循环

4，v-show 显示/隐藏

5，v-if/v-esle-if/v-else 条件式

6，v-on 绑定事件

7，v-bind 单向绑定数据（Vue属性 -> 页面）

8，v-model（Vue属性 <=> 页面， 双向绑定）

1，v-text

data中的strText会替代"Old text"为新text。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../vue.min.js"></script>
</head>
<body>
<div id="app">
    <div v-text="strText">Old text</div>
</div>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            strText: 'A new txt'
        }
    });
</script>
</body>
</html>

运行结果：

第一次运行的话，简单说一下该怎么运行。

1，使用Idea的话，直接点右侧的浏览器图标

然后浏览器自动启动，URL就像下面这样的。 http://localhost:63342/vue-first2/chapter-1/demo3.html?_ijt=41arcpqh9dh1q3tt659e76ucb4&_ij_reload=RELOAD_ON_SAVE

2，先手动启动浏览器，然后直接把demo3.html拖到浏览器中

URL像这样：

file:///C:/vue/vue-first2/chapter-1/demo3.html

2，v-html

把输入当做html代码运行。需要特别说一下，除非能保证安全，千万别用，容易遭XSS攻击。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../vue.min.js"></script>
</head>
<body>
<div id="app">
    <div v-html="strHtml">Old text</div>
</div>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            strHtml: '<a href="http://www.google.con">Google</a>'
        }
    });
</script>
</body>
</html>

 运行一下：

3，v-for

就是for循环的前端写法。数据源可以是数组，也可以是对象。

1）数据源是数组

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../vue.min.js"></script>
</head>
<body>
<div id="app">
    <div>{{title}}</div>
    <div v-for="city in list"><li>{{city}}</li></div>
</div>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            title: '首都',
            list: ['beijing','tokyo','new york','london']
        }

    });
</script>
</body>
</html>

运行结果：

2）数据源是对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../vue.min.js"></script>
</head>
<body>
<div id="app">
    <div>{{title}}</div>
    <div v-for="(val, key) in phone"><li>{{key}}: {{val}}</li></div>
</div>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            title: '手机',
            phone: {"brand": "华为","title": "华为nova 3（全网通） ","price": "2699","score": "6.7","voteCnt": "65","url": "http: //detail.zol.com.cn/cell_phone/index1185512.shtml","pid": "1185512"},
        }
    });
</script>
</body>
</html>

运行结果：

3）当然更为常见的应该是两者结合

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../vue.min.js"></script>
</head>
<body>
<div id="app">
    <div>{{title}}</div>
    <div v-for="phone in phones">
        <li>brand: {{phone.brand}}</li>
        <li>title: {{phone.title}}</li>
        <li>price: {{phone.price}}</li>
        <li>score: {{phone.score}}</li>
        <li>voteCnt: {{phone.voteCnt}}</li>
    </div>
</div>
<script>
    var vm = new Vue({
        el:"#app",
        data: {
            title: '手机',
            phones: [
                {"brand": "华为","title": "华为nova 3（全网通） ","price": "2699","score": "6.7","voteCnt": "65","url": "http: //detail.zol.com.cn/cell_phone/index1185512.shtml","pid": "1185512"},
                {"brand": "vivo","title": "vivo Z1（4GB RAM/全网通） ","price": "1498","score": "8.9","voteCnt": "45","url": "http: //detail.zol.com.cn/cell_phone/index1215075.shtml","pid": "1215075"},
                {"brand": "OPPO","title": "OPPO R15（6GB RAM/全网通） ","price": "2699","score": "9.2","voteCnt": "1055","url": "http: //detail.zol.com.cn/cell_phone/index1206990.shtml","pid": "1206990"},
                {"brand": "三星","title": "三星GALAXY S8（G9500/单卡版/全网通） ","price": "3399","score": "8.9","voteCnt": "411","url": "http: //detail.zol.com.cn/cell_phone/index1179484.shtml","pid": "1179484"},
            ]
        }
    });
</script>
</body>
</html>

运行结果：

4，v-show

控制元素的显示隐藏。元素隐藏时，相当于给该元素添加了 CSS 样式：display:none;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../vue.min.js"></script>
</head>
<body>
<div id="app">
    blnDisplay设为false，下面标检将被隐藏：
    <div v-show="blnDisplay">Show text</div>
</div>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            blnDisplay: true
        }
    });
</script>
</body>
</html>

运行一下：

如果设为false，那么标签就被隐藏了。

来看一下网页源码，内容都还在的，就是被隐藏了而已。

 而且，看来vue是通过 </html>标签后面的那一大段自动生成的JS代码实现了指令功能。

5，v-if/v-esle-if/v-else

就是 if/elseif/else 条件判断的前端写法。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../vue.min.js"></script>
</head>
<body>
<div id="app">
    <div v-if="account==='admin'">Display Admin</div>
    <div v-else-if="account==='common user'">Display Common User</div>
    <div v-else>Display Other</div>
</div>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            account: 'admin'
        }
    });
</script>
</body>
</html>

运行一下：

6，v-on

事件监听器，可简写为 [ @ ]

比如下面 v-on:click 、v-on:dblclick 单击、双击事件。

这里面的 this 操作符，它可以操作 data领域的字段。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../vue.min.js"></script>
</head>
<body>
<div id="app">
    <button v-on:click="onClick">Click Me</button>
    <button @dblclick="onDoubleClick">Double Click Me</button>
    <div>{{num}}</div>
</div>
<script>
    var vm = new Vue({
        el:"#app",
        data: {
            num: 0
        },
        methods: {
            onClick: function(event){
                this.num +=1;
                console.log(this.num);
            },
            onDoubleClick: function(event){
                this.num +=10;
                console.log(this.num);
            }
        }

    });
</script>
</body>
</html>

运行一下：

有关事件，除了基本的 v-on之外，还有修饰符，比如：

.once 只执行一次。比如，<a @click.once="doThis"></a>

.left -  只当点击鼠标左键时触发。
.right -  只当点击鼠标右键时触发。
.middle - 只当点击鼠标中键时触发。  
.{keyCode | keyAlias} ——键盘事件——只当事件是从特定键触发时才触发回调。比如：
.enter - 只有在 `key` 是 `Enter` 时才触发回调。(键盘事件 只当事件是从特定键触发时才触发回调)

比如 <input v-on:keyup.enter="submit">

7，v-bind 单向绑定数据（Vue属性 -> 页面）

v-bind:属性绑定(简写为 [:] )。由Vue的data属性，单向绑定到页面元素。页面值变化不会回绑的。

（区别 v-model：双向绑定。）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="../vue.min.js"></script>
</head>
<body>
<div id="app">
  <input v-bind:value="inputValue" type="text" />
  <div>{{inputValue}}</div>
</div>
<script>
  var vm = new Vue({
    el:"#app",
    data: {
      inputValue: 'Hello Vue!'
    }
  });
</script>
</body>
</html>

运行结果：

这里想说明的是，这是个单向绑定，inputValue的值发生了变化，不会影响Vue属性的值。

 

这里想说明的是，如果Vue属性的值发生了变化，会直接反映到页面上。

这就是单向绑定。

多值绑定：就是一个绑定里面，放入多个属性。

当然也有替代方式，就是拼串到一个属性，然后再绑定。

比如：

（这里面有关 Vue中class的写法，详细请参照 ： Class 与 Style 绑定 — Vue.js）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="../vue.min.js"></script>
  <style>
    .fontcolor{
      color:red;
    }
    .backcolor{
      background: blue;
    }
  </style>
</head>
<body>
<div id="app">
  <p v-bind:class="[vcolor, vbackcolor]">1,数组-{{vdata}}</p>
  <p v-bind:class="vcolorall">2，data属性{{vdata}}</p>
  <p :class="{fontcolor:blnColor, backcolor:blnBackColor}">3，真假渲染{}-{{vdata}}</p>
</div>
<script>
  var vm = new Vue({
    el:"#app",
    data: {
      vdata: 'Test',
      vcolor: 'fontcolor',
      vbackcolor: 'backcolor',
      vcolorall: 'fontcolor backcolor',
      blnColor: true,
      blnBackColor: false,
    }
  });
</script>
</body>
</html>

运行一下：

8，v-model（Vue属性 <=> 页面， 双向绑定）

双向绑定，就是 Vue属性 和 页面，任意一方变化，立即反映到另一方。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="../vue.min.js"></script>
</head>
<body>
<div id="app">
  v-model:<input v-model:value="inputValue" type="text" /><br/>
  <div>{{inputValue}}</div><br/>
  v-model2:(简写)<input v-model="inputValue" type="text" /><br/>
  <div>{{inputValue}}</div>
</div>
<script>
  var vm = new Vue({
    el:"#app",
    data: {
      inputValue: 'Hello Vue!'
    }
  });
</script>
</body>
</html>

 运行结果：

改变页面数据，也会立即反映到Vue属性，Vue属性。

 改变Vue属性值，也会立即反映到页面。

<参考>

1，Vue常用指令

Vue常用指令_vue中常用指令_卖火柴的小男孩2的博客-CSDN博客

2， 官方 URL

  内置指令 | Vue.js

3，Vue指令

vue指令_vue常用指令_Rookie____________的博客-CSDN博客

4，Vue中v-bind，v-model，v-on

Vue中v-bind,v-on,v-model都是干什么的(区别以及详细用法)?自制动图,一看就懂 ∠( °ω°)／ 前端知识_寻_觅的博客-CSDN博客


5，vue 的双向绑定原理

 

vue 的双向绑定原理_vue数据双向绑定原理一句话概括_weixin79893765432...的博客-CSDN博客
 

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

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

相关文章

open3d 源码阅读octree_*.py

open3d 源码阅读octree_*.py

目录 1. 从点云中创建octree 2. 从体素网格中创建octree 3. 遍历octree 1. 从点云中创建octree octree_find_leaf.py convert_from_point_cloud 建立octree&#xff0c;查询点云中某个点在octree中哪个叶子节点。 # --------------------------------------------------…
阅读更多...
Redis（连接池）

Redis（连接池）

SpringBoor环境下使用redis连接池 依赖&#xff1a; <dependencies><dependency><groupId>com.yugabyte</groupId><artifactId>jedis</artifactId><version>2.9.0-yb-11</version></dependency><dependency><…
阅读更多...
乘势而上，在社科大能源管理硕士项目的引领下，更上一层楼

乘势而上，在社科大能源管理硕士项目的引领下，更上一层楼

很多人都说&#xff0c;生活的起点不重要&#xff0c;重要的是你最后抵达到哪里。进入职场的门槛后&#xff0c;我们一路过关打怪才拥有了如今的职位。在享受喜悦的同时&#xff0c;有为未来做规划吗&#xff0c;乘势而上才是明智的抉择&#xff0c;让我们在社科大能源管理硕士…
阅读更多...
Seata 1.6.1整合SpringCloud实现分布式事务(含代码)

Seata 1.6.1整合SpringCloud实现分布式事务(含代码)

一、环境： seata 1.6.1spring cloud :2021.0.6spring cloud alibaba: 2021.0.4.0nacos: 2.2.1mysql: 8二、部署seata-server 2.1 启动nacos 这里不再赘述 2.2 下载seata-server 下载地址：https://seata.io/zh-cn/blog/download.html 下载后解压，即为seata-server端，提…
阅读更多...
摄影测量-笔记（理解篇）

摄影测量-笔记（理解篇）

1、基本原理 基于测量中的前方交会原理。 在两个已知点上分别拍摄一张影像&#xff0c;通过人眼观测&#xff08;一只眼睛观察一张影像上的同名点a1和a2&#xff09;&#xff0c;就能得出空间对应点A的坐标。空间景物通过传感器构像&#xff0c;再用人眼观察构像的像片产生生…
阅读更多...
GPT 学术优化版使用指南 -- GPT Academic

GPT 学术优化版使用指南 -- GPT Academic

目录 1. 项目介绍 1.1 简介 1.2 功能说明 2. 环境配置 2.1 本地安装
阅读更多...
linux查询文件并且大到小排列

linux查询文件并且大到小排列

du -sh * |sort -hr
阅读更多...
STL-String容器

STL-String容器

string本质上是一个类&#xff0c;string 类内部封装了很多成员方法 例如&#xff1a;查找find&#xff0c;拷贝copy&#xff0c;删除delete 替换replace&#xff0c;插入insert string管理char*所分配的内存&#xff0c;不用担心复制越界和取值越界等&#xff0c;由类内部进…
阅读更多...
C++容器适配器stack和queue（含deque,priority_queue）

C++容器适配器stack和queue（含deque,priority_queue）

目录 1.容器适配器 1.1 什么是适配器 1.2 STL标准库中stack和queue底层结构 1.3 deque 1.3.1 deque原理介绍&#xff08;了解&#xff09; 1.3.2 deque优点和缺点 1.3.3 为什么选择deque作为stack和queue的底层默认容器 2. stack介绍和使用 2.1 stack介绍 2.2 stack使用 2.3 …
阅读更多...
HTML处理控件Aspose.Html 功能演示：在 C# 中将 HTML 转换为 JPG

HTML处理控件Aspose.Html 功能演示：在 C# 中将 HTML 转换为 JPG

Aspose.Html for .NET 是一种高级的HTML操作API&#xff0c;可让您直接在.NET应用程序中执行广泛的HTML操作任务&#xff0c;Aspose.Html for .NET允许创建&#xff0c;加载&#xff0c;编辑或转换&#xff08;X&#xff09;HTML文档&#xff0c;而无需额外的软件或工具。API还…
阅读更多...
swing基本组件用法_JTooBar

swing基本组件用法_JTooBar

Swing提供了JTooBar类来创建工具条&#xff0c;并且可以往JTooBar中添加多个工具按钮 JToolBar API: 方法名称方法功能JToolBar(String name,int orientation)创建一个名为name&#xff0c;方向为orientation的工具条对象&#xff0c;其orientation的是取值可以是SwingConsta…
阅读更多...
MySQL基础（九）子查询

MySQL基础（九）子查询

子查询指一个查询语句嵌套在另一个查询语句内部的查询&#xff0c;这个特性从MySQL 4.1开始引入。 SQL 中子查询的使用大大增强了 SELECT 查询的能力&#xff0c;因为很多时候查询需要从结果集中获取数据&#xff0c;或者需要从同一个表中先计算得出一个数据结果&#xff0c;然…
阅读更多...
单调队列解决滑动窗口问题

单调队列解决滑动窗口问题

文章目录 单调队列结构解决滑动窗口问题什么是单调队列&#xff1f;[239. 滑动窗口最大值](https://leetcode.cn/problems/sliding-window-maximum/)单调队列框架滑动窗口解题框架完整的解题代码如下&#xff1a;我的实现&#xff1a; 单调队列结构解决滑动窗口问题 什么是单调…
阅读更多...
CVE-2023-27524 Apache Superset Auth Bypass|附检测工具

CVE-2023-27524 Apache Superset Auth Bypass|附检测工具

漏洞描述 Apache Superset是一个开源数据可视化和探索工具。Apache Superset 版本&#xff08;包括 2.0.1&#xff09;中的会话验证攻击。没有根据安装说明更改默认配置的SECRET_KEY的安装允许攻击者验证和访问未经授权的资源。这不会影响更改了SECRET_KEY配置默认值的Superse…
阅读更多...
JAVA快速开发框架 一键生成表单模板代码

JAVA快速开发框架 一键生成表单模板代码

从计算机诞生开始&#xff0c;虽然编程的形式随着硬件及软件的不断进步而不停迭代&#xff0c;但是从事计算机技术行业的人员始终与编写代码的任务紧密联系在一起。因此如何提高软件开发的效率和质量&#xff0c;一直是软件工程领域的重要问题之一。 这一方面是由于在不同软件…
阅读更多...
MQ（面试问题简析）学习笔记

MQ（面试问题简析）学习笔记

文章目录 1. 为什么使用消息队列2. 消息队列有什么优缺点3. Kafka、ActiveMQ、RabbitMQ、RocketMQ 有什么优缺点&#xff1f;4. 如何保证消息队列的高可用4.1 RabbitMQ 的高可用性4.2 Kafka 的高可用性 5. 如何保证消息不被重复消费&#xff08;如何保证消息消费的幂等性&#…
阅读更多...
1、Cloudsim和Workflowsim仿真环境下载

1、Cloudsim和Workflowsim仿真环境下载

1、WorkflowSim的下载和安装 workflowsim下载地址 2、Cloudsim的下载和安装 cloudsim官网 cloudsim4.0安装包地址 2、Cloudsim如何工作 Cloudsim如何工作&#xff1f;原版内容 cloudsim配置 下面这是CloudsimExamples1的代码&#xff1a; package org.cloudbus.…
阅读更多...
论文导读 | 大语言模型上的精调策略

论文导读 | 大语言模型上的精调策略

随着预训练语言模型规模的快速增长&#xff0c;在下游任务上精调模型的成本也随之快速增加。这种成本主要体现在两方面上&#xff1a;一&#xff0c;计算开销。以大语言模型作为基座&#xff0c;精调的显存占用和时间成本都成倍增加。随着模型规模扩大到10B以上&#xff0c;几乎…
阅读更多...
SpringBoot启用web模拟测试（一）

SpringBoot启用web模拟测试（一）

添加依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId><version>2.5.10</version> </dependency> 模拟端口 虚拟请求测试 Slf4j RestController RequestMappin…
阅读更多...
java后端面试大全，java后端面试宝典

java后端面试大全，java后端面试宝典

JAVA_LEARNING_CONTENT JAVA后端面试大全&#xff0c;java后端面试宝典 一个分布式锁的解决方案&#xff0c;另一个是分布式事务的解决方案 -2 flink 链接&#xff1a;flink参考文章 -1 linux of view 参考链接&#xff1a; linux常见面试题 linux查看占用cup最高的10个进…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023