VUE之属性、条件、渲染、事件指令及修饰符

vue

v-bind属性指令

v-bind动态属性：常用于动态绑定HTML元素的属性，例如id、class、href、src等属性。改变任一方数据后都会实时更新。
### 基本指令v-bind语法

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，否则不进行渲染：
当数据show为true时，p元素会被插入，为false时则会被移除。

###基本指令v-show

v-show也是指条件性渲染，用法与v-if类似：

不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 属性 display。
###v-show与v-if

## 基本指令v-on

v-on用于绑定事件监听器，实现一些交互功能。如下所示

语法：v-on:事件类型=”方法名”
表达式可以是方法名，方法写在methods属性内，且是函数形式，函数内的this指向实例本身，因此可以通过this.xxx来访问修改数据。

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

###v-on表达式

语法：v-on:事件类型=”内联语句”

表达式除了方法名，也可以是内联语句

v-on修饰符

1…stop：阻止事件的传递，即阻止事件向上冒泡。

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

.capture：使用事件捕获机制

.self：当事件在该元素自身触发时执行相应的事件处理程序，在该元素的子元素上不触发。
因为父级点击事件被修饰符绑定，只有在直接点击到父元素 div ，事件才会被触发。

即使点击了它的子元素触发了子元素的事件，按照事件冒泡原理，父元素的事件应当被触发，但是因为事件的触发源并不是事件绑定的元素本身，所以父元素事件不会被触发。

.once：绑定的事件只能触发一次。
keyup.keyCode键值修饰符，用来监听键盘事件。可以通过按键名称来监听，也可以自定义按键名称（键盘修饰符及自定义键盘修饰符）
## 控制台的使用操作

console对象，提供5种方法，用来显示信息

日志信息console.log()、一般信息console.info()

除错信息console.debug()、警告提示console.warn()

错误提示console.error()
chrome浏览器
Firefox浏览器
## 解析

（1）console.log()、console.info()、console.debug()的作用都是在浏览器控制台打印信息的。在Firefox里console.info()打印出的信息，在控制显示的时候信息前面会出现一个小图标，，而且谷歌浏览器和opera不支持console.debug()。

（2）不同性质的信息前面有不同的图标，并且每条信息后面都有超级链接，点击后跳转到网页源码的相应行。

（3）console.log方法和console.debug()与console.info()，几乎用法完全一样，唯一不同的就是显示时候的表现形式了。

console.log，前端常用它来调试分析代码，你可以在任何的js代码中调用console.log()，然后你就可以在浏览器控制台看到你刚才打印的常量，变量，数组，对象，表达式等的值。

console.log，前端常用它来调试分析代码，你可以在任何的js代码中调用console.log()，然后你就可以在浏览器控制台看到你刚才打印的常量，变量，数组，对象，表达式等的值。
可以通过上面的方式进行单个变量（表达式）、多个变量以及换行输出。而这对于日常开发的大多数情况算是够用了。

console对象的上面5种方法，都可以使用printf（格式化输出）风格的占位符。不过，占位符的种类比较少，只支持字符（%s）、整数（%d或%i）、浮点数（%f）和对象（%o）、CSS格式化样式（%c）五种。

###占位符
清空控制台

console.clear()清空控制台内容
###计时器

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

可以传一个参数，参数为计时器的名称。