vue学习（二）---常用指令2

xiaoxiao2022-07-05 173

1.事件修饰符 2.computed 3.watch

事件修饰符

stop 禁止冒泡 once 单次事件 prevent 阻止默认事件 native 原生事件（组件） keycode|name 筛选按键

stop 禁止冒泡

<body> <div id="div1"> <div class="" @click="fn1()"> <input type="button" value="按钮" @click.stop="fn2()"> <input type="button" value="按钮" @click.once="fn2()"> </div> </div> </body> //不加 @click.stop的话会依次弹出 222,1111 加上之后会弹出 222 //@click.once 先弹出 222,1111 再次点击就只会弹出1111 <script> let vm=new Vue({ el: '#div1', data: { }, methods: { fn1(){ alert('1111'); }, fn2(){ alert('222'); } } }); </script>

prevent 阻止默认事件

常用在阻止表单的默认提交

<body> <div id="div1"> <form action="index.html" method="post" @submit.prevent="submit()"> <input type="submit" value="提交"> </form> </div> </body> <script> let vm=new Vue({ el: '#div1', data: { }, methods: { submit(){ alert('提交'); console.log(); } } }); </script>

keycode|name 筛选按键

可以用编码也可以用名称，可以连用

<body> <div id="div1"> <input type="text" @keydown.13="fn()"> <input type="text" @keydown.enter="fn()"> <input type="text" @keydown.ctrl.enter="fn()"> </div> </body> <script> let vm=new Vue({ el: '#div1', data: { }, methods: { fn(){ alert('vue'); } } }); </script>

computed——计算属性

依赖其他属性计算值，并且computed的值有缓存，只有当计算值变化才会返回内容。 computed 还可以读写 computed是以绑定属性的形式出现。

<div id="div1"> {{a}}+{{b}}={{sum}} </div> <script> let vm=new Vue({ el: '#div1', data: { a: 12, b: 5 }, computed: { sum(){ return this.a+this.b; } } }); </script>

读，写正常我们直接return是computed的get（），其实它还有set（）

<body> <div id="div1"> 姓：<input type="text" v-model="familyName"><br> 名：<input type="text" v-model="givenName"><br> <input type="text" v-model="name"> </div> </body> <script> let vm=new Vue({ el: '#div1', data: { familyName: '张', givenName: '三' }, computed: { name: { get(){ return this.familyName+this.givenName; }, set(value){ this.familyName=value[0]; this.givenName=value.substring(1); } } } }); </script>

watch——监听

watch其实跟computed功能差不多，只是各自的侧重点不同，computed更偏向于计算属性值以及对属性值的读写。watch就偏向于对属性值的监听，一改变我就触发相应的回调函数。

<body> <div id="div1"> <input type="text" v-model="name"> <input type="text" v-model="user_info.name"> </div> </body> <script> let vm=new Vue({ el: '#div1', data: { name: 'blue', user_info: { name: 'blue', age: 18 } }, watch: { name(old,val){ console.log('name变了'); }, 'user_info.name': function (){ console.log('name变了'); } } }); </script>

最新回复(0)