目录
一 点睛
1 event.target.value
在响应函数里,可以指明使用 event 内置的参数对象。该对象表示当前事件。可以通过 event.target.value 来获得当前事件对象的 value 的值。
2 this 的用法
this表示当前 Vue 对象 new Vue() ,可以通过 this. 来调用当前对象的属性和方法。
3 事件绑定:v-on
<input type="text" v-on:input="changeTitle()">
v-on叫绑定事件,事件是input,相应行为是changeTitle,小括号可以去掉。当input元素发生输入事件时,就会调用Vue里定义的方法changeTitle。
4 v-on 的简写
例如:v-on:input=“” 可以简写为 @input=“”
5 插值表达式
插值表达式是用在html中被绑定的元素中的,目的是通过插值表达是来获取vue对象中的属性和方法。语法格式是{{vue的内容}}。
注意:插值表达式不能写在 html 的标签中,不能作为属性的值部分。如果一定要用 vue 中的属性作为 html 标签的属性的内容,就可以使用 v-bind 进行属性绑定。
6 v-once
此时标签中的插值表达式,只获取一次数据。之后数据的变化不影响插值表达式的值。
7 v-html和v-text
v-html:将 vue 中属性的值作为 html 的元素来使用。
v-text:将 vue 中属性的值只作为纯文本来使用。
8 事件修饰符
@click.stop:阻止点击事件的传播。
@mousemove.stop:阻止鼠标的移动事件。
@keyup.space:空格键弹起时调用。
@keyup.enter:回车键弹起时调用。
二 代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>数据,事件方法</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="root">
<!-- v-on绑定事件 -->
<h1 v-on:click="()=>{number++}">{{number}}</h1>
<!-- 绑定事件简写 -->
<h1 @click="()=>{number++}">{{number}}</h1>
<h1 v-text="number" @click="click"></h1>
<!-- 第一种方式显示msg -->
<div v-html="content"></div>
<!-- 第二种方式显示msg -->
<div v-text="content"></div>
<!-- 第三张方式显示msg:插值表达式 -->
<div>{{content}}</div>
<div>{{msg}}</div>
</div>
<script type="text/javascript">
new Vue({
el: "#root",
data: {
msg: "hello",
number: 0,
content: "<h1>hello</h1>"
},
methods: {
click:function(){
this.number++
this.msg = "world"
}
}
})
</script>
</body>
</html>
三 效果