一. 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. 路由嵌套

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

    • 潜逃路由
  • 案例
    • 进入我的主页显示:电影/歌曲
  • 代码思想
    • 1. router-view的细分

      • router-view第一层,包含一个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代表后退

vue.js及项目实战[笔记]— 03 vue.js插件的更多相关文章

  1. vue.js及项目实战[笔记]— 01 vue.js

    一. vue基础 1. 历史介绍 angular 09年,年份较早,一开始大家是拒绝的 react 2013年,用户体验较好,直接拉到一堆粉丝 vue 2014年,用户体验较好 前端框架与库的区别 j ...

  2. vue.js及项目实战[笔记]— 02 vue.js基础

    一. 基础 1. 注册全局组件 应用场景:多出使用的公共性能组件,就可以注册成全局组件,减少冗余代码 全局APIVue.component('组件名','组件对象') 2.附加功能:过滤器&监 ...

  3. vue.js及项目实战[笔记]— 05 WebPack

    一. 历史介绍 1. 规范 AMD Commonjs||CMD UMD 参考:认识AMD.CMD.UMD.CommonJS 2. 工具 npm bower webpack browserify 参考: ...

  4. vue.js及项目实战[笔记]— 04 axios

    一. axios 1. 基本使用 axios.method('url',[,...data],options) .then(function(res){ }) .catch(function(err) ...

  5. Unity3D项目实战笔记(10):Unity3D编译IPA的PostEvents–节约时间利器

    最近,SDK支付等接入差不多了,就从Unity3D生成IPA (企业版License), 然,需要手动执行的PostEvents竟然多大10项+, 这些我默默的承受了1周时间,每次约浪费20分钟-额外 ...

  6. Unity3D项目实战笔记(5):延时功能的几种实现

    我所做过的系统,分单机版系统(2005年).CS系统(2010年).实时系统(2015年),各个系统均有“延时”功能:定时调度的: 本博客说的是实时系统中的延时功能(基于Unity3D游戏引擎). 在 ...

  7. vue.js+koa2项目实战(一)创建项目和elementUI配置

    前端采用vuex+element-ui: 后端采用koa2+restfulAPI+sequlize: (一)项目介绍 宠物社区 1.社区 2.好友 3.说说 4.宠粮 5.健康 (二)项目框架 1.V ...

  8. 【慕课网实战】Spark Streaming实时流处理项目实战笔记二十一之铭文升级版

    铭文一级: DataV功能说明1)点击量分省排名/运营商访问占比 Spark SQL项目实战课程: 通过IP就能解析到省份.城市.运营商 2)浏览器访问占比/操作系统占比 Hadoop项目:userA ...

  9. 【慕课网实战】Spark Streaming实时流处理项目实战笔记十五之铭文升级版

    铭文一级:[木有笔记] 铭文二级: 第12章 Spark Streaming项目实战 行为日志分析: 1.访问量的统计 2.网站黏性 3.推荐 Python实时产生数据 访问URL->IP信息- ...

随机推荐

  1. CSS三个定位——常规、浮动、绝对定位

    .dage { width: 868px; background: #5B8C75; border: 10px solid #A08C5A; margin-top: -125px; margin-le ...

  2. 快速开发Grunt插件----压缩js模板

    前言 Grunt是一款前端构建工具,帮助我们自动化搭建前端工程.它可以实现自动对js.css.html文件的合并.压缩等一些列操作.Grunt有很多插件,每一款插件实现某个功能,你可以通过npm命名去 ...

  3. [eclipse]改项目名称后tomcat连接问题解决方法

    背景:在我们使用eclipse进行项目开发时,有时候会需要修改项目名称,当改动项目名称后发现tomcat启动访问出现问题,使用新的项目名称不可行,使用旧的项目名称却可以.修改web.xml里面的dis ...

  4. eclipse项目提交到git

    http://www.open-open.com/lib/view/open1406105786710.html 1.在https://github.com   new repository 2.在e ...

  5. 使用 WTForms 进行表单验证的例子

    #使用 WTForms 进行表单验证的例子 from wtforms import Form from wtforms import BooleanField from wtforms import ...

  6. TCP三次握手与Tcpdump抓包分析过程

    一.TCP连接建立(三次握手) 过程 客户端A,服务器B,初始序号seq,确认号ack 初始状态:B处于监听状态,A处于打开状态 A -> B : seq = x (A向B发送连接请求报文段,A ...

  7. wince 6.0 汉字乱码

    CStdioFile file; file.Open(…); file.WriteString(_T("abc你好"));//只能写入abc 解决办法: 使用setlocale语句 ...

  8. 《剑指offer》-判断平衡二叉树

    题目描述 输入一棵二叉树,判断该二叉树是否是平衡二叉树. 考察平衡树的概念和递归的使用.平衡树是指,树中的每个节点的左右子树的高度差小于等于1. class Solution { public: bo ...

  9. slice()

    提取字符串中的一部分,并返回这个新的字符串 str.slice(beginSlice[, endSlice]) 参数 beginSlice 从该索引(以 0 为基数)处开始提取原字符串中的字符.如果值 ...

  10. OpenGL学习笔记:Console工程下如何不显示控制台黑窗口只显示Windows窗口

    刚学习OpenGL,绘制图形的时候,如果不进行设置,运行的时候会先出现黑窗口再出现Windows窗口. 其实要去除控制台窗口非常简单,只需要修改工程设置,把子系统改成Windows,程序的入口点改成m ...