v-text：绑定元素text
v-html：绑定元素html
v-on：绑定元素事件
v-on常用事件
| 事件类型 | 事件名称 | 触发条件 |
|---|---|---|
| 焦点事件 | focus | 元素获得焦点（不会冒泡） |
| blur | 元素失去焦点（不会冒泡） | |
| 表单事件 | reset | 点击重置按钮时 |
| submit | 点击提交按钮 | |
| 键盘事件 | keydown | 按下任意按键。 |
| keypress | 除 Shift、Fn、CapsLock 外的任意键被按住。（连续触发。） | |
| keyup | 释放任意按键。 | |
| 鼠标事件 | click | 在元素上按下并释放任意鼠标按键。 |
| contextmenu | 右键点击（在右键菜单显示前触发）。 | |
| dblclick | 在元素上双击鼠标按钮。 | |
| mouseenter | 鼠标进入 | |
| mouseleave | 鼠标离开 | |
| 剪贴板事件 | cut | 已经剪贴选中的文本内容并且复制到了剪贴板。 |
| copy | 已经把选中的文本内容复制到了剪贴板。 | |
| paste | 从剪贴板复制的文本内容被粘贴。 |
我是分割线
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>vue指令</title>
</head>
<body>
<div id="app">
<h2>{{ message }}世界</h2>
<!-- v-text:设置标签内容 全部替换-->
<h2 v-text="text">世界</h2>
<!-- v-html:设置标签innerHtml -->
<h2 v-html="html"></h2>
<!-- v-on: 或 @ + 事件名:绑定事件 -->
<input type="button" value="单击事件绑定" v-on:click="doIt">
<input type="button" value="简写单击事件绑定" @click="doIt">
<input type="button" value="鼠标进入事件绑定" @mouseenter="doIt">
<input type="button" value="双击事件绑定" @dblclick="doIt">
<input type="button" value="默认参数event事件" @dblclick="doIt1($event)">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue ({
el:"#app",
data:{
message: "你好",
text: "你好",
html: "<p style='color: pink'> html </p>"
},
methods:{
doIt: function (){
alert(this.message); //this作用域 获取data
},
doIt1: function (event){
console.log(event);//获取浏览器event对象
}
}
})
</script>
</body>
</html>
我是分割线
前台效果：
vue指令
{{ message }}世界
世界