经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » Vue.js » 查看文章
【Vue】style和class 列表渲染 使用v-for进行循环 监控失效 双向数据绑定 过滤案例 事件修饰符
来源:cnblogs  作者:passion2021  时间:2023/2/15 9:22:01  对本文有异议

昨日回顾

  1. # 1 前端发展历史
  2. -vue react
  3. -谷歌flutterDart语言
  4. -uni-app:小公司
  5. -vue 3.x 2.x
  6. -3.x :ts
  7. -2.x :js
  8. # 2 vue:
  9. -渐进式
  10. -MVVM:
  11. M层:model,数据层,js
  12. V层:view,视图层,htmlcss
  13. VM层:viewModel层,负责MV的交互
  14. -组件化开发,单页面应用
  15. -组件有自己的htmlcssjs
  16. -在index.html 中做组件的替换,实现单页面应用spa
  17. -js框架,源码下载引入,cdn引入
  18. -new Vue({el:,data:})
  19. # 3 插值语法: {{变量,表达式,函数}}
  20. -字符串,数字,布尔,数组,对象,标签
  21. -三目运算符 条件?符合条件:不符合条件
  22. # 4 指令系统(任何标签)
  23. -文本指令:v-textv-htmlv-showv-if
  24. -事件指令:v-on:事件名='函数'
  25. -简写:@click='函数'
  26. -函数传参
  27. -属性指令: v-bind:属性名='变量'
  28. -简写::属性名='变量'

style和class

  1. # 本身他俩都是属性指令,但是他们比较特殊,应用更广泛,单独再讲
  2. # class:推荐用数组
  3. :class='变量'
  4. 变量可以是字符串,数组,对象
  5. # style:推荐用对象
  6. :style='变量'
  7. 变量可以是字符串,数组,对象
  8. # 数组的方法:很多,自己学

class和style都是标签的属性,但是其比较特殊。
特殊在class属性可能有多个类,style属性可能有多个属性。

正常情况下,给div绑定一个类,给这个类写一些样式:

image-20230212200536038

class属性的三种设置方法

class的字符串写法:

给class属性绑定变量:

image-20230212201358114

这样写,效果跟上面相同。

可以通过修改变量的值,给class属性设置多个类:

image-20230212201722303

class的数组写法(推荐):

示例:

image-20230212201919844

给数组追加值,来给class属性添加size类:

image-20230212202144376

class的对象写法:

示例:

image-20230212202334144

通过修改对象的turefalse来设置该class属性是否有相应的类。

image-20230212202633279

style属性的三种设置方法

style属性是给标签添加内联的样式:

image-20230212202957756

如何使用变量和style属性进行双向绑定?

字符串的写法:

image-20230212203221823

数组的写法:

image-20230212203437407

可见使用数组写法,会将两个属性拆分成两个对象,存放在数组中。如果要去掉一个属性,需要删除数组的元素。

如果不想用引号引起来:单个单词的属性不会报错,而两个单词的会报错。

image-20230212213136591

如果是多个单词用-连接的形式,可以写成驼峰:

image-20230212213303723

对象的写法(推荐):

image-20230212213414876

查看前端:

image-20230212213447079

会将style属性按照对象中的键值对进行渲染。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Title</title>
  6. <script src="./js/vue.js"></script>
  7. <style>
  8. .red {
  9. background-color: red;
  10. }
  11. .size {
  12. font-size: 40px;
  13. }
  14. </style>
  15. </head>
  16. <body>
  17. <div id="app">
  18. <h1>class的使用</h1>
  19. <div :class="classObj">
  20. 我是class,的div
  21. </div>
  22. <h1>style的使用</h1>
  23. <!-- <div style="background-color: aquamarine;font-size: 50px">-->
  24. <div :style="styleObj">
  25. 我是style,的div
  26. </div>
  27. </div>
  28. </body>
  29. <script>
  30. var vm = new Vue({
  31. el: '#app',
  32. data: {
  33. // class的字符串用法
  34. classStr: 'red',
  35. // class的数组写法,因为类本身可以放多个,用数组最合适
  36. classList: ['red'],
  37. // class的对象
  38. classObj: {red: true, size: false},
  39. // style 的字符串写法,以后改不好改
  40. styleStr: 'background-color: aquamarine;font-size: 50px',
  41. // style的数组写法
  42. // styleList: [{'background-color': 'green'}, {'font-size': '80px'}]
  43. //样式如果是多个单词用- 链接的形式可以写成驼峰
  44. styleList: [{backgroundColor: 'green'}, {fontSize: '80px'}],
  45. // style的对象写法
  46. styleObj: {backgroundColor: 'blue', fontSize: '40px'}
  47. }
  48. })
  49. </script>
  50. </html>

条件渲染

  1. # 写在标签上,控制标签的显示与不显示
  2. v-if='布尔值/运算完是布尔值(表达式)'
  3. v-else-if='布尔值/运算完是布尔值'
  4. v-else

通过v-if后面的布尔值来决定,是否显示该标签。
这个布尔值可以是一个变量携带的数据,也可以是一个表达式运行的结果。

代码:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Title</title>
  6. <script src="./js/vue.js"></script>
  7. </head>
  8. <body>
  9. <div id="app">
  10. <h1>条件渲染</h1>
  11. <div v-if="score>=90">优秀</div>
  12. <div v-else-if="score>=80 && score<90">良好</div>
  13. <div v-else-if="score>=60 && score<80">及格</div>
  14. <div v-else>不及格</div>
  15. </div>
  16. </body>
  17. <script>
  18. var vm = new Vue({
  19. el: '#app',
  20. data: {
  21. score: 98
  22. }
  23. })
  24. </script>
  25. </html>

列表渲染

  1. # v-for:放在标签上,可以循环显示多个此标签

使用bootstrap搭建表格:

image-20230213210754706

data配置项:

image-20230213210936113

使用v-for,从goodList中获取数据:

image-20230213211141903

修改goodList变量,添加一个商品对象,页面立马会发生变化:

image-20230213211249154

需求:一开始goodList为空,点击按钮之后goodList开始加载数据。

方法一:给按钮绑定一个点击事件,如下是事件所触发的函数。

image-20230213211456517

需求:当goodList没有数据时,显示购物车空空如也。加载购物车之后,前端将数据显示在表格。

需要配合v-if,判断数组的长度:

image-20230213212111472

如果goodList.length>0的运算结果为True,则显示这个div标签。否则不显示。

代码:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Title</title>
  6. <script src="./js/vue.js"></script>
  7. <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  8. <style>
  9. .top {
  10. margin-top: 50px;
  11. }
  12. </style>
  13. </head>
  14. <body>
  15. <div id="app">
  16. <div class="container-fluid">
  17. <div class="row top">
  18. <div class="col-md-6 col-md-offset-3">
  19. <div class="text-center" style="margin-bottom: 30px">
  20. <button @click="handleClick" class="btn btn-danger">加载购物车</button>
  21. </div>
  22. <div v-if="goodList.length>0">
  23. <table class="table table-bordered">
  24. <thead>
  25. <tr>
  26. <th>商品id号</th>
  27. <th>商品名</th>
  28. <th>商品价格</th>
  29. <th>商品数量</th>
  30. </tr>
  31. </thead>
  32. <tbody>
  33. <tr v-for="good in goodList">
  34. <th>{{good.id}}</th>
  35. <td>{{good.name}}</td>
  36. <td>{{good.price}}</td>
  37. <td>{{good.count}}</td>
  38. </tr>
  39. </tbody>
  40. </table>
  41. </div>
  42. <div v-else>
  43. 购物车空空如何
  44. </div>
  45. </div>
  46. </div>
  47. </div>
  48. </div>
  49. </body>
  50. <script>
  51. var vm = new Vue({
  52. el: '#app',
  53. data: {
  54. goodList: []
  55. },
  56. methods: {
  57. handleClick() {
  58. // 假设去后端加载的数据
  59. this.goodList = [{id: 1, name: '小汽车', price: '29999元', count: 1},
  60. {id: 2, name: '钢笔', price: '9元', count: 2},
  61. {id: 3, name: '铅笔', price: '4元', count: 10},
  62. {id: 4, name: '苹果', price: '2元', count: 3},]
  63. }
  64. }
  65. })
  66. </script>
  67. </html>

使用v-for进行循环

之前我们使用v-for将数组进行了循环。
那么v-for是否可以对字符串、数字、对象,这些类型进行循环呢?

  1. # v-for 可以循环数组,数字,字符串,对象
  2. v-for="key in obj"
  3. -如果是数组:key就是数组的一个个元素
  4. -如果是数字:key就是从1开始的一个个数字
  5. -如果是字符串:key就是一个个字符
  6. -如果是对象:key就是一个个value的值
  7. v-for="(key,value) in obj"
  8. -如果是数组:key就是数组的一个个元素,value就是索引
  9. -如果是数字:key就是从1开始的一个个数字,value就是索引
  10. -如果是字符串:key就是一个个字符,value就是索引
  11. -如果是对象:key就是一个个value的值,value就是一个个key(谜语人)
  12. '''(key, value) in obj 括号必须加,否则会报错!'''
  13. # 每次循环的标签上,一般都会带一个属性 ---> :key='值必须唯一'
  14. -key值的解释:是为了加速虚拟dom的替换
  15. # 什么叫加速虚拟dom的替换?

循环数字

v-for可以对数字进行循环:

image-20230213212644355

查看结果:

image-20230213212738698

需要注意的是对数字进行循环,是从1开始而不是从0开始的。并且使用循环获得的数字,需要在标签内部使用插值语法{{ i }}

扩展:这里循环的是一个具体的数字,也可以放一个变量,变量里存的是数字。

对数字也可以同时获取其索引值,请注意索引是从0开始的:

image-20230213214501084

查看前端:

image-20230213214521809

循环字符串

查看示例:

image-20230213213138234

查看结果:

image-20230213213211727

可以发现和python一样,会将每一个字符都通过for循环获取出来,渲染到页面上。(可以正常识别中文字符,将中文算作一个字符)

还可以同时获取字符串和索引:

image-20230213214352837

查看前端:

image-20230213214408103

循环对象

可能会有这样的疑问:
循环对象会得到对象的key还是value?
或者说,想同时获取对象的key和value应该如何写?

示例:

image-20230213213932780

查看上述示例的结果:

image-20230213214020193

可见循环了3次,将对象的value拿了出来。

如果想同时获取key和value:

image-20230213214119017

查看效果:

image-20230213214128634

循环数组

示例:

image-20230213221601913

注意:第二个参数是索引,第一个参数是值。

标签key值加速虚拟dom的替换

image-20230213222718008

当变量中的数据发生变化时,vm层会检测到这个变化。此时vm层会干什么事情?

首先,vm层维护了一个虚拟dom,当数据变化之后,vm层首先会对虚拟dom进行修改。修改完成之后,vm层会拿着虚拟dom和真实dom进行比较。如果有二者之间有变化,会将真实dom进行一个替换,如果没有变化,就不进行操作。虚拟dom实际就是一个字符串。

如果是一个对于一个数组进行v-for循环产生表格场景:

image-20230213223056727

如果是在数组的中间插入一条数据,那么对于页面显示来说,上面部分的数据是不需要动的,而下面部分的数据需要下移一行。这会涉及到效率的问题,为了插入这一条数据,我是将整个表格都替换,还是只替换其中某一部分?

如果使用了虚拟dom,我们想在中间插入数据,此时虚拟dom会和真实dom进行比较,只对不同的部分进行替换。如果我们不写key值,也就是不使用虚拟dom,此时插入一条数据,会将整个表格一行一行的进行重新渲染。(效率低)

注意:key值必须唯一。

如下会导致key属性不唯一:

image-20230213224009532

应该这样写:

image-20230213224037650

element走马灯组件:

image-20230213224300033

代码:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Title</title>
  6. <script src="./js/vue.js"></script>
  7. <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  8. <style>
  9. .top {
  10. margin-top: 50px;
  11. }
  12. </style>
  13. </head>
  14. <body>
  15. <div id="app">
  16. <div class="container-fluid">
  17. <div class="row top">
  18. <div class="col-md-6 col-md-offset-3">
  19. <div class="text-center" style="margin-bottom: 30px">
  20. <button @click="handleClick" class="btn btn-danger">加载购物车</button>
  21. </div>
  22. <div v-if="goodList.length>0">
  23. <table class="table table-bordered">
  24. <thead>
  25. <tr>
  26. <th>商品id号</th>
  27. <th>商品名</th>
  28. <th>商品价格</th>
  29. <th>商品数量</th>
  30. </tr>
  31. </thead>
  32. <tbody>
  33. <tr v-for="good in goodList" :key="good.id">
  34. <th>{{good.id}}</th>
  35. <td>{{good.name}}</td>
  36. <td>{{good.price}}</td>
  37. <td>{{good.count}}</td>
  38. </tr>
  39. </tbody>
  40. </table>
  41. </div>
  42. <div v-else>
  43. 购物车空空如何
  44. </div>
  45. </div>
  46. </div>
  47. </div>
  48. </div>
  49. </body>
  50. <script>
  51. var vm = new Vue({
  52. el: '#app',
  53. data: {
  54. goodList: []
  55. },
  56. methods: {
  57. handleClick() {
  58. // 假设去后端加载的数据
  59. this.goodList = [{id: 1, name: '小汽车', price: '29999元', count: 1},
  60. {id: 2, name: '钢笔', price: '9元', count: 2},
  61. {id: 3, name: '铅笔', price: '4元', count: 10},
  62. {id: 4, name: '苹果', price: '2元', count: 3},]
  63. }
  64. }
  65. })
  66. </script>
  67. </html>

Vue.set解决监控失效

数组的检测与更新

js数组有很多的内置方法:

image-20230213224455656

Vue可以监控数组的变化。数组的变化可能会导致页面的变化。但Vue是如何监控的呢?会不会出现一种情况,既数组出现了变化,但是Vue没有监控到该变化,导致页面没有发生变化呢?

准备数组girls

image-20230213224927396

写一个按钮,给数组添加数据:

image-20230213225109589

再写一个按钮,使用concat()方法对数组追加一个数组:

image-20230213225448572

可以发现,数据添加进数组了,但是页面却没有发生变化。

不只是使用concat方法,对数组的值的修改,有时候也会监控不到,页面不会发生变化:

image-20230214170804942

使用Vue.set():

image-20230214170959880

  • Vue.set(要修改的数组, 索引, value)

对象的检查与更新

示例:

image-20230214165316984

此时我们点击按钮之后,会给对象添加进一个属性'height':'180'

神奇的事情发生了,虽然点击了按钮,数据添加进去了,但是页面没有变化:

image-20230214165809099

这也是因为,vm层没有监控到数据的变化。

使用Vue.set()解决这个问题:

image-20230214170014052

  • Vue.set(需要修改的对象, key, value)

通过Vue.set()会通知一下vm层,告诉vm层,这个对象的数据变化了,印次页面会重新渲染。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Title</title>
  6. <script src="./js/vue.js"></script>
  7. </head>
  8. <body>
  9. <div id="app">
  10. <h1>数组的检测与更新</h1>
  11. <button @click="handleClick">点我追加女生</button>
  12. |
  13. <button @click="handleClick1">点我追加一批女生</button>|
  14. <button @click="handleClick4">点我修改数组页面变化</button>|
  15. <p v-for="girl in girls">{{girl}}</p>
  16. <h1>对象的检测与更新</h1>
  17. <button @click="handleClick2">点我追加身高</button>
  18. |
  19. <button @click="handleClick3">点我追加身高--解决</button>
  20. |
  21. <p v-for="(value,key) in obj">{{key}}---{{value}}</p>
  22. </div>
  23. </body>
  24. <script>
  25. var vm = new Vue({
  26. el: '#app',
  27. data: {
  28. girls: ['刘亦菲', '迪丽热巴', '杨超越', '刘诗诗'],
  29. obj: {'name': 'lqz', age: 19}
  30. },
  31. methods: {
  32. handleClick() {
  33. this.girls.push('美女1号')
  34. },
  35. handleClick1() {
  36. var a = this.girls.concat(['美女99号', '美女88号', '美女77号'])
  37. console.log(a)
  38. },
  39. handleClick2() {
  40. this.obj.height = '180' // 监控不到变化
  41. console.log(this.obj)
  42. },
  43. handleClick3() {
  44. Vue.set(this.obj,'height',180) // 监控到变化了
  45. },
  46. handleClick4(){
  47. Vue.set(this.girls,0,'sdasdfas')
  48. }
  49. }
  50. })
  51. </script>
  52. </html>

双向数据绑定 v-model

  1. # input标签,v-model:数据双向绑定
  2. -使用 属性指令绑定 :value='变量' 是数据的单向绑定
  3. - v-model="name" :数据双向绑定

示例:

image-20230214171534638

我们通过控制台修改value属性的值时,页面会随之变化:(彭于晏 --变成--> lqz)

image-20230214171658981

但此时有个问题,我们修改页面上的输入框的内容时,vm.name变量不会随之改变:

image-20230214172002259

这称之为单向绑定

如果我们使用Vue提供的V-model,则可以实现页面和数据的双向绑定:

image-20230214172126697

数据双向绑定示例:

image-20230214172839865

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Title</title>
  6. <script src="./js/vue.js"></script>
  7. </head>
  8. <body>
  9. <div id="app">
  10. <h1>数据双向绑定</h1>
  11. <p>用户名: <input type="text" v-model="name"></p>
  12. <p>密码: <input type="password" v-model="password"></p>
  13. <button @click="handleSubmit">提交</button>{{err}}
  14. </div>
  15. </body>
  16. <script>
  17. var vm = new Vue({
  18. el: '#app',
  19. data: {
  20. name: '',
  21. password: '',
  22. err:''
  23. },
  24. methods: {
  25. handleSubmit() {
  26. console.log(this.name, this.password)
  27. this.err='用户名密码错误'
  28. }
  29. }
  30. })
  31. </script>
  32. </html>

input输入框相关事件

  1. # 事件绑定
  2. v-on:事件名='函数' ---> @事件名='函数'
  3. # input输入框相关事件
  4. -blur:失去焦点触发 也就是光标移走之后就触发
  5. -change:发生变化触发 光标移走之后,还需要检查输入框的内容是否发生变化,发生变化则触发
  6. -input:输入触发 只要输入就会触发事件。

代码:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Title</title>
  6. <script src="./js/vue.js"></script>
  7. </head>
  8. <body>
  9. <div id="app">
  10. <h1>input的事件处理</h1>
  11. <h2>blur</h2>
  12. <!-- 注意:这里使用v-model进行了双向数据绑定,比如name1会随着输入框的输入而变化 -->
  13. <p><input type="text" v-model="name1" @blur="handleBlur"> ---->{{name1}}</p>
  14. <h2>change</h2>
  15. <p><input type="text" v-model="name2" @change="handleChange"> ---->{{name2}}</p>
  16. <h2>input</h2>
  17. <p><input type="text" v-model="name3" @input="handleInput"> ---->{{name3}}</p>
  18. </div>
  19. </body>
  20. <script>
  21. var vm = new Vue({
  22. el: '#app',
  23. data: {
  24. name1: '',
  25. name2: '',
  26. name3: ''
  27. },
  28. methods: {
  29. handleBlur() {
  30. console.log('失去焦点了,触发了', this.name1)
  31. },
  32. handleChange() {
  33. console.log('发生变化,触发了', this.name2)
  34. },
  35. handleInput() {
  36. console.log('输入了内容,触发了', this.name3)
  37. }
  38. }
  39. })
  40. </script>
  41. </html>

过滤案例

实现浏览器搜索框,随着你输入的文字越具体,下拉框显示的信息越少的效果。

准备数据列表:

image-20230214205505014

通过v-for显示数据:

image-20230214205536608

输入框绑定事件:

image-20230214210050277

我们希望输入之后,dataList中的数据会有变化:

image-20230214210237530

filter方法

这需要使用一个数组过滤内置方法filterfilter会循环的从数组中取出值,然后传入函数中执行。如果返回true,该值保留,如果返回false,该值丢弃:

image-20230214210712057

indexOf方法

还需要判断子字符串是否在字符串中:

image-20230214210932482

indexOf可以判断'a''atom'的索引位置,如上图输出结果是0.

所以可以使用indefOf(a)>=0,来进行判断:

image-20230214211314644

箭头函数

示例:将普通函数改成箭头函数

不带参数的箭头函数:

image-20230214211442962

带一个参数,没有返回值的箭头函数:

image-20230214211603046

image-20230214211636584

多个参数,没有返回值的箭头函数:

image-20230214211707908

一个参数,有返回值,函数体只有一行:

image-20230214211822001

为什么要使用箭头函数?

  • 简洁
  • 箭头函数没有自己的this

js的this指向问题:谁调用this就指向谁

箭头函数没有自己的this,示例:

image-20230214212713134

查看区别:

image-20230214212730968

可见箭头函数没有自己的this,他会用上一层的this,所以这个this是window对象。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Title</title>
  6. <script src="./js/vue.js"></script>
  7. </head>
  8. <body>
  9. <div id="app">
  10. <h1>过滤案例</h1>
  11. <p><input type="text" v-model="search" placeholder="请输入要搜索的内容" @input="handleSearch"></p>
  12. <ul>
  13. <li v-for="item in newdataList">{{item}}</li>
  14. </ul>
  15. </div>
  16. </body>
  17. <script>
  18. var vm = new Vue({
  19. el: '#app',
  20. data: {
  21. search: '',
  22. dataList: [
  23. 'a',
  24. 'at',
  25. 'atom',
  26. 'be',
  27. 'beyond',
  28. 'cs',
  29. 'csrf',
  30. 'd',
  31. 'dddd',
  32. ],
  33. newdataList:[
  34. 'a',
  35. 'at',
  36. 'atom',
  37. 'be',
  38. 'beyond',
  39. 'cs',
  40. 'csrf',
  41. 'd',
  42. 'dddd',
  43. ],
  44. },
  45. methods: {
  46. handleSearch() {
  47. console.log('搜索的内容是:', this.search)
  48. // var _this=this
  49. // 复杂写法
  50. // this.dataList=this.dataList.filter(item=>{
  51. // console.log(this)
  52. // // 判断this.search是否在item中,如果在保留,return true,如果不在返回false
  53. // if (item.indexOf(this.search)>=0){
  54. // return true
  55. // }else {
  56. // return false
  57. // }
  58. // })
  59. // 简单写法
  60. this.newdataList = this.dataList.filter(item => item.indexOf(this.search) >= 0)
  61. }
  62. }
  63. })
  64. // 1 补充:数组过滤方法,内置的
  65. // var l = ['a', 'at', 'atom', 'be', 'beyond', 'cs',
  66. // 'csrf',
  67. // 'd',
  68. // 'dddd',
  69. // ]
  70. // // filter数组内置的,需要传一个匿名函数,接受一个参数,会循环的从数组中取出值,传入匿名函数,执行
  71. // // 匿名函数返回true或false,如果返回true,该值保留,如果返回false该值丢弃
  72. // l = l.filter(function (item) {
  73. // console.log('进来一个值:',item)
  74. // return false
  75. // })
  76. // console.log(l)
  77. //2 判断子字符串是否在字符串中
  78. // var s='tttatom'
  79. // var a ='a'
  80. // console.log(s.indexOf(a)>=0)
  81. // 3 es6 模板字符串 `` 对象写法 箭头函数
  82. // var f=function (){
  83. // console.log('打印了')
  84. // }
  85. //3.1 不带参数的箭头函数
  86. // var f = () => {
  87. // console.log('打印了')
  88. // }
  89. // 3.2 带一个参数,没有返回值得箭头函数
  90. // var f = name=>{
  91. // console.log('打印了', name)
  92. // }
  93. // 3.3 多个参数,没有返回值
  94. // var f = (name,age) => {
  95. // console.log('打印了', name,age)
  96. // }
  97. // 3.4 带一个参数,有返回值,函数体只有一行
  98. // var f = function (name) {
  99. // return name+'nb'
  100. // }
  101. // var f = name=> name+'nb'
  102. // 有什么用? 1 简洁 2 箭头函数没有自己的this,会用上一层的this
  103. // var f = function () {
  104. // console.log('匿名函数的this', this)
  105. // }
  106. // var f1 = () => {
  107. // console.log('箭头函数的this', this)
  108. // }
  109. // var obj = {
  110. // f: function () {
  111. // console.log('匿名函数的this', this)
  112. // },
  113. // f1: () => {
  114. // console.log('箭头函数的this', this)
  115. // }
  116. // }
  117. //
  118. // obj.f()
  119. // obj.f1()
  120. </script>
  121. </html>

事件修饰符

  1. .stop 只处理自己的事件,不向父控件冒泡
  2. .self 只处理自己的事件,子控件冒泡的事件不处理
  3. .prevent 阻止a链接的跳转
  4. .once 事件只会触发一次(适用于抽奖页面)

事件修饰符用于对事件进行控制。

设置三个事件:

image-20230214213558473

事件冒泡:子标签被点击,父标签的点击事件也会同时被触发。

.stop

示例:

image-20230214214153597

被stop修饰的事件,只处理自己的事件,不会向父控件冒泡。(阻止子控件冒泡)

.self

image-20230214214419608

父控件只处理自己的事件,阻止子控件冒泡。

.prevent

image-20230214214519107

正常点击a标签会跳转,给其添加@click.prevent事件,会导致a标签不跳转。

.once

image-20230214214845398

.once修饰的事件只能触发一次,除非再次刷新页面。(试用于秒杀系统)(接口幂等性问题)

代码:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Title</title>
  6. <script src="./js/vue.js"></script>
  7. </head>
  8. <body>
  9. <div id="app">
  10. <h1>事件修饰符</h1>
  11. <h2>事件冒泡--通过 事件修饰符 stop ,加在子控件上,阻止事件冒泡</h2>
  12. <ul @click="handleUl">
  13. <li @click.stop="handleMn">美女</li>
  14. <li @click="handleSg">帅哥</li>
  15. </ul>
  16. <h2>事件冒泡--通过 事件修饰符 self加在父控件上,只处理自己的事件</h2>
  17. <ul @click.self="handleUl">
  18. <li @click="handleMn">美女</li>
  19. <li @click="handleSg">帅哥</li>
  20. </ul>
  21. <h3>阻止a标签跳转</h3>
  22. <a href="http://www.baidu.com" @click.prevent="handleA">点我看美女</a>
  23. <h4>once只执行一次</h4>
  24. <button @click.once="handleOnce">点我秒杀</button>
  25. </div>
  26. </body>
  27. <script>
  28. var vm = new Vue({
  29. el: '#app',
  30. data: {},
  31. methods: {
  32. handleUl() {
  33. console.log('ul被点了')
  34. },
  35. handleMn() {
  36. console.log('美女被点了')
  37. },
  38. handleSg() {
  39. console.log('帅哥被点了')
  40. },
  41. handleA() {
  42. console.log('a被点了')
  43. },
  44. handleOnce() {
  45. console.log('恭喜你,秒到了')
  46. }
  47. }
  48. })
  49. </script>
  50. </html>

按键修饰符

比如一个搜索框:

image-20230214215222036

只有键盘输入enter(回车)时,才会进行搜索。我们也希望能监控用户按键,然后进行相应处理。

补充两个事件:

  • @keydown:按键一按下去,该事件就触发
  • @keyup:按键按下去,然后抬起来时,事件触发

注意这里的按键时,按任何按键都会触发。

示例;

image-20230214215739605

查看事件对象:

image-20230214215828692

重要属性:

  • code : "KeyL"
  • key : "l"
  • KeyCode : 76

是一个键盘按键事件。键盘事件有一个属性keycode

image-20230214215926496

每个keycode都对应键盘上的一个按键。

于是我们可以通过按键事件对象的属性,对用户输入的按键进行区分:

image-20230214220435014

也可以使用按键修饰符.enter,这样就无需做判断了:

image-20230214220556681

也就是只有enter按键才会触发这个handleUp事件。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Title</title>
  6. <script src="./js/vue.js"></script>
  7. </head>
  8. <body>
  9. <div id="app">
  10. <input type="text" v-model="search" placeholder="请输入搜索内容" @keyup.enter="handleUp">
  11. </div>
  12. </body>
  13. <script>
  14. var vm = new Vue({
  15. el: '#app',
  16. data: {
  17. search: ''
  18. },
  19. methods: {
  20. handleUp(event) {
  21. console.log('火车被按了')
  22. // if (event.code == 'Enter') {
  23. // console.log('回车键被案例', event)
  24. // }
  25. }
  26. }
  27. })
  28. </script>
  29. </html>

Vue3是Vue2的超集 Typescript是Javascript的超集 也就是说Ts可以写Js的代码
而Ts的语法Js不支持。

原文链接:https://www.cnblogs.com/passion2021/p/17121047.html

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号