Vue - part2-CSDN博客

本文链接：https://blog.csdn.net/weixin_48665759/article/details/116738925

文章目录

1. Axios

Axios 是一个开源的可以用在浏览器端和 NodeJS 的异步通信框架，她的主要作用就是实现 AJAX 异步通信，其功能特点如下：

从浏览器中创建 XMLHttpRequests 从 node.js 创建 http 请求
支持 Promise API [ JS中链式编程 ]
拦截请求和响应
转换请求数据和响应数据
取消请求
自动转换 JSON 数据
客户端支持防御 XSRF（跨站请求伪造）

1.1使用Axios的原因

由于 Vue.js 是一个视图层框架并且作者（尤雨溪）严格准守 SoC （关注度分离原则），所以Vue.js 并不包含 AJAX 的通信功能，为了解决通信问题，作者单独开发了一个名为 vue- resource 的插件，不过在进入 2.0 版本以后停止了对该插件的维护并推荐了 Axios 框架。
少用jQuery，因为它操作Dom太频繁。

1.2 引入方式

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

1.3 Axios应用程序

创建一个名为 data.json 的文件并填入上面的内容，放在项目的根目录下。

{
  "name": "邹小胖学习之旅",
  "url" : "https://blog.csdn.net/weixin_48665759",
  "address": {
    "street": "溪口",
    "city": "宁波",
    "country": "中国"
  }
}

测试代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>component</title>
    <!--v-cloak 解决闪烁问题-->
    <style>
      [v-cloak] {
        display: none;
      }
    </style>
    
  </head>

  <body>
    <div id="vue" v-cloak>
      <h3>获取data.json文件的数据</h3>
      <div>名称：{{info.name}}</div> 
      <div>地址：{{info.address.country}}-{{info.address.city}}- {{info.address.street}}</div> 
      <div>链接：
        <a v-bind:href="info.url" target="_blank">{{info.url}}</a> 
      </div>
    </div>
    
    <!--1,导入vue.js--> 
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
    <!--2,导入axios.js-->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
      const vue = new Vue({
        el: '#vue',
        data() {
          return { //需要赋值的属性写上，不能写错
            info: {
              name: null,
              address: {
                country: null,
                city: null,
                street: null
              },
              url: null
            }
          }
        },
        // 钩子函数
        mounted(){  
          //获取json文件，将里面的内容传给data函数中的info
          axios
                .get('data.json')
                .then(response => (this.info = response.data));
        }
      })
    </script>
  </body>
</html>

axios

说明 :

在这里使用了 v-bind 将 a:href 的属性值与 Vue 实例中的数据进行绑定
使用 axios 框架的 get 方法请求 AJAX 并自动将数据封装进了 Vue 实例的数据对象中
我们在data中的数据结构必须要和 Ajax 响应回来的数据格式匹配！

2. 路由

Vue.js 路由允许我们通过不同的 URL 访问不同的内容。通过 Vue.js 可以实现多视图的单页Web应用（single page web application，SPA）。

2.1 安装路由

npm 下载资源

npm install vue 
npm install vue-router

安装时遇到的错误（安装成功可忽略）
在cmd 中输入npm init，具体输入如下所示：

在用户文件夹目录中找到package.json文件，在最后添加"private": true
创建一个目录，将资源全部复制出来

2.2 初步使用路由

编写页面内容

<div id="app">
  <h3>Hello App!</h3>
  <p>
    <!-- <router-link> 会默认被渲染成一个 <a>标签 -->
    <!-- 通过传入 to 属性 指定链接-->
    <router-link to="/">首页</router-link>
    <router-link to="/student">学员管理</router-link>
    <router-link to="/teacher">讲师管理</router-link>
  </p>
  <!-- 路由出口 -->
  <!-- 路由匹配到的组件渲染在这里 -->
  <router-view></router-view>
</div>

导入资源

<!-- 资源导入: 一定要注意导入顺序的问题！！！ -->
<script src="./vue.min.js"></script>
<script src="./vue-router.min.js"></script>

编写js

<script>
  // 1. 定义（路由）组件。 
  // 复杂的组件也可以从独立的vue文件中引入
  const Welcome = { template: '<div>欢迎,进入首页!</div>'};
  const Student = { template: '<div>Stuent List</div>'};
  const Teacher = { template: '<div>Teacher list</div>'};

  // 2. 定义路由 
  // 每个路由应该映射一个组件。
  const routes = [
    { path: '/', redirect: '/welcome' },    //设置默认指向的路径
    { path: '/welcome', component: Welcome },
    { path: '/student', component: Student },
    { path: '/Teacher', component: Teacher },
  ];

  // 3. 创建 router 实例，然后传 `routes` 配置
  const router = new VueRouter({
    routes: routes
    // 可缩写成： routes: routes
  });

  // 4. 创建和挂载根实例。 
  // 从而让整个应用都有路由功能
  const vue = new Vue({
    el: '#app',
    router
  });
</script>

在这里插入图片描述

3. Vue-Cli 脚手架

vue-cli 官方提供的一个脚手架,用于快速生成一个 vue 的项目模板，利于我们更快的开发。

主要功能：统一的目录结构、本地调试、热部署、单元测试、集成打包上线

环境配置

cnpm install vue-cli -g 
# 测试是否安装成功 
# 查看可以基于哪些模板创建 vue 应用程序，通常我们选择 webpack
vue list

3.1 创建应用程序

在 E 盘下创建文件夹 vueSpace
创建一个基于 webpack 模板的 vue 应用程序

# 这里的 myvue 是项目名称，可以根据自己的需求起名 
vue init webpack myvue 
# 一路都选择no即可;

说明：

Project name：项目名称，默认回车即可
Project description：项目描述，默认回车即可
Author：项目作者，默认回车即可
Install vue-router：是否安装 vue-router，选择 n 不安装（后期需要再手动添加）
Use ESLint to lint your code：是否使用 ESLint 做代码检查，选择 n 不安装（后期需要再手动添加）
Set up unit tests：单元测试相关，选择 n 不安装（后期需要再手动添加）
Setup e2e tests with Nightwatch：单元测试相关，选择 n 不安装（后期需要再手动添加）
Should we run npm install for you after the project has been created：创建完成后直接初始化，选择 n，我们手动执行;运行结果!

3.2 初始化并运行

cd myvue 
npm install 
npm run dev

执行完成后,目录多了很多依赖
初始化安装并运行成功，提示页面如下

在浏览器输入：http://localhost:8080/,效果如下
8080

3.3 目录结构分析

Vue-cli 目录结构

main.js

项目的入口文件

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  components: { App },
  template: '<App/>'
})

import...from...的from命令后面可以跟很多路径格式，若只给出vue这样的包名，则会自动到node_modules中加载；若给出相对路径及文件前缀，则到指定位置寻找。
上述import...from...等同于

import Vue from "../node_modules/vue/dist/vue.js";
import App from './App.vue';

Vue.config.productionTip = false ：关闭浏览器控制台关于环境的相关提示。
new Vue({...}) ：实例化 Vue。
components: { App } ：引入组件，使用的是 import App from ‘./App’ 定义的 App 组件;

App.Vue

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <HelloWorld/>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

template：HTML 代码模板，会替换 < App /> 中的内容
import HelloWorld from './components/HelloWorld'：引入HelloWorld 组件用于替换 template中的 < HelloWorld/>
export default{...}：导出 NodeJS 对象，作用是可以通过 import 关键字导入
– name: 'App'：定义组件的名称
– components: { HelloWorld }：定义子组件
在hello,Vue中,关于 < style scoped> 的说明：CSS 样式仅在当前组件有效，声明了样式的作用域,是当前的界面私有的!

4. 路由深入

先查看node_modules中是否存在 vue-router。

vue-router 是一个插件包，所以我们还是需要用 npm/cnpm 来进行安装的。打开命令行工具，进入你的项目目录，输入下面命令。

npm install vue-router --save-dev

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

import Vue from 'vue' 
import VueRouter from 'vue-router' 
// 显示的使用 
Vue.use(VueRouter);

在component 目录下存放编写的组件
定义组件 Content.vue

<template>
  <div>
    <h1>内容页</h1>
  </div>
</template>

<script>
export default {
  name: "Content"
}
</script>

定义组件 Main.vue

<template>
  <div>
    <h1>首页</h1>
  </div>
</template>

<script>
export default {
  name: "Main"
}
</script>

安装路由，在 src 目录下，新建一个文件夹：router，专门存放路由，写入index.js

import Vue from 'vue'
// 导入路由插件
import Router from 'vue-router'
// 导入上面定义的组件
import Content from '../components/Content'
import Main from '../components/Main'
// 安装路由
Vue.use(Router);
// 配置路由
export default new Router({
  routes: [
    {
      // 路由路径
      path: '/content',
      // 路由名称
      name: 'content',
      // 跳转组件
      component: Content
    },
    {
      path: '/main',
      name: 'main',
      component: Main
    }
  ]
});

在main.js中配置路由

import Vue from 'vue'
import App from './App'
import router from './router/router'

// 导入上面创建的路由配置目录
Vue.config.productionTip = false

new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

在App.vue中使用路由

<template>
  <div id="app">
    <router-link to="/main">首页</router-link>
    <router-link to="/content">内容</router-link>
    <router-view></router-view>
  </div>
</template>

启动测试：npn run dev