1.1 vue-router路由基本使用

  官网: https://router.vuejs.org/zh/api/#router-link

  1、安装vue-router

      bower info vue-router                      # 查看当前vue-router版本

      cnpm install vue-route -S                # 安装vue-router

      安装后在:C:\Users\tom\node_modules\vue-router\dist  路径下会下载四个文件

  2、使用Vue.js开发SPA(Single Page Application)单页面应用

      1) mode:'history',                         //更改模式, url就不会出现 "#" 号了

      2) linkActiveClass:'active'            //更新活动链接的class类名

      3) {path:'*', redirect:'/home'}               //路由重定向

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>路由基本用法</title>
<style>
/* .router-link-active{
font-size:20px;
color:#ff7300;
text-decoration:none;
} */
.active{
font-size:20px;
color:#ff7300;
text-decoration:none;
}
</style>
<script src="js/vue.js"></script>
<script src="js/vue-router.js"></script>
</head>
<body>
<div id="itany">
<div>
<!-- 使用router-link组件来定义导航,to属性指定链接url -->
<router-link to="/home">主页</router-link>
<router-link to="/news">新闻</router-link>
</div>
<div>
<!-- router-view用来显示路由内容 -->
<router-view></router-view>
</div>
</div> <script>
//1.定义组件
var Home={
template:'<h3>我是主页</h3>'
};
var News={
template:'<h3>我是新闻</h3>'
}; //2.配置路由
const routes=[
{path:'/home',component:Home},
{path:'/news',component:News},
{path:'*',redirect:'/home'} //重定向
]; //3.创建路由实例
const router=new VueRouter({
routes, //简写,相当于routes:routes
mode:'history', //更改模式, url就不会出现 "#" 号了
linkActiveClass:'active' //更新活动链接的class类名
}); //4.创建根实例并将路由挂载到Vue实例上
new Vue({
el:'#itany',
router //注入路由
});
</script>
</body>
</html>

使用vue开发单页面应用

      

1.2 路由嵌套、参数传递、路由结合动画

  1、路由传参数的两种方法

      <router-link to="/user/login?name=tom&pwd=123" tag="li">用户登陆</router-link>
      <router-link to="/user/regist/alice/456" tag="li">用户注册</router-link>

  2、获取路由传递的参数

var Login={
  template:'<h4>用户登陆。。。获取参数:{{$route.query}},{{$route.path}}</h4>'
}; var Regist={
  template:'<h4>用户注册。。。获取参数:{{$route.params}},{{$route.path}}</h4>'
};

路由传递参数的两种方法

      1) {{$route.query}}:    { "name": "tom", "pwd": "123" }
            {{$route.path}}:    /user/login

      2) {{$route.params}}: { "username": "alice", "password": "456" }

        {{$route.path}} :  /user/regist/alice/456

  3、添加路由和替换路由

      注:添加路由和替换路由的区别是----替换路由不会显示历史

push(){
router.push({path:'home'}); //添加路由,切换路由
},
replace(){
router.replace({path:'user'}); //替换路由,没有历史记录
}

替换路由和添加路由

  4、切换路由动画效果

<transition enter-active-class="animated bounceInLeft" leave-active-class="animated bounceOutRight">
<router-view></router-view>
</transition>

切换路由动画效果

    

1.3 单文件组件:.vue文件

  1、.vue文件

      1).vue文件,称为单文件组件,是Vue.js自定义的一种文件格式,一个.vue文件就是一个单独的组件,在文件内封装了组件相关的代码:html、css、js
      2).vue文件由三部分组成:<template>、<style>、<script>

    <template>
html
</template> <style>
css
</style> <script>
js
</script>

.vue文件包含以下部分

  2、vue-loader

      1)浏览器本身并不认为.vue文件,所以必须对.vue文件进行加载解析,此时需要vue-loader

      2)类似的loader还有许多,如:html-loader、css-loader、style-loader、babel-loader等

      3)需要注意的是vue-loader是基于webpack的

  3、webpack

      1)webpack是一个前端资源模板化加载器和打包工具,它能够把各种资源都作为模块来使用和处理

      2)实际上,webpack是通过不同的loader将这些资源加载后打包,然后输出打包后文件

      3)简单来说,webpack就是一个模块加载器,所有资源都可以作为模块来加载,最后打包输出

      4)[官网](http://webpack.github.io/)

        webpack版本:v1.x v2.x
        webpack有一个核心配置文件:webpack.config.js,必须放在项目根目录下

1.4  手动创建一个vue项目步骤

  1、项目目录结构

C:.
│ .babelrc # 我们要使用ES6语法所以要配置babel
│ App.vue # vue文件
│ index.html
│ main.js # 入口文件
│ package.json # 工程文件(执行命令创建):npm init --yes
│ webpack.config.js # webpack配置文件

└─components # 这个地方是放组件的目录
User.vue

项目目录结构

  2、安装相关模板

# 生成依赖
cnpm install vue -S # 开发依赖
cnpm install webpack -D # webpack就是一个模块加载器,识别.vue文件
cnpm install webpack-dev-server -D # webpack自己启动服务的一个服务器 # 加载各种模块的loader
cnpm install vue-loader -D
cnpm install vue-html-loader -D
cnpm install css-loader -D
cnpm install vue-style-loader -D
cnpm install file-loader -D # 项目中使用的字体、字库加载
cnpm install babel-loader -D
cnpm install babel-core -D
cnpm install babel-preset-env -D # 根据配置的运行环境自动启用需要的babel插件
cnpm install vue-template-compiler -D # 预编译模板 合并:cnpm install -D webpack webpack-dev-server vue-loader vue-html-loader css-loader vue-style-loader file-loader babel-loader babel-core babel-preset-env vue-template-compiler

安装相关模板

  3、main.js

      1. 使用ES6语法引入模板

      2. 使用render函数渲染组件

/**
* 使用ES6语法引入模板: main.js
*/
import Vue from 'vue'
import App from './App.vue' new Vue({
el:'#app',
render:function(h){ //使用render函数渲染组件
return h(App);
}
});

main.js

  4、编写webpack.config.js

      1. 配置入口文件

      2. 配置入口文件输出位置

      3. 配置模块加载器

module.exports={
//1、配置入口文件
entry:'./main.js',
//2、配置入口文件输出位置
output:{
path:__dirname, //项目根路径
filename:'build.js'
},
//3、配置模块加载器
module:{
rules:[
{
test:/\.vue$/, //所有以.vue结尾的文件都由vue-loader加载
loader:'vue-loader'
},
{
test:/\.js$/, //所有以.js结尾的文件都由babel-loader加载,除了node_modules以外
loader:'babel-loader',
exclude:/node_modules/
}
]
}
};

webpack.config.js

  5、编写.babelrc

      1. 预设值加载文件

{
"presets":[
["env",{"module":false}]
]
}

.babelrc

  6、编写package.json

      1. 修改package.json中测试脚本变成运行脚本

          "scripts": {
            "dev":"webpack-dev-server --open --hot --port 8800"
          },

       2. 参数的意思

          webpack-dev-server     启动一个server

          --open                          打开一个浏览器

           --hot                            修改文件后热加载

          --port 8800                   监听端口号

{
"name": "webpack-demo",
"version": "1.0.0",
"description": "",
"main": "main.js",
"scripts": {
"dev":"webpack-dev-server --open --hot --port 8800"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"vue": "^2.3.4"
},
"devDependencies": {
"babel-core": "^6.25.0",
"babel-loader": "^7.1.1",
"babel-preset-env": "^1.5.2",
"css-loader": "^0.28.4",
"file-loader": "^0.11.2",
"vue-html-loader": "^1.2.4",
"vue-loader": "^13.0.0",
"vue-style-loader": "^3.0.1",
"vue-template-compiler": "^2.3.4",
"webpack": "^3.0.0",
"webpack-dev-server": "^2.5.0"
}
}

package.json

   7、其他文件

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app"></div>
<script src="build.js"></script>
</body>
</html>

index.html

<template>
<div id="itany">
<h1>welcome</h1>
<h2 @click="change">{{name}}</h2> <User></User>
</div>
</template> <script>
//导入模块
import User from './components/User.vue' // console.log(111);
export default {
data(){
return {
name:'tom'
}
},
methods:{
change(){
this.name='汤姆';
}
},
components:{
User
}
}
</script> <style>
body{
background-color:#ccc;
}
</style>

App.vue

<template>
<div class="user">
<h2>用户列表</h2>
<ul>
<li v-for="value in users">{{value}}</li>
</ul>
</div>
</template> <script>
export default {
data(){
return {
users:['tom','jack','mike','alice']
}
}
}
</script> <style scoped> /* scoped表示该样式只在当前组件中有效 */
h2{
color:red;
}
</style>

components\User.vue

  8、启动程序

       npm run dev

  9、效果图

      

10: vue-router和单文件组件的更多相关文章

  1. vue中的单文件组件

    之前都是在html文件中写组件的css,组件的js,组件的模板来演示vue组件的语法,下面介绍以.vue结尾的单文件组件.vue-loader是一个Webpack的loader,可以将单文件组件转换为 ...

  2. vue入门之单文件组件

    介绍 在很多 Vue 项目中,我们使用 Vue.component 来定义全局组件,紧接着用 new Vue({ el: '#container '}) 在每个页面内指定一个容器元素. 这种方式在很多 ...

  3. Vue -3:单文件组件

    在很多 Vue 项目中,我们使用 Vue.component 来定义全局组件,紧接着用 new Vue({ el: '#container '}) 在每个页面内指定一个容器元素. 这种方式在很多中小规 ...

  4. Vue中创建单文件组件 注册组件 以及组件的使用

    <template> <div id="app"> <v-home></v-home> <hr > <br> ...

  5. Vue之单文件组件的数据传递,axios请求数据及路由router

    1.传递数据 例如,我们希望把父组件的数据传递给子组件. 可以通过props属性来进行传递. 传递数据三个步骤: 步骤1:在父组件中,调用子组件的组名处,使用属性值的方式往下传递数据 <Menu ...

  6. webpack入坑之旅(五)加载vue单文件组件

    这是一系列文章,此系列所有的练习都存在了我的github仓库中vue-webpack,在本人有了新的理解与认识之后,会对文章有不定时的更正与更新.下面是目前完成的列表: webpack入坑之旅(一)不 ...

  7. 一丢丢学习之webpack4 + Vue单文件组件的应用

    之前刚学了一些Vue的皮毛于是写了一个本地播放器https://github.com/liwenchi123000/Local-Music-Player,如果觉得ok的朋友可以给个star. 就是很简 ...

  8. vue.js单文件组件中非父子组件的传值

    最近在研究vue.js,总体来说还算可以,但是在web开发群里有一些人问在单文件组件开发模式中非父子组件如何传值的问题,今天在这里讲讲,希望对大家有所帮助! 在官网api中的这段讲解很少,也很模糊:官 ...

  9. Vue系列(三):组件及数据传递、路由、单文件组件、vue-cli脚手架

    上一篇:Vue系列(二):发送Ajax.JSONP请求.Vue生命周期及实例属性和方法.自定义指令与过渡 一. 组件component 1. 什么是组件? 组件(Component)是 Vue.js ...

随机推荐

  1. jenkins 添加 证书凭证Credentials

    jenkins 添加 证书凭证Credentials 大家都知道jenkins在拉取git项目代码的时候,如果没有配置 “证书凭证Credentials” 或者配置的不对, 就会出现红色报错,最终导致 ...

  2. Jenkins自动化构建(一)执行selenium+python脚本

    Jenkins执行python写的selenium自动化脚本,通常会遇到,执行打不开浏览器,查看jenkins构建Console Output控制台输出信息,发现脚本是执行了的,但是出错了,打开浏览器 ...

  3. node.js初识11

    1.EJS  Embedded JavaScript templates 模板引擎 .EJS的效率不高,因为他后台是通过字符串来处理的 <ul> <% for(var i = 0 ; ...

  4. java详解内部类

    可以将一个类的定义放在另一个类的定义内部,这就是内部类. 内部类是一个非常有用的特性但又比较难理解使用的特性(鄙人到现在都没有怎么使用过内部类,对内部类也只是略知一二). 第一次见面 内部类我们从外面 ...

  5. Python全栈-day2-day3-语法基础1

    1.什么是变量,为什么需要变量 变量即变化的量,衡量现实中实物的状态:程序执行的本质就是一系列的状态变化,变是程序本身执行的直接体现,因此程序的执行需要这种机制将执行状态以及状态的变化保存下来. 1) ...

  6. js切换背景颜色

    我将全部的代码上传到了github,你可以下载查看 <!-------change the background color--------------> <script> f ...

  7. Qt & VS2013 报错:There's no Qt version assigned to this project for platform Win32

    如果你想了解关于Qt与VS2013开发环境搭建,可以至此翻页. 这里主要分享环境已搭建成功,在构建项目时遇到的报错解决方案. [1]Qt 与 VS2013开发环境构建时报错 报错界面如下: 注意:对话 ...

  8. jack welch:“你们知道了,但是我们做到了”

    一.我们发现,只要我们敢于相信自己,敢于朝着那些看似不可能的目标不懈努力,最终会如愿以偿,个人的领袖形象也将因此而确立. 二.一个领导者必须要有魄力.对我来说,这就是一个人能否领导一项业务的分水岭. ...

  9. Struts2输入校验(XML方式)

    本章主要介绍struts2的XML配置方式输入校验.以下将结合一个实例程序进行说明. 代码结构: 关键代码: RegistAction.javapackage com.alfred.regist.ac ...

  10. Java多线程循环打印ABC的5种实现方法

    https://blog.csdn.net/weixin_39723337/article/details/80352783 题目:3个线程循环打印ABC,其中A打印3次,B打印2次,C打印1次,循环 ...