【星海出品】VUE（四）

本文主要是介绍【星海出品】VUE（四），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

事件处理
事件内联JS语句（类似于onclick）
方法事件处理器：一个指向组件上定义的方法的属性名或是路径。

App.vue关闭掉了，所以就要重新运行一下。

<template><h3>event demo</h3><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 demo</h3><button @dblclick="count++"> Sadd </button><!-- <button @click="addCount"> Fadd </button> --><button @click="etest('hello')">ADD</button><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 demo</h3><button @dblclick="count++"> Sadd </button><!-- <button @click="addCount"> Fadd </button> --><button @click="etest('hello')">ADD</button><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 demo</h3><button @dblclick="count++"> Sadd </button><!-- <button @click="addCount"> Fadd </button> --><button @click="etest('hello')">ADD</button><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>