xml地图|网站地图|网站标签 [设为首页] [加入收藏]

您的位置:亚洲必赢 > 计算机尝试 > 单向数据流,Vue用法指南04

单向数据流,Vue用法指南04

发布时间:2019-07-18 06:10编辑:计算机尝试浏览(79)

    前天要介绍的是路由元消息,滚动行为以及路由懒加载那多少个的利用方法。

    今天来聊一聊vue-router。

    Vue Router

    转自:https://juejin.im/entry/59e8b8a8518825579d131e51

    1.路由元音讯

    大家先来看多少个最主题的布置。

    1. 在Vue中引入router

    var app = new Vue({
      router
    }).$mount('#app')
    

    1、v-model 用在 input 元素上

    v-model在利用的时候很像双向绑定的(实际上也是。。。),不过 Vue 是单项数据流,v-model 只是语法糖而已:

    <input v-model="something" />
    <input v-bind:value="something" v-on:input="something = $event.target.value" />
    

    首先行的代码其实只是第二行的语法糖。然后第二行代码仍是可以简写成那样:

    <input :value="something" @input="something = $event.target.value" />
    

    要明了那行代码,首先你要明白 input 成分自身有个 oninput 事件,这是 HTML5 新增的,类似 onchange ,每当输入框内容爆发变化,就能触发 oninput ,通过 $event 把最新的 value 传递给 something。

    小编们细心观看语法糖和原始语法这两行代码,能够吸收一个定论: 在给 input 成分增多 v-model 属性时,暗中同意会把 value 作为成分的性质,然后把 'input' 事件视作实时传送 value 的触及事件

    哪些是路由元音讯,看看官方网址的阐述,定义路由的时候能够配备 meta 字段能够相配meta字段,那么咱们该如何行使它,三个简易的事例,更动浏览器title的值。上面上代码。

    // 创建一个路由import Vue from 'vue'import Router from 'vue-router'import HelloWorld from '@/components/HelloWorld'Vue.useexport default new Router({ routes: [ { path: '/', name: 'HelloWorld', component: HelloWorld } ]})// 使用一个路由import Vue from 'vue'import App from './App'import router from './router'Vue.config.productionTip = falsenew Vue({ el: '#app', router, components: { App }, template: '<App/>'})
    

    单向数据流,Vue用法指南04。2. 新建路由

    如:

    var router = new Router({
      mode: 'history',
      linkActiveClass: 'active',
      routes: [……]
    })
    
    var RouterConfig = {
      routes: Array<RouteConfig>,
      mode: "hash" | "history" | "abstract",
      base: string,  // 应用基路径
      linkActiveClass: string, // <router-link> 的默认『激活 class 类名』,默认值: "router-link-active"
      linkExactActiveClass: string, // <router-link> 的精确激活的默认的 class, 默认值: "router-link-exact-active"
      scrollBehavior: Function,
      parseQuery: Function, // 自定义查询字符串的解析函数
      stringifyQuery: Function, // 自定义查询字符串的反解析函数
      fallback: boolean // 浏览器不支持history模式时,是否应该回退到 hash 模式
    }
    

    scrollBehavior更加多详细情形参见滚动行为。

    2、v-model 用在组件上

    v-model 不只有能在 input 上用,在组件上也能动用,拿官英特网的demo看。

    <currency-input v-model="price"></currency-input>
    Vue.component('currency-input', {
      template: '
        
          $
          <input
            ref="input"
            v-bind:value="value"
            v-on:input="updateValue($event.target.value)"
          >
         ',
      props: ['value'], // 为什么这里要用 value 属性,value在哪里定义的?
      methods: {
        // 不是直接更新值,而是使用此方法来对输入值进行格式化和位数限制
        updateValue: function (value) {
          var formattedValue = value
            // 删除两侧的空格符
            .trim()
            // 保留 2 位小数
            .slice(
              0,
              value.indexOf('.') === -1
                ? value.length
                : value.indexOf('.')   3
            )
          // 如果值尚不合规,则手动覆盖为合规的值
          if (formattedValue !== value) {
            this.$refs.input.value = formattedValue
          }
          // 通过 input 事件带出数值
          // <!--为什么这里把 'input' 作为触发事件的事件名?`input` 在哪定义的?-->
          this.$emit('input', Number(formattedValue))
        }
      }
    })
    

    假若您精晓那三个难点的答案,那么恭喜你真的精晓了 v-model,倘使您没通晓,那么能够看下这段代码:

    <currency-input v-model="price"></currency-input>
    所以在组件中使用时,它相当于下面的简写:
    //上行代码是下行的语法糖
    <currency-input :value="price" @input="price = arguments[0]"></currency-input>
    

    进而,给组件加多 v-model 属性时,暗中认可会把 value 作为组件的个性,然后把 'input' 值作为给组件绑定事件时的事件名。那在写组件时特地有用。

    //简单的我就不写了直接上解决方案
    import Vue from 'vue'
    import Router from 'vue-router'
    import Login from '../login/Login'
    import Home from '../pages/Home'
    export default new Router({
      mode: 'history',
      routes: [
        {path: 'home', name: 'Home', component: Home,meta:{title:"主页"}}
        {path: 'login', name: 'Login', component: Login,meta:{title:"登录"}}
      ]
    })
    //可以在跳转之前判断跳转的组件的名字并用window.document.title赋值
    Router.beforeEach((to,from,next) => {
      window.document.title=to.meta.title
    })
    

    末段再经过<router-view/>组件来渲染路由。

    3. RouteConfig

    var RouteConfig = {
      path: string;
      component?: Component;
      name?: string; // 命名路由
      components?: { [name: string]: Component }; // 命名视图组件
      redirect?: string | Location | Function;
      props?: boolean | string | Function;
      alias?: string | Array<string>;
      children?: Array<RouteConfig>; // 嵌套路由
      beforeEnter?: (to: Route, from: Route, next: Function) => void;
      meta?: any;
    
      // 2.6.0 
      caseSensitive?: boolean; // 匹配规则是否大小写敏感?(默认值:false)
      pathToRegexpOptions?: Object; // 编译正则的选项
    }
    

    3、v-model 的败笔和平消除决办法

    在创造类似复选框恐怕单选框的普及组件时,v-model就不佳用了。

    <input type="checkbox" v-model="something" />
    

    v-model 给大家提供好了 value 属性和 oninput 事件,可是,我们必要的不是 value 属性,而是 checked 属性,何况当您点击这几个单选框的时候不会触发 oninput 事件,它只会触发 onchange 事件。

    因为 v-model 只是采纳了 input 成分上,所以这种景况好消除:

    <input type="checkbox" :checked="value" @change="change(value, $event)"
    

    当 v-model 用到零部件上时:

    <checkbox v-model="value"></checkbox>
    Vue.component('checkbox', {
      tempalte: '<input type="checkbox" @change="change" :checked="currentValue"/>'
      props: ['value'],
      data: function () {
            return {
                //这里为什么要定义一个局部变量,并用 prop 的值初始化它。
                currentValue: this.value
            };
        },
      methods: {
        change: function ($event) {
          this.currentValue = $event.target.checked;
          this.$emit('input', this.currentValue);  
        }
    })
    

    在 Vue 2.2 版本,你能够在概念组件时通过 model 选项的主意来定制 prop/event 。

    上边的是或不是看上去异常的粗略吗,但是它并不简单,作者只是举了一个比较小的例子罢了。还要看大家怎么活学活用那样才好,不过笔者重申几点必要注意的

    可是普通大家会给<router-view/>加贰个transition转场动画。

    redirect

    用以重定向至另贰个门道

    redirect: string | route // route是一个路径对象
    //  或者
    redirect: to => {
      // 方法接收 目标路由 作为参数
      // return 重定向的 字符串路径/路径对象
    }
    

    别的高端用法,请仿效例子

    4、vue 组件数据流

    从上边 v-model 的辨析大家得以如此清楚,双向数据绑定便是在一方面绑定的基础上给可输入成分(input、textare等)增多了 change(input) 事件,来动态修改 model 和 view ,即通过接触($emit)父组件的事件来修改mv来达到 mvvm 的功效。而 vue 组件间传递数据是单向的,即数据连接由父组件传递到子组件,子组件在个中间能够有谈得来维护的数量,但它无权修改父组件传递给它的数目,当开垦者尝试那样做的时候,vue 将会报错。那样做是为了组件间更加好的解耦,在付出中或者有四个子组件注重于父组件的某部数据,如若子组件能够修改父组件数据的话,贰个子零件变化会掀起全部依赖那几个数据的子组件产生变化,所以 vue 不推荐子组件修改父组件的数量,直接修改 props 会抛出警示。流程图如下:

    图片 1

    image

    所以,当您想要在子组件去修改 props 时,把那些子组件当成父组件那样用,所以就有了

    • 1、定义一个片段变量,并用 prop 的值开首化它。
    • 2、定义叁个估测计算属性,管理 prop 的值并重返。

    先是点就是那一个beforeEach页面跳转以前调用,好处是诸如想要更改title的值不会显示太突然,可以平昔沟通。

    接到来讲多少个router的布署

    alias

    别名,更加多高端用法,请查看例子

    第二点afterEach以此毫无本身说了吧那个是在组件跳转之后调用比较适用于重回页面在此之前浏览过的区域只怕是让页面重回顶上部分的操作。

    mode: 'history'路由私下认可使用的花样是哈希路由,约等于url前边会加#/,可把mode设为history,便是我们平时所看到的网页的这种样式。

    props

    向组件传递参数,props的三种形式

    1. 布尔情势
    components: { default: User, sidebar: Sidebar },
    props: { default: true, sidebar: false }
    

    router.params被安装为组件的属性

    1. 对象形式
    props: { newsletterPopup: false }
    

    props按原样被装置为组件的天性

    1. 函数形式
    props: route => ({ id: route.query.id })
    

    /search?id=3421,{ id: 3421}会作为质量,传递给组件

    2.滚动行为

    linkActiveClass,linkExactActiveClass我们在页面上用router-link做跳转的时候,实际上是vue封装的三个a标签,当点击,以及路由非常的时候,会给a标签加上新鲜的class,我们得以通过linkActiveClass,linkExactActiveClass这四个天性做一些大局的布局。(有时候会用到,不过并不经常见)

    4 导航守卫

    __beforeEach__:全局守卫
    __beforeEnter__:路由独享的堤防
    __beforeRouteEnter__:组件守卫,当前组件路由confirm前调用,不能够收获this
    __beforeRouteUpdate__:路由退换,当前组件被复用时调用
    __beforeRouteLeave__:组件守卫,离开当前组件路由时调用,能够获取到this

    导航钩子(gurad) : (to, from, next) => {……}

    • to:Route,指标路由对象
    • from: Route,要相差的路由对象
    • next
      next(): 步入管道中的下三个钩子
      next(false): 中断当前导航
      next(Error): 导航被中止,並且错误被传送给 router.onError挂号的回调函数
      next('/'): 跳转到三个差异的地址,参数是一个Route对象或然string
      next(vm => { // 通过 vm访问组件实例 }): 在beforeRouteEnter中不可能获得到零部件实例,能够将零件实例传递给next的回调函数,在导航被承认后,试行回调函数

    一体化的领航分析流程

    1. 导航被触发
    2. 在离开的机件中调用beforeRouteLeave
    3. 调用全局的beforeEach
    4. 调用重用组件的beforeRouteUpdate
    5. 调用路由中的beforeEnter
    6. 浅析异步路由组件。
    7. 在对象组件中触发beforeRouteEnter
    8. 调用全局的beforeResolve
    9. 导航被确认
    10. 调用全局的afterEach
    11. 触发DOM更新
    12. 执行beforeRouteEnter的next中的回调函数

    大概各位同学应该驾驭小编要讲些什么了没有错便是页面包车型地铁前进和退化时的滚动事件,怎么落实啊,有两种达成情势,先看代码。

    图片 2

    5. 编制程序式导航router

    router.push(location, onComplete?, onAbort?): 向 history 加多新记录
    router.replace(location, onComplete?, onAbort?): 用新记录替换掉history中的当前记录

    // 字符串
    router.push('home')
    
    // 对象
    router.push({ path: 'home' })
    
    // 命名的路由
    router.push({ name: 'user', params: { userId: 123 }})
    
    // 带查询参数,变成 /register?plan=private
    router.push({ path: 'register', query: { plan: 'private' }})
    

    router.go(n)

    // 在浏览器记录中前进一步,等同于 history.forward()
    router.go(1)
    
    // 后退一步记录,等同于 history.back()
    router.go(-1)
    
    // 前进 3 步记录
    router.go(3)
    
    // 如果 history 记录不够用,那就默默地失败呗
    router.go(-100)
    router.go(100)
    

    注明式导航

    <router-link :to="..." replace>  // router.replace(...)
    <router-link :to="...">  // router.push(...)
    <router-link :to="{ path: 'relative/path'}" append></router-link> // 从 /a 导航到一个相对路径 b, append后会导航到/a/b
    

    本文由亚洲必赢发布于计算机尝试,转载请注明出处:单向数据流,Vue用法指南04

    关键词: bwin开户网 前端 指南 路由 Vue