vue

vue介绍

1天基础内容   7天 webpack

第一天

指令  组件   过滤器    路由     网络请求

第二天

webpack
搭建项目（手动）

第三天---第八天

项目   webpack打包压缩 上线

---

Vue的基本概念

Vue是什么?

渐进式 JavaScript 框架

特定:
    易用
    灵活 
    性能
    
一个用以创建用户接口的直观、快速、简洁的 MVVM 框架

Vue能做什么?

PC端 管理系统 网站
移动端
    WebApp 
    原生App 

如何学习?

https://cn.vuejs.org/v2/guide/

https://stackoverflow.com/

https://segmentfault.com/p/1210000008583242/read?from=timeline

作者

尤雨溪

---

MVVM

M:model 模型
V:view 视图
VM:view-model 相当于控制器

v ---> vm ---> model
                |
v <--- vm <---  |

好处:
    1、解耦
    2、方便的复用

---

指令

{{}} 插值表达式

指令:
    拓展html的标签，先在html占位，在利用真实的数据替换
    让我们程序员只操作数据，即可更新视图
    
注意:
    Vue中的指令是以v-开头的  
    
v-text & v-html
    给我们页面中的span p标签设置值
    v-text 纯文本
    v-html 解析带有html标签的字符串
    
v-bind
    在html中，比如img标签为例，src的值不写死，而是src的值来自model，这个时候就要使用v-bind了
    
    注意:以后我们视图中（img）需要的数据，必须来自model的时候，这个时候你就要想到v-bind
    
    `v-bind:` 可以简写成 `:`

v-on 
    绑定事件
    
    ng-click Angular中给某个元素绑定一个点击事件，一般都是给button绑定
    
    注意点：
        1、当要执行的函数没有参数的时候，可以写`()`也可以不写，如果有参数必须加上`()`
        2、v-on:可以缩写成 `@`
    
v-model
    双向数据绑定
        model ---> 视图
        视图 ---> model
    
v-if/v-show
    v-if&v-show 接收的是boolean值

    区别:
        true的时候没啥区别
        false的时候有区别 
            if 不会创建元素
            show 会创建元素，但是隐藏起来
    
    开发中如何抉择?
        如果需要频繁切换（显示） show
        如果不需要频繁切换(显示) if
        
        参考：https://cn.vuejs.org/v2/guide/conditional.html
        
    注意点:
        v-if 后面接的v-else-if v-else必须紧跟v-if的后面，中间不要有任何其它元素，否则有问题

v-for
    作用:
        遍历
        你要遍历什么，就作用于哪个元素上面
        
    注意：
        1、如果要获取我们遍历的每一行的索引
        2、在使用v-for遍历元素的时候，最好给每一行设置一个唯一的标识符，通过给遍历的每个元素设置一个唯一的key值即可

---

组件

作用:
    某一类功能代码的集合

在Vue中，你就可以认为，我们看到的每一个页面就是一个组件
组件就是代码的集合，然后我们会把实现某一功能(展示新闻列表)的代码，写在某一个文件中，我们把这个文件就称之为组件

在Vue中，凡是看到.vue结尾的文件，就是一个组件，组件里面就写了很多代码

写法

前四种，都是在html里面写的(会，看得懂就行)
    第一种:
        先定义，再注册，再使用
        
    第二种:
        定义注册一步到位，再使用
    
    第三种:都是对组件中template的内容优化
        template
    
    第四种:都是对组件中template的内容优化

最后一种，在.vue(单文件组件)结尾的文件中写的

注意点:
    1、在定义我们组件，必须给它一个根元素
    2、在组件内部定义Model，data必须是一个函数，并且函数内部必须要返回一个对象 
        参考:https://cn.vuejs.org/v2/guide/components.html#data-必须是函数

好处:
    1、可以把那些分散的功能，写在一个组件里面去，这样body中的代码比较少，并且看上去简洁明了

---

过滤器

作用:
    过滤数据，一般是把服务器返回的数据，过滤成符合页面展示的数据

    

私有过滤器
    只在该组件起作用

全局过滤器
    所有的组件中都起作用
    
    Vue.filter('过滤器的名称',处理函数)

注意点:
    1、过滤器是一个函数，必须要传入值，并且必须要有返回值
    
    2、最好把Vue.filter放在组件注册之前

---

路由

作用:
    前端路由：根据触发的不同的路径规则，呈现不同的页面(组件)在浏览器中
    
Angular
    html 
        ng-view 占位
        
    js
        $routerProvider.when('/路径',{
            templateUrl:'',
            controller:'xxx'
        })
        
Vue和上面的差不多，写法参考下面

前提:
    导入vue.js
    导入vue-router.js
    
正式写代码:
    html
        router-link 触发的超链接，底层会转成a标签
        
        router-view 相当于ng-view
        
    js
        1、定义组件(不要注册)
        
        2、创建路由对象，设置路由规则（注册组件到路由中）
            目的:触发了谁，把谁展示出来
            
        3、把我们上面创建好的路由对象，注入到根实例 (new Vue({}))

路由的其它知识点

1、想一上来就让它呈现某个组件的内容
    重定向:https://router.vuejs.org/zh-cn/essentials/redirect-and-alias.html

2、通过路由跳转到某一个组件的时候，如何传递参数
    动态路由匹配:https://router.vuejs.org/zh-cn/essentials/dynamic-matching.html

---

网络请求

vue-resource

前提:
    导入vue.js
    导入vue-resource.js

GET请求

POST请求

注意点:
    this.$http.post(url,参数,{emulateJSON:true})
    
    emulateJSON:true 设置请求头的Content-Type:application/x-www-form-urlencoded

JSONP请求

豆瓣
jsonp方法

---

第二部分

内容回顾

MVVM

M：model
V：View
VM：View-Model 相当于控制器，起到调度的作用

好处:
    耦合性低
    视图复用性强

指令

通过指令可以让程序员较少对dom的操作，把关注点放在数据上

v-text 插值表达式{{}} 纯文本
v-html 可以解析html
v-bind 绑定，html标签的属性值，不是写死的
 v-bind: / :
v-on 绑定事件 v-on: / @ click dbclick mousexxx
v-if/v-show v-if/v-else 一定要挨着写
v-for  (item,index) in 数组  key="唯一的值"

组件

概念:功能代码的集合，组件就相当于可以看到的页面
好处:把一些零散的代码封装起来，使用的时候，通过组件的名称使用

五种
前四种(看得懂就行，实际开发中一般推荐使用第五种)
    第一种:先定义，再注册，再使用
        var 组件 = Vue.extend({})  var 组件 = {}
        Vue.component('组件的名称',组件)
        id=app的div中，通过自定义标签的形式使用
            <组件的名称>
            
    第二种:定义注册一步到位，再使用
    
    第三种:对定义组件的时候，template属性优化
        
        template:"#templateId"
        
    第四种:对定义组件的时候，template属性优化
        
        template:"#templateId"
        
第五种，单文件组件，不能直接运行在浏览器中，webpack通过loaders的形式，来转成浏览器能过执行的代码

过滤器

对服务器返回的数据，进行过滤，把数据过滤成符合展示需求的数据

私有
    定义在组件
    filters:{
        过滤器：函数，接收要过滤的原始数据，返回过滤之后的数据，要参数和返回值
    }
    
    特点:只能在该组件中使用

全局
    Vue.filter('过滤器的名称',处理函数)
    处理函数中必须要有参数与返回值
    
注意点:
    过滤器处理函数中的参数说明，第一个参数，就是要过滤的原始数据，第二个参数，就是调用过滤器的时候，传递的第一个参数

路由

作用:
    根据触发的不同的路径，展示不同内容在浏览器中给用户看
    
Angular
    html
        ng-vew
        
        
    js
        模块.config
            路径
            templateUrl:''
            
Vue
    html
        router-view
         ===> a标签
    
    js
        1、定义组件
        
        2、创建路由对象，设置路由规则
            const router = new VueRouter({
                routes:[
                    {path:'路径',component:'组件'}
                ]
            })
            
        3、把router注入到根实例 
            new Vue({
                el:'#app',
                router
            })

发送网路请求

vue-resource
    导入vue
    导入vue-resource
    
GET：
    this.$http.get(url).then(function(response){
        
    },function(err){
        
    })
    
POST：
    this.$http.post(url,{key:value,key1:value1},{emulateJSON:true}).then(function(response){
        
    },function(err){
        
    })
    
JSONP：
    this.$http.jsonp(url).then(function(response){
        
    },function(err){
        
    })

---

今日内容目标

Webpack

概念

Webpack 是当下最热门的前端资源模块化管理和打包工具。它可以将许
多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还
可以将按需加载的模块进行代码分隔，等到实际需要的时候再异步加
载。通过 loader 的转换，任何形式的资源都可以视作模块，比如 
CommonJs 模块、 AMD 模块、 ES6 模块、CSS、图片、 JSON、
Coffeescript、 LESS 等。

和Gulp比较
    Gulp 同步打包的方式 require("")
    
优势:
    http://zhaoda.net/webpack-handbook/what-is-webpack.html
    
    保护源代码

达到的理解程度
    1、webpack能打包我们的源代码，把我们所有的源代码最终打包成一个bundle.js
    2、很强大，使用任何模块组织的代码(CommonJS、AMD、ES6xxx)都能打包
    3、打包优化之后，就可以直接上线

核心概念

入口:
    webpack打包的入口文件

输出:
    这个就是对源代码打包之后，得到的文件，文件我们一般命名为bundle.js

Loader:
    默认情况下，webpack只能打包.js结尾的文件，但是webpack提供了很多Loader，能打包项目中任何文件

配置文件:
    简化我们的配置，让我们少写代码

插件:
    比如压缩js,比如开发阶段实现的热重载,xxx
    为了让webpack更加强大

如何学习&查找Webpack资料

入门:http://zhaoda.net/webpack-handbook/start.html

官网:
    1.x https://webpack.github.io/
    2.x https://webpack.js.org/

优化:百度搜索webpack优化

出了问题:百度 www.stackoverflow.com

实际演练

前提:
    安装好`webpack`全局包 npm i webpack -g

打包单个.js文件

    步骤：
        1、切换到项目根目录
        2、使用webpack全局包打包即可
            webpack 入口文件(entry.js) 输出文件(bundle.js)
        3、打包得到bundle.js，建立index.html，在index.html
        中导入打包之后的bundle.js
        4、运行
        
    注意点:
        在index.html中导入的一定是打包之后的输出文件

打包多个具有依赖关系的.js文件

    前提:
        写好entry.js中的代码，也写好module.js中的代码
        根据我们CommonJS来组织我们的代码的

    步骤：
        1、切换到项目根目录
        2、使用webpack全局包打包即可
            webpack 入口文件(entry.js) 输出文件(bundle.js)
        3、打包得到bundle.js，建立index.html，在index.html
        中导入打包之后的bundle.js
        4、运行
        
    注意点:
        在index.html中导入的一定是打包之后的输出文件
        Webpack 会分析入口文件，解析包含依赖关系的各个文件。
        这些文件（模块）都打包到 bundle.js 。

打包非.js文件

打包的步骤和上面一样，但是有注意事项

Loaders:https://doc.webpack-china.org/loaders/

以打包.css文件为例（需要额外做的步骤）   
    1、安装style-loader&css-loader
        cnpm i style-loader css-loader --save-dev
    2、在入口文件中导入css的时候，按照下面这样写
        require('!style-loader!css-loader!./site.css')
        
    3、针对第二步，如果导入的css过多，还可以做一个简化，在入口文件，导入的时候，可以不用写前面的
        require('./site.css')
        但是，在使用webpack打包的时候，得这样写
        webpack entry.js bundle.js --module-bind "css=style-loader!css-loader"
        
    注意点:
        "css=style-loader!css-loader" 使用双引号即可，不然会报错

配置文件

作用:简化打包的操作

步骤:
    1、在项目根目录下创建一个文件名称叫 webpack.config.js的文件（默认文件名称）
    
    2、把我们原先在cmd中写的命令，全部写到webpack.config.js中(强烈建议大家拷贝)
    
    3、最后在根目录下，执行webpack即可打包了

插件

作用:让我们Webpack的功能更加强大

全局包&本地包
    安装方式不一样 
        全局包 npm i webpack -g
        本地包 npm i webpack --save-dev
        
    使用的场合不一样
        全局包 用在终端里面，执行命令
        本地包 用在项目里面的
        
    安装的地方不一样:
        全局包:是安装在个人目录下   C:\Users\你自己的用户名\AppData\Roaming\npm
        
        本地包:项目的根目录的node_modules中
        
    注意点:
        有些包既要全局安装，又要在项目中安装，不要觉得奇怪，应用的地方不一样
        plugins在我们的webpack.config.js中写的时候，必须和entry,output,module同级

webpack打包的指令说明

webpack --progress
webpack --config 指定文件名称
webpack --watch 监控源文件，只要发生了更改就可以自动打包【了解】
wepack -p 压缩，局限性，自带的压缩里面对部分es6还是压缩不了，用webpack这个第三方中uglifyjs 【了解】

如果以后发现在终端里面有很长的命令需要执行，可以把它写在package.json中的scripts里面，这个里面也是通过属性名称和值的方式来记录的，以后我们就可以在终端中 npm run 属性名称，他就会把属性名称对应的值，拿到终端中去执行

---

手动搭建项目结构

基本步骤

1、把项目中的最基本的文件和文件夹建立起来
    src : 项目的源代码目录
     |-- main.js 项目打包的入口文件
     |-- App.vue 项目启动之后看到的第一个组件(根组件)
     
    package.json: 项目的配置文件
    webpack.develop.config.js

2、在我们浏览器中，看到一个Hello Vue

3、实现我们项目的所见及所得(更改项目的源代码，能在浏览器看到效果)

在我们浏览器中，看到一个Hello Vue

1、在App.vue template中写了 Hello Vue

2、在webpack.develop.config.js中写了
    entry
    output
    
3、main.js中写代码
    3.1 导入App.vue
    
    3.2 在我们的浏览器中要想看到App.vue中Hello Vue
        第一个.vue文件要被webpack打包，需要借助一个vue-loader的东西
            
        第二个，我们要想App.vue写的内容被浏览器识别，必须导入Vue
    
    3.3 导入vue
        import Vue from 'vue'
        创建一个根实例，里面要写两个属性
            el:Vue解析的范围
            render:决定把哪个组件挂在到id=app的div中去
            参考:https://cn.vuejs.org/v2/guide/render-function.html
            
4、打包
    在webpack.develop.config.js中配置vue-loader

    webpack --config webpack.develop.config.js --progress
        bundle.js
        
5、运行
    5.1 在项目根目录新建一个index.html
        id=app的div
    5.2 在index.html导入bundle.js

当我们更改了App.vue(项目启动之后，看到的第一个组件)之中的内容，在浏览器中实时看到其效果，并且是不刷新浏览器的情况下

本地包 html-webpack-plugin
    代码写在 webpack.develop.config.js中的plugins里面
    作用:
        它是以一个参照html为模版，在浏览器的内存中，生成一个index.html，并且自动给我们导入在内存中生成bundle.js

    使用步骤:
        1、安装html-webpack-plugin webpack webpack-dev-server
        
        2、在项目的根目录下创建一个参照的html（template.html）
             注意：参照文件只要写id=app的div即可，其它不要写
             
        3、在webpack.develop.config.js中的plugins中写代码
            见webpack.develop.config.js

全局包 webpack-dev-server 
    代码写在 终端
    它能把我们的项目的源代码打包成bundle.js（放在浏览器内存中的）
    
    运行项目，在内存中生成bundle.js并且把bundle.js插入到index.html中,并且最后运行index.html
    
    在终端里面生成的指令：https://webpack.github.io/docs/webpack-dev-server.html
    
    webpack-dev-server --progress --config webpack.develop.config.js --port 3008 --open --hot 

webpack-dev-server & webpack

相同点:
    都能对源代码打包，webpack-dev-server 很厉害，webpack能做的事，它都能做，并且还能做webpack不能做的事情，比如热更新
    webpack-dev-server & webpack 打包的指令和后面接的参数都是一样的 --progerss --config ...
    它们两个在打包的时候，都是全局包
    
不同点:
    wepack-dev-server 开发阶段使用，打包出来的东西放在浏览器内存中，运行速度特别快
    
    webpack 生产阶段使用，会在文件夹中生成一个bundle.js，这个文件最终是要和index.html最终一起发布到服务器上面去

---

今日项目中用的包

1、搭建项目时，在浏览器中想看到Hello Vue
    vue vue-loader vue-template-compiler style-loader css-loader
    
    vue:解析Vue指令和template标签
    vue-loader：加载和转译 Vue 组件
    vue-template-compiler style-loader css-loader 这几个都是vue-loader依赖的，所以必须安装，不然报错
    
    安装
        cnpm i vue --save
        cnpm i vue-loader vue-template-compiler style-loader css-loader --save-dev
        
2、实现热更新的时候
    html-webpack-plugin webpack webpack-dev-server
    
    安装:
        cnpm i html-webpack-plugin webpack webpack-dev-server --save-dev

vue-cli的使用

https://github.com/vuejs/vue-cli

安装:
     npm install -g vue-cli
     
生成项目
    vue init webpack-simple my_vue

运行
    cd my_vue
    npm install
    npm run dev

第三部分

1.时间格式化

包:
    生产环境的包:moment

安装方式:
    npm install moment --save

2.jquery

包: 
    生产环境的包:jquery

安装方式:
    npm install jquery --save

第四部分

内容回顾

App.vue

头部 
    NavigationBar
    实现方案:mint-ui
    
中间动态变化内容
    vue-router
    
底部TabBar
    实现方案:mint-ui

vue-router 集成及使用

集成:
    安装
    main.js 
        导入
        Vue.use(VueRouter) 
        //Vue.prototype.$route,Vue.prototype.$router
        
使用:
    html
        router-view 占位
        router-link 触发
        
    js  
        组件，创建单文件组件，在main.js导入
        创建路由对象，设置路由规则
        在格实例中注入，让我们项目拥有路由的功能

home.vue

轮播图

九宫格

---

今日课程目标

隐藏或是显示（头部的返回按钮和底部TabBar）

技术点:
    监控路由的变化，拿到当前路径
    watch:{
        监控的属性名称:处理函数
    }
    
    属性名称可以是Vue的成员
    
写代码:
    1、写在需要获取路由之后，处理的地方，App.vue
    
    2、watch要监控`$route`
    
注意:
    处理函数不能是箭头函数

点击返回按钮返回

声明式导航&编程式导航

导航:简单的理解就是前进、后退

声明式导航
    router-link，写在组件的template里面的

编程式导航
    router，写在我们js函数中的
    
    router.push 一般是前进
    router.go 既可以有前进，也可以有后退

router&route

都是属于vue-router的东西，当我们在main.js中使用了Vue.use(VueRouter)，就会在Vue原型上绑定两个属性$route、$router

作用不一样:
    $route: 通过它能够获取路由传递过来的参数,获取到当前浏览器地址栏的路径
    
    $router: 编程式导航，页面前进后退就靠他

显示和隐藏TabBar

参考:https://cn.vuejs.org/v2/guide/class-and-style.html

---

抽取轮播子组件(父子组件之间传值)

参考:
https://cn.vuejs.org/v2/guide/components.html

实现方式1：
    每个组件中写一套相同的代码(新闻详情、图片详情、商品详情)，不可取
    
实现方式2：
    把评论所有的功能抽成一个单独的组件，在需要它的组件里面，集成进来，并且给评论组件，传递数据（必要的条件），然后才能帮我们做事
    
我们要解决的问题
    1、抽取评论组件(新建一个评论组件即可)
    
    2、在需要评论的地方(新闻详情)，把评论组件集成进来
    
    3、把评论组件集成进来之后，要给评论组件传值，这样它才能帮我们做事
    
父子组件（以新闻详情组件集成评论组件为例）
    父组件:新闻详情组件
    
    子组件:评论组件
    
    为了在组件中传值更加顺畅

步骤

1、新建一个评论子组件

2、在需要它的父组件中(新闻详情组件)，集成它
    2.1 导入子组件
    2.2 注册
    2.3 在父组件的template中使用
    
3、新闻详情父组件给评论子组件传值
    接收方(评论子组件)
        通过props声明期望获取的数据
    
    传递方(新闻详情父组件)
        在父组件的template中使用子组件的时候，通过属性名称：值的方式，传递

评论功能的实现

1、画UI(搭建界面)
    完成

2、完成评论数据的展示
    注意点:
        2.1、一上来只会展示第一页的数据
        2.2、当用户点击加载更多的时候，发送请求，加载第二页，把第二页的也展示出来

3、完成提交评论
    3.1 获取评论内容
        双向数据绑定
        原生
        jquery
        ref
        
    3.2 提交评论给服务器
    3.3 评论成功之后需要做哪些事?

---

图片分享

图片列表

1、创建图片列表组件(photolist.vue)
2、home.vue的图片分享按钮中 router-link
3、在main.js中设置路由规则

图片列表的分类

1、获取数据
2、渲染

分类下面的图片列表

---

图片详情

1、跳转到图片详情，带图片id，
步骤:
    1、创建photoinfo.vue
    2、在photolist.vue中触发它 router-link
    3、在main.js中设置路由规则

2、获取数据

3、渲染

集成评论子组件

1、导入评论子组件
2、注册 components
3、在父组件的template中使用子组件，并且传参

图片详情中的缩略图

1、发送网络请求，获取图片数组

2、展现图片数组
    九宫格布局
    
3、实现预览功能
    https://github.com/LS1231/vue-preview

---

第五部分

内容回顾

根据路由显示隐藏返回和Tabbar

关键点:
    监控到路由的变化，watch--->$route
    
显示/隐藏 返回按钮 v-show
显示/隐藏 tabBar :class="xx?'':''"

评论子组件

为什么要抽取

抽取的步骤
    1、创建子组件(独立的组件，具有template,style,script)
    2、父组件集成子组件
    3、父组件传值给子组件

图片分享

1、获取数据

2、渲染页面

3、优化样式

---

今日目标

图片预览

获取数据，展示出来

1、使用vue-resource获取数据

2、使用mui的九宫格布局

实现图片预览

基于Vue:
    https://github.com/xLogic92/vue-picture-preview
    https://xiecg.github.io/other/vue-fancybox/#/baseUsage

PhotoSwipe

原生js写的，很多地方都可以用
    http://photoswipe.com/

Vue-Preview

集成
    安装 npm i vue-preview -S
    import VuePreview from 'vue-preview'
    Vue.use(VuePreview)

使用
     参考文档:https://github.com/LS1231/vue-preview

---

商品功能

商品列表

1、获取数据

2、渲染

商品详情

1、跳转到商品详情
    1.1、创建一个商品详情组件
    1.2、在商品列表组件触发router-link
    1.3、在main.js中设置路由规则

2、抽取轮播图

3、渲染商品详情

4、编程式导航

抽取轮播

1、创建一个轮播子组件

2、在home.vue、goodsinfo.vue中集成

3、home.vue和goodsinfo.vue传递数据给轮播子组件，让轮播子组件做事情
    3.1、把首页需要轮播数据的url和商品详情中需要轮播数据的url当作参数传递过去即可

图文介绍

1、监听图文按钮的点击

2、通过编程式导航跳转到图文介绍组件，并且跳转过去的同时，把商品id带过去
    通过路由规则的设置才知道要跳转到哪个组件中去

3、来到了图文介绍组件，拿着id发送网络请求

4、渲染

触发路由靠的是 命名路由的方式，传参是通过params

商品评论

1、监听商品评论的点击

2、通过编程式导航的方式，跳转到商品评论组件中去，并且要把商品的id带过去

3、来到了商品评论组件，将我们的商品id传递给评论子组件

触发路由靠的是 path的方式，传参是通过query

关于究竟用哪种方式触发路由及哪种方式传参，根据实际业务来

---

加入购物车功能

数量子组件内部数据发生变化之后，告知父组件

1、在商品详情父组件中集成数量选择子组件
    1.1、创建一个subnumber.vue
    1.2、集成到父组件中(goodsinfo.vue)
    1.3、实现subnumber内部的逻辑（界面和逻辑）

2、当子组件中的值发生更改之后传递给父组件
    通过自定义事件 click dbclick

子组件传值给父组件

1、子组件(发送发)，通过$emit触发自定义事件传值
    this.$emit('numberChange',this.count)
    
2、父组件(接收方)，通过v-on:监听自定义事件，实现处理函数，接收到值
    注意：在监听事件的时候，我们处理函数，你写上函数名称即可

    
    
    getGoodsCount(count){
       console.log("---子组件传递过来的值---",count)
    }

---

第六部分

内容回顾

---

今日内容

组件的生命周期

人的生命周期：
    出生 ---> 幼儿园 ---> 小学 --->初中--->高中--->大学--->工作--->结婚--->生孩子--->幸福快乐的生活--->死亡
    
组件生命周期
    beforeCreate ---> created ---> beforeMount ---> mounted ---> beforeUpdate ---> updated ---> beforeDestory ---> destoryed

    

概念:
    在组件执行的过程中，在适当的时机，Vue底层在不同的时间点会自动调用这个生命周期钩子(函数)
    
注意点:
    1、这些生命周期函数(钩子)都是Vue底层自动帮我们调用的
    2、只有我们在组件中实现了这些生命周期钩子，Vue才会调用
    3、生命周期函数和普通函数不一样的地方在于，生
    命周期是Vue提供的，我们只需要实现了对应的函
    数，Vue在运行中就会自动帮我们的调用，但是普通
    函数，我们必须自己手工调用才能执行
    4、这些生命周期钩子中，除了beforeUpdate ---> updated其它都只会调用一次

组件生命周期的应用场景

created:发送网络请求

统计用户偏好:
    beforeCreate 记录一个时间 11:43:23
    beforeDestory 记录一个事件 11:44:23
        1分钟 发送请求给后台 newslist.vue
        
记录之前的状态
    比如在有些页面填写了一些信息，没有提交，就不小心返回了，在beforeDestory记录起来，下次进去的时候，从localStorage中取出来，填充上去
    记录上一次滚动到了哪里，返回的时候记录一下，再次进去的时候，滚动到指定位置

思考

如果数据慢了，这个时候如何解决刚刚那个问题？

---

非父子组件传值

以点击加入购物车，然后徽标值变化为例

商品详情组件 ---> App.vue

什么样的组件才构成父子组件关系
一个组件中通过components注册的组件，才称之为它的子组件

步骤:
    1、创建一个空的Vue对象 bus
    2、在发送发(goodsinfo.vue)通过 bus.$emit('自定义事件名称',值)
    3、在接收方(App.vue)通过 bus.$on('自定义事件名称',处理函数)

---

Vuex

概念

 在各个组件之间共享数据用的，全局共享

 局部数据，组件内专用的，就是局部数据

 状态 === 数据

什么情况下我应该使用 Vuex？

https://vuex.vuejs.org/zh-cn/intro.html 

几个核心概念

State：
    存储数据的地方,本身是个对象，通过属性名称和值的方式来表示的 属性名称:js类型(数组、对象，字符串...)
    
Getters:
    从State中取出数据,他也是个对象，对象里面提供的是 属性名称:函数
    
Mutations
    同步的往State总存储数据,他也是一个对象，对象里面提供的是 属性名称:函数
    
    Mutations ---> State

Actions
    异步的间接的往State总存储数据,他也是一个对象，对象里面提供的是 属性名称:函数
    
    Actions ---> Mutations ---> State

Modules

注意事项

1、我们一个完整的仓库里面有State、Getters、Mutations、Actions，但是不是说必须要有这四个，这是可选的

2、如果当我们在实际开发中，一个仓库不够用，通过Modules来创建多个仓库

3、当使用Actions往State中存值的时候，不能直接存，必须借助同步(Mutations)去存

4、在Mutations中的所有函数中，第一参数是State

代码步骤

1、创建仓库
    参考:https://vuex.vuejs.org/zh-cn/installation.html
    
    1.1、安装包vuex
    1.2、集成到项目中来
        1.2.1、
            import Vuex from 'vuex'
            Vue.use(Vuex)
        
        1.2.2、创建一个空仓库
        
        1.2.3、注入到根实例中，让我们整个项目都能使用Vuex进行全局状态管理
    
2、往仓库中存储数据（点击加入购物车把商品的数据存起来）

3、从仓库中取数据（App.vue中展示徽标的时候，购物车组件）

---

第七部分

内容回顾

生命周期

beforeCreate
beforeDestory 

注意:
    生命周期钩子是Vue提供的，我们程序员只需要实现相应的生命周期钩子即可，在生命周期钩子，写上自己的业务逻辑即可，这样的话，Vue就会在恰当的时机调用并且执行我们缩写的代码

非父子组件传值

1、搞一个公共的vue对象 bus

2、在传值方，通过bus.$emit('xxx',{name:'xxx',count:10})触发事件

3、在接收方，通过bus.$on('xxx',function(count){
               })
    注意:事件只需要注册一次

Vuex

概念

五大核心概念

State 状态(数据)
Getters 从State中获取数据
Mutations 同步的方式对State中的数据进行更改
Actions 异步的方式对State中的数据进行更改
    注意：这个得借助Mutations中的方法进行更改
    
Modules 创建多个仓库

代码

1、集成Vuex
    安装
    导入
    使用

2、在项目中使用
    2.1 创建了空仓库
    2.2 别忘记注入进来
    2.3 写store中的代码
        state :{goodsList:[]},
        mutations : {
            函数
        }
        actions:{
        }
        getters:{
        }

---

今日目标

各大电商购物车数据如何存储

Vuex 内存存储机制

京东:
    没有登录的时候，默认在本地 cookies
        优势:减少服务器资源消耗，充分利用用户浏览器的资源
        
        缺点:可能会流失客户
    
    登录之后 存在服务器
    
淘宝:
    都是存在服务器
    
    优点:客户的流失率可能会小一些
    缺点:消耗服务器资源

购物车

[
    {goodsId:"87",count:2},{goodsId:"88",count:3},
    {goodsId:"87",count:3}
]

购物车代码思路分析

1、获得数据

    [
        {goodsId:"87",count:2},{goodsId:"88",count:3},
        {goodsId:"87",count:3}
    ]
    
    ===> 目标
    [
        {goodsId:"87",count:5,title:'xxx'},
        {goodsId:"88",count:3,title:'xxx'}
    ]
    
        1.1、把存在Vuex中的数组，转化成对象
            [
                {goodsId:"87",count:2},{goodsId:"88",count:3},
                {goodsId:"87",count:3}
            ]
        
            ===> var tempObj = {"87":5,"88":3}
            
        1.2、遍历对象，把key放入到一个数组中
        
            ===> ["87","88"]
        
        1.3 把数组中的商品id,给他整成符合后台要求的字符串参数
        
            ===> 87,88
            
        1.4 发送请求，请求回来之后，给我们每个商品动态加上count
        
            [
            {goodsId:"87",count:tempObj["87"],title:'xxx'},
            {goodsId:"88",count:tempObj["88"],title:'xxx'}
            ]

2、展示商品列表
    2.1、展示购物车列表
    2.2、展示提示信息

3、购物车里面操作的业务逻辑
    1、开关发生变化的时候
        统计信息(抽取公共的方法)
        删除按钮样式的变化
        
    2、删除按钮的删除操作
        Vuex中的对应的数据要干掉
        购物车中对应的数据要删除掉
        统计信息(抽取公共的方法)
        App.vue中徽标的值要发生变化

---

工作中遇到问题如何去做

1、先把整体功能做一个区分
2、再对各个功能各个击破

支付流程的体验(以美团买汉堡包用支付宝支付为例)

1、登录

2、提交订单
    在后台数据库中生成一条该用户买的商品的记录
         id        name          price pay_status
        zni763   汉堡王猪肘子     39.9   0

        

 https://mclient.alipay.com/home/exterfaceAssign.htm?alipay_exterface_invoke_assign_client_ip=47.74.9.76&body=%E7%BE%8E%E5%9B%A2%E8%AE%A2%E5%8D%95-124231929078451505985191&subject=%E7%BE%8E%E5%9B%A2%E8%AE%A2%E5%8D%95-124231929078451505985191&sign_type=RSA¬ify_url=http%3A%2F%2F10.53.86.13%3A8966%2Fpaygate%2Fnotify%2Falipay%2Fpaynotify%2Fwap&out_trade_no=124231929078451505985191&return_url=http%3A%2F%2Fmeishi.meituan.com%2Fi%2Forder%2Fresult%2F3948233345&sign=PcXeDQ7r4AVP1Fbz8pvKcS%2Bvkoppr8uvr6sw5wO6aXJjAnRCNhKtym%2FGmrCW%2Fo8quf3I8758hlg6fH2cAkbu0tGNPxMtUba2WrAtJ5dvap7apRodhT2XqFm7Xc4aA%2BS9P3%2Fa90nZiu0WbMZn4B%2FMREABb7CaRasrLbQJq%2BODQag%3D&_input_charset=utf-8&enable_paymethod=balance%2CcreditCardExpress%2CdebitCardExpress%2CmoneyFund&it_b_pay=1440m&alipay_exterface_invoke_assign_target=mapi_direct_trade.htm&alipay_exterface_invoke_assign_model=cashier&total_fee=15&service=alipay.wap.create.direct.pay.by.user&seller_id=2088311465207164&partner=2088311465207164&alipay_exterface_invoke_assign_sign=_z_r2k6a8_u_lt_ko_fp_q_ywdcji_s_if_y_e_q_tbehn6_g_v_rk_mxwj4k9_k5jb_ns_ftxg%3D%3D&payment_type=1

有哪些人参与

公司老板&财务
    前提准备  营业执照、纳税证明和支付宝签约，成为他的合作商户
    支付宝审核通过之后，会给你颁发一个唯一的标识符
    
    美团:
        2088311465207164

前台(前端、iOS、Android)
    让用户选择商品，购买
    
    1、提交订单
        让后台记住这个订单 
        
    4、当用户选择了支付方式之后，发送请求给后台
        让后台返回给我对应平台的一些支付的加密信息
        
    6、浏览器接收到了支付宝那一大堆加密的信息之后，window.location.href = ""

后台
    
    2、在后台数据库中记录该订单信息
        id        name          price  pay_status
        zni763   汉堡王猪肘子     39.9      1
        
    3、把选择支付方式的页面返回给浏览器，让用户能看到

    5、在后台生成有关支付宝的加密信息
        https://mclient.alipay.com/home/exterfaceAssign.htm?alipay_exterface_invoke_assign_client，把这一大堆信息返回给浏览器
        
    7、当用户支付成功之后，支付宝服务器，会发送请求给美团后台，这样，后台接收到请求之后，就会把，最刚开始生成的订单的状态，更改为已支付

第八部分

Vue项目打包上线

步骤

1、在项目的根目录，创建一个针对生产环境的配置文件webpack.publish.config.js

2、在我们package.json的scripts标签中，添加一个pub的指令，指令的内容就是webpack --progress --config webpack.publish.config.js

3、在我们的webpack.publish.config.js把开发阶段中的内容拷贝过来，并且进行修改，改成符合生产条件的代码

html-webpack-plugin 说明

开发阶段，在内存中生成一个index.html，并且配合webpack-dev-server一起用，并且会自动导入bundle.js

生成阶段，他会在dist目录生成一个实实在在的index.html并且也会自动加上导入bundle.js的代码

优化的第一步

压缩
    压缩bundle.js
        使用UglifyJS，但是要是用UglifyJS必须先把我们的代码从es6转成es5
    
    压缩index.html

压缩bundle.js的步骤(1.61M)

1、必须先把我们项目的代码从es6转成es5
    使用babel来转换我们的es6代码
    参考:https://babeljs.io/docs/setup
    
    1.1、先安装包
        cnpm install --save-dev babel-loader babel-core babel-preset-env
        
    1.2、在webpack.publish.config.js中的loaders中添加一个配置
        { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" }
        
    1.3 在项目根目录下面创建一个.babelrc的配置文件，在里面设置好预设(preset)，能够使用什么样的预设转化百分之多少的es6代码

2、在借助我们webpack内置的UglifyJS来压缩js
    参考:https://cn.vuejs.org/v2/guide/deployment.html
    
注意：因为项目中使用了vue-prview，别忘记在loaders中给它配置一下，否则有问题
    {
        test: /vue-preview.src.*?js$/,
        loader: 'babel-loader'
    }

压缩index.html

参考:https://github.com/jantimon/html-webpack-plugin
    https://github.com/kangax/html-minifier#options-quick-reference

优化的第二步

拆分bundle.js，把一些内容从bundle.js剥离出来

思考:
    1、图片，从bundle.js中剥离出去，放在一个专门的文件夹中
    2、把项目中用到的第三方的包从bundle.js中剥离出来，形成单独的js文件
    3、把css从bundle.js中剥离出来，提取到一个单独的css文件中
    
建议:
    上面的三个内容的配置的代码比较多，能理解多少就理解多少，不明白的再看看文档，或是看看我的代码，工作中需要可以直接拷贝过去即可。

优化第二步之抽离图片

参考:https://doc.webpack-china.org/loaders/url-loader

可以给url-loader设置一个阀值
loader: 'url-loader?limit=4000&name=images/[name]-[hash:5].[ext]'

优化第二步之抽离第三方包

参考:https://doc.webpack-china.org/plugins/commons-chunk-plugin/

步骤:
    1、更改入口文件
        以对象的形式配置，属性名称（打包出来的js文件名称）:值(第三方包的名称/自己项目源代码打包的入口main.js)
        
    2、更改输出文件
        output: { //项目打包之后的输出文件
            path: path.join(__dirname,'dist'),
            filename: 'js/[name].js'
        }
        
    3、在plugins中增加一个插件的配置
        new webpack.optimize.CommonsChunkPlugin({name:["vuePreview","moment","vueResource","quanjiatong","mintUi"],minChunks: Infinity})

优化第二步之抽离css

参考:https://doc.webpack-china.org/plugins/extract-text-webpack-plugin/

步骤:
    1、安装包
        cnpm i extract-text-webpack-plugin --save-dev
        
    2、导入
        const ExtractTextPlugin = require("extract-text-webpack-plugin")
        
    3、更改css-loader的配置
        {
            test: /\.css$/,
            use: ExtractTextPlugin.extract({
                fallback: "style-loader",
                use: "css-loader"
            })
        }
        
    4、在plugins中新增一个配置即可
        new ExtractTextPlugin("css/styles.css")

额外补充，打包之前干掉dist目录

clean-webpack-plugin
使用:https://github.com/johnagan/clean-webpack-plugin

浏览器出现缓存的原因

请求方式为GET
url没有变化

---

微信小程序

运行在`微信`里面的一种小程序

原生的App

基于微信平台

步骤:
    1、注册&填写信息
    
    2、开发
    
    3、发布

开发者工具

https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html



App.json 
    https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html

---

React-Native