vue组件&路由
默认全局普通组件
<div id="app">
<addnum></addnum>
<addnum></addnum>
</div>
<script>
Vue.component("addnum",{
template:'<div><input type="text" v-model="num"><button @click="num+=1">点击</button></div>',
data: function(){
// 写在这里的数据只有当前组件可以使用
return {
num:1,
}
}
});
var vm = new Vue({
el:"#app",
// 这里写的数据是全局公用的，整个文件共享
data:{
}
})
</script>
Vue自动化工具（Vue-cli）
一般情况下，单文件组件，我们运行在 自动化工具vue-CLI中，可以帮我们把单文件组件编译成普通的js代码。所以我们需要在电脑先安装搭建vue-CLI工具。
安装node.js，安装后自带npm包管理工具。
npm install -g 包名 # 安装模块 -g表示全局安装，如果没有-g，则表示在当前项目安装
npm list # 查看当前目录下已安装的node包
npm view 包名 engines # 查看包所依赖的Node的版本
npm outdated # 检查包是否已经过时，命令会列出所有已过时的包
npm update 包名 # 更新node包
npm uninstall 包名 # 卸载node包
npm 命令 -h # 查看指定命令的帮助文档
安装Vue-cli
npm install -g vue-cli
如果安装速度过慢，一直超时，可以考虑切换npm镜像源：http://npm.taobao.org/
生成项目目录
// 生成一个基于 webpack 模板的新项目
vue init webpack 项目目录名
例如：
vue init webpack myproject
// 启动开发服务器 ctrl+c 停止服务
cd myproject
npm run dev # 运行这个命令就可以启动node提供的测试http服务器
项目目录结构
src 主开发目录，要开发的单文件组件全部在这个目录下的components目录下
static 静态资源目录，所有的css，js，图片等资源文件放在这个文件夹
dist项目打包发布文件夹，最后要上线单文件项目文件都在这个文件夹中[后面打包项目,让项目中的vue组件经过编译变成js 代码以后,dist就出现了]
node_modules目录是node的依赖包目录
config是配置目录，
build是项目打包时依赖的目录
src/router 路由,后面需要我们在使用Router路由的时候,自己声明.
补充
node_modules目录
删了这个目录，本地测试开发的时候就无法启动项目了。
所以，将来我们在公司服务器里面会换一个web服务器来跑这个项目。
在本地的时候，为了方便开发，记得一定要保留这个目录。
如果这个目录被删除了，可以通过 npm install命令找回：`npm install`
vue，需要编译成js普通代码，所以需要build
搭建项目时，曾经有一个选项，询问是否安装vue-router
如果当时，我们选择yes，则vue会自动src下创建一个routes目录，这个目录就是提供给我们保存路由文件的。
在vue中导包时，如果文件后缀是js或者vue结尾的可以不用加后缀。
vue项目执行流程图
整个项目是一个主文件index.html,
index.html中会引入src文件夹中的main.js,
main.js中会导入顶级单文件组件App.vue,
App.vue中会通过组件嵌套或者路由来引用components文件夹中的其他单文件组件。
单文件组件的使用
# src\components内新建vue文件
# 该文件内的template 编写html代码
# 该文件内的script编写vue.js代码
# 该文件内的style编写当前组件的样式代码
普通组件的缺点：
1. html代码是作为js的字符串进行编写，所以组装和开发的时候不易理解，而且没有高亮效果。 2. 普通组件用在小项目中非常合适，但是复杂的大项目中，如果把更多的组件放在html文件中，那么维护成本就会变得非常昂贵。 3. 普通组件只是整合了js和html，但是css代码被剥离出去了。使用的时候的时候不好处理。
一个组件的内容显示在页面上需要3步操作
- 组件嵌套类似的操作
# 导入 import Index from "./components/Index";
# 注册 components:{ Index }
# 调用 <Index></Index>
父组件给子组件传数据
# 子组件标签上使用绑定变量或者自定义属性传数据（动态数据和静态数据）
<Index :pNum="pNum"></Index>
# 子组件内props内字符串的形式接受数据：props: ["pNum"]
# 然后就可以像data内的变量一样使用数据pNum
子组件给父组件传数据
# 子组件内定义一个监听属性, 监听需要传给父组件的那个变量，如：sNum
# 数据变化时触发执行this.$emit("getsNum", this.sNum);
# 父组件需要在子组件标签内自定义一个事件属性getsNum，对应的事件函数用于接收数据sNum
<Index @getsNum="getsNum"></Index>
methods:{
getsNum(param1){ // param1形参就是接收的数据sNum
this.sNum = params;
},
},
在组件中使用axios获取数据
- 本质上，使用的还是原来的axios，所以也会受到同源策略的影响。
- 如果node_modules中没有需要使用的包，需要提前下载安装
npm install axios
# 方式1：全局导入axios
# 在main.js中导入node_modules中的axios包
import axios from 'axios'
# 在main.js中把axios对象 挂载到vue属性中多为一个子对象
Vue.prototype.$axios = axios;
# 在子组件内使用
this.$axios.get().then().catch()
# 方式2：局部组件内导入axios
# 导入
import axios from 'axios'
# 使用
axios.get().then().catch()
安装路由vue-router
# 下载安装路由组件
npm i vue-router -S
# npm install vue-router --save
配置路由
初始化路由对象
# 在src目录下创建router路由目录，
# 在router目录下创建index.js路由文件
# 在index.js路由文件中，编写初始化路由对象的代码
// 1. 引入vue和vue-router组件核心对象，
// 2. 在Vue中通过use注册vue-router组件
// 3. 暴露vue-router对象，并在vue-router里面编写路由，提供给main.js调用
# index.js
import Vue from "vue";
import Router from "vue-router";
Vue.use(Router);
export default new Router({
mode: "history", // 设置路由模式为‘history’，去掉默认的#
routes:[], // 路由列表
})
# 路由显示模式mode，默认hash，地址栏上面默认带#，history不会带#号
http://localhost:8080/#/home
http://localhost:8080/home
注册路由信息
# 打开main.js文件，导入并把router路由规则对象注册到vue中
import router from './router/index'; // 导入
new Vue({
el: '#app',
router, // 注册
components: { App },
template: '<App/>'
});
在视图中显示路由对应的内容
# 在App.vue组件中，添加显示路由对应的内容。代码：
<template>
<div id="app">
<!-- 标签名必须是这个rouer-view -->
<router-view></router-view>
</div>
</template>
注意：如果在vue创建项目的时候，设置安装vue-router，则项目会自动帮我们生成上面的router目录和index.js里面的代码，以及自动到main.js里面注册路由对象。
路由对象提供的操作
# 在我们安装注册了vue-router组件以后，
# vue-router在vue项目中会帮我们在全局范围内所有组件里面创建2个对象给我们使用
# this.$router 可用于在js代码中进行页面跳转。
# this.$route 可用于获取地址栏上面的url参数。
页面跳转
两种页面跳转方式：<router-link>、 this.$router.push()
router-link标签跳转
router-link标签，本质上就是a标签；
只是由vue-router进行加工处理可以显示局部页面刷新，不会重新加载内容，进行ajax跳转
# 在Home.vue组件中，使用router-link跳转到User.vue组件中。
# 导入组件
# 填写路由列表
# router/index.js
import Vue from "vue";
import Router from "vue-router"
Vue.use(Router);
// 1.导入组件
import Home from "../components/Home";
import User from "../components/User";
export default new Router({
mode: "history",
routes: [
// 2. 填写路由列表
{
name: 'Home', // 路由名称[对应组件的name值，将来用于跳转页面]",
path : '/home', // path: "访问url路径",
component: Home, // component: 组件名
},
{
name: 'User',
path: '/user',
component: User
},
],
})
Home.vue页面设置跳转标签
# 通过<router-link>标签实现页面跳转，
# 关键属性to相当于a标签的href。
# ajax, 页面不刷新
<template>
<div>
<h2>我是Home页面</h2>
<a href="/user">点我a标签跳到User</a><br>
<router-link to="/user">点我ajax不刷新跳转到User</router-link><br>
<router-link :to="url">点我ajax不刷新跳转到User</router-link><br>
<router-link :to="{name: 'User'}">点我ajax不刷新跳转到User</router-link><br>
<router-link :to="{path: 'user'}">点我ajax不刷新跳转到User</router-link>
</div>
</template>
data (){
return {
url : '/user',
}
},
this.$router.push()跳转
Home.vue页面设置跳转标签（router/index.js不需要再设置）
<template>
<div>
<h2>我是Home页面</h2>
<a href="/user">点我a标签跳到User</a><br>
<hr>
<button @click="jump">点我this.router.push跳转到User,页面不刷新</button>
</div>
</template>
<script>
export default {
name: "Home",
methods: {
jump(){
this.$router.push("/user");
},
},
}
</script>
# 除此之外，还有其他几个页面跳转方法，大同小异
this.$router.back(); // 返回上一页，本质上就是 location.back()
this.$router.go(-1); // 返回上一页，本质上就是 location.go()
this.$router.forward(); // 跳转到下一页，本质上就是 location.forward()
this.$router.push("/user"); // 跳转到站内的制定地址页面中，本质上就是 location.href
# 注意,this.$router.push() 不能跳转到其他网站。
# 如果真的要跳转外站，则使用location.href="站外地址，记得加上http://协议"
传递参数
vue-router提供了this.$route，可以让我们接收来自其他页面的附带参数。参数有2种：查询字符串(query string)、路由参数(router params)
# 查询字符串，就是地址栏上面?号后面的参数，
例如：http://localhost:8008/user?name=xiaoming&pwd=123，这里name=xiaoming&pwd=123就是查询字符串参数。
# 路由参数，就是地址栏上面路由路径的一部分，
例如：`http://localhost:8080/user/300/xiaoming`，此时，300属于路由路径的一部分，这个300就是路由参数.，当然，xiaoming,或者user也可以理解是路由参数，就是看我们的页面中是否需要接收而已。，
获取查询字符串
必须先有一个页面跳转发送参数。例如，在Home组件中跳转到User组件中，需要传递name和pwd查询字符串。
# Home.vue
<template>
<div>
<h2>我是Home页面</h2>
<router-link to="/user?name=jack&pwd=123">点我发送查询字符串</router-link>
</div>
</template>
# url: http://localhost:8080/user?name=jack&pwd=123
# 此处是静态数据的传递，还可以使用模版字符串语法传递动态数据，如：
<router-link :to="`/user?name=${name}&pwd=${pwd}`">点我发送查询字符串</router>
User.vue组件内接收参数
# User.vue
<script>
export default {
name: "User",
created(){
console.log(this.$route.query);
console.log(this.$route.query.name);
console.log(this.$route.query.pwd)
},
}
</script>
# this.$route.query是一个字典对象：{name: "jack", pwd: "123"}
获取路由参数
首先设置一个route/index.js中路由信息里面，哪一段路由属于路由参数。
export default new Router({
mode: "history",
routes: [
{
name: 'Home',
path : '/home',
component: Home,
},
{
name: 'User',
path: "/user/:name/:id", // 声明当前地址的2个路由参数名name,id
component: User
},
],
})
# url: http://localhost:8080/user/jack/101
# 此时在直接访问'/user'则访问不到user页面
Home.vue页面
<template>
<div>
<h2>我是Home页面</h2>
<router-link to="/user/jack/101">点我发送路由参数</router-link>
</div>
</template>
User.vue页面
<script>
export default {
name: "User",
created(){
console.log(this.$route.params);
console.log(this.$route.params.name);
console.log(this.$route.params.id);
},
}
</script>
# this.$route.params是一个字典对象：{name: "jack", id: "101"}
ElementUI
Vue开发前端项目中，比较常用的就是ElementUI了。
ElementUI是饿了么团队开发的一个UI组件框架，这个框架提前帮我们提供了很多已经写好的通用模块，我们可以在Vue项目中引入来使用，这个框架的使用类似于我们前面学习的bootstrap框架，也就是说，我们完全可以把官方文档中的组件代码拿来就用，有定制性的内容，可以直接通过样式进行覆盖修改就可以了。
中文官网：http://element-cn.eleme.io/#/zh-CN
文档快速入门：http://element-cn.eleme.io/#/zh-CN/component/quickstart
快速安装elementui
# 项目根目录
npm i element-ui -S
配置ElementUI到项目中
# 在main.js中导入ElementUI，并调用
// 导入
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
// 调用插件
Vue.use(ElementUI);
成功引入了ElementUI以后，接下来我们就可以开始进入前端页面开发
