最火下载站首页
手机版
最火下载站
关注公众号
最火下载站

当前位置:首页 > 网络知识 > Web前端 > 工具与技巧> Vue和Vue Router介绍及基本使用

Vue和Vue Router介绍及基本使用

文章作者:网友投稿 发布时间:2019-06-06 12:00:38 来源:网络

Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有

Vue 两个核心:

hx.png


Vue 下载方式:

1. CDN

对于制作原型或学习,你可以这样使用最新版本:

cdn.png


对于生产环境,我们推荐链接到一个明确的版本号和构建文件,以避免新版本造成的不可预期的破坏:

cdn1.png


如果你使用原生 ES Modules,这里也有一个兼容 ES Module 的构建文件:

cdn2.png


你可以在 cdn.jsdelivr.net/npm/vue 浏览 NPM 包的源代码。

Vue 也可以在 unpkg 和 cdnjs 上获取 (cdnjs 的版本更新可能略滞后)。

请确认了解不同构建版本并在你发布的站点中使用生产环境版本,把 vue.js 换成 vue.min.js。这是一个更小的构建,可以带来比开发环境下更快的速度体验。


2.  NPM

在用 Vue 构建大型应用时推荐使用 NPM 安装。NPM 能很好地和诸如 webpack 或 Browserify 模块打包器配合使用。同时 Vue 也提供配套工具来开发单文件组件。

npm.png


注:对于中国大陆用户,建议将 NPM 源设置为国内的镜像,可以大幅提升安装速度。


3.  Bower

Bower 只提供 UMD 版本。

bower.png



Vue 使用方式:

script.png

声明式渲染:Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统


      xr1.png

      xr2.png

      显示效果:

      xr3.png




Vue Router 下载方式:

1.   直接下载 / 提供了基于 NPM 的 CDN 链接

可以像 https://unpkg.com/vue-router@2.0.0/dist/vue-router.js 这样指定 版本号 或者 Tag


在 Vue 后面加载 vue-router,它会自动安装的:

vr_cdn.png


2.   NPM 

vr_npm.png


如果在一个模块化工程中使用它,必须要通过 Vue.use() 明确地安装路由功能:    

vr.png


Vue Router 功能:

1)嵌套的路由/视图表

2)模块化的、基于组件的路由配置

3)路由参数、查询、通配符

4)基于 Vue.js 过渡系统的视图过渡效果

5)细粒度的导航控制

6)带有自动激活的 CSS class 的链接

7)HTML5 历史模式或 hash 模式,在 IE9 中自动降级

8)自定义的滚动条行为


Vue Router 概念:

路由中有三个基本的概念 route, routes, router。

1) route,它是一条路由。

2) routes 是一组路由,把多条路由组合起来,形成一个数组。

3) router 是一个机制,相当于一个管理者,它来管理路由。


Vue Router 分类:

1)动态路由匹配

2)嵌套路由

3)命名路由

4)编程式导航


上一篇: 教你如何给 Vlog 自动加字幕!

下一篇: React、JSX以及Render函数基本使用教程

相关资讯

共有0条评论网友评论