gt;
</head>
<body>
<div id="app01">
<!--方式一: 绑定一个事件-->
<a v-bind:href='link'
v-bind:class="{active: isActive}"
v-on:click="myClick"
>去百度</a>
<!--方式二: 绑定多个事件-->
<button v-on="{click: myClick,
mouseenter: mouseEnter,
mouseleave: mouseLeave}">
点我今晚吃鸡~~~
</button>
</div>
<script>
// 绑定属性,简写冒号:
let app01 = new Vue({
el: "#app01",
data: {
link: "https://www.baidu.com",
isActive: false
},
methods: {
myClick: function () {
console.log("大吉大利,今晚吃鸡~~~")
},
mouseEnter: function () {
console.log("鼠标来了~~~");
},
mouseLeave: function () {
console.log("鼠标走了~~~");
}
}
})
</script>
</body>
</html>
常用指令:v-model
上面演示的是通过vue实例将数据渲染进模板,并且在控制台,我们修改数据之后,修改后的数据能够及时(官方称之为响应式)的渲染到模板层,那么,如果有这样的需求,比如有一个input标签,当用户修改渲染的原始数据后,打印修改后的数据,简单说,我们需要vue实例可以帮我们渲染数据并响应式的监听数据修改,同时我们还需要监听用户行为,如果用户在标签上面修改了数据(之前的修改,指的是通过vue实例app01进行的数据修改),我们需要获取到数据,针对这个需求,我们可以使用v-mode指令。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-model</title>
</head>
<body>
<div id="app01">
<p>请选择你的性别</p>
<br>
<input v-model="name"/>
<p><input type="text" v-model="name"/></p>
<p>
<input type="checkbox" value="男" v-model="gender"/>
<input type="checkbox" value="女" v-model="gender"/>
</p>
<br>
{{ name }}
{{ gender }}
<p>请选择你的女朋友</p>
<select name="" id="" v-model="girlFriends">
<option>dogfa</option>
<option>djb</option>
<option>oldniu</option>
</select>
<br>
{{ girlFriends }}
<p>
<textarea v-model="article"></textarea>
</p>
<br>
{{ article }}
</div>
<script src="./vue.js"></script>
<script>
let app01 = new Vue({
el: "#app01",
data: {
name: "dogfa",
gender: [],
girlFriends: [],
article: "这是一篇文章",
}
})
</script>
</body>
</html>
常用指令:指令修饰符
用户可以输入任何数据类型,但有时候,我们需要限定用户输入的数据类型,可以在指令后面加上number修饰符。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="app01">
<table border="1">
<thead>
<tr>
<th>学科</th>
<th>成绩</th>
</tr>
</thead>
<tbody>
<tr>
<td>Python基础</td>
<td><input type="text" v-model.number="python"/></td>
</tr>
<tr>
<td>前端</td>
<td><input type="text" v-model.lazy="web"/></td>
</tr>
<tr>
<td>Django</td>
<td><input type="text"