Vue的指令,vue中常见指令及作用
本文主要介绍Vue指令。Vue官网提供的说明有14条。下面详细解释一下每个指令的细节。有需要的朋友可以参考一下。
目录
I、v-text(v-指令名= variable ，变量需要数据提供数值)II、v-html (html语法可以解析)III、v-once(元素和组件只渲染一次)IV、v-cover(页面闪烁预防)v-pre(理解)
前言：
虚拟文本
虚拟html
虚拟展示
控制显示
v-否则
如果，否则
迭代
绑定事件
v型装订
v型车
v形槽
v-pre
v形斗篷
v-once
Vue官网一共有提供了14个指令，分别如下：:对于重要的和常用的
一、v-text（v-指令名="变量"，变量需要data提供数值）
p v-text=info/p
p v-text=abc 信息/p
脚本
新Vue({
埃尔： #app ，
数据：{
信息：“a”
}
})
/脚本
V-text=info 渲染页面的结果是一个，因为info是一个变量，所以直接显示变量对应的值。
V-text=abc info 用abca呈现页面。当你想拼接字符串和变量时，你可以给字符串加上单引号，这样程序就会认为你是一个字符串。string info变量的最终结果是字符串abca。
二、v-html（可以解析html语法）
有时候在我们的Vue对象中，或者后台返回给我们一段原生html代码，我们需要渲染。如果我们直接通过{{}}呈现，我们会把这段html代码当作一个字符串。这时候我们可以通过v-html指令来实现。
注意
p v-html= 确定/b/p
p v-text= 确定/b/p
上面两行代码除了使用了不同的vue指令之外，没有任何区别。先展示结果吧。
好的
确定/b
V-html可以解析html标签，而文本是字符串。不考虑字符串中的具体内容，直接显示原字符。
三、v-once（只渲染元素和组件一次）
仅渲染元素和组件一次。随后重新呈现时，元素/组件及其所有子节点将被视为静态内容并被跳过。这可用于优化更新性能。
input= text v-model= msg v-once//仅渲染一次
p v一次{{ msg }}/p
四、v-cloak（防止页面闪烁）
此指令将保留在元素上，直到关联的实例完成编译。当与CSS规则如[v-coat]{ display:none }一起使用时，该指令可以隐藏未编译的Mustache标记，直到实例准备就绪。
五、v-pre（了解）
跳过此元素及其子元素的编译过程。可以用来显示原来的小胡子标签。在没有指令的情况下跳过大量节点会加快编译速度。
div id=应用程序
span v-pre{{message}}/span
/div
脚本
const app=new Vue({
埃尔： #app ，
数据：{
消息：“你好”
}
})
/脚本
正常情况下，我们会在编译后在网页上显示hello，但是使用v-pre指令后，我们会跳过编译，直接显示原来的标签内容，也就是{{message}}。
六、v-bind
6.1 绑定属性
如果我们想将Vue对象中的变量绑定到html元素的属性上，那么我们需要通过v-bind来实现。
div id=应用程序
a-bind:href= Baidu rel= external no follow Baidu/a
img :src=imgSrc alt=
/div
脚本
const app=new Vue({
埃尔： #app ，
数据：{
消息：“你好”，
百度： https://www.baidu.com ，
img src: https://www . Baidu . com/img/PC _ a 91909218349 e 60 ed 8 f 6 F6 f 226 c 30 e 5 f . gif
}
})
/脚本
我们只需要在绑定的属性前面加上v-bind:当然也可以用缩写：并且写个冒号就可以了。
6.2 绑定Class
类可以通过两种方式绑定，一种是通过数组，另一种是通过对象。
示例代码如下：
div id=应用程序
P-bind: class= {color: iscolor} 你好，世界/p
/div
脚本
const app=new Vue({
埃尔： #app ，
数据：{
isColor:没错
}
})
/脚本
风格。颜色{
颜色：蓝色；
}
/风格
对象就像上面的代码{color:isColor}，键是color，值是isColor。当value的值为true时，将被渲染；如果为false，则不会进行渲染。
通过对象的方式来实现：
div id=应用程序
p :class=[classname1，class name 2] { {邮件}}/p
/div
脚本
const app=new Vue({
埃尔： #app ，
数据：{
消息：“你好”，
classname1: pcolor ，
class name 2:“font size”
},
})
/脚本
风格。p颜色{
颜色：红色；
}。fontSize{
字体大小：30px
}
/风格
当类需要绑定两个属性时，可以使用数组。
6.3 绑定Style
绑定Style也有两种方式，一种是按数组，一种是按对象。
通过数组的方式来实现：
div id=应用程序
p:style= { font size: 100px } { { message } }/p
/div
脚本
const app=new Vue({
埃尔： #app ，
数据：{
消息：“你好”
}
})
/脚本
通过对象的方式来实现：绑定对象时，只能用驼峰命名法fontSize，不能用font-size，否则报错。100px加单引号是一个字符串，但是没有什么是变量，所以你需要给数据添加变量。
注意：
div id=应用程序
p :style=[style1，style2]{{message}}/p
/div
脚本
const app=new Vue({
埃尔： #app ，
数据：{
消息：“你好”，
style1: {background:red}，
style2: {fontSize:30px}，
}
})
/脚本
这就是这篇关于Vue教学研究的文章。有关Vue指令的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望你以后能支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。