vue.js
Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。
自底向上逐层应用
介绍
官网:https://cn.vuejs.org/
vue框架是近几年飞速发展的一个前端框架,侧重前端view层。
国人尤雨溪。基于js es5新语法特型封装,出现时间agular(出现的最早、企业级,现在国内用的人不多)、react(也比较流行,跟vue都有比较多使用)晚,
vue语法简单、浏览器渲染性能好。
引入vue.js
- 开发环境版本,包含了有帮助的命令行警告
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
- 生产环境版本,优化了尺寸和速度
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
3.在pycharm中新建一个js文件,
https://cdn.jsdelivr.net/npm/vue/dist/vue.js
将这个输入浏览器所获得的代码,复制移动到新建的js文件中
生态
跟django all in one不同,vue只负责核心功能,其他功能由生态工具栈中的其他工具提供。
vue-cli:帮用户生成项目组织
vue-router:路由转发,相当于django中的urls.py
vuex:组件状态管理
vueLoader:编译加载cdd预处理语言如sass less stylus
devTools:debug和观察vue组件接口数据 的谷歌浏览器插件工具。vue.js是对原生js封装,vue项目中console.log()已不容易看到过程,很难debug。建议安装这个官方调试工具观察信息。
即:vue-devtools(谷歌浏览器插件)
安装方法:
(推荐2)
1: 需正常打开chrome商店,搜索vuejs devtools 安装。
chrome://extensions/ 开发者工具-扩展程序下启用;
2: github下载插件,npm包安装依赖,拖入浏览器扩展程序
方法2 具体操作:
1 . 下载chrome扩展插件。
在github上下载压缩包并解压到本地
github下载地址:https://github.com/vuejs/vue-devtools
2. npm install
下载完成后打开命令行cmd进入vue-devtools-master文件夹,
① npm install,安装依赖包;如果安装太慢,请参照文章末尾说明进行操作。
② npm run build
MVC MTV MVVM
MVC : models 模型层 数据库,V view视图层 业务逻辑,渲染到html再返回,C control 控制层 路由转发(类似于django中的urls.py)。 代表 java 框架。
MTV:models 模型层 数据库,V view视图层 html,T template html。代表框架django,但其实也有C层。
MVVM:models 模型层 数据,V view视图层 html,V view视图层 html,models 模型层 数据。双向数据流。代表框架vue。
软件工具
ide:VScode,webstorm,sublime,hbuilder,chrome
vue:vue-devtools(谷歌浏览器插件) 推荐
版本选择
2019 官网2.6
vue 1.x 已过时
vue 2.x 正流行。 但配套vue-cli webpack发版本变更,用法有所不同。
vue 3.0 开发分支已经出来。
vue VS js、jquery
js、jquery:
document.getElementById()
$('#id')
createElement innerText='内容',
围绕dom节点(document node manage)操作。
缺点:js跟html强耦合,语法难记。
Vue:html部分不用动,vue实例部分维护、逻辑。耦合程度较低。基本思想绑定变量、事件,逻辑在vue实例中处理。
其他概念
单页应用。前端框架react vue等,写出来会成为一个单页应用。index.html index.js index.css一个页面。开发时当然按照模块开发最后通过工具合并成一个网站,每个模块div会自动编id。http://xxx.com/new#sport。 优点:网页a标签点击后无刷新改变内容。缺点:单页较大较复杂,不利于seo。但有优化手段。