Vue-指令

# v-text与v-html

v-text

作用：更新整个标签中的内容
插值表达式：更新标签中局部内容

v-html

作用：更新标签中的内容和标签
可渲染html标签的内容
经量避免使用防止XSS脚本攻击

示例

<body>
    <div id="app">
        <!-- v-text指令的值会替换标签内容 -->
        <p v-text="msg">老哥 真的很帅</p>
        <!-- v-html指令的值(包括标签字符串)会替换掉标签的内容 -->
        <p v-html="msg2">老哥 真的很帅</p>
    </div>
    <script src="vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                msg: '老鸽',
                msg2:'<span>老鸽2</span>'
            }
        })
    </script>
</body>

# v-if与v-show

v-if

作用：布尔值决定元素的添加或删除
值：布尔值
用于条件少改变的应用

v-show

作用：布尔值决定元素的显示或隐藏
值：布尔值
用于频繁切换的应用

示例

<body>
    <div id="app">
        <p v-if="isShow">张三</p>
        <p v-show="isShow">李四</p>
    </div>
    <script src="vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                isShow: false
            }
        })
    </script>
</body>

<!-- 浏览器 审查元素查看结果
<div id="app">
    
    <p style="display: none;">李四</p>
</div>
->

# v-on

**作用：**指令监听 DOM事件 , 进行 JS响应

**值&事件：**使用方式 (两种)

==v-on:事件名="方法名"==
==@事件名="方法名"==

**修饰符：**封装逻辑的方法

使用：==@事件名.修饰符="方法名"== @contextmenu.prevent

**事件对象：**向方法返回对象的本身

方法名传参 $event 传递 ==方法名($event)==
默认第一个event事件参数 ==方法名== (实参接收时传递的第一个参数是 event对象)

element.preventDefault() 阻止默认事件行为

**API：**https://cn.vuejs.org/v2/guide/events.html

监听事件

监听事件	说明
`@click`	鼠标点击
`@keyup`	键盘点击

事件修饰符

修饰符	说明
`.once`	只触发一次
`.prevent`	阻止默认事件行为
`.stop`	阻止冒泡函数行为
`.self`	只响应当前元素触发的行为（会受冒泡影响
`.capture`	添加事件监听器

示例

<body>
    <div id="app">
        <p>{{count}}</p>
        <!-- 应用 -->
        <!-- 触发按钮事件 -->
        <button v-on:click="add">v-on Add1</button><br>
        <button @click="add">@ Add1</button><br>
        <!-- 修饰符 -->
        <!-- 只能点击一次 -->
        <button @click.once="add">.noce Add1</button><br>
        <!-- 禁止右键菜单 -->
        <button @contextmenu.prevent="add" @click="add">.prevent Add1</button><br>
        <!-- 获取事件对象 -->
        <button @click="add($event)">($event) add1</button><br>
        <button @click="add2">add2</button><br>
    </div>
    <script src="vue.js"></script>
    <script>
        new Vue({
            el: '#app',                                     
            data: {
                count:1
            },
            methods:{
                add(e){
                    console.log(e);
                    this.count++;
                },
                add2(e){
                    console.log(e);
                    this.count++;
                }
            }
        })
    </script>
</body>

<!--
执行方法测试
-->

# v-for

作用：渲染指定数组列表（遍历数组）
值：==item in items== 或 ==item of items== ( items 是数组的别名
支持参数选项 item（迭代数组的单个元素）、index（下标数）、key （主键）
如果数组使用有 key , 则每个元素都要有 key , 而且 key 是唯一的
v-for 写的位置不是父级标签 , 而是重复本身的标签！！（循环的是标签本身

使用带有 key 的数组 , 更新会更快 , 因根据 key 的更变进行更变 , key 是需要手动指定

示例

<body>
    <div id="app">
        <p>in 和 of</p>
        <p><span v-for="item in list">{{item}} </span></p>
        <p><span v-for="item of list">{{item}} </span></p>
        <p>============</p>

        <!-- v-for 支持参数选项 -->
        <p>index 选项</p>
        <ul v-for="(item , index) in items">
            <li>{{index}} : {{item.name}}---{{item.sex}} </li>
        </ul>
        <p>============</p>
        <p>key 选项</p>
        <ul>
            <li v-for="(v,i) in items":key="i">{{v}}  ---  {{i}}</li>
        </ul>
        <ul>
            <li v-for="(v,i,k) in json":key="k">{{i}} -- {{k}} -- {{v}}</li>
        </ul>

    </div>
    <script src="vue.js"></script>
    <script>
        let vm = new Vue({
        el: "#app",
            data: {
                list : ['a','b','c','d'],
                items:[
                    {name:"张三",sex:"男"},
                    {name:"李四",sex:"女"},
                    {name:"王五",sex:"男"},
                    {name:"赵六",sex:"男"}
                ],
                json : {
                    "001":{name:"智乃"},
                    "002":{name:"琪露诺"},
                    "003":{name:"蕾姆"},
                    "004":{name:"猫羽雫"}
                }
            }
        })
    </script>
</body>

<!-- 浏览器结果 

in 和 of

a b c d

a b c d

============

index 选项

0 : 张三---男
1 : 李四---女
2 : 王五---男
3 : 赵六---男
============

key 选项

{ "name": "张三", "sex": "男" } --- 0
{ "name": "李四", "sex": "女" } --- 1
{ "name": "王五", "sex": "男" } --- 2
{ "name": "赵六", "sex": "男" } --- 3
001 -- 0 -- { "name": "智乃" }
002 -- 1 -- { "name": "琪露诺" }
003 -- 2 -- { "name": "蕾姆" }
004 -- 3 -- { "name": "猫羽雫" }

 -->

# v-bind

**作用：**绑定标签中上任意属性 , 对此属性值进行动态同步

**值：**值对象/[数组对应值] （支持三目运算符

**参数：**指定属性对应的值

编写：==v-bind:<属性名>== 缩写为： ==:<属性名>==

==:id="<变量名>"==

// id指定的值为 "myId"
<p :id="ID"></p>
data: {
	ID:"myId";
}

class

Model：==:class="{<类值>:<布尔值> [, <类值>:<布尔值>]}"==

Model：==:class="<属性名>"== （指定的是对象

原生class：==:class="[<类名> [, <类名>] ]"==

注意

绑定class和原生class 不会合并重复,会优先去Model中找数据值
如果想在当中使用原生class样式名 , 将对象以数组的形式写进去 , 以防在Model中查找例如： :class="['box']" (可以写多个原生class类名)

<!-- class 对象 -->
<!-- class结果值为：class="left right left" -->
<p class="left right" :class="{left:a,rigth:b}"></p>
<!-- class 数组 -->
<!-- class结果值为：class="left right left2 rigth2" -->
<p class="left right" :class="[aa,bb]"></p>
<!-- class 封装对象 -->
<!-- class结果值为：class="a" -->
<p :class="obj"></p>
data: {
	a:true,
	b:false,
    aa: "left2",
    bb: "rigth2",
	obj:{
		a:true,
		b:false
	}
}

style

==:style="{<样式名>:<样式值> [, <样式名>:<样式值>]}"==

==:style="[<变量名/对象名> [, <变量名/对象名>] ]"==

注意

如果用对象形式 , 则样式值一定要有单引号/双引号包围 , 否则样式无效
数组形式可以直接写入样式或对象样式

<!-- style 对象 -->
<p :style="{background:a,width:b,height:c}"></p>
<!-- style 数组 -->
<p :style="[aa,bb,cc]"></p>
data: {
    a : "black",
    b : "100px",
    c : "100px",
    aa : {"background":"red"},
    bb : {"width":"100px"},
    cc : {"height":"100px"},
}

# v-model

作用：绑定表单组件上任意属性 , 对此值进行动态同步
值：变量名

作用标签

标签	绑定属性值
==input[type='text']==	`value`
==textarea==	`value`
==input[type='checkbox']==	`checked`
==input[type='radio']==	`checked`
==select>option==	`value`

注意

v-model 会忽略表单组件中的 value、checked、selected attribute 的初始值 , 而数据的来源在 Vue 实例中

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <!--
         - text 和 textarea 元素使用 value property 和 input 事件
         - checkbox 和 radio 使用 checked property 和 change 事件
         - select 字段将 value 作为 prop 并将 change 作为事件
     -->
    <form action="#">
        <!-- text -->
        <input type="text" v-model="msg" value="柏竹">
        <p>{{msg}}</p>
        <!-- textarea -->
        <textarea v-model="msg2" cols="30" rows="3"></textarea>
        <p>{{msg2}}</p>
        <!-- radio -->
        sex:
        <label>女<input type="radio" value="女" name="sex" v-model="picked"></label>
        <label>男<input type="radio" value="男" name="sex" v-model="picked"></label>
        <p>check：{{picked}}</p>
        <!-- checkbox -->
        hobby:
        <label> <input type="checkbox" name="hobby" value="篮球" v-model="checked">篮球</label>
        <label> <input type="checkbox" name="hobby" value="网球" v-model="checked">网球</label>
        <label> <input type="checkbox" name="hobby" value="足球" v-model="checked">足球</label>
        <label> <input type="checkbox" name="hobby" value="羽毛球" v-model="checked">羽毛球</label>
        <label> <input type="checkbox" name="hobby" value="乒乓球" v-model="checked">乒乓球</label>
        <label> <input type="checkbox" name="hobby" value="气排球" v-model="checked">气排球</label>
        <p>checked:{{checked}}</p>
        <!-- select -->
        <select v-model="selected">
            <option value="篮球" selected>篮球</option>
            <option value="网球">网球</option>
            <option value="足球">足球</option>
            <option value="羽毛球">羽毛球</option>
            <option value="乒乓球">乒乓球</option>
            <option value="气排球">气排球</option>
        </select>
        <p>selected:{{selected}}</p>
    </form>
</div>
</body>
<script src="vue.js"></script>
<script>
    new Vue({
        el: "#app",
        data: {
            msg:"张三",
            msg2:"李四",
            picked: '',
            checked:[],
            selected:''
        }
    });
</script>
</html>

# v-cloak

**作用：**解决页面初次渲染时出现 {{}} 的问题

步骤：

为 v-cloak指令添加CSS规则
```
[v-cloak] { display: none; }
```
为 vue实例的容器添加指令 v-cloak
```
<div id="app" v-cloak>
    ...
</div>
```

# v-once

作用： 在所在的元素只渲染一次

步骤： 为指定标签添加 v-once指令（前提该标签在Vue容器范围内

# v-slot

**作用：**指定当前标签中的子标签内容填充至插槽中（点击插槽了解

编写：==v-slot:<插槽名>== 缩写为：==#<插槽名>==

注意

该指令只能用在 template标签中进行使用该该指令
v-slot指令 vue2.6以上版本才能应用

示例：

<div id="app">
    <son>
        <template v-slot:one>
            <p>模板数据填充1</p>
            <p>模板数据填充11</p>
        </template>
        <template #two>
            <p>模板数据填充2</p>
            <p>模板数据填充22</p>
        </template>
    </son>
</div>
....
<template id="son">
    <div>
        <div>头部</div>
        <slot name="one">默认数据1</slot>
        <slot name="two">默认数据2</slot>
        <div>尾部</div>
    </div>
</template>
<script>
    new Vue({
       el:"#app",
       data:{},
       components:{
           "son":{
               template:"#son"
           }
       }
    });
</script>

渲染结果：

<div id="app">
    <div>
        <div>头部</div> 
        <p>模板数据填充1</p> 
        <p>模板数据填充11</p> 
        <p>模板数据填充2</p> 
        <p>模板数据填充22</p> 
        <div>尾部</div>
    </div>
</div>

# 自定义指令

**作用：**对 DOM元素进行底层操作

类型： 全局/局部自定义指令

API：https://cn.vuejs.org/ (opens new window)

步骤：

定义自定义指令全局/局部全局自定义指令

Vue.directive(<指令名称>, {
    <钩子函数>: function (e [, <参数>]) {
    	// e参数 DOM对象本身
    	...
    }
})

局部自定义指令

new Vue({
    el: "...",
    data: {...},
    directives: {
        <指令名称1>:{
            <钩子函数>: function (<钩子函数参数>) {
                ...
            }
        } [,
        <指令名称2>:{
            <钩子函数>: function (<钩子函数参数>) {
                ...
            }
        }]
    }
});

在指定元素添加自定义指令实现功能 ==v-<指令名称>==

钩子函数

bind ：只调用一次 , 指令第一次绑定到元素时调用
unbind ：只调用一次 , 指令与元素解绑时调用
inserted ：被绑定元素插入父节点时调用

钩子函数参数

el ：被绑定的当前元素的 DOM对象
binding ：指令本身数据 , 包含有以下属性
- name ：指令名称 不包括 v- 前缀
- value ：指令绑定值 包含表达式运算结果如 v-my="1+1" 最后结果值为 2
- expression ：字符串形式的指令表达式（属性名
- arg ：传给指令的参数 v-my:funcc 中 , 则参数为 funcc
- modifiers ：包含修饰符的对象 v-my.foo.bar 中 , 修饰符对象为 {foo: true , bar: true}

示例

<div id="app">
    <div v-demo:foo.a.b="msg"></div>
</div>
...
<script>
new Vue({
    el: "#app",
    data: {
        msg: "hello"
    },
    directives: {
        demo: {
            bind: function (el, binding, vnode) {
                // 将  binding对象 转化为 JOSN格式
                var s = JSON.stringify;
                el.innerHTML = 
                        'name : ' + s(binding.name) + "<br>" +
                        'value : ' + s(binding.value) + "<br>" +
                        'expression : ' + s(binding.expression) + "<br>" +
                        'arg : ' + s(binding.arg) + "<br>" +
                        'modifiers : ' + s(binding.modifiers) + "<br>" +
                        'Object.keys : ' + Object.keys(vnode).join(',');
            }
        }
    }
});
</script>
//控制台
name : "demo"
value : "hello"
expression : "msg"
arg : "foo"
modifiers : {"a":true,"b":true}
Object.keys : tag,data,children,text,elm,ns,context,fnContext,fnOptions,fnScopeId,key,componentOptions,componentInstance,parent,raw,isStatic,isRootInsert,isComment,isCloned,isOnce,asyncFactory,asyncMeta,isAsyncPlaceholder

#Vue

← Vue-插槽 Vue-属性→