VUE事件处理
用v-on指令或者@监听DOM事件，并在触发时运行一些JavaScript代码；
参考：JS，Vue2，介绍，与Vue3区别，MVVM设计模式，模板语法，数据绑定
Vue中的事件修饰符：
1、prevent：阻止默认事件（常用）；
2、stop：阻止事件冒泡（常用）；
3、once：事件只触发一次（常用）；
4、capture：使用事件的捕获模式；
5、self：只有event.target是当前操作的元素时才触发事件；
6、passive：事件的默认行为立即执行，无需等待事件回调执行完毕；
Vue中常用的按键别名：
回车 => enter、删除 => delete (捕获“删除”和“退格”键)、退出 => esc、空格 => space、换行 => tab (特殊，必须配合keydown去使用)、上 => up、下 => down、左 => left、右 => right等。
代码案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>VUE2事件处理</title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.js"></script>
<!--
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js"></script>
-->
<style>
.demo1{
height: 50px;
background-color: skyblue;
}
.box1{
padding: 5px;
background-color: skyblue;
}
.box2{
padding: 5px;
background-color: orange;
}
.list {
width: 200px;
height: 200px;
background-color: peru;
overflow: auto;
}
li {
height: 100px;
}
</style>
</head>
<body>
<div id="app">
<h2>{{name}}++</h2>
<button v-on:click="showInfo1">提示信息1</button> -->
<button @click="showInfo2">提示信息2</button> -->
<button @click="showInfo3($event,666)">提示信息3（传参）</button>
<hr/>
<!--
Vue中的事件修饰符：
1、prevent：阻止默认事件（常用）；
2、stop：阻止事件冒泡（常用）；
3、once：事件只触发一次（常用）；
4、capture：使用事件的捕获模式；
5、self：只有event.target是当前操作的元素时才触发事件；
6、passive：事件的默认行为立即执行，无需等待事件回调执行完毕；
-->
<!-- 阻止默认事件（常用） -->
<a href="https://www.toutiao.com/c/user/token/MS4wLjABAAAA04-54E8cnKw5hC4US0MxdKuKxFAb5RbaGtfKx1ml_CE/" @click.prevent="showInfo1">提示信息</a>
<br />
<!-- 阻止事件冒泡（常用） -->
<div class="demo1" @click="showInfo1">
<button @click.stop="showInfo1">提示信息</button>
<!-- 修饰符可以连续写 -->
<!--
<a href="https://www.toutiao.com/c/user/token/MS4wLjABAAAA04-54E8cnKw5hC4US0MxdKuKxFAb5RbaGtfKx1ml_CE/" @click.prevent.stop="showInfo1">提示信息</a>
-->
</div>
<br />
<!-- 事件只触发一次（常用） -->
<button @click.once="showInfo1">提示信息</button>
<br />
<!-- 使用事件的捕获模式 -->
<div class="box1" @click.capture="showMsg(1)">
div1
<div class="box2" @click="showMsg(2)">
div2
</div>
</div>
<br />
<!-- 只有event.target是当前操作的元素时才触发事件； -->
<div class="demo2" @click.self="showInfo1">
<button @click="showInfo1">提示信息</button>
</div>
<br />
<!-- onwheel事件在鼠标滚轮在元素上下滚动时触发； -->
<!-- 事件的默认行为立即执行，无需等待事件回调执行完毕； -->
<ul @wheel.passive="showDemo" class="list">
<li>111111112</li>
<li>222222222</li>
<li>333333333</li>
<li>444444444</li>
</ul>
<!-- 键盘事件 -->
<!--
1、Vue中常用的按键别名：
回车 => enter
删除 => delete (捕获“删除”和“退格”键)
退出 => esc
空格 => space
换行 => tab (特殊，必须配合keydown去使用)
上 => up
下 => down
左 => left
右 => right
2、Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case（短横线命名）
3、系统修饰键（用法特殊）：ctrl、alt、shift、meta
(1)、配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。
(2)、配合keydown使用：正常触发事件。
4、也可以使用keyCode去指定具体的按键（不推荐）
5、Vue.config.keyCodes.自定义键名 = 键码，可以去定制按键别名
-->
<input type="text" placeholder="按下回车提示输入" @keydown.enter="showInfo1">
</div>
<script type="text/javascript" >
// 阻止vue在启动时生成生产提示
Vue.config.productionTip = false;
// 创建Vue实例
const vm = new Vue({
el:'#app',
data:{
name:'小奋斗',
},
methods:{
showInfo1(event){
console.log(event.target.innerText) // 提示信息1
console.log(this) // vm
alert('提示信息1')
},
showInfo2(event){
console.log(event.target.innerText) // 提示信息2
console.log(this) // vm
alert('提示信息2')
},
showInfo3(event,number){
console.log(event,number) // PointerEvent {isTrusted: true, pointerId: 1, width: 1, height: 1, pressure: 0, …} 666
console.log(event.target.innerText) // 提示信息3（传参）
console.log(this) // vm
alert('提示信息3（传参）')
},
showMsg(msg){
console.log(msg)
},
showDemo(){
for (let i = 0; i < 1000; i++) {
console.log('#');
}
console.log('累坏了')
}
}
});
</script>
</body>
</html>VUE计算属性
模板内的表达式是非常便利的，用于简单的运算。当其过长或逻辑过于复杂时，会难以维护，因此，当遇到复杂的逻辑时应该使用计算属性，用computed计算属性。
代码案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>VUE2计算属性</title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.js"></script>
<!--
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js"></script>
-->
</head>
<body>
<div class="app">
<h1>{{name}}</h1>
<hr>
<ul>
<li>
通过methods来完成
</li>
</ul>
<input type="text" v-model="firstName" />
<input type="text" v-model="lastName" />
全名：{{fullName()}}
<hr>
<ol>
<li>通过改变firstName2和lastName2来改变fullName2</li>
<li>通过改变fullName2来调整firstName2和lastName2</li>
</ol>
<br/>
<input type="text" v-model="firstName2" />
<input type="text" v-model="lastName2" />
全名：<input type="text" v-model="fullName2"> <br/>
<hr>
<ul>
<li>通过改变firstName3和lastName3来改变fullName3</li>
</ul>
<br/>
<input type="text" v-model="firstName3" />
<input type="text" v-model="lastName3" />
全名：<input type="text" v-model="fullName3"> <br/>
</div>
<script type="text/javascript">
// 阻止运行时提示
Vue.config.productionTip = false;
const vm = new Vue({
// 绑定节点
el: ".app",
// 数据
data: {
name: "小奋斗",
firstName: "小",
lastName: "奋斗",
// 计算属性
firstName2: "小小",
lastName2: "之说",
// 简写
firstName3: "我佛",
lastName3: "慈悲",
},
// 方法
methods:{
fullName(){
return this.firstName + "." + this.lastName;
}
},
computed:{
// 计算属性
fullName2:{
get(){
return this.firstName2 + "." + this.lastName2;
},
set(value){
console.log('set',value);
const arr = value.split('.');
this.firstName2 = arr[0];
this.lastName2 = arr[1];
}
},
// 简写
fullName3(){
return this.firstName3 + "." + this.lastName3;
}
}
});
</script>
</body>
</html>VUE监视属性
通过watch来响应数据的变化。
代码案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>VUE2监视属性</title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.js"></script>
<!--
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js"></script>
-->
</head>
<body>
<div id="app">
<h3>状态变化1：</h3>
<button @click="changeStatus1">状态</button> {{computedStatus1}}
<hr>
<h3>状态变化2：</h3>
<button @click="changeStatus2">状态</button> {{statusName2}}
<hr>
<h3>状态变化3：</h3>
<button @click="changeStatus3">状态</button> {{statusName3}}
<hr>
<h3>状态变化4：</h3>
<button @click="changeStatus4">状态</button> {{statusName4}}
<hr>
<h3>深度监视，a的值是：{{numbers.a}}</h3>
<button @click="numbers.a++">a+1</button>
<hr>
<h3>深度监视，b的值是：{{numbers.b}}</h3>
<button @click="numbers.b++">b+1</button>
</div>
<script type="text/javascript" >
// 阻止vue在启动时生成生产提示
Vue.config.productionTip = false;
// 创建Vue实例
const vm = new Vue({
el:'#app',
data:{
status1 : false,
statusName1: "假",
//
status2 : true,
statusName2: "真",
//
status3 : false,
statusName3: "假",
//
status4 : false,
statusName4: "假",
// 深度监视
numbers: { a:1, b:1 }
},
methods:{
changeStatus1(){
if(this.status1){
this.status1 = false;
}else{
this.status1 = true;
}
},
changeStatus2(){
if(this.status2){
this.status2 = false;
}else{
this.status2 = true;
}
},
changeStatus3(){
if(this.status3){
this.status3 = false;
}else{
this.status3 = true;
}
},
changeStatus4(){
if(this.status4){
this.status4 = false;
}else{
this.status4 = true;
}
}
},
computed:{
computedStatus1(){
if(this.status1){
return "真";
}else{
return "假";
}
}
},
watch:{
status2:{
// 初始化时让handler调用一下
immediate:true,
// 当status2发生改变时，handler调用
handler(newValue,oldValue){
console.log('status2被修改了', newValue, oldValue);
if(newValue){
this.statusName2 = "真";
}else{
this.statusName2 = "假";
}
}
},
// 简写
status4(newValue,oldValue){
console.log('status4被修改了', newValue, oldValue);
if(newValue){
this.statusName4 = "真";
}else{
this.statusName4 = "假";
}
},
// 监视多级结构中某个属性的变化
'numbers.a':{
handler(newValue,oldValue){
console.log('numbers.a被改变了', newValue, oldValue);
}
},
// 深度监视：监视多级结构中所有属性的变化
numbers:{
deep: true,
handler(){
console.log('numbers改变了')
}
}
}
});
// 第2种方法
vm.$watch('status3',{
immediate: false,
// 当status3发生改变时，handler调用
handler(newValue, oldValue){
console.log('status3被修改了', newValue, oldValue);
if(newValue){
this.statusName3 = "真";
}else{
this.statusName3 = "假";
}
}
});
</script>
</body>
</html>VUE绑定样式
class样式，写法:class="xxx" ，其中xxx可以是字符串、对象、数组。
1、字符串写法适用于：类名不确定，要动态获取。
2、对象写法适用于：要绑定多个样式，个数不确定，名字也不确定。
3、数组写法适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用。
style样式，写法：:style="{fontSize: xxx}"，其中xxx是动态值；:style="[a,b]"其中a、b是样式对象。
代码案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Vue2 class与style绑定（绑定样式）</title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.js"></script>
<!--
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js"></script>
-->
<style>
.basic{
width: 400px;
height: 100px;
border: 1px solid black;
}
.happy{
border: 4px solid red;;
background-color: rgba(255, 255, 0, 0.644);
background: linear-gradient(30deg,yellow,pink,orange,yellow);
}
.sad{
border: 4px dashed rgb(2, 197, 2);
background-color: gray;
}
.normal{
background-color: rgb(31, 173, 230);
}
.xfd1{
background-color: yellowgreen;
}
.xfd2{
font-size: 30px;
text-shadow:2px 2px 10px red;
}
.xfd3{
border-radius: 20px;
}
</style>
</head>
<body>
<div id="app">
<!-- 绑定class样式--字符串写法，适用于：样式的类名不确定，需要动态指定 -->
<div class="basic" :class="mood" @click="changeMood">{{name}}</div><br/>
<hr />
<!-- 绑定class样式--数组写法，适用于：要绑定的样式个数不确定、名字也不确定 -->
<div class="basic" :class="classArr">{{name}}</div> <br/>
<hr />
<!-- 绑定class样式--对象写法，适用于：要绑定的样式个数确定、名字也确定，但要动态决定用不用 -->
<div class="basic" :class="classObj">{{name}}</div> <br/>
<hr />
<!-- 绑定style样式--对象写法 -->
<div class="basic" :style="styleObj">{{name}}</div> <br/>
<hr />
<!-- 绑定style样式--数组写法 -->
<div class="basic" :style="styleArr">{{name}}</div>
</div>
<script type="text/javascript" >
// 阻止vue在启动时生成生产提示
Vue.config.productionTip = false;
// 创建Vue实例
new Vue({
el:'#app',
data:{
name: '小奋斗',
mood: 'normal',
classArr:['xfd1','xfd2','xfd3'],
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>
</body>
</html>