大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。
Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺
前言
Vue
官网一共有提供了14个指令,分别如下
v-text
v-html
v-show
v-if
☆☆☆v-else
☆☆☆v-else-if
☆☆☆v-for
☆☆☆v-on
☆☆☆v-bind
☆☆☆v-model
☆☆☆v-slot
v-pre
v-cloak
v-once
注意:☆代表重要常用的
v-text(v-指令名=”变量”,变量需要data提供数值)
<p v-text="info"></p>
<p v-text="'abc' + info"></p>
<script>
new Vue({
el: '#app',
data: {
info: 'a'
}
})
</script>
v-text="info"
渲染页面结果为a
,因为info是个变量,就直接展示变量所对应的值
v-text="'abc' + info"
渲染页面结果为abca
,当你想用字符串和变量拼接时,可以在字符串上增加单引号,这样程序就认为你这个是个字符串,字符串+info变量最后的结果就是字符串abca
v-html(可以解析html语法)
有时候我们的Vue
对象中,或者是后台返回给我们一个段原生的html
代码,我们需要渲染出来,那么如果直接通过{{}}
渲染,会把这个html
代码当做字符串。这时候我们就可以通过v-html
指令来实现。示例代码如下:
<p v-html="'<b>ok</b>'"></p>
<p v-text="'<b>ok</b>'"></p>
以上两行代码除了用的vue
指令不一样以外,没有任何区别,让我们先展示结果吧
ok
<b>ok</b>
v-html
可以解析html
的标签,而text
传的是字符串,不用管字符串里面具体的内容是什么,统一都直接展示出原来的字符
v-once(只渲染元素和组件一次)
只渲染元素和组件一次。随后的重新渲染,元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。
<input type="text" v-model="msg" v-once> // 只渲染一次
<p v-once>{{ msg }}</p>
v-cloak(防止页面闪烁)
这个指令保持在元素上直到关联实例结束编译。和 CSS
规则如 [v-cloak] { display: none }
一起用时,这个指令可以隐藏未编译的Mustache
标签直到实例准备完毕。
v-pre(了解)
跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache
标签。跳过大量没有指令的节点会加快编译。
<div id="app">
<span v-pre>{{message}}</span>
</div>
<script>
const app = new Vue({
el: "#app",
data: {
message: "hello"
}
})
</script>
正常来讲我们会通过编译最后在网页上显示hello
,但是使用了v-pre
指令后,就会跳过编译,直接展示原始的标签内容也就是{{message}}
v-bind
绑定属性
如果我们想要在html
元素的属性上绑定我们Vue
对象中的变量,那么需要通过v-bind
来实现。
<div id="app">
<a v-bind:href="baidu">百度</a>
<img :src="imgSrc" alt="">
</div>
<script>
const app = new Vue({
el: "#app",
data: {
message: "hello",
baidu: "https://www.baidu.com",
imgSrc: "https://www.baidu.com/img/pc_a91909218349e60ed8f6f6f226c30e5f.gif"
}
})
</script>
我们只需要在绑定的属性前面添加v-bind:
即可,当然我们也可以使用缩写:
,直接写冒号即可
绑定Class
绑定Class有2种方式,一种通过数组绑定,一种通过对象绑定
1.通过对象的方式来实现:
<div id="app">
<p v-bind:class="{color:isColor}">你好,世界</p>
</div>
<script>
const app = new Vue({
el: "#app",
data: {
isColor: true
}
})
</script>
<style>
.color{
color: blue;
}
</style>
对象的方式即像上面的代码{color:isColor}
,key
是color
,value
是isColor
,当value
的值为true
则渲染,为false
则不渲染
2.通过数组的方式来实现:
<div id="app">
<p :class="[classname1, classname2]">{{message}}</p>
</div>
<script>
const app = new Vue({
el: "#app",
data: {
message: "hello",
classname1: "pcolor",
classname2: "fontSize"
},
})
</script>
<style>
.pcolor{
color: red;
}
.fontSize{
font-size: 30px;
}
</style>
当class
需要绑定2个属性时,可以使用数组的方式
绑定Style
绑定Style
也有2种方式,一种通过数组绑定,一种通过对象绑定
1.通过对象的方式来实现
<div id="app">
<p :style="{fontSize:'100px'}">{{message}}</p>
</div>
<script>
const app = new Vue({
el: "#app",
data: {
message: "hello"
}
})
</script>
注意:对象绑定的时候只能驼峰命名法fontSize
,不能使用font-size
否则会报错,100px加单引号就是字符串,不加则是变量,需要在data
中添加变量
2.通过数组的方式来实现
<div id="app">
<p :style="[style1, style2]">{{message}}</p>
</div>
<script>
const app = new Vue({
el: "#app",
data: {
message: "hello",
style1: {background:'red'},
style2: {fontSize:'30px'},
}
})
</script>
发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/165749.html原文链接:https://javaforall.cn
【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛
【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...