v-bind&v-on

Day1

文章目录

v-bind&v-on
前言
一、V-bind
- 1.简单实现
- 2.Class的绑定
- - 2.1对象绑定
  - 2.2数组绑定
- 3.style的绑定
- - 3.1对象绑定
  - 3.2数组绑定
二、V-on
- 1.简单的案例
- 2.获取参数
- 3.修饰符
总结

前言

此文章根据官方文档及些网络资料编写，仅供个人使用。

提示：以下是本篇文章正文内容，下面案例可供参考

一、V-bind

介绍：
V-bind可绑定一个或多个属性值，同时也支持对象或数组绑定。

缩写：:

1.简单实现

  <div id="app"><img v-bind:src="imgURL"><a v-bind:href="aHref">CSDN</a><br><!--语法糖/缩写的写法--><img :src="imgURL"><a :href="aHref">CSDN</a></div><script>const app = new Vue({el: '#app',data: {imgURL: 'img/1.gif',aHref: 'https://www.csdn.net/'}})</script>

2.Class的绑定

2.1对象绑定

我们在动态绑定的时候，一般前面是给一个类名，后面跟一个布尔值，通过布尔值控制样式

<<h2 v-bind:class={key：value}>>
<h2 v-bind:class={类名：布尔值}>

通过变量控制的，一般是把变量放在下面data里面。
第10行可以理解为：class="active:true" 只有当为true的时候文字才会变红

  <style>.active {color: red;}</style>
<div id="app"><h2>{{message}}</h2>
</div><div id="app"><h2 v-bind:class="{active: yesActive}">{{message}}</h2><h2 v-bind:class="{active: noActive}">{{message}}</h2></div><script>const app = new Vue({el: '#app',data: {message: 'Hello',yesActive: true,noActive: false}})</script>

结果：

2.2数组绑定

用法一：直接通过{}绑定一个类
<h2 :class="['active']">Hello World</h2>
用法二：也可以传入多个值
<h2 :class=“[‘active’, 'line']">Hello World</h2>

3.style的绑定

3.1对象绑定

size为变量，根据size的大小改变数值，color为变量

    <!-- style 绑定 --><div id="app"><div :style="{ fontSize: size + 'px' , color:myColor}">我的大小为30且是红色字体</div></div><script>const app = new Vue({el: '#app',data: {size: 30,myColor: 'red'}})</script>

3.2数组绑定

  <div id="app"><h2 :style="[myColor, fontSize]">{{message}}</h2></div><script>const app = new Vue({el: '#app',data: {message: 'Hello',myColor: {color: 'red'},mySize: {fontSize: '30px'},}})</script>

二、V-on

事件监听，可监听用户发生的事件

缩写：@
参数：event

1.简单的案例

v-on计数器，点击按钮触发事件

  <div id="app"><h2>{{counter}}</h2><button @click="add">+</button><button @click="reduce">-</button></div><script>const app = new Vue({el: '#app',data: {counter: 0},methods: {add() {this.counter++},reduce() {this.counter--}}})</script>

2.获取参数

当按钮1被点击的时候会触发事件，在控制台上输出：“按钮1被点击了”
当按钮2被点击的时候，控制台会输出：按钮2被点击了，Hello，以及event事件。

  <div id="app"><!--1.事件调用的方法没有参数--><button @click="btn1Click()">按钮1</button><button @click="btn2Click(message, $event)">按钮3</button></div><script>const app = new Vue({el: '#app',data: {message: 'Hello'},methods: {btn1Click() {console.log("按钮1被点击了");},btn2Click(message, event) {console.log('按钮2被点击了', message, event);}}})</script>

3.修饰符

.stop - 调用 event.stopPropagation()。
.prevent - 调用 event.preventDefault()。
.capture - 添加事件侦听器时使用 capture 模式。
.self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
.{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。
.native - 监听组件根元素的原生事件。
.once - 只触发一次回调。
.left - (2.2.0) 只当点击鼠标左键时触发。
.right - (2.2.0) 只当点击鼠标右键时触发。
.middle - (2.2.0) 只当点击鼠标中键时触发。
.passive - (2.3.0) 以 { passive: true } 模式添加侦听器

这里我就举几个修饰符的例子
.stop：如果不加的话，点击按钮的时候控制台会输出：“divClick和btnClick”
.prevent：阻止自动跳转页面，一般在点击提交以后会自动跳转页面 .once：只会触发一次

  <div id="app"><!--1. .stop修饰符的使用--><div @click="divClick">aaaaaaa<button @click.stop="btnClick">按钮</button></div><!--2. .prevent修饰符的使用--><br><form action="baidu"><input type="submit" value="提交" @click.prevent="submitClick"></form><!--3. .监听某个键盘的键帽--><input type="text" @keyup.enter="keyUp"><!--4. .once修饰符的使用--><button @click.once="btn2Click">按钮2</button></div><script>const app = new Vue({el: '#app',data: {message: '你好啊'},methods: {btnClick() {console.log("btnClick");},divClick() {console.log("divClick");},submitClick() {console.log('submitClick');},keyUp() {console.log('keyUp');},btn2Click() {console.log('btn2Click');}}})</script>

总结

Vue学习（一）插值操作

Vue学习（二）动态绑定与事件监听

Vue学习（三）循环遍历与表单绑定

Vue学习（四）组件与组件间的通信

Vue学习（五）组件的插槽

Vue学习（二）动态绑定与事件监听相关推荐

Vue学习笔记之03v-on事件监听
v-on指令的基本使用 <div id="app"><h2>{{counter}}</h2><!-- <button v-on:cl ...
Java语言学习--Swing中Button事件监听
1 前言今天在使用Java Swing中的JButton的事件触发机制时遇到了许多问题,简单的了解了一下. 2 事件监听机制事件监听的机制如下图所示分析. 3 代码分析 3.1 分步解析 1.事件 ...
onscroll事件没有响应的原因以及vue.js中添加onscroll事件监听的方法(vue上监听scroll事件
在vue.js中直接使用onscroll不起作用利用DOM二级监听事件即可, window.addEventListener('scroll',()=>{console.log(window. ...
事件监听机制（一）Java事件监听
事件监听机制(一)Java事件监听事件监听实现流程事件对象: 继承自java.util.EventObject对象,由开发者自行定义实现. 事件源: 就是触发事件的源头,不同的事件源会触发不同的事 ...
JAVA的GUI编程02——事件监听(ActionListener)、TextField事件监听、（组合、内部类）
一.事件监听 public class TestListener {public static void main(String[] args) {Frame frame = new Frame(); ...
JavaScript之事件触发on和事件监听addEvent及addEventListener的区别和作用
一.on事件为dom节点添加多个on事件只会执行最后的那个事件,因为最后的指定的on事件指向最后的那个函数,代码如下所示: function method1(){console.log('我是方法1 ...
二、Vue基础语法学习笔记——事件监听v-on、条件判断（v-if、v-else-if、v-else、v-show）、循环遍历（v-for遍历数组对象，key属性、检测数组更新）、图书案例、双向绑定
四.事件监听在前端开发中,我们需要经常和用于交互. 这个时候,我们就必须监听用户发生的时间,比如点击.拖拽.键盘事件等等在Vue中如何监听事件呢?使用v-on指令 v-on介绍作用:绑定事件监听 ...
vue学习记录-05 事件监听
vue学习记录-05 事件监听这篇文章是根据codewhy老师在b站的视频进行的学习记录文章目录 vue学习记录-05 事件监听一.v-on的基本使用二.v-on的参数问题 1.方法不需要参数 ...
Vue 模板语法插值操作绑定属性计算属性事件监听条件判断循环遍历阶段案例
1 插值操作 1.1 Mustache语法也就是双大括号 {{ }} <div id="app"> <!-- mustche语法中,不仅可以直接写变量,也可以写 ...