文章目录
Vue概述
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Pyth8Lfu-1653315859118)(springboot.assets/image-20220523212356454.png)]](https://img-blog.csdnimg.cn/c595f298181a426c927d842d89cf1b58.png)
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2O2zruFI-1653315859120)(springboot.assets/image-20220523212412938.png)]](https://img-blog.csdnimg.cn/031ebcda25fd4b5ab669b040d9c52472.png)
Vue快速入门
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OMGhv1EU-1653315859121)(springboot.assets/image-20220523212622315.png)]](https://img-blog.csdnimg.cn/f54fdd99996941dd981d08c548a464cf.png)
案例演示
创建web骨架项目
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-X8zTxa9x-1653315859121)(springboot.assets/image-20220523215450744.png)]](https://img-blog.csdnimg.cn/9dcbe5a9ca874d7f8aa8c3c3c30824ba.png)
导入vue.js
创建js目录放入vue.js，并在html页面中引入
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QnDmzYzi-1653315859122)(springboot.assets/image-20220523215545231.png)]](https://img-blog.csdnimg.cn/2fb1a2df69b44a8ca1432007b6cfbeda.png)
编写Html页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<input v-model="username">
<!-- 差值表达式-->
{
{username}}
</div>
<script src="js/vue.js"></script>
<script>
//1.创建Vue核心对象
new Vue({
el:"#app",
data(){
return {
username:""
}
}
});
</script>
</body>
</html>
运行测试
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NLrgr75R-1653315859123)(springboot.assets/image-20220523220845105.png)]](https://img-blog.csdnimg.cn/9ef40b10a0664b13b86348856a0e3275.png)
Vue常用指令
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-j1U54jlO-1653315859124)(springboot.assets/image-20220523220958185.png)]](https://img-blog.csdnimg.cn/f426c3604e9742b894936858ebe7686e.png)
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NhsxE92N-1653315859125)(springboot.assets/image-20220523221022076.png)]](https://img-blog.csdnimg.cn/ad754f245485463d92d2b7f638b294d6.png)
演示v-bind
编辑html
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<a v-bind:href="url">点击一下</a>
<!-- v-bind 简化写法-->
<a :href="url">点击一下</a>
</div>
<script src="js/vue.js"></script>
<script>
//1.创建Vue核心对象
new Vue({
el:"#app",
data(){
return {
username:"",
url:"https://www.baidu.com"
}
}
});
</script>
</body>
</html>
运行测试
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AAPsUozh-1653315859126)(springboot.assets/image-20220523221905989.png)]](https://img-blog.csdnimg.cn/900015c5459144439aa3b3e6278dc22a.png)
演示v-model
- 双向绑定
编辑html
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-h3EATdwb-1653315859127)(springboot.assets/image-20220523222056716.png)]](https://img-blog.csdnimg.cn/4bfb5c4e5aea40e0816ec2699c9dc5c5.png)
运行测试
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HptijCHn-1653315859127)(springboot.assets/image-20220523222234850.png)]](https://img-blog.csdnimg.cn/a02f439ee8e641fb9f458c04142357f5.png)
演示
小结
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZFmH8cly-1653315859128)(springboot.assets/image-20220523222353142.png)]](https://img-blog.csdnimg.cn/f74f854beeb6427797ab3b470806cf78.png)