14天学习训练营导师课程: 郑为中《Vue和SpringBoot打造假日旅社管理系统》
目录
1. VUE介绍
2. Vue导入
3. VUE相关指令
4. 显示隐藏相关
5. Vue周边库
1. VUE介绍
- VUE是目前最流行的前端框架, 基于MVVM设计模式
- VUE框架两种用法:
- 多页面应用, 在html页面中引入vue.js框架文件
- 单页面应用, 通过脚手架的方式使用VUE框架
MVVM设计模式
- Model:模型, 对应的是数据模型
- View:视图, 对应的是页面标签相关代码
- VM:视图模型, 将页面中可能发生改变的元素和某个变量在内存中进行绑定,并且会对变量进行监听, 当变量的值发生改变时,VM视图模型会自动从内存中找到对应的元素,这样就避免了每次通过DOM操作遍历查找元素了, 从而提高了执行效率
2. Vue导入
引入外部vue.js文件的方式:
- 直接引入一个CDN服务器VUE框架的网址
- 把VUE框架文件下载到本地,然后再引入
- CDN服务器地址:以下推荐国外比较稳定的两个 CDN,国内还没发现哪一家比较好,目前还是建议下载到本地。
- Staticfile CDN(国内) : https://cdn.staticfile.org/vue/2.2.2/vue.min.js
- unpkg:https://unpkg.com/vue@2.6.14/dist/vue.min.js
- cdnjs : https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js
<!--从CDN服务器引入vue框架文件-->
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script><!--引入本地的vue.js框架文件-->
<script src="js/vue.min.js"></script>
Vue框架工作原理:
- Vue对象相当于MVVM设计模式中的VM视图模型, 会将页面中可能发生改变的元素和data里面的某个变量进行绑定, 并且会不断监听变量值的改变, 当变量的值发生改变时,会自动从内存中找到对应的元素,并且将元素的显示内容修改掉。
3. VUE相关指令
- {{变量}} : 插值, 让此处的文本内容和变量进行绑定
- v-text="变量", 让元素的文本内容和变量进行绑定
- v-html="变量", 让元素的标签内容和变量进行绑定
- v-bind:属性名="变量", 让元素的某个属性的值和变量进行绑定
- :属性名="变量" , 简写
- v-model="变量", 让控件的值和某个变量进行双向绑定, 变量值改变回影响控件显示的内容,控件的内容发生改变也会影响变量的值
- v-on:事件名="方法", 给元素添加事件
- @事件名="方法" , 简写
- v-for:"变量 in 数组" 循环遍历指令, 遍历的同时生成当前元素
4. 显示隐藏相关
- v-if="变量"; 让元素是否显示和变量进行绑定,true显示,false不显示(删除元素)
- v-else 让元素是否显示和上面的v-if状态取反
- v-show="变量";让元素是否显示和变量进行绑定,true显示,false不显示(隐藏元素) ,需要频繁切换显示状态的时候使用
<!--v-if让元素是否显示和变量进行绑定 true显示 false不显示(删除元素)-->
<h1 v-if="isVisible">刘德华</h1>
<!--v-else是和v-if状态取反-->
<h1 v-else>张学友</h1>
<!--v-show让元素是否显示和变量进行绑定 true显示 false不显示(隐藏元素)-->
<h1 v-show="isVisible">郭富城</h1>
5. Vue周边库
- vue-cli:vue脚手架
- vue-resource
- axios
- vue-router:路由
- vuex:状态管理
- element-ui:基于vue的UI组件库(PC端)官网地址: element.eleme.cn