Vue的指令(内容渲染、属性绑定、javaScript表达式、事件绑定、事务对象、双向绑定、逻辑<if-show-for>)

VUE指令

内容渲染指令 v-text v-html

v-text=“message”

v-text会覆盖默认的值

{{message+"!"}}插值表达式

差值表达式（Mustache）

v-html

包含html标签的字符串

例子：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

</head>

<body>

    <div id="app">

        <!-- <p v-text="username"></p>

        <p v-text="age">年龄</p> -->

        <p>姓名：{{username}}</p>

        <p>年龄：{{age}}</p>

        <p>----------</p>

        <p v-text="desc"></p>

        <p v-html="desc"></p>

        <p>{{desc}}</p>

    </div>

    <script src="./lib/vue.js"></script>

    <script>

        const vm = new Vue({

            el:"#app",

            data:{

                username:'郝泾钊',

                age:18,

                desc:'<i>我喜欢你</i>'

            }

        })

    </script>

</body>

</html>

属性绑定指令 v-bind :

v-bind:

三元表达式：

简写：

例子：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

</head>

<body>

    <div id="app">

        <input type="text" v-bind:placeholder="inputvalue">

        <hr>

        <img v-bind:src="src" alt="图片不存在">

    </div>

    <script src="./lib/vue.js"></script>

    <script>

        const vm = new Vue({

            el:"#app",

            data:{

               inputvalue:"请输入内容",

               src:"./images/2.jpg"

            }

        })

    </script>

</body>

</html>

使用JavaScript表达式

四则运算
三元运算
字符串的拼接
字符串函数（颠倒）
对象的值

例子;

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

</head>

<body>

    <div id="app">

        <p>{{number + 1}}</p>

        <p>{{ok ?'True':'False'}}</p>

        <P>{{message.split('').reverse().join('')}}</P>

        <p :id="'list-'+id">sss</p>

        <p>{{user.name}}</p>

    </div>

    <script src="./lib/vue.js"></script>

    <script>

        const vm = new Vue({

            el:"#app",

            data:{

               number:9,

               ok:true,

               message:'ABC',

                id:3,

                user:{

                    name:"郝泾钊"

                }

            }

        })

    </script>

</body>

</html>

事件绑定指令 v-on@

v-on:事件绑定指令

原生的Dom对象有：onclick、oninput、onkeyup等事件被替换成了：

v-on:click v-on:input v-on:keyup

需要在methods节点声明

事件：

click
monseenter
dbclick

例子：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

</head>

<body>

    <div id="app">

        <p>{{count}}</p>

        <button v-on:click="addCount">+1</button>

    </div>

    <script src="./lib/vue.js"></script>

    <script>

        const vm = new Vue({

            el:"#app",

            data:{

               count:9,

            },

            methods:{

                addCount(){

                    this.count++;

                }

            }

        })

    </script>

</body>

</html>

简写形式@==v-on：

事件对象 $event

event

e.target.style.backgroundColor

传递参数：

$event
```
addCount(2,$event)
```

例子：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

</head>

<body>

    <div id="app">

        <p>{{count}}</p>

        <button @click="addCount(2,$event)">+1</button>

    </div>

    <script src="./lib/vue.js"></script>

    <script>

        const vm = new Vue({

            el:"#app",

            data:{

               count:0,

            },

            methods:{

                addCount(dept,e){

                    const nowBgcolor=e.target.style.backgroundColor

                    // console.log(nowBgcolor)

                    e.target.style.backgroundColor=nowBgcolor=='red'?'':'red'

                    this.count+=dept

                }

            }

        })

    </script>

</body>

</html>

事务修饰符

事务修饰符	说明
.prevent	阻止默认行为（例如，阻止a连接的跳转、阻止表单的提交等）
.stop	阻止事件冒泡
.capture	以捕获模式触发当前的事件函数（先执行捕获的）
.once	绑定的事件只触发一次
.self	只有在event.target是当前元素自身是触发事件处理函数

例子：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

        .inner{

            line-height: 100px;

            background-color: aliceblue;

            font-size: 13px;

            text-align: center;

        }

        .outer{

            background-color: bisque;

            padding: 50px;

            font-size: 13px;

        }

        .box{

            background-color: coral;

            padding: 50px;

        }

    </style>

</head>

<body>

    <div id="app">

        <h4>1.prevent事件修饰符的应用场景</h4>

        <a href="https://www.baidu.com/" @click.prevent="onLinkClick">百度首页</a>

        <hr>

        <h4>2.stop事件修饰符的应用场景</h4>

        <div class="outer" @click="onOuterClick">

            外部的div

            <div class="inner" @click.stop="onInnerClick">内部的</div>

        </div>

        <hr>

        <h4>3.capture事件修饰符的应用场景</h4>

        <div class="outer" @click.capture="onOuterClick">

            外部的div

            <div class="inner" @click="onInnerClick">内部的</div>

            </div>

        <hr>

        <h4>4.once事件修饰符的应用场景</h4>

            <div class="inner" @click.once="onInnerClick">内部的</div>

        <hr>

        <h4>3.capture事件修饰符的应用场景</h4>

        <div class="box" @click="onBoxClick">

        <div class="outer" @click.self="onOuterClick">

            外部的div

            <div class="inner" @click="onInnerClick">内部的</div>

            </div>

            </div>

        <hr>

    </div>

    <script src="./lib/vue.js"></script>

    <script>

        const vm = new Vue({

            el:"#app",

            data:{

               count:0,

            },

            methods:{

                onLinkClick(){

                    console.log("点击了超链接")

                },

                onOuterClick(){

                    console.log("点击了外部的")

                },

                onInnerClick(){

                    console.log("点击了内部的")

                },

                onBoxClick(){

                    console.log("点击了盒子")

                }

            }

        })

    </script>

</body>

</html>

按键修饰符

@key.enter=“”

@keyup.esc=""

@keydown

只能和键盘相关的事件使用

例子：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

</head>

<body>

   <div id="app">

    <input type="text" @keyup.enter="submit" @keyup.esc="clearInput">

   </div>

   <script src="./lib/vue.js"></script>

   <script>

       const vm = new Vue({

           el:"#app",

           data:{

              count:0,

           },

           methods:{

              submit(e){

                  console.log("按下了enter键"+e.target.value)

              },

              clearInput(e){

                e.target.value=""

              }

           }

       })

   </script>

</body>

</html>

双向绑定 v-model

v-model

指令修饰符：

修饰符	作用	示例
.number	自动将用户的输入值转变为数值型
.trim	自动过滤用户输入的首尾空白的字符
.lazy	在“chang”时而非“input”时更新

会忽略所有的表单元素的value、checked、selected特性的初始值二总是将vue实例的数据作为数据来源。

例子1：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

</head>

<body>

    <div id="app">

        <p>用户名是：{{username}}</p>

        <input type="text" v-model="username">

        <hr>

        <p>选中的省份是：{{province}}</p>

        <select v-model="province">

            <option value="">请选择</option>

            <option value="1">北京</option>

            <option value="2">河北</option>

            <option value="3">黑龙江</option>

        </select>

    </div>

    <script src="./lib/vue.js"></script>

    <script>

        const vm = new Vue({

            el:"#app",

            data:{

              username:"郝泾钊",

              province:"1"

            },

            methods:{

               submit(e){

                   console.log("按下了enter键"+e.target.value)

               },

               clearInput(e){

                 e.target.value=""

               }

            }

        })

    </script>

</body>

</html>

条件渲染指令 v-if

操作的是Dom树
频繁操作的使用v-show ,反之，v-if
操作Dom树影响性能

<div id="app">

	<img src=".." v-if="isShow"/>

	<img src=".." v-if="age>=12"/>

	<img src=".." v-else="isShow"/>

</div>

..

<script>

    var app =new Vue({

        el:"#app",

        data:{

            isShow:false,

            age:16

	}

    })

</script>

显示隐藏 v-show

根据真假切换元素的显示状态
原理是：修改display，实现隐藏:none
指令后面的内容都会解析为布尔值
值为true显示，值为false隐藏

<div id="app">

	<img src=".." v-show="true"/>

	<img src=".." v-show="isShow"/>

	<img src=".." v-show="age>=18"/>

</div>

..

<script>

    var app =new Vue({

        el:"#app",

        data:{

            isShow:false,

            age:16

	}

    })

</script>

循环v -for

<div id="app">

	<ul>

        <li v-for="item in arr" :title="item">

        {{index}}{{item}}</li>

         <li v-for="(item,index) in arr" :title="item">

        {{index}}{{item}}</li>

	</ul>

</div>

..

<script>

    var app =new Vue({

        el:"#app",

        data:{

            arr:[1,2,3,4,5]

	}

    })

</script>

Vue的指令(内容渲染、属性绑定、javaScript表达式、事件绑定、事务对象、双向绑定、逻辑<if-show-for>)的更多相关文章

React入门---事件与数据的双向绑定-9
上一节中,我们是从父组件给子组件传送数据,要实现事件与数据的双向绑定,我们来看如何从子组件向父组件传送数据; 接触之前,我们看一些里面函数绑定的知识: 例:通过点击事件改变state的age属性值: ...
006——VUE中的内容与属性中使用javascript表达式的方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十八║Vue基础: 指令(下)+计算属性+watch
回顾今天来晚辣,给公司做了一个小项目,一个瀑布流+动态视频控制的DEMO,有需要的可以联系我,公司的项目就不对外展示了(一个后端程序员真的要干前端了哈哈哈). 书接上文,昨天正式的开始了Vue的代码 ...
Vue框架（一）——Vue导读、Vue实例（挂载点el、数据data、过滤器filters）、Vue指令(文本指令v-text、事件指令v-on、属性指令v-bind、表单指令v-model)
Vue导读 1.Vue框架 vue是可以独立完成前后端分离式web项目的js框架三大主流框架之一:Angular.React.Vue vue:结合其他框架优点.轻量级.中文API.数据驱动.双向绑定 ...
vue的指令绑定、事件、冒泡
a标签的属性绑定: v-once:就是第一次渲染什么就是什么,不会随着其他改变而改变,简言之就是绑定他不让他的值改变防止跨站脚本攻击如果你觉得安全的话,可以不要让变量的值显示成字符串解决方法是: ...
[Vue源码]一起来学Vue双向绑定原理-数据劫持和发布订阅
有一段时间没有更新技术博文了,因为这段时间埋下头来看Vue源码了.本文我们一起通过学习双向绑定原理来分析Vue源码.预计接下来会围绕Vue源码来整理一些文章,如下. 一起来学Vue双向绑定原理-数据劫 ...
4. Vue基本指令
目录 1. v-on指令 2. v-if指令 3. v-show指令 4. v-for指令 5. v-model指令一. v-on指令 1. 基础用法 v-on是事件监听的指令, 下面来看简单用法 ...
vue双向绑定、Proxy、defineproperty
本文原链接:https://www.jianshu.com/p/2df6dcddb0d7 前言双向绑定其实已经是一个老掉牙的问题了,只要涉及到MVVM框架就不得不谈的知识点,但它毕竟是Vue的三要素 ...
vue.js初级入门之最基础的双向绑定操作
首先在页面引入vue.js以及其他需要用到的或者可能要用到的插件(这里我多引用了bootstrap和jquery) 引用的时候需要注意文件的路径,准备工作这样基本就完成了,下面正式开始入门. vue. ...
深入理解Proxy 及使用Proxy实现vue数据双向绑定
阅读目录 1.什么是Proxy?它的作用是? 2.get(target, propKey, receiver) 3.set(target, propKey, value, receiver) 4.ha ...

随机推荐

Golang反射获得变量类型和值
1. 什么是反射反射是程序在运行期间获取变量的类型和值.或者执行变量的方法的能力. Golang反射包中有两对非常重要的函数和类型,两个函数分别是: reflect.TypeOf 能获取类型信息re ...
python 异步写入文件
# -*- coding:utf-8 -*-import asyncioimport aiofilesimport time#异步操作时,函数名前必须加上asyncasync def func1(): ...
手摸手，使用Dart语言开发后端应用，来吧！
前言这几天连续发了几篇关于 Dart 开发后端应用的文章,主要是介绍了 Dart 的一些优点,比如异步任务,并发处理,编译部署等等. 俗话说,光说不练假把式,今天我们来真正开始一个 Dart 后端应 ...
Crane如何做到利用率提升3倍稳定性还不受损？
作为云平台用户,我们都希望购买的服务器物尽其用,能够达到最大利用率.然而要达到理论上的节点负载目标是很的,计算节点总是存在一些装箱碎片和低负载导致的闲置资源.下图展示了某个生产系统的CPU资源现状,从 ...
Redis网络模型究竟有多强
如果面试官问我:Redis为什么这么快? 我肯定会说:因为Redis是内存数据库!如果不是直接把数据放在内存里,甭管怎么优化数据结构.设计怎样的网络I/O模型,都不可能达到如今这般的执行效率. 但是这 ...
C++ 使用 new 创建二维数组
1. 直接创建 C++ 使用 new 创建二维数组最直接的方法就是 new T[M][N].返回的指针类型是 T (*)[N],它是指向数组的指针,可以直接使用数组下标形式访问元素.释放内存直接使用d ...
angular基础之单向绑定，双向绑定以及数据绑定失效的问题
单向绑定事件绑定: <input (keyup)="inputChange($event)" /> 属性绑定: <input [value]="inp ...
ChatGPT开发实战
1.概述前段时间使用体验了ChatGPT的用法,感受到ChatGPT的强大,通过搜索关键字或者输入自己的意图,能够快速得到自己想要的信息和结果.今天笔者将深挖一下ChatGPT,给大家介绍如何使用C ...
Redis缓存的主要异常及解决方案
作者:京东物流陈昌浩 1 导读 Redis 是当前最流行的 NoSQL数据库.Redis主要用来做缓存使用,在提高数据查询效率.保护数据库等方面起到了关键性的作用,很大程度上提高系统的性能.当然在使 ...
vulnhub靶场之FUNBOX: GAOKAO
准备: 攻击机:虚拟机kali.本机win10. 靶机:Funbox: GaoKao,下载地址:https://download.vulnhub.com/funbox/FunboxGaoKao.ova ...