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 ...
随机推荐
- RAID5的配置流程及模拟硬盘损坏
个人名片: 对人间的热爱与歌颂,可抵岁月冗长 Github:念舒_C.ying CSDN主页️:念舒_C.ying 个人博客 :念舒_C.ying RAID5的配置流程及模拟硬盘损坏 1.在虚拟机中 ...
- windows 使用ACR122U-A9设备读写M1卡
软件地址 M1卡服务程序 安装好驱动后就可以破解,破解成功后的秘钥会显示出来(记录下来),同级目录会生成一个dump文件,这个文件包含此M1卡的全部数据,可以使用hexedit打开,编辑或修改 Mif ...
- Servlet面试题合集
servlet的生命周期 在创建servlet对象时,通过调用.init()方法进行初始化 通过service()方法来接收客户端的请求．根据请求方式的不同转发给对应的doGet()或doPost() ...
- day28-jQuery01
jQuery01 参考文档1:jQuery API 中文文档 | jQuery API 中文在线手册 | jquery api 下载 | jquery api chm (cuishifeng.cn) ...
- vulnhub靶场渗透实战13-driftingblues3
靶机下载地址:https://download.vulnhub.com/driftingblues/driftingblues3.ova vbox导入,网络模式桥接,靶机模式为简单. 一:信息收集 ...
- Salesforce LWC学习(四十) datatable的dynamic action的小坑浅谈
本篇参考:https://developer.salesforce.com/docs/component-library/bundle/lightning-datatable/documentatio ...
- 教你用JavaScript实现乘法游戏
案例介绍 欢迎来的我的小院,我是霍大侠,恭喜你今天又要进步一点点了!我们来用JavaScript编程实战案例,做一个乘法积分游戏.乘法游戏主要通过用户输入的数值和程序计算的数值进行对比,正确积一分,错 ...
- 基本能看懂的C编译器，只有365行！
Fabrice Bellard is a French computer programmer known for writing FFmpeg, QEMU, and the Tiny C Compi ...
- [python] 基于blind-watermark库添加图片盲水印
blind-watermark是一个能够给图片添加/解析基于频域的数字盲水印的Python库.图像水印image watermark是指在图片里添加文本或图形,以标记图片的来源.但是图像水印会破坏原图 ...
- [深度学习] Python人脸识别库Deepface使用教程
deepface是一个Python轻量级人脸识别和人脸属性分析(年龄.性别.情感和种族)框架,提供非常简单的接口就可以实现各种人脸识别算法的应用.deepface官方仓库为deepface.deepf ...