Vue
指令、组件
- 作用: 是用来操作DOM的,指令就是绑定在DOM身上的一个属性,这个属性具备一定的功能,这个功能用来操作DOM
- 以后我们不在像以前一样,先获取DOM,在操作了,我们现在可以直接使用指令来操作DOM
- 这个指令需要模板语法的支持,所以我们采用jsx语法糖
模板语法
模板语法支持性还是很高的,数据类型都是支持的,但是不支持 输出语法 ( console.log alert )
指令
-
格式:
v-xxx = "mustache语法" v-xxx = "msg" v-xxx = "{ {msg}}" ×
-
v-html 将一个数据展示在一个DOM内容中, innerHTML( html属性 )
- 防止脚本攻击 xss CSRF
-
v-bind 单项数据绑定
- 使用技巧: 凡是 DOM 的属性要和数据进行绑定,那么我们就可以使用 v-bind - 格式: v-bind:DOMattr = "data" - 简写: :DOMattr = "data"
-
v-text
非转义输出
-
class VS style
- class
- object
<div :class="{[size]:true,[color]: true,[box]: true}"></div> <div :class="{[size]: 5>2?true:false,[color]: true,[box]: true}"></div>
- arr
<div :class="[size,box,color]"></div> <div :class="[class_flag?size:'',box,color]"></div>
-
推荐使用arr形式 如果没有加中括号,自动为最后一个类
-
三目运算符的高级用法
null&&'true'||'flase' 三目运算符的升级写法, 前面的条件如果满足就输出true,如若不然就输出后面的内容
2 style
-
object
<div :style="{ width:'100px',height: '100px',background: 'blue'}
- class