SOURCE

/*
方式1
var app = new Vue({
    el: '#app',

    data() {
        return {
            msg: 'Hello World!<h1>bbbbxxx</h1>',
            flag: true
        }
    },
    methods: {
        display: function () {
            this.flag = !this.flag;
        }
    }
});
 */

<script type="importmap">
	{ "imports": { "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js" } }
</script>
<!-- https://blog.csdn.net/abraham_ly/article/details/115050694 -->
<div id="app">
	<!-- 插值表达式,直接引用data中的属性 -->
	<h1>h1-{{ msg }}</h1>
	<!-- 
      指令（Directives）
      指令是一个带有v-前缀的特殊属性，那么指令的本质就是自定义属性;
      指令的格式，以v-开头
      指令可带参数，也可不带参数，比如v-cloak指令就属于无参数的指令
      -->
	<!-- 双向数据绑定 改变文本框内容时，data中的对应的值也会改变 -->
	<input v-model="msg"><br/>
  <!--  -->
  <!-- 
      v-text 更新元素的 文本内容。如果要更新部分的文本内容，则需要使用 {{ Mustache }} 插值表达式。
      1.相比插值表达式更加简洁;
      2.指令用于将数据填充到标签中，作用与差值表达式类似，但是其直接没有闪动;
      3.如果数据中有html标签则会将html标签一并输出;
      4.此处为单向绑定，数据对象上的值改变，差值会改变，但是差值改变并不会影响数据对象的改变;
   -->
  <span v-text="msg"></span><br/>
  ----------------------------------------<br/>
  <!--
      v-html
      更新元素的 innerHTML。注意：内容按普通 HTML 插入 - 不会作为 Vue 模板进行编译，并且可识别HTML标签
      注意事项：
      1.存在安全问题，一般只在可信任内容上使用v-html。永远不要在用户提交的内容上使用;
      2.和v-text区别在于v-text输出的是纯文本内容，而v-html会对内容进行html解析然后输出;
      3.本网站内部数据可以使用，来自第三方的数据不可以用;
  -->
  <span v-html="msg"></span>
  <br/>2222222222222222222222222<br/>
  <!--
      v-pre 填充原始信息
      跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译。
      注意：
      1.显示原始信息，跳过vue编译过程（分析编译过程）；
      2.一些静态的内容不需要编译加这个指令可以加快渲染效果；
      -->
  <span v-pre>{{msg}}</span>


   <!-- v-show的值可以是boolean值，为true就显示，反之则隐藏 -->
   <p v-show="flag">xxxx:{{msg}}</p>
   <!-- 
       v-on 事件绑定
       方法处理器
       v-on:click="doThis" 缩写为@click="doThis"
       事件
       v-on:[event]="doThis" 所i写为@[event]="doThis" 
       -->
   <br/><span @click="display">点我控制上一个段落的显隐</span>
</div>
<!-- 方式2-->
<script type="module">
  import { createApp } from 'vue'

  createApp({
    data() {
        return {
            msg: 'Hello World!<h1>bbbbxxx</h1>',
            flag: true
        }
    },
    methods: {
        display: function () {
            this.flag = !this.flag;
        }
    }
  }).mount('#app')
</script>