VUE之属性、条件、渲染、事件指令及修饰符，Console控制台讲解

VUE之属性、条件、渲染、事件指令及修饰符，Console控制台讲解
VUE之属性、条件、渲染、事件指令及修饰符
基本指令v-bind
v-bind动态属性
例如：

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

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

3.

基本指令 v-if
v-if指条件性渲染，为true时渲染DOM，否则不进行渲染：
数据驱动DOM是Vue.js的核心理念，所以尽量避免直接操作DOM，只需要维护关注数据即可，DOM的事Vue会进行处理。

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

v-show与v-if
vue中显隐方法常用两种，v-show和v-if，但这两种是有区别的
一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。
V-on ：@方法名
v-on用于绑定事件监听器，实现一些交互功能。如下所示
语法：v-on:事件类型=”方法名”

在button按钮上绑定事件，除了click还可以是其他事件类型，例如dblclick、keyup、mouseover等。

①.Stop  阻止事件的传递，即阻止事件向上冒泡。

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

3..capture：使用事件捕获机制

4.self：当事件在该元素自身触发时执行相应的事件处理程序，在该元素的子元素上不触发。
··
V-on修饰符
.once绑定的事件只触发一次

（1）.stop冒泡事件修饰符，阻止事件向上冒泡
（2）.prevent默认事件修饰符，阻止对象的默认行为
（3）.capture捕获事件修饰符，使用事件捕获机制
（4）.self自身事件修饰符，只当事件是从事件绑定的元素本身触发时才触发回调
（5）.once一次性事件修饰符，绑定的事件只能触发一次
（6）keyup.keyCode键值事件修饰符，用来监听键盘事件（键盘修饰符以及自定义键盘修饰符）
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）五种。
%o占位符，可以用来查看一个对象内部情况。比如，有这样一个对象，对它使用o%占位符：
小结：
可以使用%c进行css样式格式化输出。常见的富样式输出有两种：文字样式、图片输出。
图片输出（注意：背景图时，%c后面加空格占位）
严格来讲，console.log不支持直接图片输出，但可以用背景图曲线救国。但去试了才发现没那么简单，没法像平时那样输出背景图，原因呢，就是没法直接设置width和height样式。
注意：
console.log输出的超链接会被自动识别并加上灰色字体颜色和下划线的样式，而这个无法用%c覆盖
如果信息太多，可以分组显示，用到的方法是console.group()和console.groupEnd()
注意：点击组标题，该组信息会折叠或展开；可以用console.groupEnd()引起来，也可以不引起来或者最后引起。
输出属性与方法：
console.dir()可以显示一个对象所有的属性和方法。
输出节点代码：
console.dirxml()用来显示网页的某个节点（node）所包含的html/xml代码。
清空控制台：
console.clear()清空控制台内容
计时器：
console.time(),console.timeEnd()方法计算一个操作的执行的时间console.time()是开始，console.timeEnd()是结束。
可以传一个参数，参数为计时器的名称。
计时器案例：
常问面试题：jQuery和JS运行时哪个更快、效率更高？
首先要明白一点，jQuery是JS封装好的代码库，本质上来说是对代码的二次封装编写，中间需要转换过程，执行效率不如原生JS。但开发效率高，应用方便。
计时器案例：
接下来利用console.time和console.timeEnd测试下
注意：尽量在body结束前引入jquery库文档，因为在使用DOM时需要使用页面的元素，页面元素未实例之前是不能调用。
console.count()方法用于计数，输出它被调用了多少次。
表格化：
console.table()方法可以将传入的对象或数组这些复合数据以表格形式输出。
控制台快捷键：
1、方向键盘的上下键，一用就知晓。比如用上键就相当于使用上次在控制台的输入符号。
2、$_命令返回最近一次表达式执行的结果，功能跟按向上的方向键再回车是一样的
3、Chrome 控制台中原生支持类jQuery的选择器，也就是说你可以用$加上熟悉的css选择器来选择DOM节点。例如$('body')
4、$ 简单理解就是 document.querySelector 。
5、$$ 简单理解就是 document.querySelectorAll 。
6、$_ 是上一个表达式的值
7、dir 就是 console.dir