Vue 指令

时间:2019-10-09
本文章向大家介绍Vue 指令,主要包括Vue 指令使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

- 文本指令 | v-text = '变量名' &  v-heml=" 'html标签' "

<!--
1) v-text指令同插值表达式,渲染普通文本
   v-text='变量名' ,变量需要data提供变量值
2) v-html指令可以渲染有html语法的文本,能够解析html语法
   v-heml=" 'html标签' " , 不加引号就是变量 
-->
<body>
    <div id="app">
        <p>{{ info }}</p>
        <!-- 文本指令渲染变量 -->
        <p v-text="info">ok</p>
        <!-- 文本指令渲染常量(基础数据类型) -->
        <p v-text="123"></p>
        <p v-text="true"></p>
        <p v-text="'abc' + info"></p>
        <p v-text="[1,2,3]"></p>
        <!-- html标签指令 -->
        <p v-html="'<b style=`color:red`>html</b>'"></p>
        <p v-text="'<b>text</b>'"></p>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data:{
            info:'xionger',
        }
    })
</script>

反引号补充:

<script>
    // 1) js多行字符串 反引号 ``
    // 2) 反引号字符串中可以直接填充变量,语法为 `${变量名}`
    let s1 = `第一行
第二行
结束行`;
    console.log(s1);
​
    let name = 'Owen';
    let age = 17.5;
    let s2 = `
name: ${name}
age: ${age}
`;
console.log(s2);
</script>

- 事件指令 | v-on:事件名="函数名(参数...)" / @事件名="函数名(参数们)"

<!--
1) 语法:v-on:事件名="函数名(参数...)"
2) 简写:@事件名="函数名(参数们)"
3) 用methods实例成员提供 事件函数 的实现
​
补充:
 @事件='方法'  默认传入事件对象 $event
 @事件='方法()'  不传递任何参数
 @事件='方法(参数...)'  只传递自定义参数
 @事件='方法($event, 参数...)'  自定义传参时传递事件对象
-->
<body>
    <div id="app">
        <!--单击事件-->
        <p class="low-num" v-on:click="lowNum">
        <span>点击减一:</span>
        <span>{{ num }}</span>
        </p>
        <!--双击事件-->
        <p v-on:dblclick="dblAction">双击</p>
        <!--悬浮事件-->
        <p @mouseover="overAction(10,$event)">悬浮</p>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data:{
            num:100,
        },
        methods:{
            lowNum:function () {
                // 在vue实例内部的方法中获取变量 this.num
                this.num -= 1;
            },
            dblAction:function (ev) {
                alert('双击事件');
                console.log(ev)
            },
            overAction:function (a,b) {
                console.log(a,b)
            }
        }
    })
</script>

- 属性指令 | v-bind:属性名="变量" / :属性名="变量"

<!--
1) 语法:v-bind:属性名="变量"
2) v-bind:属性名="变量" 简写 :属性名="变量"
3) 单值属性绑定:  :title="变量"  |  :id="变量"  |  :自定义属性="变量"
4) style属性绑定:  :style="字典变量"  |  :style="{css属性1:变量1, ..., css属性n:变量n}"
5) class属性绑定:  :class="变量"  |  :class="[变量1, ..., 变量n]"  |  :calss="{类名:布尔变量}"
-->
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        [index] {
            color: orange;
        }
         .ccc1 {
            background-color: yellowgreen;
        }
        .ccc2 {
            color: greenyellow;
        }
        .ccc3 {
            border-radius: 50%;
        }
        .ttt {
            background-color: gold;
            color: orange;
        }
    </style>
</head>
<body>
    <div id="app">
        <!--1) 语法:v-bind:属性名="变量" -->
        <p id="p2" v-bind:class="p1" style="" title="" index="">属性指令2</p>
        <p v-bind:index="p1">自定义属性也可以被vue绑定1</p>
        <!--2) v-bind:属性名="变量" 简写 :属性名="变量" -->
        <p :title="'文本提示'">悬浮文本提示</p>
        <!--3) style样式属性绑定 -->
        <p :style="myStyle">样式绑定1</p>
        <p :style="{backgroundColor: c1, color: c2, 'border-radius': '50%'}">样式绑定2</p>
        <!--4) class类属性绑定 -->
        <p :class="myc1">样式绑定3</p>
        <p :class="[myc2,myc3,myc4,'bbb']">样式绑定4</p>
        <!--案例:点击切换类名是否起作用-->
        <p @click="clickAction" :class="{ttt:yyy}">点击切换类</p>

    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data:{
            p1:'haha',
            myStyle: {
                backgroundColor: 'pink',
                color: 'deeppink',
                'border-radius': '50%'
            },
            c1: 'cyan',
            c2: 'tan',
            myc1: 'ccc ddd eee',
            myc2: 'ccc1',
            myc3: 'ccc2',
            myc4: 'ccc3',
            yyy:true,
        },
        methods: {
            clickAction() {
                this.yyy = !this.yyy;
            }
        }
    })
</script>
</html>

属性指令代码
属性指令代码演示
<!-- 给自定义属性绑定变量 -->
<p v-bind:abc="abc"></p>
<!-- 以原字符串形式绑定全局属性 -->
<p v-bind:title="'abc'"></p>

<!-- 单类名绑定 -->
<p v-bind:class="c1"></p>
<!-- 多类名绑定 -->
<p v-bind:class="[c2, c3]"></p>
<!-- 类名状态绑定 -->
<p v-bind:class="{c4: true|false|var}"></p>
<!-- 多类名状态绑定 -->
<p v-bind:class="[{c5: true}, {c6: flase}]"></p>

<!-- 样式绑定 -->
<div :style="div_style"></div>
<div :style="{width: '100px', height: '100px', backgroundColor: 'blue'}"></div>
<script type="text/javascript">
    new Vue({
        el:"#app",
        data: {
            abc: "abc",
            c1: "p1",
            c2: "p2",
            c3: "p3",
            div_style: {
                width: "200px",
                height: "200px",
                backgroundColor: "cyan"
            }
        }
    })
</script>
<!-- v-bind: 指令可以简写为 : -->

- 表单指令 | v-model="控制vaule值的变量"

<!--
 1) 语法:v-model="控制vaule值的变量"  本质是控制value的值
 2) :value="变量" 直接绑定数据不会时时更新(修改表单标签值,值不会时时映射给绑定的变量)
 3) v-model="变量" 绑定数据会时时更新(修改表单标签值,值会时时映射给绑定的变量)
 4) 单独复选框作为确认框时,v-model绑定的变量为布尔类型变量
 5) 单选框,v-model绑定的变量值是某一个选项的值(值是哪个选项的值,那个选项就被选中)
 6) 多复选框,v-model绑定的变量值是一个列表(数组),存放复选框选项值(谁被选中就存放了谁)
-->
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div id="app">
        <form action="">
            <!--1) 对表单标签value进行绑定操作变量,不能时时检测绑定的变量-->
            <input type="text" v-bind:value="info">
            <input type="text" :value="info">
            <p>{{ info }}</p>
            <hr>
             <!--2) 表单标签的值有 v-model="变量" 来绑定控制,操作的还是value,但是拥有时时变量值的检测 -->
            <input type="text" v-model="info">
            <input type="text" v-model="info">
            <p>{{ info }}</p>
            <br>

            <!-- 3) v-model操作单独复选框 - 确认框 -->
            <!-- v-model存储的值为true|false -->
            是否同意: <input type="checkbox" name="agree" v-model="isAgree">
            <p>{{ isAgree }}</p>

            <!-- 4) 单选框-->
            <!-- 单选框是以name进行分组,同组中只能发生单选 -->
            性别:
            男 <input type="radio" name="sex" value="male" v-model="mysex"><input type="radio" name="sex" value="female" v-model="mysex">
            哇塞 <input type="radio" name="sex" value="others" v-model="mysex">
            <p>{{ mysex }}</p>

            <!-- 5) 复选框-->
            !-- v-model存储的值为存储值多复选框value的数组 -->
            兴趣爱好:
            男 <input type="checkbox" name="hobbies" value="male" v-model="myhobbies"><input type="checkbox" name="hobbies" value="female" v-model="myhobbies">
            哇塞 <input type="checkbox" name="hobbies" value="others" v-model="myhobbies">
            <p>{{ myhobbies }}</p>


            <input type="submit">
        </form>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data:{
            info:123,
            isAgree:0,
            mysex:'male', // 单选框默认值
            myhobbies:['female','others']  // 复选框默认值
        }
    })
</script>
</html>

表单指令代码
表单指令代码演示

- 斗篷指令 | v-cloak

<!-- 
避免页面闪烁
[v-cloak] {dispaly:none;}
-->
<style type="text/css">
    [v-cloak] { display: none; }
</style>
<div id="app" v-cloak>
    {{ msg }}
</div>
<script src="js/vue.min.js"></script>
<script type="text/javascript">
    new Vue({
        el: "#app",
        data: {
            msg: "message"
        }
    })
</script>

原文地址:https://www.cnblogs.com/waller/p/11643099.html