目录
回顾
# 1 nodejs 后端语言 --->>> js语法 --->>> node，npm命令
-npm命令下载模块慢
淘宝的cnpm，以后使用npm的地方都可以使用cnpm
# 2 安装vue-cli创建项目
-vue项目的运行依赖于node环境 --->>> 后期上线，服务器上装node?
-创建vue项目，把vue的项目编译成纯html,css,js
cnpm install -g @vue/cli
释放出来一个可执行文件vue，已经在环境变量了
vue create 项目名 # 创建项目 --->>> babel，vue-router,vuex,vue2
vue ui # node 启动一个服务，在浏览器中可以图形化界面创建
# 项目目录结构
node_models # 项目第三方依赖 项目路径下：cnpm install
public # index.html 图标
src # 代码存放路径
router
store
方页面组件和小组件
APP.vue
main.js
package.json
# 5 vue开发流程
以后只需要写组件 xx.vue，把组件导入使用即可
组件有三部分
-<template>html内容，插值，方法，事件，指令</template>
-<script> js 代码 export default {之前学过的配置项}</script>
-<style scoped> </style>
# 6 导入导出语法 es6
写了一些包，想在其他js,xx.vue文件中使用
包下新建xx.js，里面写js代码，只能在内部用，一定要导出外部才能用
默认导出
export default {}
默认导入
import 别名 from '路径'
别名.xx
命名导出 导出多个
export const name='lqz'
export const age=19
命名导入
import {name,age} from '路径'
包内如果有index.js,导入包的时候，不用写这个文件
# 7 登录小案例
后端 --->>> 解决跨域 --->>> 一步一步操作 --->>> 注释掉csrf --->>> request.post 取不到
前端：
使用axios,安装
导入用即可
vue-cli安装依赖
# 安装依赖(要到文件位置执行该指令)
cnpm install
# 做成纯净的vue项目
-在router 的index.js 中删除about的路由
-删除所有小组件和about页面组件
-App.vue 只留
<template>
<div id="app">
<router-view/>
</div>
</template>
如图创建文件时是红色的
可以来项目路径下，将git文件删除。之后就不会再有颜色了
props属性三种方式总结
# 自定义属性，在子组件中接收传入的数据
# 方式一：使用数组
props:['name']
#方式二：使用对象
props: {name: Number}
# 方式三：使用对象，默认值和必填
props: {
name: {
type: String, //类型
required: true, //必要性
default: '老王' //默认值
}
}
父传子：父组件传给子组件，在子组件标签上面自定义属性，再将父组件的数据赋给自定义的属性名，在子组件配置项props里注册其自定义的属性名，这样在子组件用这个注册的属性名就是父组件传来的数据了。
用法：
父组件中将name传给子组件中
子组件中：用法一和用法二
如下用法二报错：
用法三：
子组件中：可以指定接收类型或者不传值，使用设定的默认值
父组件中：
混入mixin
可以把多个组件公用的配置提取成一个混入对象
使用步骤：
1.定义混入对象，新建mixin包，包下新建index.js文件
2.在index.js中写代码(组件中会用到的data, methods。。。等的配置项)，命名导出
3.全局使用(所有组件都可以说使用)，在main.js中。命名导入
4.局部使用(只在当前最组件中使用)
效果：
插件
功能：用于增强Vue
本质：包含install方法的一个的对象，install的第一个是Vue,第二个的参数是插件使用者传递的数据
使用步骤：
1.新建包plugins,新建index.js
import Vue from "vue";
import axios from "axios";
export default {
install(vue) {
console.log('执行了插件', vue)
# 可以做的事
# 1 了解，自定义指令(不了解没关系)
# 2 定义全局变量，以后在任何组件中都可以使用到,借助于Vue.prototype往里放 ,以后所有组件只要this.$ajax 就是axios对象
# 3 使用全局混入
# 4 自定义全局组件
}
}
代码：
import Vue from "vue";
import axios from "axios";
export default {
install(vue,name) { // name是指传的其他参数可有可无
console.log(name)
console.log('执行了插件', vue)
// 可以做的事
// 1 了解，自定义指令(不了解没关系)
Vue.directive("fbind", {
//指令与元素成功绑定时（一上来）
bind(element, binding) {
element.value = binding.value;
},
//指令所在元素被插入页面时
inserted(element, binding) {
element.focus();
},
//指令所在的模板被重新解析时
update(element, binding) {
element.value = binding.value;
},
})
// 2 定义全局变量，以后在任何组件中都可以使用到,借助于Vue.prototype往里放 ,以后所有组件只要如：this.$ajax 就是axios对象
Vue.prototype.$name = '彭于晏'
# 联想python中往类里面添加属性，这样类、对象都可以使用了，而Vue里添加得通过prototype。使用$符来避免污染
# prototype：vue的原型，往vue的原型里放东西，而不是直接往它的类里放东西
Vue.prototype.$add = (a, b) => {
return a + b
}
Vue.prototype.$ajax=axios
// 3 使用全局混入
Vue.mixin({
data() {
return {
name: '彭于晏',
age: 19,
};
},
});
// 4 自定义全局组件
// Vue.component('child',{
//
// })
}
}
2.在main.js中配置
# 使用自定义插件
import plugin from '@/plugins'
Vue,use(plugin)
elementui
# 在vue上，css样式，用的最多的是elementUI。
但是还有其他的
elementUI 做网页端 样式用的多 vue2de 由饿了么团队开发的
elementUI-plus 第三方团队继续基于vue写的
vant 做app的样式
iview pc端用
www.iviewui.com
elementui的使用
1.安装
cnpm i element-ui -s
2.配置完整引入，在main.js 中写入以下内容
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI)
# 这样以后在咱们组件中直接使用elementui提供的全局组件即可
3.在组件中使用
去官网看到好的，赋值粘贴到你的项目中
vuex
在vue中实现集中式状态(数据)管理的一个Vue插件，对vue应用中多个组件的共享状态进行集中式的管理(读 / 写)，也是一种组件间通信的方式，且适用于任意组件间通信
使用步骤
1.安装，新建store/index.js
2.在index.js中写
export default new Vuex.Store({
state: {
# 放数据
},
mutations: {
# 放方法，正常是让actions中来调用
# 组件也可以直接调用
},
actions: {
# 放方法，正常组件调用
}
})
3.在组件中
显示state的变量
html中：
{{$store.state.变量}}
js中：
this.$store.state.变量修改state中的值
-推荐按正常步骤---》this.$store.dispatch('actions中的方法',参数)---》actions中的方法调用 context.commit('mutations',参数)---》在mutations中直接修改state的值
-可以跨过任何一步
this.$store.commit()
this.$store.state.变量名
vue Router
第三方插件，用来实现SPA 的vue 插件
单页面应用 --->>> 实现在一个index.html 中有页面跳转效果的插件
路由控制
-<router-link> 跳转用
-<router-view/> 替换页面组件用
基本使用
1.创建vue项目时加入了，直接用即可
如果之前那没装：先下载，在项目中创建router包。写个index.js，代码copy过来，main.js写一下
2.配置路由的跳转(跳转页面组件)，只需要在routers组件中写对象即可
const routes = [
{
path: '/',
name: 'index',
component: Index
},
{
path: '/home',
name: 'home',
component: Home
}
]
3.一定要写个视图组件 Home
点击跳转路由两种方式
js控制
this.$router.push('路径')
标签控制
<router-link to="/home">
<button>点我跳转到home页面</button>
</router-link>
标签控制：
路由跳转，携带数据的两种方式
-1 /course/?pk=1 带在路径中使用 ? 携带
-2 /course/1/ 路径中分割的
-1 第一种方式：/course/?pk=1
this.$route.query.pk
-2 第二种方式：/course/1/
- router/index中路径得改
{
path: '/login/:id',
name: 'login',
component: Login
},
-this.$route.params.id
能够跳转页面：
如何在login页面中拿取pk值呢？可以写在created或mouthed里面
结果：
区分this.$route this.$router
-this.$router # new VueRouter对象，实例，可以实现路由的跳转
-this.$route # 是当前路由对象，内部有传入的参数
this.$router的对象
展示：一个当前路径对象 一个VueRouter对象
第二种方式：
回到router包下的index.js中加上配置
是在params里面了
获取id:
两种跳转方式，使用对象方式
-this.$router.push({
name: 'login',
// query: {
// name: 'lqz',
// age: 19
// },
params: {
id: 88
}
}) # 这里可以写个对象
-标签形式跳转，传对象形式
<router-link :to="{name: 'login', query: {name: 'lqz'}, params: {id: 999}}">
<button>点我跳转到home页面</button>
</router-link>
路由守卫
全局守卫
-前置路由守卫：在进路由前，执行代码
-后置路由守卫：路由跳转走，执行代码
如何用：router/index.js 加入
// 全局前置路由守卫--->任意路由跳转都会触发它的执行
router.beforeEach((to, from, next) => {
// to 是去哪，哪个路由对象
// from 是来自哪，是哪个路由对象 比如从 /--->/login
// next 是函数，如果加括号执行，就会真正的过去
console.log('前置路由守卫', to, from, next)
// next() // 真正跳转到 要去的路径
if (to.name == 'login') {
console.log('走了')
next()
} else {
var res = localStorage.getItem('userinfo')
if (res) {
next()
} else {
alert('您没有登录')
// 跳转到login--->没有解决---》你们搜一下如何解决
// console.log(this)
// router.push('/login')
}
}
})
localStorage系列
都是在浏览器存储数据的 --->>> 存数据有什么用？
-登录成功 token存在本地
-不登录加入购物车功能，迪卡侬存在了
localStorage中 组件间通信 ---->>> 跨组件
localStorage
-永久存储，除非清空缓存，手动删除，代码删除
-localStorage.setItem('userinfo', JSON.stringify(this.userInfo))
-localStorage.getItem('userinfo')
-localStorage.clear() // 清空全部
-localStorage.removeItem('userinfo')
浏览器中localStorage：
打印格式：
结果：
sessionStorage
-关闭浏览器，自动清理
-sessionStorage.setItem('userinfo', JSON.stringify(this.userInfo))
-sessionStorage.getItem('userinfo')
-sessionStorage.clear() // 清空全部
-sessionStorage.removeItem('userinfo')
cookie
-有过期时间，到过期时间自动清理
-借助于第三方 vue-cookies
-cookies.set('userinfo', JSON.stringify(this.userInfo))
-cookies.get('userinfo')
-cookies.delete('userinfo')