vue.js--1

vue.js

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。

自底向上逐层应用

介绍

官网：https://cn.vuejs.org/
vue框架是近几年飞速发展的一个前端框架，侧重前端view层。
国人尤雨溪。基于js es5新语法特型封装，出现时间agular(出现的最早、企业级，现在国内用的人不多)、react(也比较流行，跟vue都有比较多使用)晚，
vue语法简单、浏览器渲染性能好。

引入vue.js

1. 开发环境版本，包含了有帮助的命令行警告

 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

2. 生产环境版本，优化了尺寸和速度

<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。但有优化手段。