Vue学习笔记之插值与mustache语法

v-once 不会根据数据改变而改变，比如在控制台更改数据的话，页面不会随之变换。

<div id = "app">
    <h2>{{message}}</h2>
    <h2 v-once>{{message}}</h2>
</div>
<script src="../js/vue.min.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好'
    }
  })
</script>

v-html可以解析html元素，v-text可以识别message文本等，但会覆盖桌面值。

<div id = "app">
    <h2>{{message}}</h2>
    <h2 v-text="message">笨蛋</h2>
</div>
<script src="../js/vue.min.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好'
    }
  })

且在控制台改变message值两个位置都会改变

 v-pre：用于保留mustache语法最初的大括号，使原本格式显示出来

<div id = "app">
    <h2>{{message}}</h2>
    <h2 v-pre>{{message}}</h2>
</div>
<script src="../js/vue.min.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好'
    }
  })
</script>

 v-cloak:在vue解析之前，div中会含有，解析之后会自动被Vue删除，可用来防止模板不渲染而出现展示源代码的情况。这样根据这个元素属性的有无来决定是否展示。

标签：el,Vue,const,插值,app,new,message,mustache
来源： https://blog.csdn.net/mysteper/article/details/121437805