小言_互联网的博客

vue的几种指令及关于console的用途

249人阅读  评论(0)

vue的几种指令
(1)v-bind属性指令
v-bind动态属性:常用于动态绑定HTML元素的属性,例如id、class、href、src等属性。改变任一方数据后都会实时更新。

语法格式1:单个语法格式
v-bind:attributeName=variable

语法格式2:对象语法格式
v-bind=“{attributeName1:variable1,attributeName2:variable2,……}”

语法格式3:数组语法格式”绑定类名”
v-bind:attributeName=“[variable1,variable2,……]”

(2)v-if条件指令
v-if指条件性渲染,为true时渲染DOM,否则不进行渲染:

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

(4)v-on事件指令
①表达式:方法名、内联语句
v-on用于绑定事件监听器,实现一些交互功能。
语法:v-on:事件类型=”方法名”
表达式除了方法名,也可以是内联语句
②修饰符
以半角句号 . 指明的特殊后缀,用于指出一个指令应该以特殊方式绑定。

*.stop:阻止事件的传递,即阻止事件向上冒泡。

.prevent:阻止对象的默认行为。.prevent会调用 event.preventDefault() 即取消事件的默认动作。*

*.capture:使用事件捕获机制

.self:当事件在该元素自身触发时执行相应的事件处理程序,在该元素的子元素上不触发。

.once:绑定的事件只能触发一次。

keyup.keyCode键值修饰符,用来监听键盘事件。可以通过按键名称来监听,也可以自定义按键名称(键盘修饰符及自定义键盘修饰符)

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


(6)拓展:
可以用方括号括起来的 JS表达式作为一个指令的参数,如下所示动态绑定title属性, 实例有一个 data 属性 attributeName,其值为 “title”,那么这个绑定将等价于 v-bind:title:

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

显示信息的命令
日志信息console.log()、一般信息console.info()
除错信息console.debug()、警告提示console.warn()
错误提示console.error()

占位符
字符(%s)、整数(%d或%i)、浮点数(%f)和对象(%o)、CSS格式化样式(%c)五种。
可以使用%c进行css样式格式化输出。常见的富样式输出有两种:文字样式、图片输出。
(1)文字样式

(2)%c可以写在任何地方,不限于开头,然后%c后面所有的输出会应用我们指定的样式。如果想单独对中间某几个字进行样式处理呢?


图片输出(注意:背景图时,%c后面加空格占位)

严格来讲,console.log不支持直接图片输出,但可以用背景图曲线救国。但去试了才发现没那么简单,没法像平时那样输出背景图,原因呢,就是没法直接设置width和height样式。

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


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

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

计时器
console.time(),console.timeEnd()方法计算一个操作的执行的时间console.time()是开始,console.timeEnd()是结束。

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

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

控制台快捷键


转载:https://blog.csdn.net/weixin_45691601/article/details/102477414
查看评论
* 以上用户言论只代表其个人观点,不代表本网站的观点或立场