vue 第二次学习笔记 v-once v-html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
    <h2>{{message}}</h2>
    <h2 v-once>{{message}}</h2>
</div>
<script src="../vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: 'hello'
    }
  })
</script>
</body>
</html>

　　v-once 表示只执行一次数据的变换。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
    {{message}}
  <h2 v-html="url"></h2>
</div>
<script src="../vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: 'hello',
      url: '<a href="http://www.baidu.com">百度一下</a>'
    }
  })
</script>
</body>
</html>

　　v-html主要作用是用来讲字符串变为html语法

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
    {{message}}
  <h2>{{message}}</h2>
  <h1 v-pre>{{message}}</h1>
</div>
<script src="../vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: 'hello',
    }
  })
</script>
</body>
</html>

　　v-pre用来原封不动的显示一个内容。例如显示带有mstache语法。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4   <meta charset="UTF-8">
 5   <title>Title</title>
 6   <style>
 7     [v-cloak]{
 8       display: none;
 9     }
10   </style>
11 </head>
12 <body>
13 <div id="app" v-cloak>
14     {{message}}
15 </div>
16 <script src="../vue.js"></script>
17 <script>
18   setTimeout(function () {
19     const app = new Vue({
20     el: '#app',
21     data: {
22       message: 'hello'
23     }
24   })
25   },1000)
26 </script>
27 </body>
28 </html>

v-cloak 用来显示，该元素是否会带有v-cloak属性。当还没有vue代码还没有加载成功的时候，该标签就会带有v-cloak属性。当vue加载好了。