vue常用指令

最新推荐文章于 2023-03-15 22:00:38 发布

justry_deng

最新推荐文章于 2023-03-15 22:00:38 发布

阅读量734

点赞数 2

文章标签： vue常用指令 vue指令 vue指令介绍 vue指令使用示例 vue

本文链接：https://blog.csdn.net/justry_deng/article/details/103000161

版权

Vue2.x 专栏收录该内容

8 篇文章 2 订阅

订阅专栏

声明一：这里列出的只是一些常用的指令，更多指令、更多细节可参考vue中文官网。
声明二：本文主要学习并整理自51CTO课程《Vue.js 2.0之全家桶系列视频课程》，讲师汤小洋，跳转链接见文末。

vue常用指令：

v-model：双向数据绑定(即：将vue实例的数据属性值与html元素的值进行绑定，一起发生变化)，一般用于表单元素。

示例：

html中是这样：
js中是这样的：
效果是这样的：

改变任意一个html元素的值，那么与其v-model绑定的vue实例的属性值就会发生对应的变化，进而其它的与该vue实例的该属性v-model绑定的html元素的值也会发生响应的变化：

v-for：循环遍历。

直接遍历数字(示例)：
在这里插入图片描述
遍历数组(示例)：

html中是这样：
js中是这样的：
效果是这样的：

遍历对象(示例)：

html中是这样：
js中是这样的：
效果是这样的：

遍历对象数组(示例)：

html中是这样：
js中是这样的：
效果是这样的：

使用:key提升效率(示例)：
说明：在使用v-for遍历时，可以通过:key来给每一项(即:每一个key-value或每一个元素)唯一绑定一个标识来提高vue效率。当数据发生变化时，vue就通过这个标识来重用未发生变化的元素，而不需要把所有的元素都重新罗列一遍。
在这里插入图片描述

v-on：事件绑定。一般用法为v-on:事件=“函数”。可简写为@事件=“函数”。

入门示例：

在js中定义方法：
在html中使用方法：
效果如图：

点击事件(示例)：

在js中定义方法：

注：在一个vue实例的某个方法里，需要调用某个vue实例(该实例本身或其它实例)的属性或者方法时，需要通过变量名进行定位(如这里的tmpV)，如果是调用当前实例的属性或方法时，可直接使用(代表当前实例的)关键字this，也可使用实例变量，如：
在html中使用方法：
效果如图：
点击前：

点击后：

v-show/v-if：显示或隐藏元素(true显示，false隐藏)。v-show是通过设置display来实现的；而v-if是直接删除然后再重新创建来实现的。

示例：

在js中定义一个参考变量：
在html进行使用：
效果如图(多次点击会交替着显示或隐藏)：

给出本人测试时的完整html内容：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>vue常用指令</title>
    <script src="../js/vue.js"></script>
    <script>
        window.onload = function () {
            // 允许chrome的扩展程序【vue-devtools】进行调试
            // 建议: 开发时，设置为true; 生产时, 设置为false
            Vue.config.devtools = true

            // ----------------------------------------------------------- v-model
            new Vue(
                {
                    // 指定关联的element
                    el: '#abc',
                    // 存储数据(以json的形式)
                    data: {
                        nameKey: '邓沙利文'
                    }
                }
            );

            // ----------------------------------------------------------- v-for
            new Vue(
                {
                    // 指定关联的element
                    el: '.test1',
                    // 存储数据(以json的形式)
                    data: {
                        arr: [1, 3, 5, 7, 9, 10],
                        user: { id: 9527, name: '华安', age: 25 },
                        students: {
                            zhangsan: { no: '01', name: '张三', age: 18 },
                            lisi: { no: '03', name: '李四', age: 24 },
                            zhawangwu: { no: '02', name: '王五', age: 32 }
                        }
                    }
                }
            );

            // ----------------------------------------------------------- v-on
            let tmpV = new Vue(
                {
                    // 指定关联的element
                    el: '.test2',
                    // 存储数据(以json的形式)
                    data: {
                        k: '123木头人',
                        arr: [1, 3]
                    },

                    // methods里面用于存储方法
                    methods: {
                        // 定义方法(示例定义show方法)
                        // 注意:   show() 即为 show: function()的缩写
                        show() {
                            console.log("hello JustryDeng");
                        },

                        // 此方法用于向当前vue实例中的数组添加元素888、999
                        add() {
                            // this关键字即代表当前vue实例。 此console的输出结果为true。
                            console.log(this == tmpV);
                            // 这里this.arr 与 tmpV.arr 等价
                            this.arr.push(888);
                            tmpV.arr.push(999);

                            // 调用当前实例的show方法
                            // 等价于this.show();
                            tmpV.show();
                        }
                    }
                }
            );

            // ----------------------------------------------------------- v-show/v-if
            new Vue(
                {
                    // 指定关联的element
                    el: '.test3',
                    // 存储数据(以json的形式)
                    data: {
                        flag: true
                    }
                }
            );
        }
    </script>
</head>

<body>

    <!-- ************************************ v-model ************************************ -->
    <h3>v-model测试：</h3>
    <div id="abc">
        <!--
             通过v-model将此input的内容 与 对应的vue实例的数据进行关联，如:这里的nameKey,
             改变输入框中的值，那么对应vue实例的nameKey的值也会跟着反生变化；同理，改变
             对应vue实例的nameKey的值，那么输入框中的值也会反生变化。
         -->
        用户名： <input type="text" v-model="nameKey">
        &nbsp; &nbsp; &nbsp;
        <input type="text" v-model="nameKey">
        &nbsp; &nbsp; &nbsp;
        {{nameKey}}
    </div>
    <hr />

    <!-- ************************************ v-for************************************ -->
    <h3>v-for测试：</h3>
    <div class="test1">

        直接遍历数字：
        <ul>
            <li v-for="value in 5">{{value}}</li>
        </ul>





        遍历数组(只显示值)：
        <ul>
            <li v-for="value in arr">{{value}}</li>
        </ul>

        遍历数组(既显示索引， 又显示值)：
        <ul>
            <!-- 注意：在vue2.x里面，括号里对应是value-key -->
            <li v-for="(v, k) in arr">{{k}} - {{v}}</li>
        </ul>





        遍历对象(只显示属性值)：
        <ul>
            <li v-for="value in user">{{value}}</li>
        </ul>

        遍历对象(既显示属性名， 又显示属性值)：
        <ul>
            <li v-for="(v, k) in user">{{k}} - {{v}}</li>
        </ul>

        遍历对象(既显示属性名， 又显示属性值，还显示索引)：
        <ul>
            <li v-for="(v, k, index) in user">索引{{index}}对应的key-value是: {{k}} - {{v}}</li>
        </ul>



        遍历对象数组(直接显示对象)：
        <ul>
            <li v-for="stu in students">{{stu}}</li>
        </ul>

        遍历对象数组(直接显示属性值)：
        <ul>
            <li v-for="stu in students">{{stu.no}}、{{stu.name}}、{{stu.age}} </li>
        </ul>

        遍历对象数组(既显示key， 又显示对象)：
        <ul>
            <li v-for="(stu, k) in students">{{k}} = {{stu}} </li>
        </ul>





        使用:key提高效率：
        <ul>
            <li v-for="(v, k) in user" :key="k">{{k}} = {{v}}</li>
        </ul>

    </div>
    <hr />

    <!-- ************************************ v-on ************************************ -->
    <h3>v-on测试：</h3>

    <div class="test2">
        <button v-on:click="show()">点我</button>

        <!-- 若方法无参，则可以省略括号 -->
        <button v-on:click="show">点我</button>

        <!-- v-on:可简写为@ -->
        <button @click="show">点我</button>


        <br />
        <button @click="add">添加元素</button> 当前数组:{{arr}}
    </div>
    <hr />

    <!-- ************************************ v-show/v-if ************************************ -->
    <h3>v-show/v-if测试：</h3>

    <div class="test3">
        <!-- 
            可以将具体逻辑写在方法里，然后调用方法，也可以直接将逻辑写在这里，进行触发
        -->
        <button @click="flag = !flag">点击</button>

        <div v-show="flag" style="width: 100px; height: 100px; background-color: green;">v-show测试</div>
        <br />
        <div v-if="flag" style="width: 100px; height: 100px; background-color: blue;">v-if测试</div>
    </div>
    <hr />
</body>

</html>

^_^ 如有不当之处，欢迎指正

^_^ 学习整理自
51CTO课程《Vue.js 2.0之全家桶系列视频课程》讲师汤小洋

^_^ 参考链接
Vue.js中文官网

^_^ 本文已经被收录进《程序员成长笔记(六)》，笔者JustryDeng

justry_deng

关注

2
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
vue常用指令

声明一：这里列出的只是一些常用的指令，更多指令、更多细节可参考vue中文官网。声明二：本文主要学习并整理自51CTO课程《Vue.js 2.0之全家桶系列视频课程》，讲师汤小洋，跳转链接见文末。vue常用指令：v-model：双向数据绑定(即：将vue实例的数据属性值与html元素的值进行绑定，一起发生变化)，一般用于表单元素。示例：html中是这样：js中是这样的：效果...
复制链接

扫一扫

专栏目录