vue指令使用问题

最新推荐文章于 2024-06-15 14:41:39 发布

2401_84091544

最新推荐文章于 2024-06-15 14:41:39 发布

阅读量104

点赞数 1

分类专栏：程序员文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/2401_84091544/article/details/138873446

版权

程序员专栏收录该内容

298 篇文章 2 订阅

订阅专栏

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<!-- 指令中的循环 -->

<div id="app">

    <ul>

        <li v-for = "user in users">

            <input type="checkbox">

            {{user.id}} -- {{user.name}}

        </li>

    </ul>

</div>

<script>



    let app = new Vue({

        el:"#app",

        data:{

            users:[

                {id:1,name:"张三"},

                {id:2,name:"李四"},

                {id:3,name:"王五"}

            ]

        }

    });



</script>




**浏览器反馈**  

![在这里插入图片描述](https://img-blog.csdnimg.cn/20200416184325676.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NTX0RHRA==,size_16,color_FFFFFF,t_70)  

这是我们选中第二个框后，在控制台输入以下代码

app.users.sort((a,b)=>{

return Math.random() - .5;

})




**浏览器反馈**  

![在这里插入图片描述](https://img-blog.csdnimg.cn/20200416184756215.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NTX0RHRA==,size_16,color_FFFFFF,t_70)  

我们可以看到，虽然张三、李四、王五位置变了，但是Input框的位置并没有变化  

这是因为vue在处理的时候，先把数据传递到VDOM中，处理完成后，有变化的就重新渲染响应，没变化的就保持不变，所以这个input的位置没变。  

处理方式也比较简单，我们把这个input所在的li和张三、李四、王五做一个绑定，让他们在发生改变时重新渲染li就可以了

<input type="checkbox">

{{user.id}} -- {{user.name}}




**浏览器反馈**  

![在这里插入图片描述](https://img-blog.csdnimg.cn/20200416185351587.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NTX0RHRA==,size_16,color_FFFFFF,t_70)  

现在就解决了我们刚才所说的那个问题了



* * *



### []( )v-bind



绑定数据（表达式）到指定的属性上，<div v-bind:参数=“值/表达式”>，这里的参数就是指定的属性名称




简写就是




针对样式属性，v-bind值有一些特殊的写法  

**style**  

v-bind写法




对象写法




数组写法




* * *



### []( )数据流



数据流用来形容走向  

举例说明



1.  v-bind 单向数据绑定——数据到视图

2.  v-model 双向数据绑定——数据到视图，视图到数据



**代码示例**

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<div id="app">

    <!-- 双向绑定 -->

    <input type="text" v-model="msg">

    <div> {{msg}} </div>

    <br>



    <!-- 单向绑定 -->

    <input type="text" value="msg2">

    <div> {{msg2}} </div>

</div>



<script>

    let app = new Vue({

        el:"#app",

        data:{

            msg:"123",

            msg2:"abc"

        }

    })

</script>




这个页面实现之后，我们第一个input里的值发生改变那第一个div也会跟着变化值  

但是第二个input的值发生改变后第二个div里的值并不会发生改变  

**适用于** 表单这种交互性比较强的元素或者组件



* * *



### []( )v-on



作用：监听DOM事件，并在触发时运行一些javascript代码



**代码示例**

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

...

<div id="app">

    <div id="inx">

        <button v-on:click="counter +=1"> 数值：{{counter}} </button>

    </div>

</div>

...

<script>

    let app = new Vue({

        el:"#app",

        data:{

            counter:0

        }

    })

</script>




此时，我们每点击一次button 它里边的数值就会+1  

但是，我们在正常的情况下，事件处理逻辑远没有这么简单，所以直接把js代码写在指令中是不行的，因此v-on还可以接受一个需要调用的方法名称

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>



<div id="app">

    <div id="inx">

        <button v-on:click="counter +=1"> 数值：{{counter}} </button>

        <button v-on:dblclick="greet">Greet</button>

    </div>

</div>



<script>

   let app = new Vue({

        el:"#app",

        data:{

            counter:0

        },

        methods:{

            greet:function(){

                alert("hi");

            }

        }

    })

</script>




**浏览器反馈**  

![在这里插入图片描述](https://img-blog.csdnimg.cn/20200417113323679.jpg)  

也可以用 JavaScript 直接调用方法

app.greet() // => hi




我们还可以给函数传递参数

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>



<div id="app">

    <div id="inx">

        <button v-on:click="counter +=1"> 数值：{{counter}} </button>

        <button v-on:dblclick="greet('abc')">Greet</button>

    </div>

</div>



<script>

   let app = new Vue({

        el:"#app",

        data:{

            counter:0

        },

        methods:{

            greet:function(str){

                alert(str);

            }

        }

    })

</script>




**浏览器反馈**  

![在这里插入图片描述](https://img-blog.csdnimg.cn/20200417114033458.jpg)  

如果是event事件的话，可以用$event把他传入方法

Greet




* * *



### []( )v-cloak



不需要表达式



用法：这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 \[v-cloak\] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。



示例：

#  最后

**自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。**

**深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。**

**因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。**

![img](https://img-blog.csdnimg.cn/img_convert/67f345335fc2d910fce681a340d7f1c1.jpeg)

![](https://img-blog.csdnimg.cn/img_convert/1382d47056b741a5c390f5b9c0a5f09e.png)

![](https://img-blog.csdnimg.cn/img_convert/2e3d709c97aeece763c17df4635ae33c.png)

**既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！**

[**如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！**](https://bbs.csdn.net/topics/618191877)

**由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！**
小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。**

**深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。**

**因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。**

[外链图片转存中...(img-zMckuObE-1715697664966)]

[外链图片转存中...(img-6C9q3Jgz-1715697664966)]

[外链图片转存中...(img-dmydtRJt-1715697664966)]

**既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！**

[**如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！**](https://bbs.csdn.net/topics/618191877)

**由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！**