、Vue总结

1

"""
1、在html页面中用script标签导入vue环境
    <script src="js/vue.js"></script>

2、new Vue({ el: "#app" })挂载页面标签，建立关联后控制页面标签
    挂载点才有css3选择器语法
    挂载点就是vue与页面的关联
    挂载点只检索第一个匹配结果

3、插值表达式{{ }}可以完成基础运算
    num | num + 10 | str.split() + "拼接"

4、插值表达式中的变量有实例成员 data 来提供
    <p id="app">{{ msg }}</P>
    let msg = '12345'
    new Vue({
        el: "#app",
        data: {
            msg,
        }
    })

5、v-on指令可以给标签绑定事件，事件函数由实例成员 methods 来提供
6、插值表达式{{ 变量 | 过滤器 }}的过滤器由实例成员 filters 来提供
    <p id="app" @click="fn">{{ msg | f1(1), 10 | f2(100, 200) }}</P>
    let msg = '12345'
    new Vue({
        el: "#app",
        data: {
            msg,
        },
        methods: {
            fn(){}
        },
        filters: {
            f1(v1,v2){return v1+v2},
            f2(v1,v2,v3,v4){return v1+v2+v3+v4}
        }
    })


7、面向对象js： { 变量, } | function Fn(值){ this.属性 = 值 } | obj = { 方法(){} }
    function Fn(v1, v2){
        this.n1 = v1;
        this.n2 = v2;
    }
    let f1 = new Fn(10, 20);
    f1.n1

8、文本指令：{{ }} | v-text=""  | v-html=""
9、事件指令: v-on:事件名="" | @事件名="" | :事件名="fn" | :事件名="fn($event, 自定义参数)"
    @click="fn"  |  @click="fn()"  |  @click="fn(10， 20)"  |  @click="fn($event, 10)"

10、属性指令：v-bind:属性名="" | :title="变量" | :style="字段变量" |
            :class="变量" | :class="[变量1, 变量2]" | :class="{类1:真假, 类2:真假}"
    :title="var1" | :style="dic1" | :class="var2" | :class="[var3, var4]" |
    :class="{box: true|false}"

    var2 = 'box' | var2 = 'box circle'

"""

2

"""
1、v-model完成表单指令，简单的控制value，单选框中的使用，单独复选框的使用以及复选框中的使用
    <input type="password" v-model="控制value的变量" />

2、了解：斗篷指令解决页面闪烁
    v-cloak =>  [v-cloak] {display:none} => 加载vue就会清除v-cloak属性

3、条件指令v-if与v-show区别，v-if家族成员以及上分支会成立会屏蔽下分支的工作机制
    v-if不渲染隐藏 | v-show以display:none渲染隐藏
    v-if | v-else-if | v-else

4、循环指令v-for如何循环渲染字符串、数组、字典，以及需要嵌套循环渲染赋值结构
    v-for="v in str"  v-for="（v,i) in str"
    v-for="v in arr"  v-for="（v,i) in arr"
    v-for="v in dic"  v-for="（v,k) in dic"  v-for="（v,k,i) in dic"
    [{},{}] {a:[]} [str1,str2]

5、了解：delimiters实例成员解决插值表达式符号冲突
    delimiters: ['{{', '}}']

6、计算属性(方法属性)在computed中声明，方法内部变量会被监听，值来源于方法返回值
    computed: {
        methodAttr() {
            // 内部出现的变量都会被监听，发生值更新会回调该方法
            return '方法属性的值'
        }
    }

7、监听watch可以设置数据的监听方法，在监听属性更新时，完成特定逻辑
    watch: {
        attr() {
            // attr属性被监听，发生值更新会回调该方法
        }
    }

8、重点：组件的概念，组件就是vue实例(对象)
    <div id="app">
        <tag />
        <tag />
    </div>

    let tag = {
        template: '<p>子组件</p>'
    }

    new Vue({
        el: '#app',
        components: {
            tag,
        }
    })

9、创建、注册、使用子组件的三部曲
"""

3

"""
1、可以用来复用的子组件，数据data需要做局部化处理，当组件被复用时，数据会相互独立
    let tag = {
        template: '...',
        data() {
            return {
                ...
            }
        }
    }

2、将父组件的数据传递给子组件，在渲染子组件标签时，给自定义属性设置父级数据，在子级内部用自定义属性拿父级数据
    let tag = {
        template: '<div>{{ msg }}</div>',
        props: ['msg']
    }
    new Vue({
        template: '<div><tag :msg="msg"></tag></div>',
        components: {
            tag,
        },
        data: {
            msg: '123'
        }
    })

3、将子组件的数据传递给父组件，子组件需要主动触发$emit自定义事件携带出数据，父级实现自定义事件方法，就可以接收到子级数据
    let tag = {
        template: '<div @click="fn">{{ msg }}</div>',
        data() {
            return {
                msg: '123'
            }
        },
        methods: {
            fn() {
                this.$emit('func', this.msg)
            }
        }
    }
    new Vue({
        template: '<div><tag @func="f"></tag></div>',
        components: {
            tag,
        },
        methods: {
            f(msg) {
                console.log(msg)
            }
        }
    })

4、搭建vue环境需要依赖node环境，以及用npm包管理器安装vue脚手架cli（npm可以换源为cnpm）
5、通过 vue create 项目 来创建前台项目，选择配置好项目所需的依赖
6、用pycharm来配置vue项目启动
7、属性vue项目目录结构，以及基本的各种原理：项目入口从main.js开始
"""

4

"""
1、箭头函数 let fn = (a, b) => a + b;
    let 函数名 = (参数列表) => {函数体}

2、函数原型：给函数设置原型 Fn.prototype.变量 = 值，那么Fn new出来的对象都可以共用 原型变量
    function Fn() {}
    let f1 = new Fn()
    let f2 = new Fn()
    Fn.prototype.fn = () => {}
    Fn.prototype.fn2 = function () {}
    f1.fn()
    f2.fn()

3、vue项目的请求生命周期：main.js完成环境的加载与根组件的渲染；router的index.js完成路由映射
    项目启动：加载main.js：index.html、new Vue()、Vue、router、store、完成App.vue的挂载
    请求：请求路径 => router路由 => 页面组件(小组件) => 替换<router-view />完成页面渲染 => <router-link>（this.$router.push()）完成请求路径的切换

4、<router-view />标签作为路由映射的页面组件占位符
5、<router-link></router-link>来完成路由的跳转
    <router-link to="/1" :to="{name:'home', params={arg: 1}}">主页</router-link>

    {
        path: '/:arg',
        name: 'home',
        component: Home
    }

6、this.$router来完成路由的跳转：push() | go()
    this.$router.push('/1');
    this.$router.push({name:'home', params={arg: 1}});
    this.$router.go(-1);
    this.$router.go(1);

7、this.$route来完成路由的传参
    this.$route.params.arg
    this.$route.params['arg']

8、资源的加载
    require(资源的相对路径)
"""

5

"""
1、vue项目配置全局css文件：在main.js中用import导入或是require()加载 .css 文件
    assets/css/global.css
    import '@/assets/css/global.css' | require('@/assets/css/global.css')

2、vue项目配置全局js文件：在main.js中用import导入 .js 文件，并将其设置给 Vue 原型
    settings.js => export default {base_url='http://127.0.0.1:8000'}
    import settings from '@/assets/js/settings.js'
    Vue.prototype.$settings = settings => this.$settings.base_url

3、vuex提供的store仓库存储，可以完成组件间的传参(了解)
    store/index.js => state: {num: 0}
    this.$store.state.num

4、vue项目配置axios可以完成前后台交互：this.$axios({}).then(response=>{}).catch(error=>{})
    import axios from 'axios'
    Vue.prototype.$axios = axios
    this.$axios({
        url: '后台接口',
        method: 'get|post',
        params: {},
        data: {},
        headers: {},
    }).then(response=>{
        response.data
    }).catch(error=>{
        error.response.data
    })

5、django利用django-cors-headers插件解决前后台分类项目跨越问题(重点)
    注册corsheaders => 添加中间件 => 允许跨越

6、前台两种提交数据的方式：url拼接参数，数据包参数
7、前后台分离，后台登录通过的token会返回给前台，前台自己处理存储在cookie中：vue-cookies插件操作cookie
    token = response.data.token

    this.$cookies.set(k, v, exp);
    this.$cookies.get(k);
    this.$cookies.remove(k);

8、全局应用配置element-ui、bootstrap
    import ElementUi from 'element-ui'
    Vue.use(ElementUi)
"""