说明:
本篇目前只有大纲,没有细节,先作为个人学习记录,后期会慢慢把细节及代码补上,如果有需要从最基础开始学习的小伙伴,恐怕会耽误你的时间,着急使用的话可以参考官网的使用指南,官网地址如下:
https://cn.vuejs.org/v2/guide/
一、简介
1、用于构建用户界面的渐进式框架
2、自底向上的逐层应用
3、核心库只关心视图层,可与第三方库整合
二、MVVM模式
三、组件化开发
1、组件化是什么:
(1)、把页面拆分成多个组件,每个组件依赖的资源(css、js、模板、图片等)放在一起维护
(2)、组件在系统内部可复用,组件与组件之间可以嵌套
2、组件库使用
(1)ElementUI
(2)Bootstrap Vue
(3)Vuetify :https://vuetifyjs.com/zh-Hans/introduction/why-vuetify/
四、编译器
vscode
1、下载地址
https://code.visualstudio.com/
2、常用插件
五、实战
1、安装Vue.js
官网:https://cn.vuejs.org/v2/guide/
方式一:CDN
方式二:NPM
- 安装vue-cli
npm install vue-cli -g
2、使用
2.1 创建挂载元素
2.2 引入vue.js
2.3 创建一个vue实例
3、内部指令
- v-if v-else
- v-show
- v-for
- v-on 绑定事件(简写 @)
- v-bind 绑定属性(简写:)
- v-model 绑定数据
4、Vue的生命周期
- beforeCreate
- created
- beforeMount
- mounted
- beforeUpdate
- updated
- beforeDestroy
- destroyed