Vue笔记(2)
学习内容
⊙动态绑定style样式
⊙ 计算属性
⊙ 事件监听 v-on
⊙ v-on修饰符
⊙ 条件判断
不仅仅是可以动态绑定class,style样式也是可以动态绑定的
动态绑定style
1.对象形式:
:style="{key(属性名), value(属性值)}"
试了一下,如果是像font-size这种中间有-连接的属性,需要使用驼峰法来写,写成fontSize才行,否则会编译错误,可能是版本不同的原因
数组语法用得很少,所以就简单带过一下:
计算属性
当我们想对某一些数据进行处理以后再进行展示
比如:
但是都略显复杂,或者不够简洁明了,因此我们可以使用vue提供的计算属性,注意这些属性都是固定的名字,不可以随意修改
另外要注意,这里在使用时是不需要加括号的
小例子:
关于methods和computed
事件监听
还是拿计数器做例子:
参数问题
一:事件不需要参数
- 调用的函数加上括号:正常执行
- 调用的函数不加括号: 正常执行
二:事件需要参数,且要求打印形参
- 调用的函数加上括号且传入参数: 正常执行函数
- 调用函数时加上括号但是未传参数: 结果为undefined
- 调用函数时省略括号: vue会将浏览器产生的event事件作为参数传到方法
这个应用场景就是有时候我们需要得到事件的一些参数,比如screenX,我们就可以这样:
此时调用不需要括号:
得到的结果:
- 方法定义时,又需要event对对象,又需要其他参数时:
先来看一下错误的写法:
此时会报错:
那怎么才能手动的获取到浏览器传给我们的event对象呢?
我们只需要在event前面加上一个"$"符号即可
v-on的修饰符
在这个例子中,如果我们点击了btn按钮,那么会打印出哪些内容呢?
按照我们以前学习过的知识,我们可知事件会冒泡,所以当我们点击了按钮时,会先打印出buttonClick,然后再打印出divClick
我们过去是用stopPropagation()来阻止事件冒泡,但是vue给我们提供了更加简便的方法:
事件判断
直接打开网页的效果:
在控制台修改isShow
相关文章
- vue 子组件调用父组件方法传参,父组件调用也传参_面试题vue组件封装思路
- 如何查看Vue项目vue的版本号
- 狂神说Vue笔记整理「建议收藏」
- qiankun vue 子应用页面刷新白屏
- 自己实现一个Vue Router -- Vue Router原理解析
- Vue前端项目-主页布局-左侧导航菜单(静态)[通俗易懂]
- 请简述什么是Vue组件化开发_vue组件化开发
- Vue笔记(6)
- Vue笔记(7) 很长
- VUE 数据分页
- 每日一题之Vue的异步更新实现原理是怎样的?
- vue源码分析-从new Vue开始
- vue子组件调用父组件中方法的方式合集
- VUE组件封装_vue使用组件
- vue子组件调用父组件函数_vue子组件修改父组件值
- vue 调用子组件方法失败_Vue子组件调用父组件的方法及常见问题「建议收藏」
- Vue学习笔记之moment.js日期处理控件
- vue3 报错解决:找不到模块‘xxx.vue’或其相应的类型声明。(Vue 3 can not find module)
- 滴滴前端常考vue面试题_2023-02-28
- vue 中路径props的传参
- 今天讲vue讲解专栏里的VUE组件
- 校招前端二面高频vue面试题
- Vue中图片压缩的工具
- 在vue cli3.0 里面下载less,下载成功了还是提示没有 需要下载
- vue.js客服系统实时聊天项目开发(十三)日期缩短展示,同一天只展示时秒,同一年展示月日小时秒
- vue源码分析-从new Vue开始_2023-02-24
- vue权限路由实现方式总结
- 全面解读 Vue 3.0 的变化
- SpringBoot+vue前后端开发学习笔记3详解编程语言
- Spring boot+vue前后端开发学习笔记2详解编程语言
- 使用Vue框架使用MSSQL数据库实现快速开发(vue mssql)
- Vue如何连接Redis(vue怎么连接Redis)
- 使用Vue和Redis创建完美的后台应用(vue redis后台)