【星海出品】VUE（四）
事件处理
事件内联JS语句（类似于onclick）
方法事件处理器：一个指向组件上定义的方法的属性名或是路径。
App.vue关闭掉了，所以就要重新运行一下。
<template>
<h3>event demoh3>
<button @click="count++"> Sadd button>
<button @click="addCount"> Fadd button>
<p> {{ count }} p>
template>
<script>
export default{
data(){
return{
msg: "Event",
count: 0
}
},
methods:{
addCount(){
this.count += 1
}
}
}
script>
dblclick #双击
click #单机
函数传参
<template>
<h3>event demoh3>
<button @dblclick="count++"> Sadd button>
<button @click="etest('hello')">ADDbutton>
<p> {{ count }} p>
template>
<script>
export default{
data(){
return{
msg: "Event",
count: 0
}
},
methods:{
etest: function (param1) {
console.log("pa: ");
console.log(param1);
this.count += 1;
}
}
}
script>
v-for item传递参数
<template>
<h3>event demoh3>
<button @dblclick="count++"> Sadd button>
<button @click="etest('hello')">ADDbutton>
<p> {{ count }} p>
<h2> event h2>
<p @click="getNameHandler(item)" v-for="(item,index) of names" :key="index"> {{ item }} p>
template>
<script>
export default{
data(){
return{
msg: "Event",
count: 0,
names:["wang","zhao","qian"]
}
},
methods:{
etest: function (param1) {
console.log("pa: ");
console.log(param1);
this.count += 1;
},
getNameHandler: function (paam1) {
console.log(paam1);
},
}
}
script>
可以传 $event 对象
$ 不能丢。
<template>
<h3>event demoh3>
<button @dblclick="count++"> Sadd button>
<button @click="etest('hello')">ADDbutton>
<p> {{ count }} p>
<h2> event h2>
<p @click="getNameHandler(item,$event)" v-for="(item,index) of names" :key="index"> {{ item }} p>
template>
<script>
export default{
data(){
return{
msg: "Event",
count: 0,
names:["wang","zhao","qian"]
}
},
methods:{
etest: function (param1) {
console.log("pa: ");
console.log(param1);
this.count += 1;
},
getNameHandler: function (paam1,e) {
console.log(paam1);
console.log(e);
},
}
}
script>
阻止默认事件
<template>
<h3> 事件修饰符 h3>
<a @click="clickHandle" href="https://www.baidu.com"> 百度 a>
template>
<script>
export default {
data(){
return{
msg: "hello"
}
},
methods:{
clickHandle (e) {
e.preventDefault();
console.log("点击了")； // 阻止了默认事件
}
}
}
script>
<style>
style>
父元素于子元素同时生效
<template>
<h3> 事件修饰符 h3>
<a @click="clickHandle" href="https://www.baidu.com"> 百度 a>
<div @click="clickDiv">
<p @click="clickP" > 测试冒泡 p>
div>
template>
<script>
export default {
data(){
return{
msg: "hello"
}
},
methods:{
clickHandle (e) {
e.preventDefault();
console.log("点击了");
},
clickP(){
console.log("P");
},
clickDiv(){
console.log("DIV");
}
}
}
script>
组织父组件执行，增加事件阻断
JS方式
clickP(e){
e.stopPropagation();
console.log("P");
},
或者
HTML方式
<p @click.stop="clickP" > 测试冒泡 p>
数组有变化，UI会相关的进行改变。
<template>
<h3> 数组变化侦听 h3>
<button @click="addListHandle"> 添加数据 button>
<ul>
<li v-for="(item,index) of names" :key="index"> {{ item }} li>
ul>
template>
<script>
export default{
data(){
return{
names:["Atest","Btest","Ctest"]
}
},
methods:{
addListHandle(){
this.names.push("sakura")
// this.names.concat(["sakura"]) 不会主动引起UI的变化，但是已经变化
// push() pop() shift() unshift() splice() sort() reverse() 会立即对UI产生更新
//如果用了 filter() concat() slice() 这些都不会更改原数组，而总是返回一个新数组
// 但可以赋值给原数组 this.names = this.names.concat(["sakura"])
}
}
}
script>
将下列方式优化，增加计算属性
<template>
<h3> {{ group1.name }} h3>
<p> {{ group1.content.length > 0 ? 'Yes' : 'NO' }} p>
template>
<script>
export default {
data(){
return{
group1:{
name:"wukuang",
content:["前端","JAVA","python"]
}
}
}
}
script>
计算属性 computed
<template>
<h3> {{ group1.name }} h3>
<p> {{ group1Content }} p>
template>
<script>
export default {
data(){
return{
group1:{
name:"wukuang",
content:["前端","JAVA","python"]
}
}
},
// 计算属性
computed:{
group1Content(){
return this.group1.content.length > 0 ? 'yes':'no'
}
}
}
script>
如果代码没变化，每次调用计算属性，计算属性会一直用一个缓存。
如果用函数实现，每次都会重新进行调用，进行计算。
Class绑定，class后面的值 ： 后面
<template>
<p :class="{ 'active':isActive }"> Class样式绑定 p>
template>
<script>
export default {
data(){
return{
isActive:true
}
}
}
script>
不仅可以绑定一个值，还可以绑定两个值
<p :class="{ 'active':isActive ,'text-danger':hasError }"> Class样式绑定 p>
<template>
<p :class="{ 'active':isActive,'text-danger':hasError }"> Class样式绑定 p>
template>
<script>
export default {
data(){
return{
isActive:true,
hasError:true
}
}
}
script>
<style>
.active{
font-size: 30px;
}
.text-danger{
color:red;
}
style>
不一样的写法导入 class
可以是对象，引用，数组。
<template>
<p :class="{ 'active':isActive,'text-danger':hasError }"> Class样式绑定 p>
<p :class="classObject"> Class样式绑定 p>
<p :class='[arrActive,arrHasError]'> Class样式绑定 p>
template>
<script>
export default {
data(){
return{
isActive:true,
hasError:true,
classObject:{
'active':true,
'text-danger':true
},
arrActive:"active",
arrHasError:"text-danger"
}
}
}
script>
<style>
.active{
font-size: 30px;
}
.text-danger{
color:red;
}
style>
支持三目运算符
<div :class="[isActive? 'active' : '']"> isActive div>
数组和对象嵌套过程中，只能是数组嵌套对象，不能反其道
<p :class="[isActive ? 'active' : '',{ 'text-danger':hasError }]"> TEXT p>
<script>
export default {
data(){
return{
msg: "haha",
activeColor: "green",
fontSize: 30,
styleObject:{
color:red,
fontSize:"30px"
}
}
}
}
script>
<template>
<p :style="{color:activeColor,fontSize:fontSize}"> Style BIND p>
template>
也可以引入数组
<p :style="[baseStyle]"> Style BIND </p>
return{
baseStyle{
color:"green",
frontSize:"30px"
}
}
<p :style="styleObject"> Style BIND </p>
styleObject:{
color:"red",
fontSize:"30px"
}
VUE监听器，只能监听变化式的数据。
监控message这个变量
函数名与侦听的数据名称必须保持一致
<template>
<h3> 侦听器 h3>
<p> {{ message }} p>
<button @click="updateHandle"> 修改数据 button>
template>
<script>
export default{
data(){
return{
message:"Hello"
}
},
methods:{
updateHandle(){
this.message = "what's up"
}
},
watch:{
message(newValue,oldValue){
console.log(newValu,oldValue);
}
}
}
script>