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 ...
随机推荐
- Destination folder must be accessible
问题 Ecplise拖入文件夹项目时提示错误:Destination folder must be accessible 解决 导入的时候包不能直接拖入,要使用import导入,选择File-> ...
- 165 pbi-utils 使用文档
165 pbi-utils 使用文档 一.背景 先来说一下为什么会有 pbi-utils 这个小工具吧.在我日常做演示的示例文件的时候,每次都要重新搞一次 Power BI Desktop,就想能不能 ...
- 20W，PD快充协议芯片，带有PPS控制器的USB-PD3.0
JD6621是高度集成的USB供电(PD)控制器,支持USB PD 3.0 ,该USB PD 3.0 具有针对USB Type-C下游接口(源)设计的可编程电源( PPS)规范. 它监视CC引脚以检测 ...
- 【机器学习】李宏毅——自注意力机制(Self-attention)
前面我们所讲的模型,输入都是一个向量,但有没有可能在某些场景中输入是多个向量,即一个向量集合,并且这些向量的数目并不是固定的呢? 这一类的场景包括文字识别.语音识别.图网络等等. 那么先来考虑输出的类 ...
- 13-flask博客项目之restful api详解2-使用
13-flask博客项目之restful api详解1-概念 13-flask博客项目之restful api详解1-概念 Flask-RESTful学习网站 英文:https://flask-res ...
- Jmeter之响应数据乱码问题
在进行接口测试时经常长出现响应结果中中文乱码问题 解决以上现象最简洁有效的方法为在测试计划下添加beanshell后置处理器 1.右击测试计划->添加->后置处理器->beanshe ...
- 基于容器的PaaS混合云的几种形式
概述 这是 Gartner 的一个图,提供了全球的基于容器的 PaaS 公有云.混合云服务的梳理展示: 这里提供一个其他的视角: 中国市场,基于容器的 PaaS 混合云(公有云 + 私有云)的相关厂商 ...
- 11、lombok日志记录
一.添加依赖: <!--lombok插件--> <dependency> <groupId>org.projectlombok</groupId> &l ...
- 用了这么多年的 SpringBoot 你知道什么是 SpringBoot 的 Web 类型推断吗？
用了这么多年的 SpringBoot 那么你知道什么是 SpringBoot 的 web 类型推断吗? 估计很多小伙伴都不知道,毕竟平时开发做项目的时候做的都是普通的 web 项目并不需要什么特别的了 ...
- [机器学习] Yellowbrick使用笔记3-特征分析可视化
特征分析可视化工具设计用于在数据空间中可视化实例,以便检测可能影响下游拟合的特征或目标.因为ML操作高维数据集(通常至少35个),可视化工具将重点放在聚合.优化和其他技术上,以提供对数据的概述.这是Y ...