(一) v-text:設置標籤的文本內容textContent
我們除了可以用兩個大括號{{}}將data值綁定之外，也可用使用v-txet

<div id="app">
        <p v-text="message"></p><!—v-text要使用對應值需要依依對應-->
        <p v-text="info"></p>
        <p>{{message}}</p>  <!--  => 替換部分內容使用 {{}} -->
        <!--與<p v-text="message"></p> 內容一致(因為沒有添加其他內容)，
            但若標籤內其他內容的話v-text的結果會無視標籤內原本的內容-->
        <!-- 支持寫表達式-->
    </div>
    <script>
        var app=new Vue({
            el:"#app",
            data:{
                message:"Vue 應用 !!",
                info:"練習中...."
            }
        })
    </script>

<div id="app">
        <p v-text="message">第二天…</p>
   	<!-- 只會出現Vue 應用 !! -->
        <p>{{message}} 第二天…</p>
        <!--出現Vue 應用 !!第二天… -->
 </div>

(二)v-html:設置元素的innerHTML，解析HTML結構(html結構會被解析為標籤)v.s.
v-txet 只會解析文本

  <div id="app2">
        <p v-text="txt"></p> <!-- 顯示的結果是(字串) <h1> HELLO <h1>-->
        <p v-html="txt"></p> <!-- 顯示的結果是(h1 大標題) HELLO -->
    </div>
    <script>
        var app2=new Vue({
            el:"#app2",
            data:{
                txt:"<h1> HELLO <h1>"
            }
        })
    </script>

需要注意的是，使用 v-html 可能會帶來潛在的安全風險，因為它可以插入任意的HTML和腳本代碼
(三)v-on:元素綁定事件(v-on:[事件名稱]="運算式" 或 @事件名稱="運算式" )
->ex:<input type="button" value="v-on事件綁定" v-on:click="doIt">，在methods屬性中宣告，設置doIt:function()…
-當滑鼠指針穿過元素時，會發生 mouseenter 事件
-dblclick是雙擊事件

1. 事件名稱不需要寫on
2. 在methods屬性中宣告，透過v-on綁定對應事件
3. 方法內部通過this關鍵字可以訪問定義在data中的數據

<div id="app3">
        <input type="button" value="v-on按鈕" v-on:click="doIt">
        <!—點擊按鈕會彈出”成功”  -->
        <input type="button" value="v-on按鈕2" @click="doIt">
        <!— 可以使用@簡寫，結果同為點擊按鈕會彈出”成功”  -->
        <input type="button" value="雙擊事件" @dblclick="doIt">
        <!— 可以使用@簡寫，結果同為雙及按鈕會彈出”成功”  -->   
        <p>Count: {{ count }}</p>
        <button @click="plus">Click</button>
        <!— 點及Click 會執行plus的function，data中的count 會增加 -->
        <p @mouseenter ="add">{{message}}</p>
        <!—當鼠標穿過元素時，會在 message(Vue 應用 ~)後面加上練習中 ~ -->
    </div>
 <script>
        var app3=new Vue({
            el:"#app3",
            data:{
                count:0,
                message:"Vue 應用 ~"
            },
            methods:{
               doIt:function(){
                alert("成功");
               },
               plus(){
                this.count++;
               },
               add:function(){
                this.message+=' 練習中 ~'
               }
            }
        })
    </script>

參考資料:
1.https://book.vue.tw/CH1/1-1-introduction.html
2.https://www.bilibili.com/video/BV1HE411e7vY/?p=7&share_source=copy_web&vd_source=85a8c5bb37dc77d30860d2b3537de967