项目准备-vue语法练习

红太狼 2022-12-27 08:33 71阅读 0赞

# 前言 #

搭建vue+node项目

# 项目准备 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyMzcwOTEz_size_16_color_FFFFFF_t_70]

*  使用技术栈：  
    前端： Vue + Element-UI + vue-element-admin  
    后端： Node + Express + Mysql  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyMzcwOTEz_size_16_color_FFFFFF_t_70 1]

# Vue技术栈 #

*  事件绑定  e m i t 和 emit和 emit和on
 *  指令 directive
 *  插件Vue.use
 *  组件化Vue.component
 *  组件通信 provide和inject
 *  过滤器 filter
 *  监听器 watch
 *  calss 和 style绑定的高级用法
 *  2.6新特性：  
    Vue.observable  
    插槽 slot

# Element-UI涉及技术 #

*  vue-cli 3 element插件
 *  element按需加载
 *  表单开发
 *  列表开发

# vuex和 vue-router进阶 #

涉及vuex 实现原理解析  
vuex-router实现原理解析  
vue-router路由守卫  
vue-router路由元信息  
vue-router路由API

# vue-element-admin框架解读 #

*  登录逻辑
 *  网络请求
 *  页面框架(Layout)
 *  动态生成路由
 *  图标使用
 *  面包屑导航

# Node涉及技术点 #

*  JWT认证
 *  EPUB解析电子书
 *  XML解析
 *  ZIP解压
 *  MULTER文件上传
 *  MySQL数据库操作

# 项目地址： #

[https://github.com/cunweizhao/vue-elemnt-node-demo][https_github.com_cunweizhao_vue-elemnt-node-demo]

# Vue语法练习 #

## ‘ e m i t 与 emit与 emit与on使用’ ##

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>$emit与$on使用</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
        <div id="root">
            <button @click="boost">触发事件</button>
        </div>
    <script>
        new Vue({ 
            el: '#root',
            data () { 
                return { 
                    message: 'hello vue'
                }
            },
            created(){ 
                this.$on('my_events', this.handleEvents)
            },
            methods:{ 
                handleEvents(e) { 
                    console.log(this.message,e)
                },
                boost() { 
                    this.$emit('my_events', 'my params')
                }
            }
        })
    </script>
    </body>
    </html>

需要断点调试  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyMzcwOTEz_size_16_color_FFFFFF_t_70 2]

## directive用法 ##

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>directive用法</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
        <div id="root" v-loading="isLoading">
            <div>{ { data}}</div>
            <button @click="update">更新</button>
        </div>
        <script>
            Vue.directive('loading',{ 
                update(el, binding, vnode){ 
                    if(binding.value){ 
                        const div = document.createElement('div')
                        div.innerText= '加载中...'
                        div.setAttribute('id', 'loading')
                        div.style.position = 'fixed'
                        div.style.left = 0
                        div.style.top = 0
                        div.style.width = '100%'
                        div.style.height ='100%'
                        div.style.display = 'flex'
                        div.style.justifyContent = 'center'
                        div.style.alignItems = 'center'
                        div.style.color ='white'
                        div.style.background = 'rgba(0,0,0,.7)'
                        document.body.append(div)
                    }else{ 
                        document.body.removeChild(document.getElementById('loading'))
                    }
                }
            })
            new Vue({ 
                el: '#root',
                data(){ 
                    return{ 
                        isLoading:false,
                        data: ''
                    }
                },
                methods:{ 
                    update(){ 
                        this.isLoading = true
                        setTimeout(() =>{ 
                            this.data= '用户数据'
                            this.isLoading = false
                        }, 3000)
                    }
                }
            })
        </script>
    </body>
    </html>

![在这里插入图片描述][20201209163234826.png]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyMzcwOTEz_size_16_color_FFFFFF_t_70 3]

## Vue.component用法 ##

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Vue.component用法</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
        <div id="root">
            <Test :msg="message"></Test>
        </div>
    <script>
        Vue.component('Test',{ 
            template: '<div>{ {msg}}</div>',
            props:{ 
                msg:{ 
                    type: String,
                    default: 'default message'
                }
            }
        })
        new Vue({ 
            el: '#root',
            data(){ 
                return{ 
                    message: "Test Component"
                }
            }
        })
    </script>
    </body>
    </html>

## Vue.extend用法 ##

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Vue.extend用法</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
        <div id="root">
            <Test :msg="message"></Test>
        </div>
    <script>
        const component = Vue.extend({ 
            template: '<div>{ {msg}}</div>',
            props:{ 
                msg:{ 
                    type:String,
                    default: 'default message'
                }
            }
        })
        Vue.component('Test' ,component)
        new Vue({ 
            el: '#root',
            data(){ 
                return { 
                    message: "Test Extend Component"
                }
            }
        })
    </script>
    </body>
    </html>

## Vue.extend进阶用法 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyMzcwOTEz_size_16_color_FFFFFF_t_70 4]

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Vue.extend进阶用法</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <style>
            #loading-wrapper{ 
                position: fixed;
                top: 0;
                left: 0;
                display: flex;
                justify-content: center;
                align-items: center;
                width: 100%;
                height: 100%;
                background: rgba(0,0,0,.7);
                color:  #fff;
            }
        </style>
    </head>
    <body>
        <div id="root">
            <button @click="showLoading">显示Loading</button>
        </div>
    <script>
        const LoadingComponent = Vue.extend({ 
            template: '<div id="loading-wrapper">{ {msg}}</div>',
            props: { 
                msg: { 
                    type: String,
                    default: 'loading...'
                }
            }
        }, 'LoadingComponent')
        function Loading(msg){ 
            const div = document.createElement('div')
            div.setAttribute('id','loading-wrapper')
            document.body.append(div)
            new LoadingComponent({ 
                props:{ 
                    msg:{ 
                        type: String,
                        default: msg
                    }
                }
            }).$mount('#loading-wrapper')
            return ()=>{ 
                document.body.removeChild(document.getElementById('loading-wrapper'))
            }
        }
        Vue.prototype.$loading = Loading
        new Vue({ 
            el: '#root',
            methods:{ 
                showLoading(){ 
                    const hide = this.$loading('正在加载，请稍等...')
                    setTimeout(() =>{ 
                        hide()
                    },2000)
                }
            }
        })
    </script>
    </body>
    </html>

## Vue.use用法 ##

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Vue.use用法</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <style>
            #loading-wrapper{ 
                position: fixed;
                top: 0;
                left: 0;
                display: flex;
                justify-content: center;
                align-content: center;
                width: 100%;
                height: 100%;
                background: rgba(0,0,0,.7);
                color: #fff;
            }
        </style>
    </head>
    <body>
        <div id="root">
            <button @click="showLoading">显示Loading</button>
        </div>
    <script>
        const loadingPlugin={ 
            install : function(vm){ 
                const LoadingComponent = vm.extend({ 
                    template: '<div id="loading-wrapper">{ {msg}}</div>',
                    props:{ 
                        msg:{ 
                            type:String,
                            default:'loading...'
                        }
                    }
                }, 'LoadingComponent')
                function Loading(msg){ 
                    const div = document.createElement('div')
                    div.setAttribute('id', 'loading-wrapper')
                    document.body.append(div)
                    new LoadingComponent({ 
                        props:{ 
                            msg:{ 
                               type: String,
                               default: msg
                            }
                        }
                    }).$mount('#loading-wrapper')
                    return () =>{ 
                        document.body.removeChild(document.getElementById('loading-wrapper'))
                    }
                }
                vm.prototype.$loading = Loading
            }
        }
            Vue.use(loadingPlugin)
            new Vue({ 
                el: '#root',
                methods:{ 
                    showLoading(){ 
                        const hide = this.$loading('正在加载，请稍后...')
                        setTimeout(() =>{ 
                            hide()
                        },2000)
                    }
                }
            })
    
    </script>
    </body>
    </html>

## 组件通信 provide 和 inject ##

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>组件通信provide和inject</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
        <div id="root">
            <Test></Test>
        </div>
    <script>
        function registerPlugin(){ 
            Vue.component('Test',{ 
                template: '<div>{ {message}}<Test2/></div>',
                provide(){ 
                    return{ 
                        elTest: this
                    }
                }, //function 的用途是为了获取运行时环境，否则this将指向 Window
                data(){ 
                    return { 
                        message:'message from Test'
                    }
                },
                methods:{ 
                    change(component){ 
                       this.message = 'message from '+ component
                    }
                }
            })
            Vue.component('Test2',{ 
                template:'<Test3/>'
            })
            Vue.component('Test3',{ 
                template: '<button @click="changeMessage">change</button>',
                inject:['elTest'],
                methods:{ 
                    changeMessage(){ 
                        this.elTest.change(this.$options._componentTag)
                    }
                }
            })
        }
        Vue.use(registerPlugin)
        new Vue({ 
            el: '#root'
        })
    </script>
    </body>
    </html>

![在这里插入图片描述][20201209185100205.png]  
![在这里插入图片描述][20201209185111997.png]

## 过滤器filter ##

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>过滤器filter</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
        <div id="root">
            { { message | lower}}
        </div>
        <script>
            new Vue({ 
               el: '#root',
               filters:{ 
                   lower(value){ 
                       return value.toLowerCase()
                   }
               },
                data(){ 
                   return{ 
                       message: 'Hello Vue AAAAAA'
                   }
                }
            })
        </script>
    </body>
    </html>

## 监听器 ##

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>监听器 watch</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
        <div id="root">
            <h3>Watch 用法1：常见用法</h3>
            <input v-modle="message">
            <span>{ { copyMessage}}></span>
        </div>
        <div id="root2">
            <h3>Watch用法2：绑定方法</h3>
            <input v-model="message">
            <span>{ { copyMessage}}</span>
        </div>
        <div id="root3">
            <h3>Watch 用法3：deep + handler</h3>
            <input v-modle="deepMessage.a.b">
            <span>{ { copyMessage}}</span>
        </div>
        <div id="root4">
            <h3>Watch 用法4：immediate</h3>
            <input v-model="message">
            <span>{ { copyMessage}}</span>
        </div>
        <div id="root5">
            <h3>Watch 用法5：绑定多个 handler</h3>
            <input v-model="message">
            <span>{ { copyMessage}}</span>
        </div>
        <div id="root6">
            <h3>Watch 用法6：监听对象属性</h3>
            <input v-model="deepMessage.a.b">
            <span>{ { copyMessage}}</span>
        </div>
        <script>
            new Vue({ 
                el: '#root',
                watch:{ 
                    message(value){ 
                        this.copyMessage = value
                    },
                    data(){ 
                        return { 
                            message: 'Hello Vue',
                            copyMessage: ''
                        }
                    }
                }
            })
            new Vue({ 
                el: '#root2',
                watch:{ 
                    message: 'handleMessage'
                },
                data(){ 
                    return { 
                        message: 'Hello Vue',
                        copyMessage: ''
                    }
                },
                methods: { 
                    handleMessage(value){ 
                        this.copyMessage = value
                    }
                }
            })
            new Vue({ 
                el: '#root3',
                watch:{ 
                    deepMessage:{ 
                        handler: 'handleDeepMessage',
                        deep: true
                    }
                },
                data(){ 
                    return { 
                        deepMessage:{ 
                            a:{ 
                                b: 'Deep Message'
                            }
                        },
                        copyMessage: ''
                    }
                },
                methods:{ 
                    handleDeepMessage(value){ 
                        this.copyMessage = value.a.b
                    }
                }
            })
        </script>
    </body>
    </html>

## class和style绑定的高级用法 ##

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>class和style绑定的高级用法</title>
        <script src ="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
        <div id="root">
            <div :class="['active','normal']">数组绑定多个class</div>
            <div :class="[{active: isActive}, 'normal']">数组包含对象绑定class</div>
            <div :class="[showWarning(), 'normal']">数组包含方法绑定class</div>
            <div :style="[warning, bold]">数组绑定多个style</div>
            <div :style="[warning, mix()]">数组包含方法绑定style</div>
            <div :style="{display :['-webkit-box','-ms-flexbox','flex']}">style多重值</div>
        </div>
        <script>
            new Vue({ 
                el:'#root',
                data(){ 
                    return { 
                        isActive: true,
                        warning:{ 
                            color:'orange'
                        },
                        bold:{ 
                            fontWeight: 'bold'
                        }
                    }
                },
                methods:{ 
                    showWarning(){ 
                        return 'warning'
                    },
                    mix(){ 
                        return{ 
                            ...this.bold,
                            fontSize:20
                        }
                    }
                }
            })
        </script>
    </body>
    </html>

## Vue.observable ##

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Vue.observable</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
        <div id="root">
            { { message}}
            <button @click="change">Change</button>
        </div>
        <script>
            const state =Vue.observable({ message: 'Vue 2.6'})
            const mutation ={ 
                setMessage(value){ 
                    state.message =  value
                }
            }
            new Vue({ 
                el: '#root',
                computed:{ 
                    message(){ 
                        return state.message
                    }
                },
                methods:{ 
                    change(){ 
                        mutation.setMessage('Vue 3.0')
                    }
                }
            })
        </script>
    </body>
    </html>

## 插槽 slot ##

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>插槽 slot</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
        <div id="root">
            <div>案例1： slot的基本用法</div>
            <Test>
                <template v-slot:header="{user}">
                    <div>自定义header({ { user.a}})</div>
                </template>
                <template v-slot="{user}">
                    <div>自定义body({ { user.b}})</div>
                </template>
            </Test>
        </div>
    <div id="root2">
        <div>案例2： Vue2.6新特性- 动态slot</div>
        <Test>
            <template v-slot:[section]="{section}">
                <div>this is { { section}}</div>
            </template>
        </Test>
        <button @click="change">switch header and body</button>
    </div>
    <script>
        Vue.component('Test',{ 
            template:
                '<div>'+
                '<slot name="header" :user="obj" :section="\'header\'">' +
                    '<div>默认header</div>'+
                '</slot>'+
                '<slot :user="obj" :section="\'body\'">默认body</slot>'+
                '</div>',
            data(){ 
                return { 
                    obj: { a:1,b:2}
                }
            }
        })
        new Vue({ el: '#root'})
        new Vue({ 
            el:'#root2',
            data(){ 
                return { 
                    section: 'header'
                }
            },
            methods:{ 
                change(){ 
                    this.section === 'header'?
                        this.section = 'default':
                        this.section = 'header'
                }
            }
        })
    </script>
    </body>
    </html>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyMzcwOTEz_size_16_color_FFFFFF_t_70]: /images/20221120/67ad994efd54443aad1023623824a6e1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyMzcwOTEz_size_16_color_FFFFFF_t_70 1]: /images/20221120/82bd5e648a794e9196af21ce0caa928e.png
[https_github.com_cunweizhao_vue-elemnt-node-demo]: https://github.com/cunweizhao/vue-elemnt-node-demo
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyMzcwOTEz_size_16_color_FFFFFF_t_70 2]: /images/20221120/1080cfdc5f7c4c178d3208aba9a995de.png
[20201209163234826.png]: /images/20221120/2fa3ab7792ea4ab499fd65d08d2ed8eb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyMzcwOTEz_size_16_color_FFFFFF_t_70 3]: /images/20221120/4fda7f1ea9b1464299b8ba9e60829178.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyMzcwOTEz_size_16_color_FFFFFF_t_70 4]: /images/20221120/8e3a2eeff12b4ee58c7643392ad7f325.png
[20201209185100205.png]: /images/20221120/a70ddf3118e1438a841637d88caa80c5.png
[20201209185111997.png]: /images/20221120/26a1974878384d90b9d645e257e8370b.png