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

最新推荐文章于 2024-07-19 14:16:29 发布
最新推荐文章于 2024-07-19 14:16:29 发布
阅读量563 收藏 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博客
 

东京老树根
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaWeb03-Vue学习笔记
08-22
Vue学习笔记 Vue是一个渐进式的JavaScript框架，用于构建用户界面。Vue的核心思想是将组件化的思想应用于前端开发，通过组件的方式来构建应用程序。 一、Vue简介 Vue是一个基于MVVM（Model-View-ViewModel）模式...
Vue学习.pdf（Vue学习个人笔记资料-菜鸟入门）
11-20
Vue的语法主要包括插值表达式、指令（如v-if、v-show、v-for、v-bind、v-on等）、计算属性和事件处理。插值表达式用于在模板中展示和操作数据，而指令则提供了一种声明式地操作DOM的方式。计算属性是基于响应式数据...
Vue.js动态绑定文本内容，绑定html以及其他属性
热门推荐
zhang8907xiaoyue的博客
07-31 1万+
一、绑定属性或者html 主要操作技能： v-bind:title 鼠标移上的显示 v-bind:src 绑定图片路径 v-bind:html绑定HTML文本和标签 v-bind:text绑定文本 v-bind:class 绑定类样式 v-bind:style 动态绑定样式 编写代码 <div class="r...
VUE数据绑定方法
w_t_y_y的博客
08-04 1万+
Vue 框架很核心的功能就是双向的数据绑定。 双向是指：HTML 标签数据 绑定到 Vue 对象，另外反方向数据也是绑定的。通俗点说就是，Vue 对象的改变会直接影响到 HTML 的标签的变化，而且标签的变化也会反过来影响 Vue 对象的属性的变化。 这样以来，就彻底变革了之前 Dom 的开发方式，之前 Dom 驱动的开发方式尤其是以 jQuery 为主的开发时代，都是 dom 变化后，触发 js 事件，然后在事件中通过 js 代码取得标签的变化，再跟后台进行交互，然后根据后台返回的结果再更新 HTML 标
vue基础学习笔记 --- vue常用内置指令总结
MImi_0612的博客
07-13 271
vue常用的内置指令
Vue学习笔记六--Vue3学习
铁马冰河入梦来
01-10 2541
Vue3.0最新语法
VUE学习笔记--vue-cli
CelineT的博客
04-07 1533
vue-cli简介用法、cli目录结构、命令、npm run serve 执行过程、vue-cli的起步文件、使用自定义组件
Vue3-admin-element框架学习笔记----4（命令大全）
一个努力不被优化的程序员
04-14 92
项目一般为：npm run serve 但安装了yarn的话是yarn serve 安装了pnpm 的为 pnpm dev或者pnpm serve。项目一般为：npm build 但安装了yarn的话是yarn build 安装了pnpm 的为 pnpm build。项目一般为：npm i但安装了yarn的话是yarn i 或者 yarn 安装了pnpm 的为 pnpm i。
VUE学习笔记--Vue的基本使用
emmmm.....
03-09 508
文章目录基本使用步骤指令的概念内容渲染指令属性绑定指令事件绑定指令 基本使用步骤 1.导入vue.js的script脚本文件(可在官网下载) vue官网 2.在页面中声明一个将要被vue所控制的DOM区域 3.创建vm实例对象(vue的实例对象) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="wi
Vue3-admin-element框架学习笔记----1（了解它）
一个努力不被优化的程序员
04-14 462
npm run serve （运行项目）学习前提：了解vue2和vue3，这个框架是很久之前的，有vue2还有vue3。安装完毕之后打开项目：npm i （下载依赖，不然的话是识别不到命令的）它的作用：一个基于js版本的中后台模板，一套开箱即用的中后台模板。它的用处：后台管理等项目。
Vue学习笔记---vue-cli
qq_44242707的博客
11-12 877
Vue-cli 1.配置文件 vue.config.js 2.快速原型开发：对单个vue文件进行快速原型开发 vue serve：需要安装全局依赖，机器一致性无法保证，对应目录执行：vue serve file vue build：将目标文件构建成一个生产环境的包用来部署，对应目录执行：vue build file 3.创建项目 vue create project 选取preset：默认/手动，.vuerc保存设置 vue ui：图形化创建和管理项目 4.插件： 每个CLI插件都会包含一个(用来
详解Vue2.x-directive的学习笔记
08-29
Vue 2.x 中的指令（Directives）是框架提供的一种机制，用于在DOM元素上附加行为，它们在Vue实例的生命周期中响应数据的变化并执行相应的DOM操作。Vue提供了内置指令，如v-model和v-show，同时也支持注册自定义指令...
vue学习笔记，学习vue从0-1的步骤
09-21
使用`vue create`命令可以创建一个新的Vue项目，它会自动配置好必要的依赖和构建工具。 7. **VSCode 插件**：为了提高开发效率，VSCode中可以安装Vue相关的插件，如Vue语言支持、Vue提示和Vue调试工具等。此外，还...
Vue学习笔记进阶篇之vue-cli安装及介绍
12-08
安装完成后，在终端输入以下命令, 可以查看vue的版本：vue -V 输入以下命令，可以查看官方提供的模板： vue list 我们可以看到，vue官方提供了6个模板，我们这边主要使用webpack模板。 那么，什么是webpack呢...
使用Vue实现点击页面触发特效
qq_45569925的博客
07-19 511
在页面上的指定区域内进行点击，则会在页面上显示设置好的随机文本，此文本出现后会执行动画，动画效果为节点在1s之内向右上方移动并在移动的过程中完成180°翻转，最后消失。
vue图片存放在public目录和src/assets目录下的区别
最新发布
Zing_ing的博客
07-19 376
使用随时要更换的图片，有更新动态显示的需求，像banner、轮播、广告、展示性等大型图片放在public下比较合适；而一些icon、精灵图、雪碧图更适合放在assets下。如果图片不需要被处理，比如网站的结构用图，如logo图片，则放public中，否则如内容图片或者需要被构建为base64的小图标可以放assets中。
docker将Java、vue、nginx打进镜像（涉及容器打成镜像）
qq_37752382的博客
07-15 567
按照上文拉取centos7，然后将需要的东西直接打进脚本，这样最简单，但是在拉取过程中，初始镜像contos7安装nginx需要安装一些工具包，拉取的时候报错了，原因还是在镜像源上，并且还想在上面装一些工具，另外创建容器不应该在里面做很多初始化的东西，每次更新业务包就行，4）准备文件完成后执行下面的就行（如果配置文件不对，比如nginx的配置等先进入镜像手动调整好，没问题了，再删除掉容器和镜像重新制作镜像即可）本文不讲安装docker,安装好安装，镜像源稍微麻烦点。1）生成镜像并创建容器。
【Vue】 style中的scoped
DX390609的博客
07-15 173
在vue文件中的style标签上，有一个特殊的属性：scoped。当一个style标签拥有scoped属性时，它的CSS样式就只能作用于当前的组件，通过该属性，可以使得组件之间的样式不互相污染。
"前端Bootstrap Es6 vue学习笔记-基础环境配置和样式排版
通过路由来实现单页面应用的页面切换------------前端Bootstrap Es6 vue学习笔记，内容围绕着前端开发的三大核心技术：Bootstrap、Es6和Vue.js展开。 首先，介绍了Bootstrap框架的基础环境配置。通过开发者工具的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值