Vue中的一些认识知识

axios与fetch实现数据请求

    1.fetch

    why:用来替代AJAX的

        XMLHttpRequest 是一个设计粗糙的API，配置和调用方式非常混乱，而且基于事件的异步模型写起来不友好，

        用的不多的原因：兼容性不好 

        polyfill:如果要兼容ie8,https://github.com/camsong/fetch-ie8

        fetch("index.json").then(res=>{
                    return res.json();
                }).then(res=>{
                    console.log(res)
                })

        默认是get方法，如果要使用POST方法 ,header中还有一种application json格式，

        application/x-www-form-urlencoded 匹配的格式body:"name=kewin&id=112"，这些都要和后端对接好字段

        post1:

        fetch("index.json",{
                    method:'post',
                    headers:{
                        "Content-Type":"application/x-www-form-urlencoded"
                    },
                    body:"name=kewin&id=112"
                }).then(res=>{
                    return res.json();
                }).then(res=>{
                    console.log(res);
                    this.datalist = res.data.films;
                })

        post2:

                fetch("index.json",{
                    method:'post',
                    headers:{
                        "Content-Type":"application/json"
                    },
                    body:JSON.stringify{
                        "name":"kewin",
                        "age":11
                    }
                }).then(res=>{
                    return res.json();
                }).then(res=>{
                    console.log(res);
                    this.datalist = res.data.films;
                })

        fetch默认是不包含cookie的，如果需要拿到cookie的数据，需要添加credentials:"include"

        fetch("index.json",{
                    method:'post',
                    headers:{
                        "Content-Type":"application/json"
                    },
                    body:JSON.stringify{
                        "name":"kewin",
                        "age":11
                    },
                    credentials:"include"

    2.axios

        专门做数据请求的，  get方法

            axios.get("index.json").then(res=>{
                console.log(res);
                this.datalist = res.data.data.films
            })

        post方法

            axios.get("index.json",{
                myname:'kawin',
                myage:11
            }).then(res=>{
                console.log(res);
                this.datalist = res.data.data.films
            })

    3.mixins

        混入(mixins)是一种分发Vue组件中可复用功能的非常灵活的方式，

        混入对象可以包含任意组件选项。

        当组件使用混入对象时，所有混入对象的选项将被混入该组件本身的选项。如果VUE当中与混入的有同名的现象，vue中的方法优先级比较高。

        var obj = {
            methods:{
                methodsA(){
                    console.log('methodsA');
                }
            }
        }
        mixins:[obj],

    4.虚拟DOM与diff算法key的作用。

        如果他们的父节点不相同，创建的时候会直接删除div这个元素，创建一个p元素，如果他们的父节点相同， 则会最大限度的复用他们的元素，只是修改了里面的内容，而不会删除创建元素，

        <div v-if="isShow">111</div>

        <p v-else>222</p>

 

    5.组件化开发基础   

        扩展HTML元素，封装可重用的代码

 

    关闭eslint

        vue.config.js lintOnSave:false

        .eslintrc 删除 '@vue/standard'

 

    组件化安装axios

        cnpm install --save axios

        跨域问题，进行反向代理

        proxy代理

            module.exports = {
            devServer: {
                proxy: {
                '/ajax': {
                    target: 'http://m.maoyan.com/',
                    //   ws: true,代表websocket
                    changeOrigin: true
                }
                }
            }
            }

        vue.config.js中配置publicPath:'./'

            类似Cordova hybird应用的文件系统中（配合hash模式）

 

        MPA（多页面）应用的配置

            module.exports = {
                pages: {
                    index: {
                    // page 的入口
                    entry: 'src/index/main.js',
                    // 模板来源
                    template: 'public/index.html',
                    // 在 dist/index.html 的输出
                    filename: 'index.html',
                    // 当使用 title 选项时，
                    // template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>
                    title: 'Index Page',
                    // 在这个页面中包含的块，默认情况下会包含
                    // 提取出来的通用 chunk 和 vendor chunk。
                    chunks: ['chunk-vendors', 'chunk-common', 'index']
                    },
                    // 当使用只有入口的字符串格式时，
                    // 模板会被推导为 `public/subpage.html`
                    // 并且如果找不到的话，就回退到 `public/index.html`。
                    // 输出文件名会被推导为 `subpage.html`。
                    subpage: 'src/subpage/main.js'
                }
                }

        我们可以不等着后端给数据，可以使用json server来模拟数据

            cnpm install -g json-server

        开启JSON Server

                json-server --watch db.json

        引入swiper

            cnpm install --save swiper

        引入better-scroll

            cnpm install --save better-scroll

        vuex

            先dispatch到actions中，进行异步操作，返回数据再将数据提交到mutations中进行操作，再将状态改变提交到state，状态改变了，自然影响了状态中的所有的组件

            @/components/child1'// @代表src这个层级

        element ui

        mint ui手机端

        　　npm i element-ui -S安装

        　　npm i mint-ui -S

        　　import ElementUI from 'element-ui'
        　　import 'element-ui/lib/theme-chalk/index.css'

        　　import MintUI from 'mint-ui'
        　　import 'mint-ui/lib/style.css'
        　　Vue.use(ElementUI)

    rem dpr

        <script>
            var ratio = window.devicePixelRatio;
            var meta = document.querySelector('[name=viewport]');
            meta.setAttribute('content',`width=device-width,initial-scale=${1/ratio},user-scalable=no`)


            document.documentElement.style.fontSize = window.innerWidth / 750 * 100 + 'px'
        </script>

    移动端事件相关

        1.click事件300ms延迟

            移动web页面上的click事件响应都要慢上300ms

            移动设备访问web页面时往往需要双击或者捏开放大页面后来看清页面的具体内容

            正是为了确认用户是单击还是双击，safari需要300ms的延迟来判断

            后来的iphone也一直沿用这样的涉及，同时android也借鉴沿用了这样的设计

            于是300毫秒的延迟就成为了默认的规范

            解决：1.设置meta viewport 

                user-scalable=no,有兼容性问题

            2.fastclick.js

                兼容性比较好

                if ('addEventListener' in document) {

                    document.addEventListener('DOMContentLoaded', function() {

                        FastClick.attach(document.body);

                    }, false);

                }

                或者模块化安装

                cnpm install fastclick --save

                main.js中 

                    import FastClick from 'fastclick'

                    fastclick.attach(document.body)

        2.Zepto.js

            zepto是一个轻量级的针对现代高级浏览器的javascript库，它与jquery有着类似的api，

            1.提供JQUERY的类似的API，但并不是100%覆盖JQUERY,

            2.zepto不支持旧版本的ie浏览器 <10

            3.zepto添加了完整的touch手势支持，解决300ms演示(tap取代click)

            移动端浏览器默认支持四个事件touchstart touchmove touchend touchcancel

            tap事件touchstart touchmove touchend 3个事件模拟实现的