vue单页面应用初始加载登录页_【编程鹿】学Vue.js这一篇就够了万字学会|通俗易懂下篇...-CSDN博客

路由vue-router

场景模拟

现在我们来实现这样一个功能：

一个页面，包含登录和注册，点击不同按钮，实现登录和注册页切换。

编写父组件

为了让接下来的功能比较清晰，我们先新建一个文件夹：src

然后新建一个HTML文件，作为入口：index.html

然后编写页面的基本结构：

<div id="app">

编写登录及注册组件

接下来我们来实现登录组件，以前我们都是写在一个文件中，但是为了复用性，开发中都会把组件放入独立的JS文件中，我们新建一个user目录以及login.js及register.js。

编写组件，这里我们只写模板，不写功能。

const loginForm = {

const registerForm = {

在父组件中引用

<div id="app">

问题

我们期待的是，当点击登录或注册按钮，分别显示登录页或注册页，而不是一起显示。

但是，如何才能动态加载组件，实现组件切换呢？

虽然使用原生的Html5和JS也能实现，但是官方推荐我们使用vue-router模块。

vue-router简介和安装

使用vue-router和vue可以非常方便的实现复杂单页应用的动态路由功能。

官网：https://router.vuejs.org/zh-cn/

使用npm安装：npm install vue-router --save

在index.html中引入依赖：

<script src="../node_modules/vue-router/dist/vue-router.js">

快速入门

新建vue-router对象，并且指定路由规则：

// 创建VueRouter对象

创建VueRouter对象，并指定路由参数
routes：路由规则的数组，可以指定多个对象，每个对象是一条路由规则，包含以下属性：
- path：路由的路径
- component：组件名称

在父组件中引入router对象：

var vm =

页面跳转控制：

<div id="app">

通过 router-view 来指定一个锚点，当路由的路径匹配时，vue-router会自动把对应组件放到锚点位置进行渲染
通过 router-link 指定一个跳转链接，当点击时，会触发vue-router的路由功能。

单文件组件

vue-cli3开发单文件组件

'组件名',{

缺点

全局定义组件的名字时不能重复
字符串模板 es6提供了模板字符串 \
不支持css

在vue中把.vue的文件称为单文件组件

Vue CLI3 脚手架

基本配置

安装Nodejs
- 保证Node.js8.9或更高版本
- 终端中输入node -v,保证已安装成功
安装淘宝镜像源
- npm install -g cnpm --registry=https://registry.npm.taobao.org
- 以后的npm可以用cnpm代替
安装Vue Cli3脚手架
- cnpm install -g @vue/cli
检查其版本是否正确
- vue --version

快速原型开发

在命令行工具cmd，或者Intellij IDEA的Terminal中进入想要构建项目的目录，输入

vue init webpack project-name

回车,webpack默认版本为2.0。

接下来会出现几个提示，分别是输入项目名称、描述、作者等，按实际情况选择即可。

？Project name ---- 项目名称，init命令时也填了个project-name，如果无需更改，直接回车即可；

？Project description ---- 项目描述，按需填写。无需填写可以直接回车；

？Author ---- 作者

？Vue build ---- 构建模式，一般默认第一个；

？Install vue-router? ---- 是否安装vue-router。选Y。后边构建项目会用到。

？Use ESLint to lint yout code? ---- 格式校验，按需；

？Set up unit tests ---- 测试相关，按需；

？Setup e2e tests with Nightwatch? ---- 测试相关，按需；

？Should we run ‘npm install’ for you after the project has been created? ---- 按需，这里我选Yes, use NPM。如果选No，后续自己在目标

目录下执行npm install即可。这样构建出来的项目，可以直接运行。进入项目所在目录，执行npm run dev，执行完看到以下提示：

Your application is running here: http://localhost:8080

在浏览器打开http://localhost:8080，看到这个页面，接下来就可以开始开发了。

分析Vue脚手架生成的项目结构

node_modules:依赖包目录 public：静态资源目录 src：源码目录 src/assets:资源目录 src/components：组件目录 src/views:视图组件目录 src/App.vue:根组件 src/main.js:入口js src/router.js:路由js babel.config.js:babel配置文件

使用单文件组件开发购物车

<template>

购物车文件代码：

<template>

Vuejs Ajax

Vuejs 并没有直接处理ajax的组件，但可以使用axios组件实现对异步请求的操作。

Axios简介

# 如果使用npm则可以如下安装

axios应用

方法说明

axios可以使用的方法有：

axios(config)

config请求配置

这些是创建请求时可以用的配置选项。只有 url 是必需的。如果没有指定 method ，请求将默认使用 get 方法。

{
 // `url` 是用于请求的服务器 URL
 url: '/user',
 
 // `method` 是创建请求时使用的方法
 method: 'get', // 默认是 get
 
 // `baseURL` 将自动加在 `url` 前面，除非 `url` 是一个绝对 URL。
 // 它可以通过设置一个 `baseURL` 便于为 axios 实例的方法传递相对 URL
 baseURL: 'https://some-domain.com/api/',
 
 // `params` 是即将与请求一起发送的 URL 参数
 // 必须是一个无格式对象(plain object)或 URLSearchParams 对象
 params: {
  ID: 12345
 },
 
 // `data` 是作为请求主体被发送的数据
 // 只适用于这些请求方法 'PUT', 'POST', 和 'PATCH'
 // 在没有设置 `transformRequest` 时，必须是以下类型之一：
 // - string, plain object, ArrayBuffer, ArrayBufferView, URLSearchParams
 // - 浏览器专属：FormData, File, Blob
 // - Node 专属：Stream
 data: {
  firstName: 'Fred'
 },
 
 // `timeout` 指定请求超时的毫秒数(0 表示无超时时间)
 // 如果请求话费了超过 `timeout` 的时间，请求将被中断
 timeout: 1000
}

响应结构

{
 // `data` 由服务器提供的响应
 data: {},
 
 // `status` 来自服务器响应的 HTTP 状态码
 status: 200,
 
 // `statusText` 来自服务器响应的 HTTP 状态信息
 statusText: 'OK',
 
 // `headers` 服务器响应的头
 headers: {},
 
 // `config` 是为请求提供的配置信息
 config: {}
}

axios方法示例

可以通过向 axios 传递相关配置来创建请求

axios(config)

html>

综合案例

购物车综合案例

第一步：实现图书的列表显示

<body>

第二步：价格小数问题处理

方式一：methods

<body>

方式二：过滤器

==可以应用到插值表达式或v-bind表达式中，可以做格式化。==

<body>

第三步：数量加减操作

<body>

第四步：移除按钮

<body>

第五步：计算最终价格

<body>

图书管理综合案例

第一步：实现列表、新增和删除

<body>

第二步：实现搜索筛选

<body>

==换种方式实现：==

search(kw){
    return this.books.filter((item)=>{
        return item.name.includes(kw);
    })
}

第三步：日期格式化

<body>

第四步：优化添加功能

==需求：上面的案例中，我们需要点击添加按钮实现添加一本书，有时候是这样子的，我们按下回车键也可以添加，下面就来做这个功能。==

按下enter键实现添加方式1

<input type="text" v-model="name" @keyup.enter="add"/>  // 可行

按下enter键实现添加方式2

图书名称: type="text" v-model="name" @keyup.13="add"/>  // 键码可行

按下F2键实现添加方式1

图书名称: type="text" v-model="name" @keyup.f2="add"/> // 可行，低版本不可行

按下F2键实现添加方式2

图书名称: type="text" v-model="name" @keyup.113="add"/> // 可行，通过键码代表F2可行

按下F2键盘实现添加方式3

==通过键码代表F2可行，但是阅读性不好，可以自定义按键修饰符，主要是处理低版本Vue的问题。==

<input type="text" v-model="name" @keyup.f2="add"/>

第五步：页面打开的时候就搜索框获得焦点

根据图书名称搜索：type="text" v-model="kw" v-focus/>

Vue.directive("focus",{
    inserted: function(el){
        el.focus();
    }
});

第五步：实现修改功能

<body>

第六步：使用计算属性统计图书种类

`总共有{{totalCount}}种不同种类的书`

computed: {
    totalCount(){
        return this.books.length;
    }
}

第七步：不能添加重复的图书【监听器】

<body>

第八步：图书数据的初始化

mounted(){
    // 模拟ajax请求获取数据
    let result = [
                {id: 1, name: '天龙八部', pubDate: new Date()},
                {id: 2, name: '射雕英雄传', pubDate: new Date()}
                ];

    this.books = result;
},