【Vue学习之从入门到神经】

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