Vue的学习之路二：指令学习_------++++++++++++++++-----------------------------CSDN博客

本文链接：https://blog.csdn.net/weixin_39020133/article/details/106281115

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

      <!-- v-bind：是 Vue中，提供的用于绑定属性的指令 -->
      <input type="button" value="按钮" v-bind:title="mytitle + '123'" />
      <!-- 注意：v-bind: 指令可以被简写为 :要绑定的属性 -->
      <!-- v-bind中，可以写合法的JS表达式  -->
      <!-- Vue中提供了v-on: 事件绑定机制 -->
      <!-- <input type="button" value="按钮" :title="mytitle + '123'" v-on:clock="alert("Hello")"/> -->

      <input
        type="button"
        value="按钮"
        :title="mytitle + '123'"
        v-on:click="show"
      />
    </div>
    <script>
      var vm = new Vue({
        el: '#app',
        data: {
          msg: '欢迎学习Vue',
          msg2: '<h1>我是一个大大的H1</h1>',
          mytitle: '这是一个自己定义的title',
        },
        methods: {
          // 这个 methods属性中定义了当前Vue实例所有可用的方法
          show: function () {
            alert('Hello')
          },
        },
      })
    </script>
  </body>