比较watch方法
v-on
基本使用
修饰符
传参
第一部分：比较watch侦听方法
计算属性：computed
{{fullName}}
方法：methods
{{fullName2()}}
侦听器：watch
{{watchFullName}}
年龄：age
{{age}}
** <script type="text/javascript">
//定义一个变量并给定一个值 会根据结果去判断该值是否会发生变化
let other = 'hello my name'
const vm = new Vue({
el: '#root',
data() {
return {
//编辑数据
fistname: 'zhang',
lastname: 'san',
watchFullName:'zhangsan',
age: '19'
}
},
// 比较方法,计算属性,事件监听
methods: {
fullName2() {
console.log('使用了一次fullName2()方法')
return this.fistname + this.lastname+other
}
},
computed: {
fullName() {
console.log('使用了一次fullName()计算属性')
return this.fistname + this.lastname+other
}
},
/* firstName(newval,oldval){//监听器中有两个参数 一个是newval新的值
一个是oldval是老值
console.log(newval);
console.log(oldval);
} /
watch: {
fistname(newfist,newlast) {
console.log('fistname触发了watch');
// this.watchFullName = this.fistname + this.lastname+other
this.watchFullName = this.newfist+this.newlast+other
},
lastname(newfist,newlast) {
console.log('lastname触发了watch');
// this.watchFullName = this.fistname + this.lastname+other
this.watchFullName = this.newfist+this.newlast+other
}
}
})
</script>*
拓展watch侦听案例：
**
今天天气很热{{info}}
<button @click="change">点击</button>
<script type="text/javascript">
const vm = new Vue({
el:'#root',
data(){
return{
//定义一个数据名等于true(自定义数据名)
isHot:true
}
},
//下面是计算属性
computed:{
//根据方法判断该语句是真还是假，若是真那么是炎热，若是假，那么是凉爽
info(){
return this.isHot ? '炎热':'凉爽'
}
},
methods:{
//采用点击事件(方法)
change(){
//设置开关键，点击后变更真假
this.isHot = !this.isHot
}
},
//第一种写法
watch:{
immediate:true,//初始化时让handler调用一下
handler(newvalue,oldvalue){
console.log('isHot被修改了',newvalue,oldvalue)
}
}
})// 第二种侦听事件写法 //第二个写法的好处是 在不明后期会不会被改动时，可以写在外面。 // vm.$watch('isHot',{ // immediate:true,//初始化时让handler调用一下 // handler(newvalue,oldvalue){ // console.log('isHot被修改了',newvalue,oldvalue) // } // }) </script>**
第二部分：v-on（基本使用）
点击
<input @input="changeinput" />
<script type="text/javascript">
const vm = new Vue({
//挂载id属性
el: '#root',
data() {
return {** }
},
//添加方法全聚集该函数内部
methods: {
change() {
console.log('111')
},
//方法在上面可以加()也可以不加()
changeinput() {
console.log('222')
}
}
})
</script>**
第三部分：v-on（修饰符）
**<style>
.div {
width:200px;
height: 100px;
background: #f00;
}
</style>
</head>
<body><div id="app"> <div @click="divClick" class="div"> <!--1.stop的使用，btn的click事件不会传播，不会冒泡到上层，调用event.stopPropagation() --> <button type="button" @click.stop="btnClick">点击</button> </div> </div> <script> const vm = new Vue({ el: '#app', data() { return {**** }
},
methods:{
divClick(){
console.log('点击了div');
},
btnClick(){
console.log('点击了btn');
}
}**** })
</script>**
案例与事件归总：
**
欢迎来到{{name}}学习
<a href="https://daohang.qq.com/?fr=hmpage" @click.prevent="showInfo">点我提示信息
<!-- stop:阻止事件冒泡(常用); --> <div class="demo1" @click="showInfo"> <!-- 在这种内外有两个点击事件的情况下,执行点击会有跳两次,若使用stop那么就不会了，他只会执行一次便停止 该stop必须绑定内部点击事件，外部不执行--> <button @click.stop="showInfo">点我提示信息</button> </div> <!-- 3,once 事件只触发一次(常用);点击一次了就不能点击第二次了 第二次即失效--> <button @click.once="showInfo">点我提示信息</button> <!-- 5,self:只有event.tatget是当前操作的元素时才触发事件; 该修饰符与stop类似，你可以绑定某块点击事件的元素，后面就不会再执行了。 --> </div> <!-- vue中的事件修饰符: 1,prevent:阻止默认事件(常用); 2,stop:阻止事件冒泡(常用); 3,once 事件只触发一次(常用); 4,capture:使用事件的捕获模式; 5,self:只有event.tatget是当前操作的元素时才触发事件; 6,passive:事件的默认行为立即执行，无需等待事件回调执行完毕; --> <script type="text/javascript"> const vm = new Vue({ el:'#root', data:{ name:'学校', }, methods:{ showInfo(event){ // console.log(event.target); alert('点我查询'); } } }) </script>**第四部分：v-on（传参）
<button @click="btnClick1(123)">点击1</button>
<button @click="btnClick2()">点击2</button>
**
<script type="text/javascript">
const vm = new Vue({
el: '#root',
data() {
return {**** }
},
methods: {
btnClick1(val) {
console.log(val)
},
btnClick2($event,val) {
console.log('如果我只要传递e事件 那么可以不写参数，当然也可以写一个参数叫$event')
}
}
})
</script>**查看更多事件修饰点击下方链接，可以查看更多！！！！！：
事件处理 — Vue.js
版权归原作者 共创splendid--与您携手 所有， 如有侵权，请联系我们删除。