Vue2.0 修饰符、绑定样式、计算属性以及侦听属性

一、修饰符

1.事件修饰符:事件修饰符是对事件捕获以及目标进行了处理(语法:@事件名.修饰符)

(1)stop:阻止了事件冒泡,相当于调用了event.stopPropagation方法

(2)prevent:阻止了事件默认行为,相当于调用了event.preventDefault方法

(3)self:只有在event.target是当前元素自身时触发

(4)once:绑定的事件只能触发一次

(5)capture:让事件触发从包含这个元素的顶层开发往下依次触发(也就是捕获模式)

(6)passive:事件的默认行为立即执行,无需等待事件回调

(7)native:让组件变成像html内置标签那样监听根元素的原生事件,否则组件上使用v-on只会监听自定义事件

注意:使用修饰符时,顺序很重要;相应的代码会以同样的顺序产生。

因此,用v-on:click.prevent.self 会阻止所有的点击,而 v-on:click.self.prevent 只会阻止对元素自身的点击

2.键盘修饰符:键盘修饰符用来修饰键盘的事件(如:onkeyup、onkeydown等),键盘的事件触发需要相对应的keyCode。然而keyCode存在很多,因此为了使用方便Vue给我们提供了别名的修饰符

(1)普通按键(enter、delete、space、tab、esc…)

(2)系统修饰键(ctrl、shift、alt…)

(3)也可以直接用按键的代码来做修饰符(如:enter为13)

3.表单修饰符:这个修饰符主要是用在表单常用的指令上,v-model对表单的输入内容进行修饰。


(1)lazy:lazy跟懒加载类似,在表单上我们填写信息的时候不会触发v-model值的变化,只有光标离开的时候才会赋值

(2)trim:过滤掉输入内容的前后空格

(3)number: 会将输入的值转换为数值类型

二、绑定样式

class 与 style 是 HTML 元素的属性,用于设置元素的样式,我们可以用 v-bind 来设置样式属性。Vue.js v-bind 在处理 class 和 style 时, 专门增强了它。表达式的结果类型除了字符串之外,还可以是对象或数组。

代码示例:

html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>绑定样式title>
		<style>
			.basic{
				width: 300px;
				height: 50px;
				border: 1px solid black;
			}
			.happy{
				border: 3px solid red;;
				background-color: rgba(215, 235, 0, 0.54);
				background: linear-gradient(30deg,yellow,pink,orange,yellow);
			}
			.sad{
				border: 4px dashed rgb(2, 197, 2);
				background-color: gray;
			}
			.normal{
				background-color: skyblue;
			}
			.atguigu1{
				background-color: yellowgreen;
			}
			.atguigu2{
				font-size: 30px;
				text-shadow:2px 2px 10px red;
			}
			.atguigu3{
				border-radius: 20px;
			}
		style>
		<script type="text/javascript" src="../js/vue.js">script>
	head>
	<body>
		<div id="root">
			
			<div class="basic" :class="mood" @click="changeMood">{{name}}div> <br/><br/>

			
			<div class="basic" :class="classArr">{{name}}div> <br/><br/>

			
			<div class="basic" :class="classObj">{{name}}div> <br/><br/>

			
			<div class="basic" :style="styleObj">{{name}}div> <br/><br/>
			
			<div class="basic" :style="styleArr">{{name}}div>
		div>
	body>
	<script type="text/javascript">
		Vue.config.productionTip = false
		
		const vm = new Vue({
			el:'#root',
			data:{
				name:'VUE',
				mood:'normal',
				classArr:['atguigu1','atguigu2','atguigu3'],
				classObj:{
					atguigu1:false,
					atguigu2:false,
				},
				styleObj:{
					fontSize: '40px',
					color:'red',
				},
				styleObj2:{
					backgroundColor:'orange'
				},
				styleArr:[
					{
						fontSize: '40px',
						color:'blue',
					},
					{
						backgroundColor:'gray'
					}
				]
			},
			methods: {
				changeMood(){
					const arr = ['happy','sad','normal']
					const index = Math.floor(Math.random()*3)
					this.mood = arr[index]
				}
			},
		})
	script>
html>

1.class样式写法 :class="xxx" xxx可以是字符串、对象、数组。

        (1)字符串写法适用于:类名不确 定,要动态获取。

        (2)对象写法适用于:要绑定多个样式,个数不确定,名字也不确定。

        (3)数组写法适用于:要绑定多个样式,个数确定,名字也确定,但不确定用不用。

 2.style样式写法 :style="{fontSize: xxx}"其中xxx是动态值。:style="[a,b]"其中a、b是样式对象。

三、计算属性(computed)

1.语法

(1)正常写法:

computde: {
    fullName: {
        get() {
            //依赖数据发生改变执行代码
        }
        set() {
            //计算属性值被修改执行代码
        }
    }
}

(2)简写:只使用getter不使用setter才能使用简写方法

computde: {
    fullName() {
         //依赖数据发生改变执行代码
    }
}

2.computed 阐述

 (1)监听值未在data中定义,以return返回值形式;

(2)计算属性变量在computed中定义,属性监听在data中定义。

(3)计算属性默认只有get来读取,手动修改计算属性时,会触发手写的set函数。

(4)计算属性的值会被缓存,只有实例中相关依赖值改变时,才重新计算,性能好但不适合做异步请求。

(5)计算属性是声明式的描述一个值依赖了其他值,依赖的值改变后重新计算结果更新DOM。属性监听的是定义的变量,当定义的值发生变化时,执行相对应的函数。 

3.computed 使用阐述

 (1)在一个计算属性里可以完成各种复杂的逻辑,包括运算、函数调用等,只要最终返回一个结果就可以。

(2)计算属性还可以依赖多个Vue 实例的数据,只要其中任一数据变化,计算属性就会重新执行,视图也会更新。 

4.computed 【getter和setter】

(1)计算属性拥有的两个方法:getter   setter   用来实现数据的双向绑定

(2)每一个计算属性都包含一个 getter 和一个 setter,在你需要时,也可以提供一个 setter 函数 , 当手动修改计算属性的值就像修改一个普通数据那样时,就会触发 setter函数,执行一些自定义的操作
(3)计算属性还经常用于动态地设置元素的样式名称 class 和内联样式 style

四、侦听属性(watch

1. watch 的定义:watch是一个观察动作.可以侦听指定名称属性值(data/computed)的变化,属性值一旦发生变化时就会触发侦听器,然后侦听器执行相应的业务代码

(1)侦听器一般来说是用来监听数据的变化,默认是在数据发生变化时执行。

(2)监听的数据名放到这里面作为函数名,这个函数里面有两个参数,一个是新值,一个是旧值。

(3)在vue中,使用watch来响应数据的变化

2. 简单侦听(主要针对变量和简单数据类型)

(1)watch在vue中是一个单独的配置项

(2)watch中的函数名称必须和属性名称一致,且不能人为调用

(3)没有返回值,如需使用处理结果,必须将结果赋值给data中的成员再进行使用 


3. 深度侦听(主要针对复杂数据类型或者需要立即执行的侦听函数)

 (1)handler: 固定方法触发. 侦听函数必须叫handler(必写)

(2)deep: 开启深度侦听(必写)

(3)immediate: 立即侦听(页面初始化时handler立即执行一次) 


 

你可能感兴趣的:(vue.js,前端,javascript)