本文為博主原創，未經允許不得轉載：
第一部分： v-on:click 命令講解及使用方法
<!DOCTYPE html> <html lang="zh"> <head> <script src="https://unpkg.com/vue@2.5.13/dist/vue.js"></script> </head> <body> <div id="app" > <!-- 表達式形式:vue指令語法 v-指令名字+:+指令的參數=指令的表達式 --> <button v-on:click="showsomething">click me!!</button> <!-- v-on:click具有很多事件修飾符屬性。比如： v-on:click.stop v-on:click.prevent --> </div> <script> var vm = new Vue({ el:"#app", methods : { showsomething:function(){ alert("show something"); } } }) </script> </body> </html>
其執行的效果如下圖所示，在瀏覽器測試段加載，觸發點擊事件會執行自定義的事件：
第二部分：v-html主要作用為渲染頁面元素：
<!DOCTYPE html> <html lang="zh"> <head> <script src="https://unpkg.com/vue@2.5.13/dist/vue.js"></script> </head> <body> <div id="app" > {{ html }} <!--將其渲染為頁面--> <div v-html="html"></div> {{ message }} <button v-on:click="message='123'">click me!</button> <!--只渲染一次--> <div v-once> {{message}} </div> </div> <script> var vm = new Vue({ el:"#app", data:{ html:"<h1>hello</h1>", message:"liuluwei" //data中的數值為初始化值，加載時第一次渲染會采用data中的設值 } }) </script> </body> </html>
在瀏覽器端加載，執行效果如圖所示：
當觸發點擊事件之后，click me前面的字符串就會變為點擊事件中定義的內容123.