开发者学堂课程【微服务+全栈在线教育实战项目演练（SpringCloud Alibaba+SpringBoot）:前端技术-vue 入门】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/667/detail/11304
前端技术-vue 入门
Vue 是什么?
Vue(读音/vju:/, 类似于 view )是一套用于构建用户界面的渐进式框架。
Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。
另一方面,当与现代化的工具链以及各种支持类库结合使用时, Vue 也完全能够为复杂的单页应用提供驱动。
官方网站: https://cn.vuejs.org
1.vue入门案例
第一步: 创建 html 页面. 使用 vscode 快捷键生成 html 代码 !
<!D0CTYPE html>
<html lang= "en" >
<head>
<meta charset= "UTF-8">
<meta name= "viewport" content = "width, initial-scale = 1.0">
<meta http-equiv= "X-UA-Compatible" content= "ie= edge">
<title>Document</title>
</head>
<body>
第二步:
在页面中引入 vue 的 js 文件,类似于 jquery,文件可以在官网下载或者引入 vue.js 和vue.min.js,怎么引入?
首先把压缩文件 vue.min.js 复制到当前文件夹中
<!D0CTYPE html>
<html lang= "en" >
<head>
<meta charset= "UTF-8">
<meta name= "viewport" content = "width, initial-scale = 1.0">
<meta http-equiv= "X-UA-Compatible" content= "ie= edge">
<title>Document</title>
</head>
<body>
<script src = "vue.min.js"></script>
</body>
</html>
第三步:
在 html 页面创建 div 标签,div 添加 id 属性,目的在于规定的内容在什么地方有显示
<!D0CTYPE html>
<html lang= "en" >
<head>
<meta charset= "UTF-8">
<meta name= "viewport" content = "width, initial-scale = 1.0">
<meta http-equiv= "X-UA-Compatible" content= "ie= edge">
<title>Document</title>
</head>
<body>
<div id = "app"></div>
<script src = "vue.min.js"></script>
</body>
</html>
第四步:
编写 vue 代码,固定的结构
<!D0CTYPE html>
<html lang= "en" >
<head>
<meta charset= "UTF-8">
<meta name= "viewport" content = "width, initial-scale = 1.0">
<meta http-equiv= "X-UA-Compatible" content= "ie= edge">
<title>Document</title>
</head>
<body>
<div id = "app"></div>
<script src = "vue.min.js"></script>
<script>
//创建一个vue对象
new Vue({
el: '#app', //绑定vue作用的范围 → #app表示得到div标签,在里面写内容
data: {//定义页面中显示的模型数据
message: 'Hello Vue! '
}
})
</ script>
</body>
</html>
执行:
Hello Vue !
第五步:使用插值表达式
获取 date 里面的定义值
<div id= "app">
<! -- { { } }插值表达式,绑定vue中的data数据 -- >
{{message}}
</div>
<script src="vue.min.js"></script>
</body>
</html>
