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