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 ...

随机推荐

js判断数组中是否有重复数据
var arr=[1,3,5,7,9,9,10,10,11,12,34,3,6,92,1]; var tempbool = false; //默认无重复 for (let index = 0; ind ...
Js前端导出csv
var myMemory = myObjectStore.objectStore; var myDataArray = myMemory.data; var myCsvString = "\ ...
day07 方法重写&super、this、static关键字&JVM的类加载顺序题目
day07 方法重写 1)重写发生在子父类当中 2)方法名.参数列表.返回值均相同 3)重写的方法,方法体或者访问控制修饰符不同 4)子类方法的访问权限不能缩小,比如父类是int,子类重写权限不能是b ...
【面试题总结】JVM01-组成及垃圾回收
一.概念 1.JVM组成及作用 (1)组成:类加载器.运行时数据区(Java内存模型).执行引擎.本地库接口 (2)作用: 类加载器(ClassLoader)把class文件转换成字节码: 运行时数据 ...
爬了10000张NASA关于火星探索的图片，我发现了一个秘密
前言最近,我使用爬虫技术,爬取了美国航空航天局,也就是你电影里经常见到的 NASA, 火星探索的相关图片,有 10000 张吧. 嗯嗯,小事情,小事情. 完事儿之后,有点小激动,于是就有了这篇文章, ...
Window系统的mysql数据库定时备份
原文:Window系统的mysql数据库定时备份 - Stars-One的杂货小窝最近老大提到了数据库备份的功能,由于服务器是window系统的,所以研究了下备份的方案,特此记录主要是实现每天定时 ...
week_5
Andrew Ng机器学习笔记---by Orangestar Week_5 重点:反向传播算法,backpropagation 1. Cost Function神经元的代价函数回顾定义:(上节回顾 ...
Qt大型工程开发技术选型Part3:Qt调用C#编写的COM组件实例
Qt大型工程开发技术选型Part3:Qt调用C#编写的COM组件实例以及错误总结 ok,前面铺垫了那么多,现在来写一个开发实例,我会把其中隐藏的坑和陷阱简单谈谈,并在文章最后总结. 不愿意看长篇大论的 ...
pythonfloat优雅的四舍五入
开发中经常会有float四舍五入转int的需求,先看看浮点数直接转int的情形:无论如何float直接转int都不会四舍五入,而是直接抹去小数点. 这个需求很简单,实现也很简单,看过网友的实现,都不够 ...
实践GoF的23种设计模式：命令模式
摘要:命令模式可将请求转换为一个包含与请求相关的所有信息的对象, 它能将请求参数化.延迟执行.实现 Undo / Redo 操作等. 本文分享自华为云社区<[Go实现]实践GoF的23种设计模式 ...