vue框架:

路飞项目
1.vue框架:
    前台html+css+js框架,是不同于js与jq的数据框架
    指令| 实例成员| vue项目
    
2.drf框架:
    django的插件,完成前后台分离项目后台接口编写的框架
    序列化组件| 三大认证组件|
    分页,筛选,过滤,排序|请求,解析,响应
    
3.路飞项目:
    前台vue完成,后台由drf框架完成前后台分离项目
    git| 短信认证| celery异步任务| 项目上线
-----------------------------------------------------------------------------------    
js对象(字典)补充:
let b = 20;
let dic = {
    a:10,   //字典本身就是对象,key都是字符串形式可以省略引号
    b(b:b)        // 值为变量时,且与key同名,可以简写
    };
console.log(dic)

vue:    
    1.what是:用于构建用户界面的渐进式JavaScript框架(选择性控制)
    
    2.why.学: 
        1.是三大主流框架之一: Angular  React  Vue
        2.有先进的前端设计模式: MVVM
        3.可以完全脱离服务器端,以前端代码复用的方式渲染整个页面,组件化开发
        4.结合了其他框架的优点,轻量级,中文API,数据驱动,双向绑定,单页面应用
        5.虚拟DOM ***
         缺点:没其他两个框架完善,在趋于完善中
    3.vue环境: 本地导入,cdn导入
    
        注: 渐进式框架:根据需求,可以决定vue框架控制项目的具体方位,可以为一个标签,也可以为一个页面,甚至可以为一个项目
            new Vue({el:'.xxx'})
        
    4.挂载点:
        1.html页面:html与body不能作为挂载点,css3选择器语法
        2.一个vue对象挂载点之后只索引一个匹配结果,所以通常用id标识 
    
    实例成员:
        1.实例成员,data为vue环境提供数据,数据采用字典{}形式;
        2.fiters: 过滤器函数fn(a,b)-----> {{a | fn(b)}} | {{a,b | fn}}
        3.method:事件方法
        ------------------------------------
        computed: 设置 方法属性,该方法属性在页面渲染后,绑定的方法中任意变量发生改变(都被监听),都会回调绑定的方法,
            eg: 一个变量依赖多个变量
            
        
        watch: 设置已有属性的监听事件,监听的变量改变就会回调绑定的方法啊
            eg:多个变量依赖一个变量
            
        props:声明组件的自定义属性
        emit: 为组建自定义事件发送数据
            
        
    
    指令:
        文本: {{}}  | v-text | v-html
        事件: v-on:click="clickAction" | @click="clickAction" | @click="clickAction($event)"
        属性: v-bind:stylt="myStyle" | :class="[c1,c2]" | :class="{active: isActive}"
        表单指令: v-model="变量"
        -----------------------------
        v-once:
        v-cloak: 防止页面加载 抖动
        v-show: 绑定的页面为布尔类型,隐藏时,在页面中以 display:none 渲染
        v-if|v-else-if|v-else: 前分支成立会屏蔽后分支,else分支不需要条件
        v-for: 遍历
            字符串:  v-for="(ch,index) in str"
            数组:    v-for="(ele,index) in arr"
            对象:    v-for="(value,key,index) in obj"
        
组件：
    1.定义：一个包含html，css，js独立的集合体，可以完成页面解析的代码复用
    2.组件分为根组件，全局组件，局部组件
        根组件：
        全局组件:
            vue.component("组件名",{实例成员萌})    
        局部组件:必须在使用该组件的父组件中注册
            let 组件名 = {实例抽根烟}
    3.组件都有自己template(根组件可以省略采用挂在点),
      子组件可以复用,所以数据要做局部化处理data(){ return{} }:
      在哪个组件模板中出现的变量,就由当前组件提供变量对应 的值
    
    4.组件信息交互
        父传子:提供绑定自定义属性
        子传父:提供自定义事件携带
        
        
        
        
Vue 项目搭建:
    1.安装 node
        官网下载安装包,傻瓜式安装:https://nodejs.org/zh-cn/
    2.换源安装cnpm
        npm install -g cnpm --registry=https://registry.npm.taobao.org
    3.安装脚手架
        cnpm install -g @vue/cli
    4.如果2或3安装出错   清除缓存处理
        npm cache clean  --force
        
        
Vue 项目创建:
    vue create 项目名;
    在pycharm中配置npm项目
    
项目目录


main.js:程序的入口文件
    加载vue环境
    加载插件环境: 路由,仓库,ajax,cookie,element-ui...
    加载自定义环境:全局样式(global.css),全局配置(settings.js)
    渲染根组件

.vue文件形式组件
    template标签:内部有且只有一个跟标签
    script标签: export default{},导出该局部内容
    style标签: scope属性,实现样式的组件化
    
    
项目运行生命周期:
    main.js => router.js => 链接 => 页面组件 =>替换根组件中的router-view 
    标签完成页面渲染 => 通过 router-link | this.$router.push()切换路由
    (链接) => 完成渲染组件的替换 => 页面的跳转


新建页面的三步骤:
    1.创建页面组件
    2.设置组件路由
    3.设置路由跳转
    
    
组件的生命周期钩子:组件从生成到销毁整个过程的一些特殊时间节点回调的函数

this.$router:路由跳转
this.$route:路由数据(this.$route.path)



vue-router插件:****

路由跳转:
    this.$router.push('/course');
    this.$router.puth({name:course});
    this.$router.go(-1);
    this.$router.go(1);
    <router-link :to="/course">课程页</router-link>
    <router-link :to='{name:'course'}">课程页</router-link>
    
    
路由传参

    第一种:
        配置:path:'/path/:pk' =>请求: '/path/${pk} =>取值:this.$route.params.pk
    第二种:
        配置:path:'/path',name='path' =>请求:{name:'path',query={pk:值}} =>取值 this.$route.query.pk
        
    
完成跨组件传参的方式:
    1. localStarage:            永久存储数据
    2. sessionStorage:          临时存储数据(刷新页面数据不重置)
    3. cookie:                  临时或永久数据(由过期时间决定)
    4. vuex的仓库(store.js):    临时存储数据(刷新页面数据重置)
    
vuex仓库插件***

store.js配置文件
    export default new Vuex.Store({
        state: {
            title: '默认值'
        },
        mutations: {
            // mutations 为 state 中的属性提供setter方法
            // setter方法名随意，但是参数列表固定两个：state, newValue
            setTitle(state, newValue) {
                state.title = newValue;
            }
        },
        actions: {}
    })
        
在任意组件中给仓库变量赋值
    this.$store.state.title = 'newTitle'
    this.$store.commit('setTitle','newTitle')
    
在任意组件中取仓库变量的值
    console.log(this.$store.state.title)
    
    
vue-cookie插件:***
    安装:
        >:cnpm install vue-cookies
    
    main.js配置:
        第一种:
        import cookies from 'vue-cookies'      // 导入插件
        Vue.use(cookies);                    // 加载插件
        new Vue({
            // ...
            cookies,                        // 配置使用插件原型 $cookies
        }).$mount('#app');

        第二种*****
        import cookies from 'vue-cookies'    // 导入插件
        Vue.prototype.$cookies = cookies;    // 直接配置插件原型 $cookies
                
    使用:
        增(改): key,value,exp(过期时间)
            时间:  1s | 1m | 1h | 1y
            this.$cookies.set('token',token,'1y');
            
        查:key
            this.$cookies.get('token');
        
        删: key
            this.$cookies.remove('token')
            
    注: cookie一般是用来存储token的
        1.token: 安全认证的随机字符串
        2.有后台产生,存储于后台的(session表中,文件,内存缓存),存储于前台的(cookie中)
        3.服务器先生成反馈给前台(登录认证过程),
          前台提交给后台完成认证(需要登录后的请求)
         
        4.前后台分离项目:后台生成token,返回给前台 ==>前台自己存储,
          发送携带token请求 ==> 后台完成token校验 ==>后台得到登录用户
          
          
axios插件:****
    安装:   
        cnmp install axios
    main.js配置:
        import axios from 'axios' //导入插件
        Vue.prototype.$axios = axios; 直接配置插件原型 
    使用:
        this.axios({
            url:'请求接口',
            method:'get|post',
            data:{post提交的数据},
            params:{get提交的数据},
            header:{请求头}    
            }).then(function(response){
                请求成功的回调函数}).catch(function(error){
                请求失败的回调函数})
    
    案例:
        // get请求
        this.$axios({
            url: 'http://127.0.0.1:8000/test/ajax/',
            method: 'get',
            params: {
                username: this.username
            }
        }).then(function (response) {
            console.log(response)
        }).catch(function (error) {
            console.log(error)
        });

        // post请求
        this.$axios({
            url: 'http://127.0.0.1:8000/test/ajax/',
            method: 'post',
            data: {
                username: this.username
            }
        }).then(function (response) {
            console.log(response)
        }).catch(function (error) {
            console.log(error)
        });
        
跨越问题(同源策略):
    后台接收到前台的请求，可以接收前台数据与请求信息，发现请求的信息不是自身服务器发来的请求，拒绝响应数据，这种情况称之为 - 跨域问题（同源策略 CORS）

    导致跨域情况有三种
     1) 端口不一致
     2) IP不一致
     3) 协议不一致

    Django如何解决 - django-cors-headers模块
     1) 安装：pip3 install django-cors-headers
     2) 注册：
    INSTALLED_APPS = [
        ...
        'corsheaders'
    ]
     3) 设置中间件：
    MIDDLEWARE = [
        ...
        'corsheaders.middleware.CorsMiddleware'
    ]
     4) 设置跨域：
    CORS_ORIGIN_ALLOW_ALL = True


element-ui插件:
    下载=>配置=>使用
    下载:
        cnpm install element-ui
        
    配置main.js:
        import ElementUI from 'element-ui'
        import 'element-ui/lib/theme-chalk/index.css';
        Vue.use(ElementUI);
    
    使用:
        依照官网 https://element.eleme.cn/#/zh-CN/component/installation api

 组件间的交互

父传子:
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .info {
            text-align: center;
            width: 200px;
            padding: 3px;
            box-shadow: 0 3px 5px 0 pink;
            float: left;
            margin: 5px;
        }
        .info img {
            width: 200px;
        }
    </style>
</head>
<body>
    <div id="app">
        <info v-for="info in infos" :key="info.image" :myinfo="info"></info>
    </div>
</body>
<script src="js/vue.js"></script>
<script> 
    // 伪代码：模拟数据从后台请求
    /*
    let infos = '';
    document.onload = function () {
        $.ajax({
            url: '/images/',
            type: 'get',
            success (response) {
                infos = response.data
            }
        })
    };
     */

    let infos = [
        {
            image: 'img/001.png',
            title: '小猫'
        },
        {
            image: 'img/002.png',
            title: '蛋糕'
        },
        {
            image: 'img/003.png',
            title: '蓝糕'
        },
        {
            image: 'img/004.png',
            title: '恶犬'
        },
    ];

    let info = {
        template: `
        <div class="info">
            <img :src="myinfo.image" alt="">
            <p><b>{{ myinfo.title }}</b></p>
        </div>
        `,
        props: ['myinfo']
    };

    // 数据交互 - 父传子 - 通过绑定属性的方式
    // 1) 父组件提供数据
    // 2) 在父组件模板中，为子组件标签设置自定义属性，绑定的值有父组件提供
    // 3) 在子组件实例中，通过props实例成员获得自定义属性
    new Vue({
        el: '#app',
        components: {
            info,
        },
        data: {
            infos,
        }
    })
</script>

子传父:
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .close:hover {
            cursor: wait;
            color: red;
        }
    </style>
</head>
<body>
    <div id="app">
        <p>
            <input type="text" v-model="userMsg">
            <button @click="sendMsg">留言</button>
        </p>
        <ul>
            <msg-li @remove_msg="removeAction" v-for="(msg, i) in msgs" :msg="msg" :index="i" :key="msg"></msg-li>
        </ul>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    let msgLi = {
        template: `
        <li>
            <span class="close" @click="deleteMsg(index)">x </span>
            <span>第{{ index + 1 }}条：</span>
            <span>{{ msg }}</span>
        </li>
        `,
        props: ['msg', 'index'],
        methods: {
            // 系统的click事件
            deleteMsg(i) {
                // $emit('自定义事件名', 参数们)
                this.$emit('remove_msg', i);
                this.$emit('myclick', 1, 2, 3, 4, 5)
            }
        }
    };
    // 组件交互-子传父
    // 1) 数据由子组件提供
    // 2) 子组件内部通过触发系统事件，发送一个自定义事件，将数据携带出来
    // 3) 父组件位子组件标签的自定义属性通过方法实现，就可以通过参数拿到子组件传递处理的参数

    new Vue({
        el: '#app',
        data: {
            msgs: [],
            userMsg: ''
        },
        methods: {
            sendMsg() {
                if (this.userMsg) {
                    this.msgs.push(this.userMsg);
                    this.userMsg = "";
                }
            },
            removeAction(i) {
                this.msgs.splice(i, 1)
            }
        },
        components: {
            msgLi
        }
    })
</script>