手记

vue.js及项目实战[笔记]— 03 vue.js插件

一. vue补充

1. 获取DOM元素

  • 救命稻草,document.querySelector

  • 在template中标示元素`ref = "xxx"

  • 在要获取的时候,this.$refs.xxx获取元素

    • 创建组件,装载DOM,用户点击按钮

  • ref 在DOM上获取的是原生DOM对象

  • ref在组件上获取的是组件对象

  • $el是拿其DOM

    • 这个对象就相当于我们平时玩的this,也可以直接调用函数

总结:

$属性:$refs获取组件内的元素
$parent:获取当前组件对象的父组件
$children:获取子组件
$root:获取new Vue 的实例 vm
$el:组件对象的DOM元素

重点:理解 $nextTick 的作用,参考:
Vue.nextTick 的原理和用途

二. 路由

1. 路由原理

  • 传统开发方式url改变后立刻发起请求,响应整个页面,渲染整个页面

  • SPA锚点值改变后不会发起请求,发起ajax请求,局部改变页面数据

    • 页面不跳转,用户体验更好

2. SPA

  • single page application(单页面应用程序)

  • 前端路由

    • 锚点值监视

    • ajax获取动态数据

    • 核心点是锚点值

  • 前端框架Vue/angular/react都很适合开发单页面程序

3. 基本使用

  • vue-router

  • 其实vue的核心插件

  • 1. 下载npm i vue-router -S

  • 2. (重要):安装插件Vue.use(VueRouter)

  • 3. 在main.js中引入vue-router对象:import router from './x.js'

  • 4. 创建路由对象var router = new VueRouter()

  • 5. 配置路由规则router.addRouters([路由对象])

    • 路由对象{path:'锚点值',component:要(填坑)现实的组件}

  • 6. 将配置好的路由对象交给Vue

    • options中传递->key叫做router

  • 7.留坑(使用组件)<router-view></router-view>

4. router-link

  • to

  • 帮助我们生成a标签的href

  • 锚点值代码维护不方便,如果需要改变锚点值名称

    • 则需要改变[使用次数+1(配置规则)]个地方的代码
      ### 5. 命名路由

  • 1. 给路由对象一个名称{name:'home',path:'/home',component:Home}

  • 2. 在router-linkto属性中描述这个规则

    • <router-link :to="{name:'name'}"></router-link>

    • 通过名称找路由对象,获取其path,生成自己的href

  • 大大降低维护成本,锚点值改变只用在main.js中改变path属性即可

阶段总结:

** vue-router使用步骤:
    1. 引入
    2. 安装插件
    3. 创建路由实例
    4. 配置路由规则
    5. 将路由关联Vue
    6. 填坑

** router-link to = "/xxx"命名路由:
    1. 在路由规则对象中加入name属性
    2. 在router-link中 :to="{name:'xxx'}"

** 生僻API梳理:
    1. Vue.use(插件对象); // 过程中会注册一些全局组件,及给vm或者组件对象挂载属性
    2. 给vm及组件对象挂载的方式:
       Object.defineProperty(Vue.prototype,'$router',{
            get:function(){
                return 自己的router对象
            }
       })

重点:vue.js关于Object.defineProperty的利用原理,参考:
Object.defineProperty()

6. 参数router-link

  • Vue.prototype.xxx = {add:fn}

  • 所有组件中,使用this.xxx就能拿到这个对象

  • 查询字符串

    • 1. 配置::to="{name:'detail',query:{id:hero.id}}"

    • 2. 规则{name:'detail',path:'/detail',component:Detail}

    • 3. 获取 this.$route.query.id

    • 4. 生成<a href="/detail?id=1">

  • path方式

    • 1. 配置:to="{name:'detail',params:{id:hero,id}}"

    • 2. 规则{name:'detail',path:'detal/:id'}

    • 3. 获取this.$route.params.id

    • 4. 生成<a href="detail/1">

  • 查询字符串配置参数

    • router-link一次

    • 获取的时候一次

  • path方式配置参数

    • router-link一次

    • 规则配置的时候声明位置

    • 获取的时候一次

  • 总结书写代码注意事项

    • path方式需要在路由规则中声明位置

7. vue-router中的对象

  • $route 路由信息对象,只读对象

  • $router 路由操作对象,只写对象

8. 路由嵌套

  • 市面上所谓的用单页面应用框架开发多页应用

    • 潜逃路由

  • 案例

    • 进入我的主页显示:电影/歌曲

  • 代码思想

    • router-view第一层,包含一个router-view

    • 1. router-view的细分

    • 2. 每一个坑挖好了,要对应单独的组件

9. 知识点介绍

  • 路由meta元素数据 -> meta是对于路由规则是否需要验证权限的配置

    • 路由对象中和name属性同级{meta:{isChecked:true}}

  • 路由钩子 -> 权限控制的函数执行时期 

    • 每次路由匹配后,渲染组件到router-view之前 

    • router.beforeEach(function(to,from,next){ })

10. 编程导航

  • 1. 跳转到指定的锚点,并显示页面this.$router.push({name:'xxx',query:{id:1},params:{name:'abc'}})

  • 2. 配置规则{name:'xxx',path:'/xxx/:name'}

  • 3. 根据历史记录前进后退

    • this.$router.go(-1|1)

    • 1代表前进,-1代表后退

 作者:lotosv2010

原文链接:https://www.cnblogs.com/lotosv2010/p/9782036.html


0人推荐
随时随地看视频
慕课网APP