Vue学习笔记3—Vue插件

Vue插件

获取DOM元素

• 使用方法：

  1. 在template中标识元素 ref = “xxx”
  2. 在要获取的时候，this.$refs.xxx 获取元素
     • 创建组件，装载DOM，用户点击按钮

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

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

  • $el 是拿其DOM
  • 这个对象就相当于我们平时玩的this，也可以直接调用函数

• $refs 获取组件内的元素

• $parent 获取当前组件对象的父组件

• $children 获取子组件

• $root 获取new Vue的实例

• $el 组件对象的DOM元素

路由

路由原理

• 传统开发方式url改变后立刻发起请求，响应整个页面，渲染整个页面
• SPA锚点值改变后不会发起请求，发起ajax请求，局部改变页面数据
  • 页面不跳转，用户体验很好

SPA

• single page application(单页应用程序)
• 前端路由
  • 锚点值监视
  • ajax获取动态数据
  • 核心点事锚点值
• 前端框架Vue/angular/react都适合开发单页应用

基本使用

• vue-router

• 其是vue的核心插件

• 使用具体方法

  1. 下载 npm i vue-router -S

     假如是用<script>直接引入vue-router.js就不用2.3步

  2. 安装插件Vue.use(VueRouter);

  3. 在main.js中引入vue-router对象import VueRouter form './xxx.js'

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

  5. 配置路由规则router.addRoutes([路由对象，路由对象···])

     • 路由对象{path : '锚点值', component : 要填坑显示的组件}

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

     • 在options中传递->key叫做router

  7. 留坑（使用组件）<router-view></router-view>

router-link

• to
• 帮助我们生成a标签的href
• 锚点值代码维护不方便，如果需要改变锚点值名称
  • 则需要改变[使用次数 + 1（配置规则）]个地方的代码

命名路由

• 具体使用方法
  1. 给路由对象一个名称{ name : ‘home’, path : ‘/home’, component : Home }
  2. 在router-link的to属性中描述这个规则
     • <router-link :to = "{name : 'home'}"></router-link>
     • 通过名称找到路由对象，获取其path，生成自己的href

参数router-link

• Vue.prototype.xxx = {add : fn}
• 所有组件中，使用this.xxx就能拿到这个对象
• query符串
  1. 配置:to = "{name : 'detail', query : {id : hero.id}}"
  2. 规则{name : 'detail', path : '/detail', componect : 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 : '/detail/:id'}
  3. 获取this.$route.paams.id
  4. 生成<a href = "/detail/1">
• query配置参数
  • router-link一次
  • 获取的时候一次
• path方式配置参数
  • router-link一次
  • 规则配置的时候声明位置
  • 获取的时候一次
• 总结书写代码注意事项
  • path方式需要在路由规则中声明位置

vue-router中的对象

• $route 路由信息对象，只读对象
• $router 路由操作对象，只写对象

嵌套路由

• 市面上所谓的用单页应用框架开发多页应用
  • 嵌套路由
• 案例
  • 进入我的主页显示：电影、歌曲
• 代码思想
  1. router-view的细分
     • router-view第一层中，包含一个router-view
  2. 每一个坑挖好了，要对应单独的组件

知识点介绍

• 路由meta元数据
  • 路由对象中和name属性同级{meta : {isChecked : true}}
• 路由钩子
  • 每次路由匹配后，渲染组件到router-view之前
  • router.beforeEach(function(to, form, next){})
    • to： 是要前往的对象
    • from：是来自的对象
    • next（）函数，不调用next（），导航行为就会卡住
      • next() : 放行
      • next(false) : 取消用户导航行为
      • next(‘路径||路由对象’) : 重定向

编程导航

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代表后退