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

最新推荐文章于 2024-04-24 09:22:16 发布

前端小白李小小

最新推荐文章于 2024-04-24 09:22:16 发布

阅读量396

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_45902025/article/details/130812981

版权

一、修饰符

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 时，专门增强了它。表达式的结果类型除了字符串之外，还可以是对象或数组。

代码示例：

<!DOCTYPE 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">
			<!-- 绑定class样式--字符串写法，适用于：样式的类名不确定，需要动态指定 -->
			<div class="basic" :class="mood" @click="changeMood">{{name}}</div> <br/><br/>

			<!-- 绑定class样式--数组写法，适用于：要绑定的样式个数不确定、名字也不确定 -->
			<div class="basic" :class="classArr">{{name}}</div> <br/><br/>

			<!-- 绑定class样式--对象写法，适用于：要绑定的样式个数确定、名字也确定，但要动态决定用不用 -->
			<div class="basic" :class="classObj">{{name}}</div> <br/><br/>

			<!-- 绑定style样式--对象写法 -->
			<div class="basic" :style="styleObj">{{name}}</div> <br/><br/>
			<!-- 绑定style样式--数组写法 -->
			<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中的成员再进行使用

<template>
  <div>
    <input type="text" v-model="name">
  </div>
</template>
<script>
export default {
  data(){
    return {
      name: ""
    }
  },
  // 目标: 侦听到name值的改变
  watch: {
    // newVal: 当前最新值  oldVal: 上一刻的值
    name(newVal, oldVal){
      console.log(newVal, oldVal); //变量名对应值改变这里自动触发
    }
  }
}
</script>

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

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

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

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

<template>
  <div>
    <input type="text" v-model="user.name">
    <input type="text" v-model="user.age">
  </div>
</template>
 
<script>
export default {
  data(){
    return {
      user: {
        name: "",
        age: 0
      }
    }
  },
  // 目标: 侦听对象
  watch: {
        // 第一种：监听整个对象，对象里的每个属性值的变化都会执行handler
        // 注意：属性值发生变化后，handler执行后获取的 newVal 值和 oldVal 值是一样的
    user: {
      handler(newVal, oldVal){
        console.log(newVal, oldVal);
      },
      deep: true, // 深度侦听复杂类型内变化
      immediate: true // 立即执行
    }
  }
// 目标: 精确侦听对象中的某个值
 watch: {
       // 第二种方式：监听对象的某个属性，被监听的属性值发生变化就会执行函数
       // 函数执行后，获取的 newVal 值和 oldVal 值不一样
    'user.name': {
      handler(newVal, oldVal){
        console.log(newVal, oldVal);
      },
      deep: true, // 深度侦听复杂类型内变化
      immediate: true // 立即执行
    }
  }
}
</script>