mustache展示结果

2.v-text

特点: 和原生js的innerText属性类似,作用和mustache语法一样,但是没有mustache语法那么灵活,因为它只能写一个固定的值,并不能像mustache语法一样能写表达式,对一些字符串进行拼接操作等等

注意: 如果标签里有数据的时候,v-text会先替换原来的数据,再展示变量的数据
代码如下:

<div id="app">
  <h2 v-text="msg">我是张三</h2>
</div>

<script>
  //创建Vue实例,得到 ViewModel
  const vue = new Vue({
    el: "#app",
    data: {
      msg: '你好啊'
    },
    methods: {}
  });
</script>

v-text图示

结果并没有展示张三,而是替换了原先的内容

3.v-html

特点:和原生js的innerHTML属性类似,也能在界面中展示数据

注意: 1.如果标签里有数据的时候,v-html会先替换原来的数据,再展示变量的数据 2.与v-text不同的是,v-html可以解析html标签

v-html图示

4.v-once

特点:具有v-once的标签中的数据只在界面上渲染一次

注意:当我们去修改data里面的值的时候,界面的展示数据不会发生(改变)响应式
代码如下:

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

<script>
  //创建Vue实例,得到 ViewModel
  const vue = new Vue({
    el: "#app",
    data: {
      msg: '你好啊'
    },
    methods: {}
  });
</script>

v-once图示

注意: 修改了msg的数值时,被v-once修饰的标签的数据没有发生改变

5.v-pre

特点:标签具有v-pre,界面会原封不动地展示标签内的内容,不会解析mustache语法等

代码如下:

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

<script>
  //创建Vue实例,得到 ViewModel
  const vue = new Vue({
    el: "#app",
    data: {
      msg: '你好啊'
    },
    methods: {}
  });
</script>

v-pre图示

6.v-cloak

特点:在界面和数据还没完全渲染的时候,它不会展示,当界面和数据渲染完成,它才显示

注意:要使用这个指令的时候需要和css的代码 [v-cloak]{ display: none } 一起配合使用

<style>
    [v-cloak] {
      display: none;
    }
  </style>
  <script src="../js/vue.js"></script>
</head>

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

<script>
  //创建Vue实例,得到 ViewModel
  setTimeout(function(){
    const vue = new Vue({
      el: "#app",
      data: {
        msg: '你好啊',
      },
      methods: {}
    });
  },1000)
</script>

用一个一秒的定时器来检验一下,一秒后显示

v-cloak