VUE学习第二天

基本指令

v-bind指令

常用于动态绑定HTML元素的属性,例如id、class、href、src等属性。改变任一方数据后都会实时更新
其中可以分为单个语法式和对象语法式还有数组语法格式”绑定类名”

在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述

v-if条件指令

指令主要职责就是当表达式值改动时,相应的将某些行为应用到DOM上,以v-if为例v-if指条件性渲染,为true时渲染D
OM,否则不进行渲染:

在这里插入图片描述

v-show渲染指令

v-show也是指条件性渲染,用法与v-if类似:不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。
v-show 只是简单地切换元素的 CSS 属性 display。

在这里插入图片描述

v-on事件指令

v-on:    @方法名v-on用于绑定事件监听器,实现一些交互功能。如下所示

在这里插入图片描述这里有一些v-on的拓展用法
.stop冒泡事件修饰符,阻止事件向上冒泡
(2).prevent默认事件修饰符,阻止对象的默认行为
(3).capture捕获事件修饰符,使用事件捕获机制
(4).self自身事件修饰符,只当事件是从事件绑定的元素本身触发时才触发回调
(5).once一次性事件修饰符,绑定的事件只能触发一次
(6)keyup.keyCode键值事件修饰符,用来监听键盘事件(键盘修饰符以及自定义键盘修饰符)

methods选项-代理方法

Vue.js将methods里的方法也代理了, 所以可以像访问Vue数据一样来调用方法。

在这里插入图片描述
在这里插入图片描述

关于Console控制台的学习积累

console简介

控制台(Console)是JS开发里最重要的面板,主要作用是显示网页加载过程中产生各类信息。

显示信息的命令

console对象,提供5种方法,用来显示信息
日志信息console.log()、一般信息console.info()
除错信息console.debug()、警告提示console.warn()
错误提示console.error()

在这里插入图片描述
在这里插入图片描述
console.log()、console.info()、console.debug()的作用都是在浏览器控制台打印信息的。在Firefox里console.info()打印出的信息,在控制显示的时候信息前面会出现一个小图标,在这里插入图片描述,而且谷歌浏览器和opera支持console.debug()。不同性质的信息前面有不同的图标,并且每条信息后面都有超级链接,点击后跳转到网页源码的相应行。console.log方法和console.debug()与console.info(),几乎用法完全一样,唯一不同的就是显示时候的表现形式了。

占位符

这里有字符(%s)、整数(%d或%i)、浮点数(%f)和对象(%o)、CSS格式化样式(%c)五种。

分组显示

如果信息太多,可以分组显示,用到的方法是console.group()和console.groupEnd()。

在这里插入图片描述
在这里插入图片描述

输出属性与办法

console.dir()可以显示一个对象所有的属性和方法

在这里插入图片描述在这里插入图片描述

输出节点代码

console.dirxml()用来显示网页的某个节点(node)所包含的html/xml代码。

在这里插入图片描述在这里插入图片描述

清空控制台

console.clear()清空控制台内容

在这里插入图片描述在这里插入图片描述

计时器

console.time(),console.timeEnd()方法计算一个操作的执行的时间console.time()是开始,console.timeEnd
()是结束。可以传一个参数,参数为计时器的名称。

在这里插入图片描述
在这里插入图片描述

计数器

console.count()方法用于计数,输出它被调用了多少次。

在这里插入图片描述
在这里插入图片描述

表格化

console.table()方法可以将传入的对象或数组这些复合数据以表格形式输出。

在这里插入图片描述
在这里插入图片描述

控制台快捷键

$ 简单理解就是 document.querySelector 。
$$ 简单理解就是 document.querySelectorAll 。
$_ 是上一个表达式的值
dir 就是 console.dir

以上就是我今天学习下来的累计结果,如果各位有什么补充,欢迎私信

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值