当前位置:   article > 正文

Vue初学_console.log('呼叫者的信息:

console.log('呼叫者的信息:

基本指令

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,……]”

在这里插入图片描述

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

在这里插入图片描述

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

在这里插入图片描述

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

在这里插入图片描述

v-on表达式 语法:v-on:事件类型=”内联语句”表达式除了方法名,也可以是内联语句在这里插入图片描述
v-on修饰符 以半角句号 . 指明的特殊后缀,用于指出一个指令应该以特殊方式绑定。
①.stop:阻止事件的传递,即阻止事件向上冒泡。

在这里插入图片描述

②.prevent:阻止对象的默认行为。.prevent会调用 event.preventDefault() 即取消事件的默认动作。在这里插入图片描述#### .capture:使用事件捕获机制在这里插入图片描述#### .self:当事件在该元素自身触发时执行相应的事件处理程序,在该元素的子元素上不触发。

在这里插入图片描述

v-on修饰符 .once:绑定的事件只能触发一次。

在这里插入图片描述

keyup.keyCode键值修饰符,用来监听键盘事件。可以通过按键名称来监听,也可以自定义按键名称(键盘修饰符及自定义键盘修饰符)在这里插入图片描述#### methods选项-代理方法 Vue.js将methods里的方法也代理了, 所以可以像访问Vue数据一样来调用方法。

在这里插入图片描述

console简介 控制台(Console)是JS开发里最重要的面板,主要作用是显示网页加载过程中产生各类信息。
显示信息的命令 console对象,提供5种方法,用来显示信息日志信息console.log()、一般信息console.info()除错信息console.debug()、警告提示console.warn()错误提示console.error()

在这里插入图片描述

占位符 console对象的上面5种方法,都可以使用printf(格式化输出)风格的占位符。不过,占位符的种类比较少,只支持字符(%s)、整数(%d或%i)、浮点数(%f)和对象(%o)、CSS格式化样式(%c)五种。
console.log("%s年",11.36)
    console.log("%d年%d月%d日",2019,10,10)
   console.log("%d+%d=%d",1,2,3,)  //占位符-格式化输出
  console.log("圆周率是%f",3.14159)
 var dog = {};
 dog.name = "11";
 dog.color = "黄色";
 console.log("%o",dog)
 console.log("%c这是一段神奇的文字","color:red;font-size:40px;text-shadow:10px 10px 10px #ccc")
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20191010195255335.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTcyOTA1MQ==,size_16,color_FFFFFF,t_70)
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
分组显示 如果信息太多,可以分组显示,用到的方法是console.group()和console.groupEnd()。

在这里插入图片描述

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

在这里插入图片描述

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

在这里插入图片描述

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

在这里插入图片描述

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

在这里插入图片描述

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/Cpp五条/article/detail/228732
推荐阅读
相关标签
  

闽ICP备14008679号