vue样式绑定、事件监听、表单输入绑定、响应接口
1.样式绑定
操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是属性,所以我们可以用 v-bind 处理它们:只需要通过表达式计算出字符串结果即可。不过,字符串拼接麻烦且易错。因此,在将 v-bind 用于 class 和 style 时,Vue.js 做了专门的增强。表达式结果的类型除了字符串之外,还可以是对象或数组。
1.绑定class
1.对象语法
我们可以传给 v-bind:class 一个对象,以动态地切换 class,支持多个class。v-bind:class 指令也可以与普通的 class 属性共存。
<div id="app" class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }"></div>
<script>
var app = new Vue({
el: '#app',
data: {
isActive: true,
hasError: false
}
})
</script>
渲染后的class如下:
们也可以在这里绑定一个返回对象的计算属性。这是一个常用且强大的模式:
<div id="app" class="static" v-bind:class="classObject"></div>
<script>
var app = new Vue({
el: '#app',
data: {
isActive: true,
error: null
},
computed: {
classObject: function() {
return {
active: this.isActive && !this.error,
'text-danger': this.error && this.error.type === 'fatal'
}
}
}
})
</script>
渲染后的class如下:
2.数组语法
我们可以把一个数组传给 v-bind:class,以应用一个 class 列表
<div id="app" class="static" v-bind:class="[activeClass, errorClass]"></div>
<script>
var app = new Vue({
el: '#app',
data: {
activeClass: 'active',
errorClass: 'text-danger'
}
})
</script>
结果:
也可以用三元表达式:
<div id="app">
<div v-bind:class="[errorClass ,isActive ? activeClass : '']"></div>
</div>
<script>
new Vue({
el: '#app',
data: {
isActive: true,
activeClass: 'active',
errorClass: 'text-danger'
}
})
</script>
渲染后的class如下:
在数组语法中也可以使用对象语法:
<div id="app">
<div v-bind:class="[{ active: isActive }, errorClass]"></div>
</div>
<script>
new Vue({
el: '#app',
data: {
isActive: true,
errorClass: 'text-danger'
}
})
</script>
渲染后的class如下:
2.绑定内联样式
1.对象语法
v-bind:style 的对象语法十分直观——看着非常像 CSS,但其实是一个 JavaScript 对象。CSS 属性名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case,记得用引号括起来) 来命名:
<div id="app">
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">vue 6a!</div>
</div>
<script>
new Vue({
el: '#app',
data: {
activeColor: 'green',
fontSize: 30
}
})
</script>
结果:
渲染后css:
直接绑定到一个样式对象通常更好,这会让模板更清晰
<div id="app">
<div v-bind:style="styleObject">vue 6a!</div>
</div>
<script>
new Vue({
el: '#app',
data: {
styleObject: {
color: 'red',
fontSize: '13px'
}
}
})
</script>
结果:
渲染后css:
对象语法常常结合返回对象的计算属性使用。
2.数组语法
数组语法可以将多个样式对象应用到同一个元素上:
<div id="app">
<div v-bind:style="[baseStyles, overridingStyles]">vue 6a!</div>
</div>
<script>
new Vue({
el: '#app',
data: {
baseStyles: {
color: 'red',
fontSize: '13px'
},
overridingStyles: {
color: 'black'
}
}
})
</script>
结果:
渲染后css:
3.自动添加前缀
当 v-bind:style 使用需要添加浏览器引擎前缀的 CSS 属性时,如 transform,Vue.js 会自动侦测并添加相应的前缀。
2. 事件监听
1. 可以用 v-on 指令监听 DOM 事件,并在触发时运行一些 JavaScript 代码。
<div id="example-1">
<button v-on:click="counter += 1">Add 1</button>
<p>The button above has been clicked {{ counter }} times.</p>
</div>
<script type="text/javascript">
var example1 = new Vue({
el: '#example-1',
data: {
counter: 0
}
})
</script>
结果:
2. v-on 还可以接收一个需要调用的方法名称。
<div id="example-2">
<!-- `greet` 是在下面定义的方法名 -->
<button v-on:click="greet">Greet</button>
</div>
<script type="text/javascript">
var example2 = new Vue({
el: '#example-2',
data: {
name: 'Vue.js'
},
// 在 `methods` 对象中定义方法
methods: {
greet: function(event) {
// `this` 在方法里指向当前 Vue 实例
console.log('Hello ' + this.name + '!')
// `event` 是原生 DOM 事件
if(event) {
console.log(event.target.tagName)
}
}
}
}) // 也可以用 JavaScript 直接调用方法, 不会调用event里面的console
// example2.greet() // => 'Hello Vue.js!'
</script>
结果:
3.除了直接绑定到一个方法,也可以用内联 JavaScript 语句:
<div id="example-3">
<button v-on:click="say('hi')">Say hi</button>
<button v-on:click="say('what')">Say what</button>
</div>
<script type="text/javascript">
new Vue({
el: '#example-3',
methods: {
say: function(message) {
alert(message)
}
}
})
</script>
有时也需要在内联语句处理器中访问原始的 DOM 事件。可以用特殊变量 $event
把它传入方法:
<div id="example-3">
<button v-on:click="warn('Form cannot be submitted yet.', $event)">
Submit
</button>
</div>
<script type="text/javascript">
new Vue({
el: '#example-3',
methods: {
warn: function(message, event) {
// 现在我们可以访问原生事件对象
if(event) event.preventDefault()
alert(message)
}
}
})
</script>
4.事件修饰符
Vue.js 为 v-on 提供了事件修饰符来处理 DOM 事件细节,如:event.preventDefault() 或 event.stopPropagation()。Vue.js通过由点(.)表示的指令后缀来调用修饰符。
<!-- 阻止单击事件冒泡 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件侦听器时使用事件捕获模式 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只当事件在该元素本身(而不是子元素)触发时触发回调 -->
<div v-on:click.self="doThat">...</div> <!-- click 事件只能点击一次,2.1.4版本新增 -->
<a v-on:click.once="doThis"></a>
5.按键修饰符
Vue 允许为 v-on 在监听键盘事件时添加按键修饰符:
<!-- 只有在 keyCode 是 13 时调用 vm.submit() -->
<input v-on:keyup.13="submit">
记住所有的 keyCode 比较困难,所以 Vue 为最常用的按键提供了别名:
<!-- 同上 -->
<input v-on:keyup.enter="submit">
<!-- 缩写语法 -->
<input @keyup.enter="submit">
全部的按键别名:
.enter
.tab
.delete (捕获 "删除" 和 "退格" 键)
.esc
.space
.up
.down
.left
.right
.ctrl
.alt
.shift
.meta
3.表单输入绑定
可以用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇,但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据,并对一些极端场景进行一些特殊处理。
注意:(1)v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值。
(2)v-model 会根据控件类型自动选取正确的方法来更新元素。v-model 在内部为不同的输入元素使用不同的属性并抛出不同的事件:
text 和 textarea 元素使用 value 属性和 input 事件;
checkbox 和 radio 使用 checked 属性和 change 事件;
select 字段将 value 作为 prop 并将 change 作为事件。
1.基本使用
例如:(表单元素的演示)
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8" />
<title></title>
<script src="js/vue.min.js"></script>
</head> <body>
<h3>输入框</h3>
<div id="app">
<p>input 元素:</p>
<input v-model="message" placeholder="编辑我……">
<p>消息是: {{ message }}</p> <p>textarea 元素:</p>
<p style="white-space: pre">{{ message2 }}</p>
<textarea v-model="message2" placeholder="多行文本输入……"></textarea>
</div> <script>
new Vue({
el: '#app',
data: {
message: 'vue',
message2: '百度\r\nhttp://www.baidu.com'
}
})
</script> <h3>复选框如果是一个为逻辑值,如果是多个则绑定到同一个数组:</h3>
<div id="app2">
<p>单个复选框:</p>
<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label> <p>多个复选框:</p>
<input type="checkbox" id="vue" value="vue" v-model="checkedNames">
<label for="vue">vue</label>
<input type="checkbox" id="google" value="Google" v-model="checkedNames">
<label for="google">Google</label>
<input type="checkbox" id="taobao" value="Taobao" v-model="checkedNames">
<label for="taobao">taobao</label>
<br>
<span>选择的值为: {{ checkedNames }}</span>
</div>
<script>
new Vue({
el: '#app2',
data: {
checked: false,
checkedNames: ['vue', 'Google']
}
})
</script> <h3>单选按钮</h3>
<div id="app3">
<input type="radio" id="vue" value="vue" v-model="picked">
<label for="vue">vue</label> <input type="radio" id="google" value="Google" v-model="picked">
<label for="google">Google</label>
<br>
<span>选中值为: {{ picked }}</span>
</div>
<script>
new Vue({
el: '#app3',
data: {
picked: 'vue'
}
})
</script> <h3>下拉列表</h3>
<div id="app4">
<select v-model="selected" name="fruit">
<option value="">选择一个网站</option>
<option value="www.baidu.com">Baidu</option>
<option value="www.google.com">Google</option>
</select>
<div id="output">
选择的网站是: {{selected}}
</div>
</div> <script>
new Vue({
el: '#app4',
data: {
selected: 'www.google.com'
}
})
</script>
</body> </html>
结果:
2.修饰符
.lazy:在默认情况下, v-model 在 input 事件中同步输入框的值与数据,但你可以添加一个修饰符 lazy ,从而转变为在 change 事件中同步。(相当于onchange事件)
.number:如果想自动将用户的输入值转为 Number 类型(如果原值的转换结果为 NaN 则返回原值),可以添加一个修饰符 number 给 v-model 来处理输入值。
.trim:如果要自动过滤用户输入的首尾空格,可以添加 trim 修饰符到 v-model 上过滤输入。
例如:
<h3>输入框</h3>
<div id="app">
<input v-model.trim="name">
<p>name是: {{ name }}</p> <input v-model.number="age">
<p>age是: {{ age }}</p> <input v-model.lazy="sex">
<p>sex是: {{ sex }}</p>
</div>
<script>
new Vue({
el: '#app',
data: {
name: 'zs',
age: '25.5',
sex: '女',
}
})
</script>
4.响应接口
Vue 可以添加数据动态响应接口
1.通过使用 $watch 属性来实现数据的监听,$watch 必须添加在 Vue 实例之外才能实现正确的响应。
<div id="app">
<p style="font-size:25px;">计数器: {{ counter }}</p>
<button @click="counter++" style="font-size:25px;">点我</button>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
counter: 1
}
});
vm.$watch('counter', function(nval, oval) {
alert('计数器值的变化 :' + oval + ' 变为 ' + nval + '!');
});
setTimeout(
function() {
vm.counter += 20;
}, 10000
);
</script>
Vue 不能检测到对象属性的添加或删除,最好的方式就是在初始化实例前声明根级响应式属性,哪怕只是一个空值。
如果我们需要在运行过程中实现属性的添加或删除,则可以使用全局 Vue,Vue.set 和 Vue.delete 方法。
2.Vue.set-用于设置对象的属性
Vue.set 方法用于设置对象的属性,它可以解决 Vue 无法检测添加属性的限制,语法格式如下:
Vue.set( target, key, value )
(1)基本的给对象添加属性的方法
<div id = "app">
<p style = "font-size:25px;">计数器: {{ products.id }}</p>
<button @click = "products.id++" style = "font-size:25px;">点我</button>
</div>
<script type = "text/javascript">
var myproduct = {"id":1, name:"book", "price":"20.00"};
var vm = new Vue({
el: '#app',
data: {
products: myproduct
}
});
vm.products.qty = "1";
console.log(vm);
vm.$watch('products.id', function(nval, oval) {
alert('计数器值的变化 :' + oval + ' 变为 ' + nval + '!');
});
</script>
结果:
在产品中添加了数量属性 qty,但是 get/set 方法只可用于 id,name 和 price 属性,却不能在 qty 属性中使用。不能通过添加 Vue 对象来实现响应。 Vue 主要在开始时创建所有属性。
(2)通过Vue.set设置
<div id="app">
<p style="font-size:25px;">计数器: {{ products.id }}</p>
<button @click="products.id++" style="font-size:25px;">点我</button>
</div>
<script type="text/javascript">
var myproduct = {
"id": 1,
"name": "book",
"price": "20.00"
}; var vm = new Vue({
el: '#app',
data: {
products: myproduct
}
});
Vue.set(myproduct, 'qty', 1); console.log(1);
console.log(vm);
vm.$watch('products.id', function(nval, oval) {
alert('计数器值的变化 :' + oval + ' 变为 ' + nval + '!');
});
</script>
结果:从控制台输出的结果可以看出 get/set 方法可用于qty 属性。
3.Vue.delete-删除动态添加的属性
语法如下:
Vue.delete( target, key )
例如:使用 Vue.delete 来删除 price 属性
<div id="app">
<p style="font-size:25px;">计数器: {{ products.id }}</p>
<button @click="products.id++" style="font-size:25px;">点我</button>
</div>
<script type="text/javascript">
var myproduct = {
"id": 1,
name: "book",
"price": "20.00"
};
var vm = new Vue({
el: '#app',
data: {
products: myproduct
}
}); Vue.delete(myproduct, 'price');
console.log(vm);
vm.$watch('products.id', function(nval, oval) {
alert('计数器值的变化 :' + oval + ' 变为 ' + nval + '!');
});
</script>
结果:可以看到 price 属性已删除,只剩下了 id 和 name 属性,price 属性的 get/set 方法也已删除。
vue样式绑定、事件监听、表单输入绑定、响应接口的更多相关文章
- Vue.js教程--基础2(事件处理 表单输入绑定
事件处理 表单输入绑定 事件处理 监听v-on 监听 DOM 事件,并在触发时运行一些 JavaScript 代码. 可以在v-on:click=''加内联语句. 有时也需要在内联语句处理器中访问原始 ...
- Vue学习计划基础笔记(五) - 表单输入绑定、组件基础
表单输入绑定.组件基础 目标: 熟练掌握vue中表单的处理方式 对之前学习的内容简单回顾一下,并写一个实例,学以致用(最好脱离文档) vue中表单的处理方式 vue中表单的处理使用了v-model指令 ...
- Vue的指令系统、计算属性和表单输入绑定
指令系统 指令 (Directives) 是带有 v- 前缀的特殊特性.指令特性的值预期是单个 JavaScript 表达式 (v-for 是例外情况,稍后我们再讨论).指令的职责是,当表达式的值改变 ...
- VUE:事件处理和表单输入绑定
事件处理 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <titl ...
- EasyNVR无插件播放HLS/RTMP网页直播方案前端完善:监听表单变动
在上一篇博客中我们表述完了防止提交成功后多余操作提交的一个过程:其中的精髓在于ajax的触发事件的使用. 而这篇博客主要想说明一下如何实时的判断出表单是否发生变化. 问题表述: 在网页前端的开发过程中 ...
- Blazor和Vue对比学习(基础1.9):表单输入绑定和验证,VeeValidate和EditFrom
这是基础部分的最后一章,内容比较简单,算是为基础部分来个HappyEnding.我们分三个部分来学习: 表单输入绑定 Vue的表单验证:VeeValidate Blazor的表单验证:EditForm ...
- Vue表单输入绑定(文本框和复选框)
文本框 <!DOCTYPE html><html> <head> <meta charset="utf-8"> ...
- 前端MVC Vue2学习总结(五)——表单输入绑定、组件
一.表单输入绑定 1.1.基础用法 你可以用 v-model 指令在表单控件元素上创建双向数据绑定.它会根据控件类型自动选取正确的方法来更新元素.尽管有些神奇,但 v-model 本质上不过是语法糖, ...
- 前端框架之Vue(8)-表单输入绑定
基础用法 你可以用 v-model 指令在表单 <input> . <textarea> 及 <select> 元素上创建双向数据绑定.它会根据控件类型自动选取正确 ...
随机推荐
- Delphi Webbrowser使用方法详解
1.webbroser介绍 该组件是一个浏览器组件,可以显示一个指定地址的网页.设置网页打开时的主页以及对网页进行相关的操作,同时也可以对HTML文件进行剪切.复制.粘贴.删除等操作.该 组件在Int ...
- i春秋暑期训练营丨渗透测试工程师开课啦
每个人的夏天 都有专属的解锁方式 或来一次难忘的旅行 或躺在家里吹着空调吃西瓜 又或者是和小伙伴参加暑期训练营 i春秋暑期渗透测试工程师 报名通道已全部开启 为了保证课程质量,采取小班教学,每班仅限3 ...
- 倒计时3天!i春秋四周年盛典狂欢,钜惠不停
六月注定是不平凡的 感恩父亲节 父爱如山亦如海 难忘毕业季 青春无悔不散场 嗨购618 优惠福利送不停 更值得期待的是 在这个不平凡的六月 迎来了i春秋四周年庆典 当周年庆遇到618 会擦出怎样的火花 ...
- RT-Thread点亮led
下载默认工程 https://www.rt-thread.org/ 配置rtconfig.h #define STM32F103RE //修改成自己的板子 #define RT_HSE_VALUE 8 ...
- 团队展示&选题 (白衣天使队)
作业详见此地址: https://www.cnblogs.com/bbplus/p/11735449.html
- Scrum冲刺第四篇
一.每日例会 会议照片 成员 昨日已完成的工作 今日计划完成的工作 工作中遇到的困难 陈嘉欣 撰写博客,管理成员提交代码 和队友一同开发音乐控制模块 对音频控制方面知识了解少,功能实现困难 邓镇港 帮 ...
- 结对编程-python实现
目录 软件工程结对项目:Python实现wc程序 结对项目Github地址 项目成员 项目要求 说明 需求 PSP表格 解题思路描述 设计实现 代码组织图 代码分析 代码覆盖率 测试 单元测试 回归测 ...
- [TCP/IP] 关闭连接后为什么客户端最后还要等待2MSL
MSL(Maximum Segment Lifetime)报文最大生存时间,2MSL即两倍的MSL,TCP允许不同的实现可以设置不同的MSL值. 第一,保证客户端发送的最后一个ACK报文能够到达服务器 ...
- AVX 指令详解 ,还有SSE指令
https://blog.csdn.net/fengbingchun/article/details/23598709 本人从来不复制的,自己看!.
- 03导航链接的制作(wx:for循环)和小程序警告request fail url not in domain list
06==>导航链接的制作 <!-- 导航链接 --> <navigator url="../list/list" hover-class="nav ...