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 ...
随机推荐
- 在 Spring 生态中玩转 RocketMQ
本文作者:饶子昊 - Spring Cloud Alibaba Committer,阿里云智能开发工程师. 01 Spring 生态介绍 根据 JVM EcoSystem Report 2021 最新 ...
- python-封装、继承、多态
封装 面向对象编程有三大特性:封装.继承.多态,其中最重要的一个特性就是封装.封装指的就是把数据与功能都整合到一起,针对封装到对象或者类中的属性,我们还可以严格控制对它们的访问,分两步实现:隐藏与开放 ...
- 【Java SE进阶】Day05 异常，线程
一.异常 1.概念 程序执行过程中,出现非正常情况导致JVM的非正常停止 本身是一个类,产生异常即创建并抛出一个异常对象 Java处理异常的方式是进行中断处理 异常非语法错误,语法错误直接不会产生cl ...
- Qt多线程开发总览，既然用到了就记录一下
多线程 在LBD_VM_Intercom中使用的一个简单的实例 陶工给的dll需要进行异步操作才可以将视频画面附到窗体上,必须得在画面出现之后才可以附加画面,否则就有可能出现意外bug,所以需要在这个 ...
- LeetCode HOT 100：组合总和
题目:39. 组合总和 题目描述: 给你一个没有重复元素的数组,和一个target目标值,返回数组中可以使数字和为目标数target的所有不同组合.什么叫组合?组合就是数组中任意数字组成的集合,不需要 ...
- 网络工具netstat与ss
建议使用ss命令,2001年的时候netstat 1.42版本之后就没更新了,之后取代的工具是ss.netstat命令在很多场景下比较慢.ss可以显示跟netstat类似的信息,但是速度却比netst ...
- 6、SQL模糊查询LIKE concat用法
concat用来拼接查询的字符串: SELECT * FROM `page_demo` WHERE name LIKE concat('%',#{name},'%') 模糊查询: 1.%代表零个或多个 ...
- 【转载】WebBrowser控件的常用方法、属性和事件
1. 属性 属性 说明 Application 如果该对象有效,则返回掌管WebBrowser控件的应用程序实现的自动化对象(IDispatch).如果在宿主对象中自动化对象无效,这个程序将返回Web ...
- 工业数据分析为什么要用FusionInsight MRS IoTDB？
摘要:MRS IoTDB,它是华为FusionInsight MRS大数据套件中的时序数据库产品,在深度参与Apache IoTDB社区开源版的基础上推出的高性能企业级时序数据库产品. 本文分享自华为 ...
- Spark详解(04) - Spark项目开发环境搭建
类别 [随笔分类]Spark Spark详解(04) - Spark项目开发环境搭建 Spark Shell仅在测试和验证程序时使用的较多,在生产环境中,通常会在IDEA中编制程序,然后打成Ja ...