以下内容参考自下面视频:
https://www.bilibili.com/video/BV1y7411y7am
1.单向数据绑定 v-bind
v-bind指令,单向数据绑定,一般用在标签属性中,获取值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<!-- v-bind指令,单向数据绑定,一般用在标签属性中,获取值 -->
<h1 v-bind:title="message">
{
{content}}
</h1>
<!-- 简写方式 -->
<h2 :title="message">
{
{content}}
</h2>
</div>
<script src="vue.min.js"></script>
<script>
new Vue({
el: '#app',
data: {
content:'我是标题',
message:'页面加载于 '+new Date().toLocaleString()
}
})
</script>
</body>
</html>
执行结果如下
2.双向数据绑定 v-model
v-bind:用户在浏览器页面修改数据,取的的值的数据不变
v-model :用户在浏览器页面修改数据,取的的值的数据随之改变
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<input type="text" v-bind:value="searchMap.keyword"/>
<!-- 双向数据绑定 v-model-->
<input type="text" v-model:value="searchMap.keyword"/>
{
{searchMap.keyword}}
</div>
<script src="vue.min.js"></script>
<script>
new Vue({
el: '#app',
data: {
searchMap:{
keyword:'尚硅谷'
}
}
})
</script>
</body>
</html>
结果如下,
修改v-bind绑定的值
修改v-model绑定的值
3.vue修饰符
v-on:submit.prevent
阻止表单提交,转为执行函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document<