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

最新推荐文章于 2024-10-28 10:35:02 发布
最新推荐文章于 2024-10-28 10:35:02 发布
阅读量594 收藏 1
点赞数
分类专栏： Vue学习笔记 文章标签： vue.js 学习 笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shi_ly/article/details/130519774
版权

上一章 【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博客
 

东京老树根
关注
专栏目录
vue2学习笔记7 - Vue中的MVVM模型
l_q_l的专栏
07-16 504
Model-View-viewModel是一种软件架构模式，用于将用户界面（View）与业务逻辑（Model）分离，并通过ViewModel进行连接和协调。MVVM模式的目标是实现视图与模型的解耦，提高代码的可读性、可维护性和可测试性。在MVVM模式中，View是用户界面的呈现层，负责展示数据和接收用户的输入。ViewModel是视图模型，负责处理View的状态、行为和交互逻辑。ViewModel通过数据绑定机制将数据从Model传递给View，并将用户的输入传递给Model进行处理。
Vue3 学习笔记--Vue Router
qq_42530623的博客
08-13 1043
路由
【Vue】模板语法——文本插值
早睡早起长头发的博客
02-01 1721
在底层机制中，Vue 会将模板编译成高度优化的 JavaScript 代码。结合响应式系统，当应用状态变更时，Vue 能够智能地推导出需要重新渲染的组件的最少数量，并应用最少的 DOM 操作。所有的 Vue 模板都是语法层面合法的 HTML，可以被符合规范的浏览器和 HTML 解析器解析。这种 {{ }} 语法的专业名称是插值表达式（英文名为：Mustache），在实际开发中用的最多。在 vue 提供的模板渲染语法中，除了支持绑定简单的数据值之外，还。只是内容的占位符，不会覆盖原有的内容。
Vue 第一讲（文本及超链接渲染）
weixin_51927215的博客
04-18 5323
二层花括号语法及 v-html 超链接渲染
Vue：快捷文本
MMF博客园
08-26 1621
Vue：快捷文本
如何用vue实现文本的编辑
weixin_43997182的博客
07-15 4000
vue+element 实现文本编辑
Vue中文本渲染三种方法 {{}}、v-html、v-text的区别
编程界明世隐的博客
03-10 3810
v-text 说明：显示普通文本 简写方式：{{}} 语法： 1：<p v-text="msg"></p> 2：<p>{{msg}}</p> 实例 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> &l
VUE2.x
踩的坑越多，经验越多
10-30 1146
vue2.x学习笔记总结
Vue学习.pdf（Vue学习个人笔记资料-菜鸟入门）
11-20
Vue的语法主要包括插值表达式、指令（如v-if、v-show、v-for、v-bind、v-on等）、计算属性和事件处理。插值表达式用于在模板中展示和操作数据，而指令则提供了一种声明式地操作DOM的方式。计算属性是基于响应式数据...
vue学习笔记，学习vue从0-1的步骤
09-21
使用`vue create`命令可以创建一个新的Vue项目，它会自动配置好必要的依赖和构建工具。 7. **VSCode 插件**：为了提高开发效率，VSCode中可以安装Vue相关的插件，如Vue语言支持、Vue提示和Vue调试工具等。此外，还...
Vue实现富文本
胡兜兜的博客
04-03 4936
在Vue中使用wangEditor可以参考官方文档中的Vue集成部分。Quill是一个强大的富文本编辑器，支持多种格式和自定义样式。在Vue中使用Quill可以参考官方文档中的Vue集成部分。Vue富文本的实现可以使用一些现成的第三方库，如Quill、Vue-quill-editor、wangEditor等。Vue-quill-editor是一个基于Quill的Vue富文本编辑器，可以很方便地在Vue中使用。以上是三种常用的Vue富文本编辑器实现方式，可以根据自己的需求选择合适的方式。
Vue前端开发：数据绑定方法
最新发布
10-28 768
在Vue中，数据绑定最常用的方法就是使用Mustache语法，这种语法的标签就是双大括号，因此又被称为双大括号插值语法，在这种语法下，双大括号标签将会被替换为绑定的属性值，并且，当属性值发生变化后，插值处的内容也会同步进行更新。
Vue(17)模板语法：文本、超文本、属性、完全支持JS表达式
大连赵哥的博客
06-18 222
Vue(17)模板语法：文本、超文本、属性、完全支持JS表达式
【超详细】vue项目：Tinymce富文本使用教程以及踩坑总结+业务需要功能扩展
热门推荐
weixin_55846296的博客
12-01 1万+
在Vue项目的开发过程中，经常需要使用富文本编辑器来处理用户的输入内容。 是一个功能强大且易于使用的富文本编辑器，它支持大多数常见的文本编辑功能，并且可以通过插件进行扩展。本文将详细介绍如何在Vue项目中使用Tinymce富文本编辑器
vue文本指令跟事件指令
m0_58310590的博客
05-19 791
是 JavaScript 中的一个函数，用于周期性地执行指定的代码。它接受两个参数：要执行的代码或函数，以及执行代码之间的时间间隔（以毫秒为单位）。'<a href="https://www.yituyu.com/">点我有惊喜噢！用于停止图片轮播的定时器，确保当用户点击按钮暂停轮播时，不再继续触发下一张图片的显示。// 清除由 setInterval(函数,时间) 设置的定时器。则用于停止这个重复执行的过程，即清除定时器，使其不再触发。在 JavaScript 中，// 在这里编写处理点击事件的逻辑。
Vue基础之指令部分
zhaojunwei666的博客
09-05 183
前言 因工作包含一部分的前端工作，所以博主又得开始学点前端技术来应付应付了。由于长时间没有接触前端了，发现自己连简单的CSS样式都忘得一干二净了，这可真叫一个伤心啊。不过，伤心归伤心，学就完事了！！ Vue简介 众所周知，现在的前端界可谓是三分天下，主要有React，Vue，Angular这三个主流框架，介于我们公司主要还是Vue用得多，所以学习的方向还是放在Vue上。我们知道，Vue是一种js框架，而传统的js框架如Jquery，是通过操作页面的dom元素来进行页面的刷新。但是Vue不同，它采用的是数据响
vue中多行文本标签_Vue知识点总结(5)——vmodel（超级详细）
weixin_36323390的博客
12-27 3907
今天的内容是v-model双向数据绑定是Vue的灵魂特点之一，v-model是完美的体现了Vue双向绑定的特点。你可以用v-model 指令在表单 input、textarea及select元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理...
Vue学习笔记：核心概念与生命周期解析
"个人学习vue笔记，包含作者在学习和工作中整理的重要知识点，涵盖vue的指令、生命周期、计算属性等内容" Vue.js 是一个流行的前端JavaScript框架，用于构建用户界面。以下是对标题和描述中提及知识点的详细说明： ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值