【Vue】Re04 指令：第二部分
一、v-on指令
作用是用来将元素绑定事件监听器，触发特定的函数执行一定功能
关键字：事件监听
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body> <div id="app">
<p> <button v-on:click='theTest'>点我触发事件</button></p>
<p> <button @click='theTest'>点我触发事件(@缩写语法)</button></p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
let vm = new Vue({
el : '#app',
data : {
aaa : '233'
},
methods : {
theTest : function ( ) {
alert(this.aaa);
}
}
});
</script> </body>
</html>
v-on事件绑定的函数中参数传递的问题：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body> <div id="v">
<!-- 演示事件监听 + 参数执行 -->
<button @click="fun01" >按钮01</button>
<button @click="fun01()">按钮02</button> <hr> <!-- 带参指向 -->
<button @click="fun02(100)">按钮03</button>
<button @click="fun02">按钮04</button> <hr> <!-- 打印事件 -->
<button @click="fun03(222)">按钮05</button>
<button @click="fun03">按钮06</button> <!-- 如果不注入参数调用打印，可以发现是一个事件在这个里面 --> <hr> <!-- 如果存在多个参数 手动获取浏览器事件对象，需要使用$event注入 -->
<button @click="fun04($event, 222)">按钮07</button>
<button @click="fun04">按钮08</button> <hr> <button>按钮7</button>
<button>按钮08</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
const v = new Vue({
el : '#v',
data : {
message : 'Hello',
},
methods : {
fun01 : function () {
console.log('无参调用测试');
},
fun02 : function (val) {
console.log('带参调用测试');
},
fun03(abc) {
console.log(abc);
},
fun04(event, abc) { // Vue默认第一个参数即为事件对象
console.log(event);
console.log(abc);
}
}
});
</script> </body>
</html>
常用的修饰符使用：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body> <div id="v">
<div @click="function02">
<button @click="function01">testing1</button>
</div> <!-- 我们点击按钮，函数01和函数02都会被触发，这样的状况被称为冒泡 --> <hr> <!-- 如果我们希望其中的一个不要被触发,可以使用.stop进行修饰 -->
<div @click="function02"> <!-- 对div设置无效 -->
the div tag content
<button @click.stop="function01">testing2</button> <!-- 例如这里只让div上的事件生效 只要点击按钮才会让函数1生效 -->
</div> <hr> <!-- .prevent修饰符用于阻止默认事件的触发 -->
<form action="#">
<input type="text" name="username">
<input type="text" name="password">
<input type="submit" @click.prevent="function01" > <!-- 阻止表单提交，更改为使用自定义函数 -->
</form> </div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
const v = new Vue({
el : '#v',
data : {
message : 'sss'
},
methods : {
function01() {
console.log(' function01 -> ' + this.message);
},
function02() {
console.log(' function02 -> ' + this.message);
}
}
});
</script> </body>
</html>
二、v-if、v-else-if、v-else指令
用于条件判断控制元素是否显示出来
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body> <!-- v-if v-else-if v-else -->
<div id="app"> <p> <button @click="changeFlag">点我切换</button> </p>
<p v-if="flag" > flag为true则显示此信息</p> <p> <button @click="changeScore">测试v-else-if</button> </p> <!-- 当指令的值符合为true时创建dom进行渲染，否则移除dom元素 -->
<p v-if="score == 100">100分</p>
<p v-else-if="score == 90">90分</p>
<p v-else-if="score == 80">80分</p>
<p v-else-if="score == 70">70分</p>
<p v-else-if="score == 60">60分</p>
<p v-else>不及格</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
let vm = new Vue({
el : '#app',
data : {
flag : true,
score : 100
},
methods : {
changeFlag : function () {
this.flag = !this.flag;
},
changeScore : function () {
this.score -= 10;
}
}
});
</script> </body>
</html>
切换登录凭证的小案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body> <div id="v">
<p>
<span v-if="isUser">
<label for="username">用户名称：</label>
<input type="text" id="username" placeholder="用户名称">
</span>
<span v-else>
<label for="email">邮箱账号：</label>
<input type="text" id="email" placeholder="邮箱账号">
</span> <button @click="changeLoginWay" >切换登录方式</button>
<button @click="isUser = !isUser" >切换登录方式[简写]</button>
</p>
</div>
<!--<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
<script src="./../dependencies/vue.js"></script>
<script type="text/javascript">
const v = new Vue({
el : '#v',
data : {
isUser : true
},
methods : {
changeLoginWay() {
this.isUser = !this.isUser;
}
}
});
</script> </body>
</html>
解决Input元素复用的问题
我们发现在用户名输入框输入字符时，切换到邮箱账号
发现输入的字符被Vue保存在邮箱账号的输入框中
也许真实的需求中就是希望这样实现
但是一般情况应该是删除清空的
解决办法是使用Key属性作为区分的标识：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body> <div id="v">
<p>
<span v-if="isUser">
<label for="username">用户名称：</label>
<input type="text" id="username" placeholder="用户名称" key="username">
</span>
<span v-else>
<label for="email">邮箱账号：</label>
<input type="text" id="email" placeholder="邮箱账号" key="email">
</span> <button @click="changeLoginWay" >切换登录方式</button>
<button @click="isUser = !isUser" >切换登录方式[简写]</button>
</p>
</div>
<!--<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
<script src="./../dependencies/vue.js"></script>
<script type="text/javascript">
const v = new Vue({
el : '#v',
data : {
isUser : true
},
methods : {
changeLoginWay() {
this.isUser = !this.isUser;
}
}
});
</script> </body>
</html>
三、v-show指令
决定指令绑定的元素是否需要在页面中显示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body> <!-- v-show是纯粹的v-if -->
<div id="app">
<p v-show="!flag"> show this tag 1 </p>
<p v-show="100 > 2"> show this tag 2 </p>
<p v-show="true == true"> show this tag 3 </p>
<p v-show="false == false"> show this tag 4 </p>
<p v-show="2 < 1"> show this tag 5 </p>
</div>
<!--
v-if 和 v-show的区别
虽然二者都是判断条件来实现元素的是否显示在浏览器上
但是：
v-if是直接不创建dom元素实现
v-show是创建了dom元素但是使用display:none属性进行了隐藏处理 适用的场景，如果需要频繁的显示隐藏元素的话更适合使用v-show处理
如果使用v-if则需要反复创建dom可能造成内存浪费
-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!--<script src="./../dependencies/vue-min.js"></script>-->
<script type="text/javascript">
let vm = new Vue({
el : '#app',
data : {
flag : true
}
});
</script> </body>
</html>
注意v-show和v-if的区别：
v-if 和 v-show的区别 虽然二者都是判断条件来实现元素的是否显示在浏览器上
但是： v-if是直接不创建dom元素实现 v-show是创建了dom元素但是使用display:none属性进行了隐藏处理
适用的场景，如果需要频繁的显示隐藏元素的话更适合使用v-show处理
如果使用v-if则需要反复创建dom可能造成内存浪费
四、v-for指令
普通数组遍历
对象属性遍历
对象数组遍历
索引获取，key + value获取
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body> <div id="v">
<!-- 普通遍历使用 -->
<ul>
<li v-for="n in names">{{n}}</li>
</ul> <!-- 获取索引下标 index, 这里的索引是第二参数即可 -->
<ul>
<li v-for="(n, i) in names">{{i}} - {{n}}</li>
</ul> <!-- 遍历对象的属性和值 -->
<ul><!-- 只有一个参数，获取的是值 -->
<li v-for="k in obj">{{k}}</li>
</ul>
<ul><!-- 两个参数 参数1是属性值，参数二是属性名，获取的是值 -->
<li v-for="(v, k) in obj">{{k}} {{v}}</li>
</ul>
<ul><!-- 便利对象属性也支持获取下标 -->
<li v-for="(v, k, i) in obj">{{i}} {{k}} {{v}}</li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
const v = new Vue({
el : '#v',
data : {
names : ['wan', 'why', 'james'],
obj : {
name : '杰哥',
age : 24,
gender : false
}
}, });
</script> </body>
</html>
五、v-model
关键字：双向绑定
该指令本质时 v-on + v-bind的结合，为方便开发的一个语法糖
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body> <!-- v-model指令，一般用于表单数据提交处理 ，使用v-model用来实现数据和表单元素的双向绑定 -->
<!-- 可以理解为 v-bind 是单向绑定 vue对象对dom更新 -->
<!-- 而 v-model 是双向绑定 vue对象和dom双方都可以实现更新 -->
<div id="vue-app">
<h3>{{text_value}}</h3>
<p>无V-MODEL输入 <input type="text" :value="text_value"> </p> <!-- 使用v-bind绑定数据只能让vue对象的属性更改，如果是用户对dom输入更改的数据将不会更新 -->
<p>有V-MODEL输入 <input type="text" v-model="text_value"> </p> <!-- 使用v-model之后 输入标签控制的元素也能对数据更新了 --> <!-- 使用函数注入事件对象监听获取 实现绑定 -->
<p>使用函数事件对象进行绑定 <input type="text" :value="text_value" @input="listenInputChanges"> </p>
<!-- 简写在事件绑定中获取 -->
<p>使用函数事件对象进行绑定 <input type="text" :value="text_value" @input="text_value = $event.target.value"> </p> <!-- 绑定select标签 -->
<p>
<select name="" id="" v-model="program_lang">
<option value="Java">Java</option>
<option value="C/C++">C/C++</option>
<option value="C#">C#</option>
<option value="Python">Python</option>
<option value="PHP">PHP</option>
<option value="Rust">Rust</option>
<option value="Ruby">Ruby</option>
<option value="Julia">Julia</option>
</select>
</p>
</div>
<!-- <script type="text/javascript" src="../dependencies/vue.js"></script> -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
let vm = new Vue({
el : '#vue-app',
data : {
text_value : '文本值',
program_lang : 'Julia' /* 设置的是默认选中的值 */
},
methods : {
listenInputChanges(eventsObject) {
this.text_value = eventsObject.target.value;
}
}
});
</script> </body>
</html>
修饰符的使用：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body> <!-- v-model修饰符 -->
<div id="v">
<p>原始model <input type="text" v-model="message"></p>
<p v-text="message"></p>
<!-- 有时候我们不希望立刻更新model绑定输入的值，所以需要延迟或者非立即性的加载 -->
<!-- 使用.lazy修饰进行延缓处理 --> <p>使用lazy修饰 <input type="text" v-model.lazy="lazyMessage"></p>
<p v-text="lazyMessage"></p>
<!-- lazy修饰符，使用后在失去焦点和Enter回车后才刷新渲染 --> <p>无number修饰 <input type="text" v-model="num"> </p>
<p>{{num}} {{typeof num}}</p>
<!-- .number用于处理属性的数据类型 -->
<p>number修饰 <input type="text" v-model.number="num2"> </p>
<p>{{num2}} {{typeof num2}}</p> <!-- 默认就支持？ -->
<p>无trim清除 <input type="text" v-model="trimTest"> </p>
<p v-text="trimTest"></p>
<p>trim清除 <input type="text" v-model.trim="trimTest2"> </p>
<p v-text="trimTest2"></p>
</div>
<!-- <script type="text/javascript" src="../dependencies/vue.js"></script> -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
const v = new Vue({
el : '#v',
data : {
message : '',
lazyMessage : '',
num : '',
num2 : '',
trimTest : ' wqe qeq ',
trimTest2 : ' wqe qeq ',
}, });
</script> </body>
</html>
【Vue】Re04 指令：第二部分的更多相关文章
- vue学习指南：第二篇(详细Vue基础) - Vue的指令
一. Vue 的介绍 1. vue是一个 mvvm 的框架.(面试官经常会问的),angular 是 mvc的框架. 2. vm 是 vum 的实例,这个实例存在计算机内存中,主要干两件大事: 1. ...
- vue之指令篇 ps简单的对比angular
这两天在开始vue的大型项目,发现和ng还是有许多不同,这里对比下两者的指令系统 难度系数:ng的指令难度大于vue:至少vue上暂时没发现@&=:require,compile,precom ...
- 使用Vue自定义指令实现Select组件
完成的效果图如下: 一.首先,我们简单布局一下: <template> <div class="select"> <div class="i ...
- Vue的指令和成员
目录 Vue的指令和成员 指令 表单 斗篷 条件 循环 成员 计算成员 监听成员 Vue的指令和成员 指令 表单 表单指令一般是和属性指令联合使用的,最常见的就是v-model="变量&qu ...
- vue自定义指令
Vue自定义指令: Vue.directive('myDr', function (el, binding) { el.onclick =function(){ binding.value(); } ...
- vue 自定义指令的使用案例
参考资料: 1. vue 自定义指令: 2. vue 自定义指令实现 v-loading: v-loading,是 element-ui 组件库中的一个用于数据加载过程中的过渡动画指令,项目中也很少需 ...
- vue的指令
我之前学了学angular 发现angular和vue的指令有点类似 先说一下 new Vue({ el: "#box", // element(元素) 当前作 ...
- vue自定义指令用法总结及案例
1.vue中的指令有哪些?
- vue之指令
一.什么是VUE? 它是构建用户界面的JavaScript框架(让它自动生成js,css,html等) 二.怎么使用VUE? 1.引入vue.js 2.展示HTML <div id=" ...
- vue自定义指令(Directive中的clickoutside.js)的理解
阅读目录 vue自定义指令clickoutside.js的理解 回到顶部 vue自定义指令clickoutside.js的理解 vue自定义指令请看如下博客: vue自定义指令 一般在需要 DOM 操 ...
随机推荐
- vs2019 调试服务器代码
前言&使用背景: 又是我,一个不是在解决bug就是在解决bug路上的黄金程序员.今天给大家介绍一种方法是vs自带的调试工具.通常我们会遇见一种情况,那就是本地调试没有一点问题! 可一但发布到服 ...
- LeetCode 208. Implement Trie (Prefix Tree) 实现 Trie (前缀树)(C++/Java)
题目: Implement a trie with insert, search, and startsWith methods. Example: Trie trie = new Trie(); t ...
- node.js常用命令总结
Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行时环境,用于构建快速.可扩展的网络应用程序.它使用事件驱动.非阻塞 I/O 模型,使其非常适合构建数据密集型的实时应用 ...
- 一个开源且全面的C#算法实战教程
前言 算法在计算机科学和程序设计中扮演着至关重要的角色,如在解决问题.优化效率.决策优化.实现计算机程序.提高可靠性以及促进科学融合等方面具有广泛而深远的影响.今天大姚给大家分享一个开源.免费.全面的 ...
- 快速上手Python编程
前言 .center { width: auto; display: table; margin-left: auto; margin-right: auto } 类型 原理 优点 缺点 编译型语言 ...
- readhat8搭建SFTP双机高可用并配置Rsync数据实时同步
环境准备: 主机 host-61-118 : 192.168.61.118 host-61-119:192.168.61.119 vip:192.168.61.220 检测openssh版本,版本必须 ...
- Grab 基于 Apache Hudi 实现近乎实时的数据分析
介绍 在数据处理领域,数据分析师在数据湖上运行其即席查询.数据湖充当分析和生产环境之间的接口,可防止下游查询影响上游数据引入管道.为了确保数据湖中的数据处理效率,选择合适的存储格式至关重要. Vani ...
- 高通与At指令：AtCop解析
背景 在某个新基线上移植AT指令,发现有问题,因此收集了这个系列的 文章 作为 这方面的知识补充. 原文作者:laozhuxinlu,本文有删改. 另外,还参考了:https://www.cnblog ...
- Java助力加固Excel文件，保障数据安全
前言 Excel文件保护是常用的一种功能,文件保护主要有三种: 添加密码,如果没有密码不允许打开文件. 添加密码,如果没有密码,不能修改文件,但可以打开,只读以及另存文件. 只读推荐,通常推荐打开Ex ...
- 一个用来画拉氏图的简单Python脚本
技术背景 关于拉氏图的更多介绍,可以参考下这篇博客,这里简单引述一部分内容: Ramachandran plot(拉氏图)是由G. N. Ramachandran等人于1963年开发的,用来描述蛋白质 ...