当前位置： 移动技术网 > IT编程>脚本编程>vue.js > 三，vue的基础语法之插值操作

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

2020年07月14日  | 移动技术网IT编程  | 我要评论

前面通过简单的案例，了解了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

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网