Vue路由

Vue_UI组件库

http://mint-ui.github.io/docs/#/zh-cn/quickstart

npm安装

npm i mint-ui@1 -S

CDN

目前可以通过 unpkg.com/mint-ui@1 获取到最新版本的资源，在页面上引入 js 和 css 文件即可开始使用。

引入整个Mint UI

在 main.js 中写入以下内容：

import Vue from 'vue' import MintUI from 'mint-ui' import 'mint-ui/lib/style.css' import App from './App.vue' Vue.use(MintUI) new Vue({   el: '#app',   components: { App } })

按需引入

借助 babel-plugin-component，我们可以只引入需要的组件，以达到减小项目体积的目的。

安装 babel-plugin-component：

npm install babel-plugin-component -D

然后，将 .babelrc 修改为：

{   "presets": [     ["es2015", { "modules": false }]   ],   "plugins": [["component", [     {       "libraryName": "mint-ui",       "style": true     }   ]]] }

启动：npm run dev

编译：npm run build

vue-router

路由介绍:

github: https://github.com/vuejs/vue-router

中文文档: http://router.vuejs.org/zh-cn/

安装  npm install vue-router --save

vue用来实现SPA的插件

使用vue-router         1. 创建路由器: router/index.js           new VueRouter({             routes: [               { // 一般路由                 path: '/about',                 component: about               },               { // 自动跳转路由                 path: '/',                  redirect: '/about'               }             ]           })         2. 注册路由器: main.js            import router from './router'             new Vue({             router             })         3. 使用路由组件标签:             Go to XXX            

编写路由的3步

定义路由组件

映射路由

编写路由2个标签

嵌套路由

children: [             {               path: '/home/news',               component: news             },             {               path: 'message',               component: message             }          ]

向路由组件传递数据

params:          props: 

使用路由组件标签

:              用来生成路由链接     Go to XXX       : 用来显示当前路由组件界面     

缓存路由组件的书写方式为

相关API

this.$router.push(path): 相当于点击路由链接(可以返回到当前路由界面)

this.$router.replace(path): 用新路由替换当前路由(不可以返回到当前路由界面)

this.$router.back(): 请求(返回)上一个记录路由

数据绑定

一旦更新了 data 中的某个属性数据, 所有界面上直接使用或间接使用了此属性的节点都会

更新

数据劫持

数据劫持是 vue 中用来实现数据绑定的一种技术

数据劫持（数据绑定）的四个重要对象为

Observer 是用来给数据添加Dep依赖

Dep 是data每个对象包括子对象都拥有一个该对象, 当所绑定的数据有变更时, 通过dep.notify()通知Watcher。

Compile  是HTML指令解析器，对每个元素节点的指令进行扫描和解析，根据指令模板替换数据，以及绑定相应的更新函数。

Watcher  是连接Observer和Compile的桥梁，Compile解析指令时会创建一个对应的Watcher并绑定update方法 , 添加到Dep对象上。

Vue数据代理的实现

- 通过 Object.defineProperty()给 vm 添加与 data 对象的属性对应的属性描述符

所有添加的属性都包含 getter/setter

getter/setter 内部去操作 data 中对应的属性数据

双向数据绑定

双向数据绑定是建立在单向数据绑定(model==>View)的基础之上的

双向数据绑定的实现流程

在解析 v-model 指令时, 给当前元素添加 input 监听

当 input 的 value 发生改变时, 将最新的值赋值给当前表达式所对应的 data 属性

VueRouter匹配优先级

有时候，同一个路径可以匹配多个路由，此时，匹配的优先级就按照路由的

定义顺序：谁先定义的，谁的优先级就最高

正常代码逻辑应该是越往下优先级越高，但在router 上正好相反

下面案例两个组件都对应有一个地址，但是'sapp' 的组件在路由中最先被注册，

因此优先使用

NAT Vue

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。