Vue指令的学习

2022-04-15 231
目录
  • 一、v-text(v-指令名=”变量”,变量需要data提供数值)
  • 二、v-html(可以解析html语法)
  • 三、v-once(只渲染元素和组件一次)
  • 四、v-cloak(防止页面闪烁)
  • 五、v-pre(了解)
  • 六、v-bind
    • 6.1 绑定属性
    • 6.2 绑定Class
    • 6.3 绑定Style

前言:

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

6.1 绑定属性

如果我们想要在html元素的属性上绑定我们Vue对象中的变量,那么需要通过v-bind来实现。

<div id="app">
  <a v-bind:href="baidu" rel="external nofollow"  rel="external nofollow" >百度</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:即可,当然我们也可以使用缩写:,直接写冒号即可

6.2 绑定Class

绑定Class有2种方式,一种通过数组绑定,一种通过对象绑定

通过对象的方式来实现:

<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} keycolorvalueisColor,当value的值为true则渲染,为false则不渲染

通过数组的方式来实现:

<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个属性时,可以使用数组的方式

6.3 绑定Style

绑定Style也有2种方式,一种通过数组绑定,一种通过对象绑定

通过对象的方式来实现:

<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中添加变量

通过数组的方式来实现:

<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>

到此这篇关于Vue指令的学习的文章就介绍到这了,更多相关Vue指令内容请搜索NICE源码以前的文章或继续浏览下面的相关文章希望大家以后多多支持NICE源码!

免责声明:
1、本网站所有发布的源码、软件和资料均为收集各大资源网站整理而来;仅限用于学习和研究目的,您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。 不得使用于非法商业用途,不得违反国家法律。否则后果自负!

2、本站信息来自网络,版权争议与本站无关。一切关于该资源商业行为与www.niceym.com无关。
如果您喜欢该程序,请支持正版源码、软件,购买注册,得到更好的正版服务。
如有侵犯你版权的,请邮件与我们联系处理(邮箱:skknet@qq.com),本站将立即改正。

NICE源码网 JavaScript Vue指令的学习 https://www.niceym.com/18550.html

常见问题
  • 请您联系网站客服QQ,79024519,将第一时间处理您的问题,咨询请提供会员ID以及资源编号!
查看详情
  • 本站发布的压缩包如遇需要解压密码请尝试本站域名:www.niceym.com (通常为小写,如不对可试试大写) 或者:niceym.com 如遇无法解压,请您提供资源编号发送给本站客服!
查看详情