Vue的语法
1.插值语法
格式:
{{xxx}},xxx是js表达式,可以直接读取到data中的所有区域
代码示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
插值语法的基本使用:{{val}}
</div>
<script>
Vue.config.productionTip = false
const vm = new Vue({
el: "#app",
data: {
val: "今天是2023年3月27日"
}
})
</script>
</body>
</html>
2.指令语法
注意: vue中的所有指令都是以“v-”开头的
代码示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../js/vue.js"></script>
</head>
<body>
<h1>指令语法的使用</h1>
</body>
<div id="app">
<a v-bind:href="val1">点我跳转,我是百度</a>
<br>
<a v-bind:href="val2.url1">点我跳转,我是搜狗</a>
<br>
<a v-bind:href="val2.url2">点我跳转,我是bing</a>
<br>
</div>
<script>
Vue.config.productionTip = false
const vm = new Vue({
el: "#app",
data: {
val1: "https://www.baidu.com/",
val2: {
url1: "https://www.sogou.com/",
url2: "https://cn.bing.com/?mkt=zh-CN"
}
}
})
</script>
</html>
数据绑定
Vue有两种数据绑定方式:
1. 单向绑定: v-bind 数据只能从data流向⻚面。
2. 双向绑定: v-model数据不仅能从data流向⻚面,也能从⻚面流向data。
单向绑定代码示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
<!--普通写法:-->
单向绑定:<input type="text" v-bind:value="name1">
<br>
<!-- 简便写法-->
单向绑定:<input type="text" :value="name1">
<br>
</div>
<script>
Vue.config.productionTip = false
const vm = new Vue({
el: "#app",
data: {
name1: "今天是2023年3月27日"
}
})
</script>
</body>
</html>
使用vue插件改变值看看:
值改变了,数据驱动视图
我们在看看视图能否驱动数据:
可以明显看到单向数据绑定,视图驱动不了数据 ,但是数据能够驱动视图
现在我们看一下双向绑定:
代码示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
<!--普通写法-->
双向绑定:<input type="text" v-model:value="name1">
<br>
<!--简便写法:-->
双向绑定:<input type="text" v-model="name1">
<br>
</div>
<script>
Vue.config.productionTip = false
const vm = new Vue({
el: "#app",
data: {
name1: "我要减肥,我要锻炼"
}
})
</script>
</body>
</html>
使用vue插件调试看看:
数据驱动视图:
视图驱动数据:
- 双向绑定一般都应用在表单类元素上(如:input、select等)
- v-model:value可以简写为v-model,因为v-model默认收集的就是value值。