Vue绑定事件,双向数据绑定,只是循环没那么简单

本是古典 何须时尚 2021-07-24 14:09 440阅读 0赞

v-on对象处理

  1. <p @mouseover = "doTish" @mouseout = "doThat"> 对象形式 </p>
  2. <p v-on="{ mouseover: doTish, mouseout: doThat }"> 对象形式 </p>
  3. <!DOCTYPE html>
  4. <html lang="en">
  5. <head>
  6. <meta charset="UTF-8">
  7. <title>Title</title>
  8. <!--导入Vue cdn 的网址-->
  9. <script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script>
  10. </head>
  11. <body>
  12. <div id="app" >
  13. <p v-on="{ mouseover: doTish, mouseout: doThat }">对象形式</p>
  14. </div>
  15. <script>
  16. var vm = new Vue({
  17. el:"#app",
  18. methods:{
  19. doTish(){
  20. event.target.style.color = "red";
  21. },
  22. doThat(){
  23. event.target.style.color = "#0f0";
  24. },
  25. },
  26. })
  27. </script>
  28. </body>
  29. </html>

v-on:keyup监听按键触发常见的按键别名:

  1. '.enter'
  2. '.tab'
  3. '.delete'(捕获“删除”和“退格”键)
  4. '.esc'
  5. '.space'
  6. '.up'
  7. '.down'
  8. '.left'
  9. '.right'

按键序号网址查询:’http://www.cnblogs.com/wuhua1/p/6686237.html‘

  1. Vue.config.keyCodes.f1 = 112
  2. <!-- Ctrl Click -->
  3. <div @click.ctrl="doSomething">Do something</div>
  4. <!-- 有且只有 Ctrl 被按下的时候才触发 -->
  5. <button @click.ctrl.exact="onCtrlClick">A</button>
  6. <!DOCTYPE html>
  7. <html lang="en">
  8. <head>
  9. <meta charset="UTF-8">
  10. <title>Title</title>
  11. <!--导入Vue cdn 的网址-->
  12. <script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script>
  13. </head>
  14. <body>
  15. <div id="app" >
  16. <!--鼠标点击 ctrl 才能触发-->
  17. <p @click.ctrl.exact ="doTish">对象形式</p>
  18. </div>
  19. <script>
  20. var vm = new Vue({
  21. el:"#app",
  22. methods:{
  23. doTish(){
  24. event.target.style.color = "red";
  25. },
  26. },
  27. })
  28. </script>
  29. </body>
  30. </html>

事件修饰符

  1. '.stop' -- 阻止事件冒泡
  2. '.prevent' -- 阻止默认事件
  3. '.capture' -- 添加事件侦听器时使用事件捕获模式
  4. '.self' --只当事件在该元素本身(比如不是子元素)触发时触发回调
  5. '.once' --事件只触发一次
  6. 'native' -- 给组件绑定点击事件

阻止事件冒泡

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Title</title>
  6. <!--导入Vue cdn 的网址-->
  7. <script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script>
  8. <style>
  9. .inner{
  10. width: 200px;
  11. height: 200px;
  12. background-color: darkseagreen;
  13. }
  14. </style>
  15. </head>
  16. <body>
  17. <div class="inner" id="app" @click="divClick">
  18. <input type="button" value="点击" @click.stop="inputClick">
  19. </div>
  20. <script>
  21. var vm = new Vue({
  22. el:'#app',
  23. // data 负责输出理数据的
  24. data:{
  25. },
  26. // methods 负责处理调用方法的
  27. methods:{
  28. divClick(){
  29. console.log("最外层div")
  30. },
  31. inputClick(){
  32. console.log("最内层div")
  33. }
  34. }
  35. })
  36. </script>
  37. </body>
  38. </html>

实现捕获触发事件的机制 — capture

冒泡是从向外依次触发,使用capture,就变成了从先显示外面,在显示里面

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Title</title>
  6. <!--导入Vue cdn 的网址-->
  7. <script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script>
  8. <style>
  9. .inner{
  10. width: 200px;
  11. height: 200px;
  12. background-color: darkseagreen;
  13. }
  14. </style>
  15. </head>
  16. <body>
  17. <div class="inner" id="app" @click.capture="divClick">
  18. <input type="button" value="点击" @click="inputClick">
  19. </div>
  20. <script>
  21. var vm = new Vue({
  22. el:'#app',
  23. // data 负责输出理数据的
  24. data:{},
  25. // methods 负责处理调用方法的
  26. methods:{
  27. divClick(){
  28. console.log("最外层div")
  29. },
  30. inputClick(){
  31. console.log("最内层div")
  32. }
  33. }
  34. })
  35. </script>
  36. </body>
  37. </html>

打印结果最外层div最内层div

只会阻止自己身上冒泡行为 — self只会阻止自己身上冒泡行为 ,当有多层嵌套的时候,只会阻止有self 冒泡行为

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Title</title>
  6. <!--导入Vue cdn 的网址-->
  7. <script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script>
  8. <style>
  9. .inner{
  10. width: 200px;
  11. height: 200px;
  12. background-color: darkseagreen;
  13. }
  14. </style>
  15. </head>
  16. <body>
  17. <div id="app">
  18. <div class="outer" @click="div2Handler">
  19. <div class="inner" @click.self="div1Handler">
  20. <input type="button" value="戳他" @click="btnHandler">
  21. </div>
  22. </div>
  23. </div>
  24. <script>
  25. // 创建 Vue 实例,得到 ViewModel
  26. var vm = new Vue({
  27. el: '#app',
  28. data: {},
  29. methods: {
  30. div1Handler() {
  31. console.log('这是触发了 inner div 的点击事件')
  32. },
  33. btnHandler() {
  34. console.log('这是触发了 btn 按钮 的点击事件')
  35. },
  36. div2Handler() {
  37. console.log('这是触发了 outer div 的点击事件')
  38. }
  39. }
  40. });
  41. </script>
  42. </body>
  43. </html>

这是触发了 btn 按钮 的点击事件这是触发了 outer div 的点击事件

阻止默认事件 — prevent1.例如a标签默认事件就是点击跳转页面,为了阻止a标签的默认事件触发我们绑定的事件,可以使用prevent2.图片的默认事件禁止拖拽,如果想给图片设置拖拽效果的话记得做阻止默认行为

  1. <html lang="en">
  2. <head>
  3. <meta charset="UTF-8">
  4. <title>Title</title>
  5. <!--导入Vue cdn 的网址-->
  6. <script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script>
  7. </head>
  8. <body>
  9. <div id="app">
  10. <a href="www.baidu.com" @click.prevent.once="linkClick">百度</a>
  11. </div>
  12. <script>
  13. var vm = new Vue({
  14. el:'#app',
  15. // data 负责输出理数据的
  16. data:{},
  17. // methods 负责处理调用方法的
  18. methods:{
  19. linkClick:function () {
  20. alert(1)
  21. }
  22. }
  23. })
  24. </script>
  25. </body>
  26. </html>

只触发一次默认行为1.只触一次规定的默认行为2.下面的案例第二次点击就会跳转页面

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Title</title>
  6. <!--导入Vue cdn 的网址-->
  7. <script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script>
  8. </head>
  9. <body>
  10. <div id="app">
  11. <a href="www.baidu.com" @click.prevent.once="linkClick">百度</a>
  12. </div>
  13. <script>
  14. var vm = new Vue({
  15. el:'#app',
  16. // data 负责输出理数据的
  17. data:{},
  18. // methods 负责处理调用方法的
  19. methods:{
  20. linkClick:function () {
  21. alert(1)
  22. }
  23. }
  24. })
  25. </script>
  26. </body>
  27. </html>

阻止事件冒泡 — stop

事件冒泡从里向外阻止事件冒泡使用stop

v-on — 方法处理器和内联处理器两者区别写法上,带不带括号

没有括号不支持传参但只带event由于带括号支持传参,但必须$evnet 当参数传入才有evet事件

方法处理器内联处理器

v-model 双向数据绑定

  1. 修饰符<input type="text" v-model.lazy="name" />
  2. .lazy :失去焦点同步一次
  3. .number :格式化数字
  4. .trim : 去除首尾空格

checked — 多选框(用数组接收)

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Title</title>
  6. <!--导入Vue cdn 的网址-->
  7. <script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script>
  8. </head>
  9. <body>
  10. <div id="app">
  11. 爱好
  12. <br>
  13. 足球<input name="text" v-model="msg" type="checkbox" value="foot">
  14. 篮球<input name="text" v-model="msg" type="checkbox" value="bask">
  15. {
  16. {msg}}
  17. </div>
  18. <script>
  19. // 创建 Vue 实例,得到 ViewModel
  20. var vm = new Vue({
  21. el: '#app',
  22. data: {
  23. msg:[]
  24. },
  25. });
  26. </script>
  27. </body>
  28. </html>

select —下拉

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Title</title>
  6. <!--导入Vue cdn 的网址-->
  7. <script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script>
  8. </head>
  9. <body>
  10. <div id="app">
  11. <select v-model="selected">
  12. <option v-for="option in options" v-bind:value="option.value">
  13. {
  14. { option.text }}
  15. </option>
  16. </select>
  17. <span>Selected: {
  18. { selected }}</span>
  19. </div>
  20. <script>
  21. // 创建 Vue 实例,得到 ViewModel
  22. var vm = new Vue({
  23. el: '#app',
  24. data: {
  25. selected: 'A',
  26. options: [
  27. { text: 'One', value: 'A' },
  28. { text: 'Two', value: 'B' },
  29. { text: 'Three', value: 'C' }
  30. ]
  31. },
  32. });
  33. </script>
  34. </body>
  35. </html>
  36. <input v-model.lazy ="msg" >
  37. <input type="text" v-on:input="inputHandle" />

v-for — 循环

支持循环数组|对象|数字|字符串,Array | Object | number | string

数组使用

  1. <p v-for="item,index in items">{
  2. {item}}--{
  3. {index}}</p>

循环对象

  1. <p v-for="(value,key,index) in items">{
  2. {value}}-{
  3. {key}}-{
  4. {index}}</p>
  5. <p v-for="item in 3">{
  6. {item}}</p>

对象重新渲染

file

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Title</title>
  6. <!--导入Vue cdn 的网址-->
  7. <script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script>
  8. </head>
  9. <body>
  10. <div id="app">
  11. <input v-model="msg.title" type="submit" @click="changeMsg">
  12. </div>
  13. <script>
  14. // 创建 Vue 实例,得到 ViewModel
  15. var vm = new Vue({
  16. el: '#app',
  17. data: {
  18. msg:{},
  19. },
  20. methods:{
  21. changeMsg(){
  22. this.msg.title = "改变"
  23. }
  24. }
  25. });
  26. </script>
  27. </body>
  28. </html>

怎么保证不在计划内的值也被重新渲染1.调用Vue的静态方法:set2.调用实例上的方法 :$set3.给计划内的对象重新赋值:vm.object = {key:’新的’}4.添加指定属性重新构建赋值:Object.assign()

  1. 第一种解决方法 -- set/$set
  2. <!DOCTYPE html>
  3. <html lang="en">
  4. <head>
  5. <meta charset="UTF-8">
  6. <title>Title</title>
  7. <!--导入Vue cdn 的网址-->
  8. <script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script>
  9. </head>
  10. <body>
  11. <div id="app">
  12. <input v-model="msg.title" type="submit" @click="changeMsg">
  13. </div>
  14. <script>
  15. // 创建 Vue 实例,得到 ViewModel
  16. var vm = new Vue({
  17. el: '#app',
  18. data: {
  19. msg:{},
  20. },
  21. methods:{
  22. changeMsg(){
  23. Vue.set(this.msg, 'title', '新的' )
  24. }
  25. }
  26. });
  27. </script>
  28. </body>
  29. </html>
  30. $set ($set 是实例方法因此也是this在内部直接调用)
  31. <!DOCTYPE html>
  32. <html lang="en">
  33. <head>
  34. <meta charset="UTF-8">
  35. <title>Title</title>
  36. <!--导入Vue cdn 的网址-->
  37. <script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script>
  38. </head>
  39. <body>
  40. <div id="app">
  41. <input v-model="msg.title" type="submit" @click="changeMsg">
  42. </div>
  43. <script>
  44. // 创建 Vue 实例,得到 ViewModel
  45. var vm = new Vue({
  46. el: '#app',
  47. data: {
  48. msg:{},
  49. },
  50. methods:{
  51. changeMsg(){
  52. this.$set(this.msg, 'title', '新的' )
  53. }
  54. }
  55. });
  56. </script>
  57. </body>
  58. </html>

给计划内的对象重新赋值

  1. vm.object = {key:'新的'}
  2. <!DOCTYPE html>
  3. <html lang="en">
  4. <head>
  5. <meta charset="UTF-8">
  6. <title>Title</title>
  7. <!--导入Vue cdn 的网址-->
  8. <script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script>
  9. </head>
  10. <body>
  11. <div id="app">
  12. <input v-model="msg.title" type="submit" @click="changeMsg">
  13. </div>
  14. <script>
  15. // 创建 Vue 实例,得到 ViewModel
  16. var vm = new Vue({
  17. el: '#app',
  18. data: {
  19. msg:{},
  20. },
  21. methods:{
  22. changeMsg(){
  23. this.msg = {title:"新的"}
  24. }
  25. }
  26. });
  27. </script>
  28. </body>
  29. </html>
  30. Object.assign({},this.object,{key,value})
  31. <!DOCTYPE html>
  32. <html lang="en">
  33. <head>
  34. <meta charset="UTF-8">
  35. <title>Title</title>
  36. <!--导入Vue cdn 的网址-->
  37. <script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script>
  38. </head>
  39. <body>
  40. <div id="app">
  41. <input v-model="msg.title" type="submit" @click="changeMsg">
  42. </div>
  43. <script>
  44. // 创建 Vue 实例,得到 ViewModel
  45. var vm = new Vue({
  46. el: '#app',
  47. data: {
  48. msg:{},
  49. },
  50. methods:{
  51. changeMsg(){
  52. this.msg = Object.assign({}, {
  53. title: '新的',
  54. })
  55. }
  56. }
  57. });
  58. </script>
  59. </body>
  60. </html>

数组重新渲染

  1. 'push()'
  2. 'pop()'
  3. 'shift()'
  4. 'unshift()'
  5. 'splice()'
  6. 'sort()'
  7. 'reverse()'
  8. filter(), concat() slice() ,map()
  9. 依旧支持set/$set
  10. splice是个好方法会常用

解决vm.items[indexOfItem] = newValue不能被渲染的问题

使用方法set 是Vue静态方法,通过Vue调用使用Vue.set( array, indexOfItem, newValue)

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Title</title>
  6. <!--导入Vue cdn 的网址-->
  7. <script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script>
  8. </head>
  9. <body>
  10. <div id="app">
  11. <p v-for="i in msg">{
  12. {i}}</p>
  13. <input v-model="pushArray">
  14. <button @click="changeMsg">提交</button>
  15. </div>
  16. <script>
  17. // 创建 Vue 实例,得到 ViewModel
  18. var vm = new Vue({
  19. el: '#app',
  20. data: {
  21. pushArray:'',
  22. msg:['我是', '测试', '数据'],
  23. },
  24. methods:{
  25. changeMsg(){
  26. Vue.set(this.msg, 0, this.pushArray);
  27. }
  28. }
  29. });
  30. </script>
  31. </body>
  32. </html>

splice 是一个好方法

v-for 为什么要配合v-bind:key

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Title</title>
  6. <script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script>
  7. </head>
  8. <body>
  9. <div id="app">
  10. <div>
  11. <label>Id:
  12. <input type="text" v-model="id">
  13. </label>
  14. <label>Name:
  15. <input type="text" v-model="name">
  16. </label>
  17. <input type="button" value="添加" @click="add">
  18. </div>
  19. <!-- 注意: v-for 循环的时候,key 属性只能使用 number或者string -->
  20. <!-- 注意: key 在使用的时候,必须使用 v-bind 属性绑定的形式,指定 key 的值 -->
  21. <!-- 在组件中,使用v-for循环的时候,或者在一些特殊情况中,如果 v-for 有问题,必须 在使用 v-for 的同时,指定 唯一的 字符串/数字 类型 :key 值 -->
  22. <p v-for="item in list" :key="item.id">
  23. <input type="checkbox">{
  24. {item.id}} --- {
  25. {item.name}}
  26. </p>
  27. </div>
  28. <script>
  29. // 创建 Vue 实例,得到 ViewModel
  30. var vm = new Vue({
  31. el: '#app',
  32. data: {
  33. id: '',
  34. name: '',
  35. list: [
  36. { id: 1, name: '李斯' },
  37. { id: 2, name: '嬴政' },
  38. { id: 3, name: '赵高' },
  39. { id: 4, name: '韩非' },
  40. { id: 5, name: '荀子' }
  41. ]
  42. },
  43. methods: {
  44. add() { // 添加方法
  45. this.list.unshift({ id: this.id, name: this.name })
  46. }
  47. }
  48. });
  49. </script>
  50. </body>
  51. </html>

#

若本号内容有做得不到位的地方(比如:涉及版权或其他问题),请及时联系我们进行整改即可,会在第一时间进行处理。

#

请点赞!因为你们的赞同/鼓励是我写作的最大动力!

欢迎关注达达的简书!

这是一个有质量,有态度的博客

博客

发表评论

表情:
评论列表 (有 0 条评论,440人围观)

还没有评论,来说两句吧...

相关阅读

    相关 Vue双向

    实现mvvm的双向绑定,是采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发

    相关 VUE双向

    1、什么是setter、getter ?   答:首先,别误以为他们就是一会要说的get、set,我们先看一句定义: >        对象有两种属性:(1)数据属性,