VUE.JS中的插值表达式、v-cloak、v-text、v-html、v-bind:、v-on:

插值表达式

{{ x }}，类似这样子的就叫插值表达式

v-cloak

使用v-cloak 能够解决插值表达式闪烁的问题，但是要配合style中的display：none、CSS的属性选择器来使用

v-text

默认v-text是没有闪烁问题的，v-text会覆盖元素中原本的内容，但是插值表达式只会替换自己的这个占位符，不会把整个元素的内容清空

v-html

v-html命令可以使带有标签的字符串，其中的标签起到渲染的作用

v-bind:

v-bind: 是Vue中，提供的用于绑定属性的指令
注意：v-bind: 指令可以被简写为： :要绑定的属性例如： :title
v-bind: 中，可以写合法的JS表达式
v-bind: 的简写为 :

v-on:

Vue中提供了v-on: 事件绑定机制
v-on: 的简写为 @
例如： v-on:click可以简写为 @click

附上相关代码：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="./lib/vue.js"></script>
  <style>
    [v-cloak] {
      display: none;
    }
  </style>
</head>

<body>
  <div id="app">
    <!-- 使用v-cloak 能够解决 插值表达式闪烁的问题 -->
    <p v-cloak>{{msg}}</p>
    <!-- 默认v-text是没有闪烁问题的 -->
    <!-- v-text会覆盖元素中原本的内容，但是插值表达式只会替换自己的这个占位符，不会把整个元素的内容清空 -->
    <h4 v-text="msg"></h4>
    <div>{{msg2}}</div>
    <div v-text="msg2"></div>
    <div v-html="msg2"></div>

    <!-- v-bind: 是Vue中，提供的用于绑定属性的指令 -->
    <!-- 注意：v-bind:  指令可以被简写为：  :要绑定的属性  例如： :title -->
    <!-- v-bind: 中，可以写合法的JS表达式 -->

    <!-- Vue中提供了v-on:  事件绑定机制 -->
    <!-- <input type="button" value="按钮" v-bind:title="mytitle+'123'" v-on:click="alert('hello')"> -->
    <input type="button" value="按钮" v-on:click="show">
  </div>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        msg: '123',
        msg2: '<h1>哈哈，我是一个大大的H1，我大，我骄傲</h1>',
        mytitle: '这是一个自己定义的title'
      },
      methods: { //这个methods属性中定义了当前Vue实例所有可用的方法
        show: function () {
          alert('hello')
        }
      }
    })
  </script>
</body>

</html>

VUE.JS中的插值表达式、v-cloak、v-text、v-html、v-bind:、v-on:

附上相关代码：

推荐阅读更多精彩内容