1 SPA

SPA：Single Page Application，整个应用程序只有一个完整的HTML页面和多个保存不同"页面"内容的组件片段。SPA应用侦测地址栏中相对路径的变化，选择匹配的组件片段替换唯一HTML文件中的相应区域。

1）请求次数:
单页面应用只在首次加载时请求一次，将一个完整的HTML页面和多个片段都获取到客户端保存。每次跳转时，不再需要向服务端发送请求。——只有一次
多页面应用，每跳转一次页面，都重新向服务器发送请求——多次
2）页面跳转:
单页面应用，不需要替换整棵DOM树，只需要替换DOM树中局部节点即可——效率高
多页面应用，每次跳转，需要删除并重建整棵DOM树——效率低
3）相同资源的请求: Bootstrap
单页面应用因为页面没有改变，所以无需重复请求资源
多页面应用，每加载一次页面，都重新请求所需的资源

2 Vue-router组件

Vue-router组件是专门用于Vue框架实现单页面引用的组件，使用Vue打开的默认锚点路径，此时不会向服务器发送请求，而是访问VueRouter

下载并引入vue.js和vue-router.js

定义基本的根组件

   <div id="app">
   </div>
   <script>
    new Vue({
      el:"#app",
      data:{}
    })

在根组件内容中，预留可能被其他子组件替换的区域
<router-view/> 为其他子组件的片段占位——路由插槽
只要页面中可能变化的片段区域，都要用router-view占位
定义多个子组件, 每个组件2部分组成:<template>和<script>
定义路由:
1. 定义路由字典:
  路由字典: 包含相对路径和组件间对应关系的集合
  
  扫描二维码关注公众号，回复： 5669208 查看本文章
```
  var routes=[
     {path:"/index", component: Index },
     {path:"/login", component: Login }
  ];
```
2. 创建路由器对象，装载路由字典
  var router=new VueRouter({ routes })
3. 将路由器装入根组件new Vue中
```
   new Vue({
  	   ..., 
  	  router
   })
```

嵌套路由：当多个"页面"组件中包含部分相同的区域，在路由字典中的一个路由对象中包含子路由对象

相同部分的组件，提取成全局组件Vue.component
再额外提取出一个父组件，包含:
<相同部分的全局组件>
<router-view>
配置路由字典:
{path: /父路径 , component:父组件, children:[
{path:"/父路径/子路径", component: 子组件},
…
]}
运行：地址栏中#/父路径/子路径
/父路径先用父组件代替div#app中的<router-view>
/子组件再用子组件代替父组件中的<router-view>

路由跳转:
1. HTML: <router-link to="/相对路径">文本，使用v-for动态生成时需要添加属性:key=“i"进行区分，因为vue中v-for生成的a标签会弹出警告
加载时转换成: <a href=”/相对路径">文本，自动判断是否需要#
2. js: this.$router.push("/目标地址")，模拟history的方式进行跳转

路由传参:

在路由字典中，就提前配置好:
{path:"/details/:lid", …}，一旦定义参数必须带参才能访问当前路径
跳转时: /details/9
组件中接收参数值: [this.]$route.params.lid
简化: {path:"/details/:lid", …, props:true}
var 组件={
… ,
props:[“lid”]
}
绑定时，可直接使用lid变量

示例代码

<template id="tplHeader">
    <div>
        <h1>这是页头</h1>
    </div>
</template>
<script>
    Vue.component("my-header", {
        template:"#tplHeader"
    })
</script>

<template id="tplHome">
    <div>
        <my-header></my-header>
        <router-link to="/login">登录</router-link>
        <router-view></router-view>
    </div>
</template>
<script>
    var home={
        template:"#tplHome"
    }
</script>

<template id="tplIndex">
    <div>
        <h1>这是首页</h1>
        <ul>
            <li><router-link to="/details/9">查看详情</router-link></li> 
            <li><router-link to="/details/12">查看详情</router-link></li> 
            <li><router-link to="/details/5">查看详情</router-link></li> 
        </ul>
    </div>
</template>
<script>
    var index={
        template:"#tplIndex"
    }
</script>

<template id="tplDetails">
    <div>
        <h1>这是详情</h1>
        <h2>{{$route.params.lid}}号商品</h2>
        <h2>{{lid}}号商品</h2>
    </div>
</template>
<script>
    var details={
        template:"#tplDetails",
        props:["lid"]
    }
</script>

<template id="tplLogin">
    <div>
        用户名:<input><br>
        密码:<input type="password"><br>
        <button @click="login()">登录</button>
    </div>
</template>
<script>
    var login={
        template:"#tplLogin",
        methods:{
            login(){
                alert("登陆成功");
                this.$router.push("/");
            }
        }
    }
</script>

<template id="tplNotFound">
    <h1 style="color:red">404:Not Found!</h1>
</template>
<script>
    var NotFound={
        template:"#tplNotFound"
    }
</script>

<script>
    var routes=[
        {path:"/",component:home, 
        children:[
            {path:"/", component:index},
            {path:"/index", component:index},
            {path:"/details/:lid", component:details, props:true}
        ]},     
        {path:"/login", component:login},
        {path:"/*",component:NotFound}
    ];
    var router = new VueRouter({routes}); 
</script>


<div id="app">
    <router-view></router-view>
</div>
<script>
    new Vue({
        el:"#app",
        data:{},
        router
    })
</script>

3 脚手架

半成品的项目源代码，只需添加个性化的数据和界面；节约代码量以及统一项目结构。
脚手架命令行工具(CLI): 反复创建脚手架源代码

用npm安装脚手架命令行工具:
npm i -g @vue/cli
结构: 可在命令行中使用vue命令反复创建Vue脚手架项目源代码
用Vue脚手架工具命令创建项目源代码:
vue create 项目名
运行项目:
vs code中，打开项目文件夹，并在终端中打开，输入:
npm run serve
编译成功后，打开浏览器，访问: http://localhost:8080
在vs code中修改vue项目内容后，npm run serve会自动编译重启

脚手架项目结构：

public
保存不需要编译就可直接浏览的静态资源: 图片，公用的css，公用的js，同时还保存着整个项目唯一的完整的HTML页面
src
保存着项目的所有源代码
assets: 专门用于保存，需要被打包的静态资源: css,图片或js
App.vue: 保存着根组件的和根组件的css
main.js: 保存着new Vue()，监视着App.vue中的
,以及对Vue的配置
运行时: App.vue和main.js 共同替换index.html中的

views: 专门保存“页面组件”的文件夹，将来有几个“页面”，views中，就有几个.vue文件
components: 专门保存各个页面中的子组件的文件夹
router.js: 专门定义路由器和路由列表的模块

每个vue文件都是独立的组件，拥有专属HTML、CSS、JS和数据，包含三部分：

<template>
  <div>
组件的HTML片段
      </div>
</template>

<script>
 //引入子组件模块: @=”src/”,相当于: var 组件对象名=require(“xxx.vue”)
 import 组件对象名 from “@/components/子组件.vue”
     
 //将当前组件抛出为模块: 
 export default {
     data(){
         return { 模型变量 }
	},
	//同Vue中的Vue.component或new Vue()
    //定义子组件
    componets:{
      子组件对象名
    }
}
</script>
<style scoped>/*仅限于当前组件范围内可用的样式*/
 当前组件的<template>专用的Css样式
.fade{ … }
</style>

安装axios：npm i -s axios
配置axios：
main.js:
import axios from ‘axios’
Vue.prototype.axios=axios;

xxxx.vue:使用axios
this.axios.get/post()

Vue_4.

Vue

1 SPA

2 Vue-router组件

3 脚手架

猜你喜欢