脚本宝典收集整理的这篇文章主要介绍了vue学习笔记(四),脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
我们经常使用vue开发单页面应用程序(SPA)。在开发SPA过程中,路由是必不可少的部分,vue的官方推荐是vue-router。单页面应用程序看起来好像是一个页面,其实是在一个页面中切换不同的html部分,从而达到所谓的单页面,在这切换之中,就需要使用路由来实现不同的页面内容的展现。
vue-router的基本使用步骤如下:
//1.定义组件,用于路由切换
var Home = {
template: '<div>我是主页</div>'
}
var News = {
template: '<div>我是新闻</div>'
}
//2.配置路由
const routes = [{
path: '/home',
component: Home
},{
path: '/news',
component: News
},{ //这一路由配置用于首次访问或者找不到所请求路由,自动跳转home页
path: '*',
redirect: '/home'
}];
//3.创建路由实例
var router = new VueRouter({
routes //传入配置好的路由信息
});
//4.挂载路由到根组件
new Vue({
el: '#app',
router
});
这样我们就配置好了一个完整的路由。在切换组件的时候会根据路由加载不同的组件。我们使用类似a标签的<router-link to="url"></router-link>
触发组件的切换,to
属性存放的是路径。使用<router-view></router-view>
来显示所切换组件。
<div id="app">
<router-link to="/home">主页</router-link>
<router-link to="/news">新闻</router-link>
<router-view></router-view>
</div>
这样我们就可以实现主页和新闻组件间的切换。
可能我们需要向所切换组件传递参数。vue提供了两种向组件传递参数的方式。
{{$route.query}}
接收参数{{$route.params}}
接收参数路由还可以多层嵌套使用,使用children
属性。
{
path:'/user',
component:User,
children:[
{
path:'login',
component:Login
},
{
path:'regist',
component:Regist
}
]
}
子路由项路径不要使用/
开头,以 /
开头的嵌套路径会被当作根路径。
在组件中就可以使用该路由:
<div>
<h3>用户信息</h3>
<ul>
<router-link to="/user/login">用户登陆</router-link>
<router-link to="/user/regist">用户注册</router-link>
</ul>
<router-view></router-view>
</div>
注意路径的写法。
这里学习两个路由实例的方法:router.push()
和router.replace()
。
<route-link>
相同router.replace(): 替换路由,不产生历史记录
router.push({path:'home'})
router.replace({path:'user'})
路由结合动画使用很简单,我们可以用 <transition> 组件给它添加一些动画效果:
<transition>
<router-view></router-view>
</transition>
.vue
文件称为单文件组件,是Vue.js自定义的一种文件格式,一个.vue文件就是一个单独的组件,在文件内封装了组件相关的代码:html、css、js代码。
.vue
文件由三部分组成:<template>
、<style>
、<script>
:
<template>
//html
</template>
<script>
//js
</script>
<style>
//css
</style>
浏览器本身并不认识.vue文件,此时需要vue-loader对.vue文件进行加载解析,。类似的loader还有许多,如:html-loader、css-loader、style-loader、babel-loader等。需要注意的是vue-loader是基于webpack的。
webpack是一个前端资源模板化加载器和打包工具,它能够把各种资源都作为模块来使用和处理。实际上,webpack是通过不同的loader将这些资源加载后打包,然后输出打包后文件。简单来说,webpack就是一个模块加载器,所有资源都可以作为模块来加载,最后打包输出。
vue-cli是一个vue脚手架,可以帮助我们快速构造项目结构,减少开发人员开发阻力。vue-cli集成了多种版本:
//安装vue-cli,配置vue命令环境
cnpm install vue-cli -g
vue --version
vue list
// 初始化项目,生成项目模板
vue init 模板名 项目名
//进入生成的项目目录,安装模块包
cd vue-cli-demo
cnpm install
//运行
npm run dev //启动测试服务
npm run build //将项目打包输出dist目录,项目上线的话要将dist目录拷贝到服务器上
.
|-- build // 项目构建(webpack)相关代码
| |-- build.js // 生产环境构建代码
| |-- check-version.js // 检查node、npm等版本
| |-- dev-client.js // 热重载相关
| |-- dev-server.js // 构建本地服务器
| |-- utils.js // 构建工具相关
| |-- webpack.base.conf.js // webpack基础配置
| |-- webpack.dev.conf.js // webpack开发环境配置
| |-- webpack.prod.conf.js // webpack生产环境配置
|-- config // 项目开发环境配置
| |-- dev.env.js // 开发环境变量
| |-- index.js // 项目一些配置变量
| |-- prod.env.js // 生产环境变量
| |-- test.env.js // 测试环境变量
|-- src // 源码目录
| |-- components // vue组件
| |-- store // 状态管理
| |-- App.vue // 页面入口vue文件
| |-- main.js // 程序入口文件,加载各种公共组件
|-- static // 静态文件
| |-- data
|-- .babelrc // ES6语法编译配置
|-- .editorconfig // 定义代码格式
|-- .gitignore // git上传需要忽略的文件格式
|-- README.md // 项目说明
|-- favicon.ico //网页图标
|-- index.html // 入口页面
|-- package.json // 项目配置信息
.
以上是脚本宝典为你收集整理的vue学习笔记(四)全部内容,希望文章能够帮你解决vue学习笔记(四)所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。