vue常用指令作用,vue指令及用法
Vue是一个渐进式的JavaScript框架。渐进式是指使用vue框架由浅入深，由简单到复杂。下面这篇文章主要介绍几个可以帮助你提高效率的Vue指令。有需要的朋友可以参考一下。
目录
前言v-modelv-model修饰符v-斗篷附：v-bind和v-model之间的差异摘要
前言
很多使用Vue的同学，往往是最容易被忽略的指令。由于许多刚接触Vue的学生甚至还没有开始接触VUE，所以在介绍v-clos之前，先用众所周知的v-model写一个小的dem。
v-model
相信大家对v-model并不陌生。简单来说就是双向数据绑定用来创建表单控件和构建。
首先我们搭建一个Vue的小环境，把Vue.js引入一个html页面。
给大家举个小栗子：
身体
div id=应用程序
输入类型=text v-model=messagebr
这是文本框中输入的值3354 {{message}}。
/div
/body
脚本
var app=新Vue({
埃尔： #app ，
数据：{
留言：“你好，几何冷！”,
},
})
/脚本
一个简单的例子，运行结果是毋庸置疑的！
下面让我们更直白地看双向关系。
1.我们通过在控制台中去改变model中的数据
我们可以发现，当我们改变模型中消息的值时，视图中的值也会相应地改变。
2.我们通过更改文本框中的视图值来检查模型中的更改。
我们发现，当我们通过文本框更改视图中的值时，我们的模型中的值实际上会发生变化。
总结
通过上面的例子，你对Vue的双向绑定有更深入的了解了吗？因为我们只能通过表单元素来改变View的数据，当然我们其他的表单元素也是可以的，就不一一列举了；
v-model修饰符
1..lazy
在上面的动画中，我们可以看到，只要文本框的值发生变化，v-model绑定的文本框就会更新为model的数据。很多时候，我们可能会一致地实现某个函数，但这会影响我们的性能，所以我们使用。懒惰修饰语。
当我们的文本框失去焦点时，他会帮助我们将文本框的值同步到模型。
身体
div id=应用程序
H3:我正在测试——{{message}}/h3。
输入类型=text v-model.lazy=message
/div
/body
脚本
var app=新Vue({
埃尔： #app ，
数据：{
消息： ，
},
})
/脚本
来看看效果吧。
2..number
我们以文本框为例。很多时候我们需要一些值让用户填写，这个值可能是一个数字让我们去计算。这时候很多同学就想到很多办法，比如转换，输入后判断等。但实际上v-model中有一个修改器可以帮助我们完成这个要求。
我们通过一个小栗子来看看。首先，我们要在两个文本框中分别输入一个值，然后将它们相加。
你可以看看结果。
我们可以看到这不是我们想要的结果。这是串联而不是求和，所以让我们通过添加数字修饰符来尝试一下。
身体
div id=应用程序
H3:我是Sum ——{{num1 num2}}/h3。
输入类型=text v-model.number=num1
输入类型=text v-model.number=num2
/div
/body
脚本
var app=新Vue({
埃尔： #app ，
数据：{
消息： ，
num1: ，
num2: ，
},
})
/脚本
我们再来看看结果。
3..trim
这个大家应该很熟悉，是用来去掉空格的，但是他只会去掉文本框两端的空格，中间的不会去掉。
身体
div id=应用程序
H3:我正在测试——{{message}}/h3。
输入类型=text v-model.trim=message
/div
/body
脚本
var app=新Vue({
埃尔： #app ，
数据：{
消息： ，
},
})
/脚本
看效果。
小常识：
其实这里绑定文本框的v-model只是语法糖。双向绑定通过使用value属性和输入事件来完成。当文本框的值改变时，我们触发输入事件来改变我们的绑定值。同时，我们的文本框的值也链接到message。
v-cloak
这件v形斗篷到底是做什么的？首先，让我们看看下面的代码。
身体
div id=应用程序
H3:我正在测试——{{message}}/h3。
/div
/body
脚本
var app=新Vue({
埃尔： #app ，
数据：{
留言：‘你好吗？我的心很冷，
},
})
/脚本
然后我们发现当页面被渲染时，会出现以下时刻
一瞬间。
这种现象在我们的实际开发过程中时有发生，尤其是当我们的网络状态不是很好或者后端接口响应慢的时候，我们就使用我们的v斗篷。
事实上，他的原则是显示：没有。大家应该明白了，就是在我们的数据中绑定的变量有值之前，Dom元素就被隐藏了，所以不会出现上面的问题。
附：v-bind和v-model的区别
V-bind是单向数据绑定，映射关系是模型-视图。我们不需要做额外的DOM操作，只需要做模型操作就可以实现视图的联动更新。
V-model是一种双向数据绑定，映射关系：view接收的数据传递给model，Model的数据再传递给View。将模型绑定到视图的同时，也将视图绑定到模型，这样不仅可以更新模型实现视图的自动更新，还可以通过更新视图来更新模型数据。因此，当我们用JavaScript代码更新模型时，视图会自动更新。相反，如果用户更新视图，模型的数据会自动更新。
总结
这就是这篇关于几个可以帮助你提高效率的Vue指令的文章。有关可以提高您效率的Vue指令的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。