Vue指令

一.文本操作指令

1.v-text 文本变量

v-text <==> {{}}

2.v-html 文本变量

//  msg: '123' => 加粗的123

3.v-once 一次性文本赋值

    {{msg}}

// 只能被赋值一次

4.v-model

// v-model控制的是表单元素的value值

5.v-cloak

• 解决页面闪烁

  或者导入vue语句放到head中

二.关键指令

1.v-bind

用法: v-bind:属性名="变量名称"

简写: :属性名="变量名称"

操作的是属性,绑定属性后,属性值可以由变量来控制

操作title

v-bind:title="'my_title'"  => title="my_title"

v-bind:title="title"
data: {
    title: "my_title"
}
=> title="my_title"

操作class

v-bind:class="my_class"
data: {
    my_class: active
}
=> class="active"

v-bind:class="[c1, c2]"
data: {
    c1: C1,
    c2: C2
}
=> class="C1 C2"

v-bind:class="{abc: abc_able}"
data: {
    abc_able: ture
}
=> class="abc"
data: {
    abc_able: false
}
=> class=""

操作style

:style="{width:'200px', height:'200px'}"

:style="my_style"
data: {
    my_style: {
        width: "200px",
        height: "200px"
    }
}

2.v-on指令

1.简写 v-on:click <=> @click
2.默认绑定 @click="fn" => 回调方法可以获取ev
3.带参绑定 @click="fn(10)" => 回调参数只能获取自定义参数10
4.带参绑定 @click="fn(10, $event)" => 回调参数可以获取自定义参数10即事件参数ev

3.v-model指令

• 操作的是表单元素的value值

双向绑定

两个输入框绑定的是同一个val,那么其中一个input的内容改变会直接映射到另一个input上

单个复选框

1. val默认为true(选框选中,提交给后台的为ck=on)
2. val默认为false(选框未选中,不向后台提交该数据)

多个复选框

1. v-model绑定的是同一个变量
2. 该变量的值为数组形式
3. 出现在数组中的value对应的复选框默认为选中状态,eg: val: ['ppqiu', 'zqiu'] => 乒乓球,足球复选框默认选中
4. 提交给后台数据: ck=ppqiu&ck=zqiu
篮球
足球
乒乓球

多个单选框

1. v-model绑定的是同一个变量
2. 该变量的值为每个单选框的value值,那么该单选框默认选中 eg: val: famale => 女单选框默认选中
3. 提交给后台数据: sex=famale
男:
女:

三.条件渲染指令

• v-show

// 变量isShow值为true(显示,display: block)|false(隐藏,display: none)

• v-if

// 变量isShow值为true(显示,渲染到页面)|false(隐藏,不渲染到页面)

• v-if v-else-if v-else

 

// v-else逻辑可言省略
// 变量tag取值在0~2之间,可以决定具体渲染那个div
// 全局属性key是为渲染过的分支建立缓存,加快该分支下一次被渲染的速度,key的值具有唯一性

四.列表渲染指令

• v-for 遍历数组[]

    
value:{{ n }} | index: {{ i }}

// list为提供的数组数据
// n为遍历的数组元素值,i为遍历的元素索引
// key是为遍历建立缓存,采用变量赋值,所以通过v-bind:指令操作

• v-for变量对象{}

    
value:{{ v }} | key:{{ k }} | index: {{ i }}

// dic为提供的对象(字典)数据
// v为遍历的对象值,k为对象值的键,i为对象值的索引
// key是为遍历建立缓存,采用变量赋值,所以通过v-bind:指令操作

• 遍历的嵌套

    
{{ k }} : {{ v }}