本文为博主原创，未经允许不得转载：
第一部分： 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.