12-SpringBoot整合Vue
Vue
案例-HelloWorld
Hello！{{name}}!
注意：
(1)想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象
(2)root容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法
(3)root容器里的代码被称为Vue模板
(4)Vue实例与容器是一一对应的
(5)真实开发中只有一个Vue实例，并且会配合着组件一起使用
(6){{xxx}}中的xxx要写js表达式，且xxx可以自动读取到data中的所有属性
(7)一旦data中的数据发生变化，那么模板中用到该数据的地方也会自动更新
案例：模板语法
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title>
<script src="js/vue.js">script>
head>
<body>
<div id="root">
<h1>插值语法h1>
<h3>你好，{{name}}!h3>
<hr>
<h1>指令语法{{url}}h1>
<a v-bind:href="url">快去看！a><br>
<a :href="url">快去看！a>
div>
body>
html>
<script>
new Vue({
el:'#root',
data:{
name:'Word',
url:'https://www.baidu.com/'
}
})
script>
总结：
Vue模板语法包括两大类：
(1)插值语法：
功能：用于解析标签体内容
写法：{{xxx}}，xxx是js表达式，且可以直接读取到data中的所有区域
(2)指令语法：
功能：用于解析标签（包括：标签属性、标签体内容、绑定事件…）
举例：<a v-bind:href="xxx">或简写为<a :href="xxx">，xxx同样要写js表达式，且可以直接读取到data中的所有属性
备注：Vue中有很多的指令，且形式都是v-???，此处我们只是拿v-bind举个例子
案例：数据绑定
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title>
<script src="js/vue.js">script>
head>
<body>
<div id="root">
{{name}}
单向数据绑定：<input type="text" v-bind:value="name"><br>
双向数据绑定：<input type="text" v-model:value="name">
div>
body>
html>
<script>
new Vue({
el:'#root',
data:{
name:'World'
}
})
script>
Vue中有2种数据绑定的方式：
单向绑定（v-bind）: 数据只能从data流向页面
双向绑定（v-model）:数据不仅能从data流向页面，还可以从页面流向data
备注：
双向绑定一般都应用在表单类元素上（如：、