文章目录
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>
说明 :
- 在这里使用了 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/
,效果如下
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