欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

三,vue的基础语法之插值操作

程序员文章站 2022-06-22 20:33:19
前面通过简单的案例,了解了vue的基本能使用,现在我开始记录一些关于Vue的基础语法,以便于后来在创建Vue的项目的时候,对于Vue有一个更加深刻的理解。这个章节介绍插值操作,像前面案例中{{message}}就是一个最基础的文本插值插值操作主要是包括Mustache语法,v-once,v-text, v-pre, v-html, v-clock等指令的使用一,Mustache语法数据绑定中,最常见的形式就是使用‘Mustache’语法(双大括号)的文本插值{{mess...

前面通过简单的案例,了解了vue的基本能使用,现在我开始记录一些关于Vue的基础语法,以便于后来在创建Vue的项目的时候,对于Vue有一个更加深刻的理解。

这个章节介绍插值操作,像前面案例中{{message}}就是一个最基础的文本插值

插值操作主要是包括Mustache语法,v-once,v-text, v-pre, v-html, v-clock等指令的使用

一,Mustache语法

  • 数据绑定中,最常见的形式就是使用‘Mustache’语法(双大括号)的文本插值
<span>{{message}}</span>

Mustache标签将会被替代成data()中的message值,无论何时,绑定的数据对象中的message发生改变,插值处的内容也会发生相应的改变。
随之Mustache语法格式也会做一些简单的拼接,运算。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>

<body>
<div id="app">
  <p>{{lastName}} {{firstName}}</p>
  <p>{{lastName+' '+firstName}}</p>
  <p>{{count*2}}</p>
</div>

<script src="../js/vue.js"></script>
<script type="text/javascript">
  var app= new Vue({
          el: "#app",
          data: {
              firstName: "James",
              lastName: "LeBron",
              count: 100
          }
      })
</script>

</body>
</html>

二,v-once指令的使用

  • 当然如果你只想插值处的内容发生一次改变,这个时候就可以使用v-once指令。
<span v-once>{{message}}</span>

三,v-html指令的使用

  • 当你在项目中,想要使用一些例如超链接的时候,Mustache语法会将这些链接解释成文本语言,这个时候,就可以使用v-html指令来输出真正的html代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    {{message}}
    <p v-html="href"></p>
</div>

<script src="../js/vue.js"></script>
<script type="text/javascript">
    var app= new Vue({
            el: "#app",
            data: {
                message: "hello vue",
                href: '<a href="http://www.baidu.com">百度一下</a>'
            }
        })
</script>

</body>
</html>

四,v-text指令的使用

  • 如果你不想使用Mustache语法的时候,你可以使用v-text来代替{{}} 但是通常v-text接收String类型的数据
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    {{message}}
    <p v-text="message"></p>
</div>

<script src="../js/vue.js"></script>
<script type="text/javascript">
    var app= new Vue({
            el: "#app",
            data: {
                message: "hello vue"
            }
        })
</script>

</body>
</html>

五,v-pre指令的使用

  • 当你使用Mustache语法的时候,想要显示的是原本的Mustache的内容,这个时候你就可以使用v-pre指令
  • v-pre会跳过这个元素和子元素的编译过程,直接显示原本的Mustache的内容
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    {{message}}
    <p v-pre>{{message}}</p>
</div>

<script src="../js/vue.js"></script>
<script type="text/javascript">
    var app= new Vue({
            el: "#app",
            data: {
                message: "hello vue"
            }
        })
</script>

</body>
</html>

六,v-clock指令的使用

  • 在某些时候,由于数据的延迟,缓存等原因,数据会先显示原本的内容,当使用v-clock指令的时候,会隐去此时的显示。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    [v-clock]{
        display: none;
    }
</style>
<body>
<div id="app">
    {{message}}
    <p v-clock>{{message}}</p>
</div>

<script src="../js/vue.js"></script>
<script type="text/javascript">


        setTimeout(function(){
            var app= new Vue({
                el: "#app",
                data: {
                    message: "hello vue"
                }
            })
    },1000)

</script>

</body>
</html>

简单记录了基础语法中的插值操作,下一章节将会介绍基础语法中的动态绑定属性

本文地址:https://blog.csdn.net/weixin_44731169/article/details/107304113