02-Vue的插值操作

Mustache语法

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
  </head>

  <body>
    <div id="app">
      {{message}}，测试成功
      <h3>{{firstName + lastName}}</h3>
      <h3>{{firstName + ' ' + lastName}}</h3>
      <h3>{{firstName}} {{lastName}}</h3>
      <h3>{{counter * 2}}</h3>
    </div>

    <script src="../js/vue.js"></script>
    <script>
      const app = new Vue({
        el: "#app",
        data: {
          message: "测试Mustache语法！",
          firstName: "kobe",
          lastName: "bryant",
          counter: 100
        }
      })
    </script>
  </body>
</html>

1.Mustache语法是什么

{{}}就是 Mustache 的标示符，花括号里的 data 表示键名，这句的作用是直接输出与键名匹配的键值。

2.注意点

Mustache不仅仅可以直接写变量，也可以写简单的表达式
Mustache后面可以直接拼接字符串

v-once的使用

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
  </head>

  <body>
    <div id="app">
      <h2>{{message}}</h2>
      <h3 v-once>{{message}}</h3>
    </div>

    <script src="../js/vue.js"></script>
    <script>
      const app = new Vue({
        el: "#app",
        data: {
          message: "你好"
        }
      })
      app.message = "你今天真好看"
    </script>
  </body>
</html>

1.v-once是什么

v-onse修饰的变量在初次定义之后无法被修改，上方代码运行可以发现message的内容改变，h2中的内容随之改变，但是h3的内容并没有随之改变。

v-html的使用

<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>

<body>
  <div id="app">
    <h2>{{url}}</h2>
    <!-- v-html可以自动解析html语言，然后渲染到 -->
    <div v-html="url"></div>
  </div>

  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        message: '你好',
        url: '<a href="http://www.baibu.com">百度一下</a>'
      }
    });
  </script>
</body>
</html>

1.v-html是什么

例：当你的朋友给你发一段代码，比如是一个a标签，你想放在这个页面中，所以你新建一个变量在此处赋值，但是vue会将它看成一个字符串，浏览器会显示
<a href=“http://www.baibu.com”>百度一下</a>
要想让vue自动帮你解析这一段代码，加上v-html之后，vue会帮你把它自动渲染到浏览器上，变成这个样子百度一下。

v-text的使用

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
  </head>

  <body>
    <div id="app">
      <h2>{{message}}，张三</h2>
      <div v-text="message">，张三</div>
    </div>

    <script src="../js/vue.js"></script>
    <script>
      const app = new Vue({
        el: "#app",
        data: {
          message: "你好"
        }
      })
    </script>
  </body>
</html>

1.v-text是什么

将变量中的内容原封不动的渲染到浏览器上，其中包括html标签，但是如果该标签中还有别的内容，结果是覆盖而不是拼接，比如

<span v-text=“message”>张三</span>

则结果为变量message的内容，而不会出现张三。

v-pre的使用

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
  </head>

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

    <script src="../js/vue.js"></script>
    <script>
      const app = new Vue({
        el: "#app",
        data: {
          message: "你好"
        }
      })
    </script>
  </body>
</html>

1. v-pre是什么

如果你就想在网页上显示{{message}}这一串内容，即默认不解析Mustache语法，则使用v-pre。

v-cloak的使用

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style>
      [v-cloak] {
        display: none;
      }
    </style>
  </head>

  <body>
    <div id="app" v-cloak>
      {{message}}
    </div>

    <script src="../js/vue.js"></script>
    <script>
      setTimeout(() => {
        const app = new Vue({
          el: "#app",
          data: {
            message: "你好"
          }
        })
      }, 1000)
    </script>
  </body>
</html>