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 ...
随机推荐
- 【云原生 · Kubernetes】apiserver高可用
个人名片: 因为云计算成为了监控工程师 个人博客:念舒_C.ying CSDN主页️:念舒_C.ying 7.1 高可用选型 ipvs+keepalived nginx+keepalived hap ...
- 基于k8s的CI/CD的实现
综述 首先,本篇文章所介绍的内容,已经有完整的实现,可以参考这里. 在微服务.DevOps和云平台流行的当下,使用一个高效的持续集成工具也是一个非常重要的事情.虽然市面上目前已经存在了比较成熟的自动化 ...
- kotlin的suspend对比csharp的async&await
协程的出现大大降低了异步编程的复杂度,可以让我们像写同步代码一样去写异步代码,如果没有它,那么很多异步的代码都是需要靠回调函数来一层层嵌套,这个在我之前的一篇有介绍 rxjava回调地狱-kotlin ...
- i春秋GetFlag
进去是个提示界面,提示我们这是个迷你文件管理系统,我们需要登录然后下载文件再获得flag. 然后我们查看源码,没什么信息,点login进去查看源码,没什么信息 下方出现了一个substr(md5(ca ...
- Java 中你绝对没用过的一个关键字？
layout: post categories: Java title: Java 中你绝对没用过的一个关键字? tagline: by 子悠 tags: 子悠 前面的文章给大家介绍了如何自定义一个不 ...
- SpringMVC01:入门、请求参数绑定、自定义类型转换器、常见注解
一.介绍--三层架构和MVC 1.三层架构介绍和MVC设计模型介绍 开发架构一般都是基于两种形式,一种是 C/S 架构,也就是客户端/服务器,另一种是 B/S 架构,也就是浏览器/服务器.在 Java ...
- 数据结构学习——BST删除特定节点
BST删除特定节点 前言 一个平常的星期三晚上,一节通选课中,在老师放的视频和极寒空调的折磨之下,想着做点别的什么的我,打开了博客园.想起来做题下午数据结构课中老师最后在讲BST删除节点的操作,并且以 ...
- Django框架：2、静态文件配置、form表单、request对象、pycharm链接数据库、django链接数据库、ORM框架
Django框架 目录 Django框架 一.静态文件配置 1.静态文件 2.配置方法 二.form表单 1.action属性 2.method属性 三.request对象 1.基本用法 四.pych ...
- python前言
目录 一.typora软件以及markdown语法介绍 1.输入标题的两种方法 2.无序列表 3.有序列表 4.在typora里插入多行代码块 5.制作表格 6.表情包 7.链接 8.Typora查看 ...
- 基于.NetCore开发博客项目 StarBlog - (24) 统一接口数据返回格式
前言 开发接口,是给客户端(Web前端.App)用的,前面说的RESTFul,是接口的规范,有了统一的接口风格,客户端开发人员在访问后端功能的时候能更快找到需要的接口,能写出可维护性更高的代码. 而接 ...