一、vue-cli3.x安装
命令：npm install -g @vue/cli
二、安装完以后的测试
vue --version
三、创建vue项目
警告：如果你在 Windows 上通过 minTTY 使用 Git Bash，交互提示符并不工作。你必须通过 winpty vue.cmd create hello-world 启动这个命令。
.git（隐藏文件） ===》git init
node_modules ===》项目所有依赖的包文件
public ===》本地服务的文件夹
|index.html ==>主页
src ===》工作目录
|assets ===》放入资源（图片,css）
|components ===》放入组件的
|App.vue ===》根组件
|main.js ===》项目的全局配置
.gitignore ===》不需要上传到仓库中的文件的配置
babel.config.js ===》有关bable的配置
package.json ===》项目基本配置说明
README.md ===》说明文件
先打开index.html ===>main.js ===>app.vue
四 组件：
3个部分：
template ===》放入html代码
script ===》放入js代码
style ===》放入css样式
.vue文件就是组件
<template>
必须有一个父元素
</template>
五、数据
}
}
}
</script>
六、模板语法
{{ 数据 }}
七、计算属性
computed:{
}
八、vue指令
1》什么是指令：在节点上带有v-xxx的内容
2》v-bind
v-bind:value、v-bind:img
简写
:value
3》v-on
v-on:click、v-on:mouseover
简写：
@click
一、v-text 、 v-html
二、虚拟dom
三、数据双向绑定:v-model
双向绑定的原理：发布者--》订阅者
四、v-once：也可以插入值，但是不更新数据
一、条件渲染 : v-if、v-else
二、列表渲染 : v-for
v-for='item in arr'
v-for='(item,index) in arr'
三、结合使用
组件
1》什么是组件
1》扩展了html标签的
2》以.vue结尾的文件，都可以叫组件
2》组件的使用
场景：把一个完整的项目，拆分成不同的功能模块
使用：
src
|components ==>放入组件的
***注意：组件首字母大写
1》import xxx from 'xxx'
2》 components:{
Swiper
}
3》在template中使用Swiper
***组件的通信（传值）
1》父组件 传 子组件
父组件：
<子组件 :变量=数据></子组件>
子组件：
props:['变量']
2》子组件 传 父组件
3》兄弟组件之间的传值
***组件的通信（传值）
1》父组件 传 子组件
父组件：
<子组件 :变量=数据></子组件>
子组件：
props:['变量']
2》子组件 传 父组件（自定义事件）
子组件：
this.$emit("自定义事件名称",'值')
父组件：
<Footer @changeStr='changeBtn'></Footer>
methods:{
changeBtn(s){
console.log(s)
}
}
3》兄弟组件之间的传值
1》弄一个公共的.js文件（实例化vue）
兄弟A:
import bus from './bus'
bus.$emit("changeaStr",this.aStr)
兄弟B：
import bus from './bus'
bus.$on("changeaStr",function(data){
console.log(data)
})
***组件的传值，不能跳跃
一、什么是路由
单页面应用（spa）
二、路由安装
(*) router
一、template
切换的内容: <router-view></router-view>
跳转到哪了: <router-link to='/home'></router-link>
二、创建跳转到的组件的操作
三、router.js
{
path:"路径"
component:组件
}
router-link配置
<router-link></router-link>
一》to:
1》to='/home'
2》:to='"/home"'
3》:to='{path:"/home"}'
4》:to='{
path:"/home",
query:{userId:123}
}'
5》:to="{
name: 'user',
params: { userId: 123 }
}"
***补充，如何通过js方式进行跳转
# router.push
# router.replace
# router.go
# router.back
# router.forward
二》tag：默认为a标记，可以修改
tag='li'
tag='button'
三、router-link-active：默认触发的class类
一、router-view
keep-alive:
1》是什么？
vue内置的组件，能在组件切换过程中将状态保存在内存中，防止dom重复渲染
2》使用场景
把页面保存在内存中，记住输入的内容等操作
3》使用
<keep-alive>
<router-view></router-view>
</keep-alive>
需求：有的页面需要保存，有的不需要
include : 包含哪个（name）
exclude ：不包含哪个？(name)
一、说明
{
path: '/', //路径
name: 'home', //名称:基本上做标识或者判断
component: Home //对应访问的组件
}
二、懒加载
{
path: '/about',
name: 'about',
component: () => import('./views/About.vue')
}
三、路由重定向
{
path: '*',
redirect: Home
}
四、路由嵌套
{
path: '/about',
name: 'about',
component: () => import('./views/About.vue'),
children:[
{
path:"/xxx:id",
component:Home
},
{
path:"/xxx",
component:Home
}
]
}
1》this.$router
2》this.$route 1》 { path: '/about/:id', name: 'about', component: () => import('./views/About.vue') } 2》 About
一、axios
1》下载：npm install axios --save
2》引入axios
import axios from 'axios'
Vue.prototype.axios = axios
3》使用
this.axios.get("路径").then()
一、生命周期（钩子函数）
1》创建
2》组件渲染
3》修改数据
4》销毁
二、生命周期在什么地方使用？
比如：在一刷新（进入）页面的时候要请求接口
一、vue中使用插件
github.com找插件===》直接搜索
操作：
1》安装
npm install xxx --save
2》引入
3》使用
style
1》style模块化
<style scoped>
2》样式穿透
父元素 >>> 子元素
一、stylus的文件是.styl
二、style中的样式引入
@import '~@/assets/var.styl'
三、stylus语法
$bg=orange
一、vuex是什么？==>状态管理
state：{} 就是放入数据的【类似于组件中的data】
getters:{} 就是一个计算属性【类似于组建中的computed】,接收state作为第一个参数
mutations:{} 就是一个存放方法的 类似于组件中的 methods：可以直接改变state中的状态
actions:{} 就是一个存放方法的 但通过commit是用来提交mutation的，不能直接改变state中的状态
应用场景：购物车的 单选，全选 ，当点击选项的时候，都打钩，反选都不打钩
modules:{} 使用场景：当state中的数据 特别多不方便管理的时候 使用modules
用户，订单 地址 购物 分别有一套 state getters mutations actions数据
mutions 和 action 区别：
1. mutions 是同步的，会有一个问题（假如修改mutions里有个方法修改 state数据，这个方法加了一个定时器延迟1秒，页面渲染的数据和实际的值就不相同，因为是同步的，就有这样一个问题）
action 可以包含任何异步操作：这样可以解决mutions里的方法加了定时器后：视图和数据不同步的问题，更加容易调试
2 .mutions 可以直接改变state中的状态，action不可以，是通过commit提交mutions，在mutions中改变 state状态
this.store.commit()方法的区别总的来说他们只是存取方式的不同,两个方法都是传值给vuex的mutation改变state
this.$store.dispatch() ：含有异步操作，例如向后台提交数据，
写法：
this.$store.dispatch(‘action方法名’,值)
this.$store.commit()：同步操作，
写法：
this.$store.commit(‘mutations方法名’,值)
commit: 同步操作
提交mutions： this.$store.commit('changeValue',name)
取值 this.$store.state.changeValue
dispatch: 异步操作
存储 this.$store.dispatch('getlists',name)
取值 this.$store.getters.getlists
modules:{} 使用场景：当state中的数据 特别多不方便管理的时候 使用modules
用户，订单 地址 购物 分别有一套 state getters mutations actions数据，
其中 state mutations 使用方法分别如下（注意路径的正确使用）
二、vuex使用
state ===>放入的数据
使用数据》
1》{{ this.$store.state.cityName }}
2》import {mapState} from 'vuex'
computed:mapState(["cityName"])
3》computed:{
...mapState(['cityName'])
}
修改state数据
1》store.js
mutations: {
changeStr(state){
state.str=456;
}
}
2》组件
import {mapState,mapMutations } from 'vuex'
<button @click='btn'></button>
methods:{
btn(){
this.changeStr()
},
...mapMutations(['changeStr'])
}
