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