zoukankan      html  css  js  c++  java
  • Vue基本用法:vue-router路由、refs属性和axios基本使用

    Vue全家桶:vue + vue-router + vuex

    vue + vue-router 主要用来做 SPA (single page application),单页面应用

    为什么要做单页面应用?

    传统的路由跳转,如果后端资源过多,会导致页面出现“白屏现象”。让前端来做路由,在某个生命周期的钩子函数中发送 ajax ,然后数据驱动。即 为了用户体验。

    vue-router 是vue的核心插件

    vue-router 的使用:

    // 1、创建匹配路由组件;
    // 2、配置路由信息
    // 3、在 router-link 中使用

    示例代码:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <div id="app">
    
        </div>
        
    </body>
    <script src="./vue.js"></script>
    
    <!-- 引入 vue-router -->
    <script src="./vue-router.js"></script>
    <script>
        /* 
        // 如果是模块化编程, 下面的 Vue 和 VueRouter都是局部的,且下面的代码等价于伪代码: Vue.prototype.$VueRouter = VueRouter ,即 在Vue 的原型上挂载了 vue-router.js 提供的属性 VueRouter
        Vue.use(VueRouter)
        */
    
        // 先定义两个组件,这两个组件要被用于路由中
        const Home = {
            data(){
                return {
    
                }
            },
            template:`<div>我是首页</div>`,
        }
    
        const Course = {
            data(){
                return {
    
                }
            },
            template:`<div>我是课程组件</div>`,
        }
    
        // 创建路由
        const router = new VueRouter({
            // 定义路由规则;routes 对应的是一个列表,列表中是一个个对象;path 对应路由的路径, component 对应路由的组件
            routes: [
                {
                    path:'/',
                    redirect:'/home'    // 重定向
                },
    
                {
                    path: '/home',
                    component: Home
                },
    
                {
                    path: '/course',
                    component: Course
                }
            ]
        })
    
        let App = {
            data(){
                return {
    
                }
            }, 
    
            /* 
            router-link 和 router-view 是 vue-router 提供的两个全局组件;
            router-link 会被渲染成一个 a标签,router-link 有一个属性 to 相当于a标签的 href 属性, to 中的值要和 路由path 中的值一致;
            router-view 是路由组件的出口,即 path 对应的组件会渲染到 <router-view> 中
            */ 
    
            template:`
                <div>
                    <div class='header'>
                        <router-link to="/home">首页</router-link>
                        <router-link to="/course">课程</router-link>
                    </div>
    
                    <router-view></router-view>
                </div>
            `,
        }
    
        new Vue({
            el: '#app',
    
            // 挂载路由,即相当于  router:router
            router,     
    
            data(){
                return {
    
                }
            },
    
            template:`<App />`,
            components:{
                App
            }
        })
    
    </script>
    
    </html>

    浏览器效果示例:

     

    参考文档: https://router.vuejs.org/zh/guide/#javascript

    命名路由

    命名路由可以动态绑定

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <div id="app">
    
        </div>
        
    </body>
    <script src="./vue.js"></script>
    
    <!-- 引入 vue-router -->
    <script src="./vue-router.js"></script>
    <script>
        
        // 先定义两个组件,这两个组件要被用于路由中
        const Home = {
            data(){
                return {
    
                }
            },
            template:`<div>我是首页</div>`,
        }
    
        const Course = {
            data(){
                return {
    
                }
            },
            template:`<div>我是课程组件</div>`,
        }
    
        // 创建路由
        const router = new VueRouter({
            routes: [
                {
                    path:'/',
                    redirect:'/home'    // 重定向
                },
    
                // 命名路由
                {
                    path: '/home',
                    name: 'home-comp',  // 给路由起个名字
                    component: Home
                },
    
                {
                    path: '/course',
                    name: 'course-comp',
                    component: Course
                }
            ]
        })
    
        let App = {
            data(){
                return {
    
                }
            }, 
    
            // 动态绑定命名路由:<router-link> 中 :to 对应的是一个对象
            template:`
                <div>
                    <div class='header'>
                        <router-link :to="{'name':'home-comp'}">首页</router-link>
                        <router-link :to="{'name':'course-comp'}">课程</router-link>
                    </div>
    
                    <router-view></router-view>
                </div>
            `,
        }
    
        new Vue({
            el: '#app',
    
            // 挂载路由,即相当于  router:router
            router,     
    
            data(){
                return {
    
                }
            },
    
            template:`<App />`,
            components:{
                App
            }
        })
    
    </script>
    
    </html>

    命名路由官方文档:

    https://router.vuejs.org/zh/guide/essentials/named-routes.html 

    动态路由匹配

    动态路由匹配规则 主要用于以下的 路由范式:
    http:127.0.0.1:8080/user/{uid} 

    示例代码:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <div id="app">
    
        </div>
    </body>
    <script src="./vue.js"></script>
    <script src="./vue-router.js"></script>
    
    <script>
        /*
        动态路由匹配规则 主要用于以下的 路由范式:
        http:127.0.0.1:8080/user/{uid} 
        */
    
        const User = {
            data(){
                return {
                    user_id:''
                }
            },
    
            template:`<div>我是用户{{ user_id }}</div>`,
    
            created(){
                console.log(this.$route);   // $route 是路由信息对象;$route 是挂载到vue实例对象上的,能用 this.$route 获取是因为通过 继承。
    
                // 如果想拿地址栏上的某些参数,就去找 $route
    
                // 提醒一下,当使用路由参数时,例如从 /user/foo 导航到 /user/bar,原来的组件实例会被复用。因为两个路由都渲染同个组件,比起销毁再创建,复用则显得更加高效。不过,这也意味着组件的生命周期钩子不会再被调用。
            },
    
    // 动态路由匹配 watch:{ $route(to, from) {
    // 监视路由信息对象发生改变 console.log('to:', to); console.log('from:', from); console.log('uid:', to.params.uid); // 获取到 uid 后就可以往后端发送 ajax this.user_id = to.params.uid } } } const router = new VueRouter({ routes:[ { path: '/user/:uid', // :uid 绑定动态传入的数字值 name: 'user-comp', component: User } ] }) let App = { data(){ return { } }, // params 这个对象中的 key uid 即是 路由path 中的 :uid // 该 router-link 对应的模板样式是 User 组件 template:` <div> <div class='header'> <router-link :to="{'name':'user-comp', params:{uid: 1}}">用户1</router-link> <router-link :to="{'name':'user-comp', params:{uid: 2}}">用户2</router-link> </div> <router-view></router-view> </div> `, } new Vue({ el: '#app', router, data(){ return { } }, template:`<App />`, components:{ App } }) </script> </html>

    浏览器效果示例:

     

    注: 就如 $route, 带 $ 的属性都是挂载到 vue 实例对象是的

    编程式导航

    $router:路由对象,即 VueRouter对象;一般用它来做编程式导航

    编程式导航 vs 声明式导航

    声明式导航示例:

    <router-link :to="{'name':'user-comp', params:{uid: 1}}">用户1</router-link>
    <router-link :to="{'name':'user-comp', params:{uid: 2}}">用户2</router-link>

    编程式导航示例代码:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <div id="app">
    
        </div>
    </body>
    <script src="./vue.js"></script>
    <script src="./vue-router.js"></script>
    
    <script>
    
        const Home = {
            data(){
                return {
    
                }
            },
            template:`<div>我是首页</div>`,
        }
    
        const User = {
            data(){
                return {
                    user_id:null
                }
            },
    
            template:`
            <div>
                <p>我是用户{{ user_id }}</p>
                <button @click='clickHandler'>跳转</button>
            </div>
            `,
    
            methods:{
    
                // 编程式导航
                clickHandler(){
                    // push 是 $router (路由对象)的一个方法,参数是一个包含命名路由的对象
                    this.$router.push({
                        name: 'home-comp'
                    })
                }
            },
    
            created(){
                console.log(this.$route);
            },
    
            watch:{
                $route(to, from) {
                    this.user_id = to.params.uid
                }
            }
        }
    
        const router = new VueRouter({
            routes:[
                {
                    path: '/user/:uid', 
                    name: 'user-comp',
                    component: User
                },
            ]
        })
    
        let App = {
            data(){
                return {
    
                }
            },
    
            template:`
                <div>
                    <div class='header'>
                        <router-link :to="{'name':'user-comp', params:{uid: 1}}">用户1</router-link>
                        <router-link :to="{'name':'user-comp', params:{uid: 2}}">用户2</router-link>
                    </div>
    
                    <router-view></router-view>
                </div>
            `,
        }
    
        new Vue({
            el: '#app',
            router,
            data(){
                return {
    
                }
            },
            template:`<App />`,
            components:{
                App
            }
        })
    </script>
    </html>

    浏览器效果示例:

    编程式导航文档:

    https://router.vuejs.org/zh/guide/essentials/navigation.html 

    Vue 获取原生DOM的方式

    Vue提供的获取原生DOM 的方式,是给标签或组件添加 refs 属性:
    通过 this.$refs 来获取,如
    
    <div ref='neo'></div>
    
    如果在当前组件中想获取上述 div 标签这个DOM元素,可通过  this.$refs.neo 获取到上述 div 对象
    
    如果是给 html 标签添加 ref ,那么 this.$refs.neo 获取到的是原始的DOM元素;
    如果是给 Vue 组件添加 ref ,那么通过 this.$refs.neo 获取到的是 组件实例化对象 

    代码示例:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <div id="app">
            
        </div>
    
    <script src="./vue.js"></script>
    <script>
        // 想要实现的效果: DOM加载完成后,自动获取 input 输入框的焦点
    
        Vue.component('Test', {
            data(){
                return {
    
                }
            },
            template:`
                <div>我是测试组件</div>
            `,
        })
    
        let App = {
            data(){
                return {
    
                }
            },
    
            template:`
                <div>
                    <input type="text" ref='inputss'>
                    <Test ref='test-compnt' />
                </div>
            `,
    
            mounted(){
                console.log(this.$refs.inputss);    // 获取原始的 input 这个DOM元素; <input type="text">
                this.$refs.inputss.focus();     // 自动获取input 输入框的焦点
    
                // this.$refs 是一个对象
                console.log(this.$refs);    // {inputss: input, test-compnt: VueComponent}
    
                for(let key in this.$refs){
                    console.log('keys:', key, 'val:', this.$refs[key] );
                }
            }
        }
    
        new Vue({
            el: '#app',
            data(){
                return {
    
                }
            },
    
            template:`<App />`,
    
            components:{
                App
            }
        })
    </script>
    </body>
    </html>

    浏览器效果示例:

    axios 的基本使用:

    1、在项目中下载 axios 组件

    npm i axios -S

    2、在项目中引入 axios

    // main.js 中全局引入 axios
    
    // 引入 axios
    import Axios from 'axios'
    
    // 把 axios 挂载到 vue的原型上
    Vue.prototype.$https = Axios    // $https 这个名字可以自己起
    
    // 设置公共的url;以后在利用 axios 给某个链接(如 users/edit)发送请求时, 链接会自动和这个 baseURL 拼接到一起
    Axios.defaults.baseURL = 'https://api.example.com';

    3、 在组件中使用 axios

    // 为给定 ID 的 user 创建GET请求
    this.$https.get('/user?ID=12345')
      .then(function (response) {
        console.log(response);
      })
      .catch(function (error) {
        console.log(error);
      });

    官方文档:

    http://www.axios-js.com/zh-cn/docs/index.html

    Code your future.
  • 相关阅读:
    Understanding about Baire Category Theorem
    Isometric embedding of metric space
    Convergence theorems for measurable functions
    Mindmap for "Principles of boundary element methods"
    Various formulations of Maxwell equations
    Existence and uniqueness theorems for variational problems
    Kernels and image sets for an operator and its dual
    [loj6498]农民
    [luogu3781]切树游戏
    [atAGC051B]Three Coins
  • 原文地址:https://www.cnblogs.com/neozheng/p/14318502.html
Copyright © 2011-2022 走看看