[toc]
Vue基础
安装
1，先全局安装 Vue 包
npm install @vue/cli -g
2,创建脚手架
vue create 名字 如： vue create demo
3,跳转至 项目根页面 cd vue create 目录名 如： cd create demo
4,启动项目： npm run serve 可以在 package.json 中 查看 运行 webpack 运行的命令
vue是什么？
vue是一个渐进式的框架，逐步集成越来越多的功能。
vue目录介绍
node_modules: 存储第三依赖包的地方。
public/index.html : 浏览器运行的页面
src : 项目打包文件夹
src/main.js : 项目的打包入口文件夹
src/App.vue : 页面组件的根组件
src/components: 一般存放 导航栏，购物车等页面组件的地方
src/assert:存放图片的地方
package.json : 下载包的记录名称，版本的地方。
vueconfig.js : 配置服务器 的文件夹
.gitIgnore : 忽略哪些文件夹 ，里面可直接 写文件夹名称
README.md : 记录项目流程的文件夹
babel.config.js : 处理语法降级 的 文件夹
package-lock.js : 记录下载包的具体地址，和一些时间等信息
启动vue的执行流程？
1，先使用 npm run serve 命令 运行项目
2，先会找到 main.js 打包入口文件夹 看里面引入了 哪些文件
3，在App.vue 项目根组件里面 查找 有引入了哪些文件夹
4，找到main.js 中 挂载 new Vue({render:h=>h(App)}).mount('#app') 把App.vue挂载到 public/index.html文件夹里面 的 #app 标签替换 它 在页面运行 注意： .mount(‘#app’) 与 new Vue({el:'#App'}) 是一样的，挂载替换的意思。
vue的MVVM值的是啥
视图，模型，模型视图 双向绑定 ：即改变数据，对应的视图会发生变化，改变视图，数据会发生变化
App.vue组件文件介绍：
里面分为三块：
一： 写 html 的 模块
在内部只允许有一个根标签文件
二：写js代码的地方：
里面可以写有关于的js代码
对于 里面有一个
export defaults ={
}
里面有一些 vue 专门 配置
比如：
data(){
return {
里面专门用来定义 变量的地方 （定义方式： 以 键值对象的方式定义 如 name:"博哥"）
}
}
methods:{
里面专门用来定义 方法的地方 以键值对的形式定义 可以用 es6语法 直接 名字（）{}
如： getName(){console.log("芳芳芳")}
}
computed:{
计算属性 ： 专门用来 对于 依赖其它变量 来计算得到结果 的地方
（计算属性有两种的地式 一种是 函数方式（不能用于修改值），一种是完整模式：键值形式 的形式 （里面有两个方法： 一个是set(参数){参数代表定义变量的计算后的变化值}），get(){return 里面返回一个你需要计算的值}） （想要修改计算属性的值，只能在set里面 设置，get 返回的是 计算的依赖项的初始值）
}
watch:{
里面放你要监听的任何值
注意：里面有两种形式
一：是监听的是简单的数据类型 如 string ,bolean ,number
要监听的变量名（newValue,oldValue）{ 参数一；表示改变后的新值，参数二：表示 修改前的旧值}
二：深度监听 监听复杂数据类型 如 Array,Object
写要监听的名字 ：{
deep:true, deep表示 ：开启监听复杂数据类型
immediate:true, 表示： 一打开此页面，马上监听这个变量
handler(val){
val表示监听的那个值 一旦 监听的值发生改变 ，此函数就会触发。
注意： 不能在监听的函数里面修改 你所监听的那个值，不然就会陷入递归，一个死循环
}
}
}
computed:{
里面可以写 当页注册引入的组件
import Goods from "@/components/Goods.vue"
如 引入 了 Goods模块 里面 可以放
Goods:Goods (以键值的形式放) 也可以使用 es6写法： Goods
注册之后可以把 注册的组件直接当 标签使用。
}
filters:{ //过滤器是为处理数据 的 ，比如 传入一个 时间格式都是特殊的 ，可以在里面进行格式转换
自定义名（val,val2....）{
return 要处理的执行体 val表示使用过滤器 前面传过来的 值 ，从第二个参数开始 是过滤器所传的参数。
}
}
里面有生命钩子函数：
beforeCreate(){
创建之前触发： 在里面可以拿到数据 但是 没有地方可以存储
}
created(){
创建完成，里面 可以获取数据 ，这个钩子函数时，vue实例对象里面已经注入了 data 与 methods 模块，可以使用，可以使用 data 的返回对象 里面 定义变量 来储存 页面数据。
注意：这里 获取不到 DOM元素 。挂载还未完成。
}
beforeMount(){
挂载之前，这里可以获取 到请求的数据 ，但是 挂载还未完成，不可以操纵DOM元素。
}
mounted(){
页面DOM挂载完成 ，这个钩子函数里面 ，可以操纵DOM元素，也可以请求获取数据。使用最多
}
beforeUpdate(){
更新之前，指如果你在页面有一个点击事件（v-if）一开始设置在另一个标签上为false，点击之后出现修改变量为true，可以使用console.log打印出来，但是每次点击效果都是想反,页面不会马上更新渲染，因为DOM更新是异步的。只有 所有的代码执行完毕之后才会 更新渲染DOM
}
updated(){
DOM更新完成，这里面可以获取到 修改后的DOM渲染。所有的代码都执行完并且有DOM更新才会触发此函数。不然不会触发此函数
}
beforeDestroy(){
销毁之前触发的钩子函数 ，可以在里面 设置 定时器 获取其它全局事件 的销毁 处理
}
destroyed(){
销毁时，触发的钩子函数，里面可以 设置定时器的销毁，全局事件的销毁
}
对于 一个组件，并且使用控制的组件来说 里面可以 多两个 钩子函数 一个是： activated(){里面可以 切换到那个动态组件时，触发这个钩子} deactivatied(){当动态组件切换不是次组件时触发的钩子} 注意： 在动态组件里面 只能用这两个钩子，因为 动态组件是一种缓存的形式存在，不会频繁的销毁和创建，所有 除了第一次创建函数可以触发，其它创建和销毁这两个钩子不会再触发
vue 的插值表达式：{{}}
定义：可以把想要的内容插到任意标签内部。
用法： 在 export defaults = {
data(){
return {
定义一个变量：值
}
}
}
在 template 中 标签里面 想要插入的标签中
{{vue定义的变量值}}
{{data方法里面的返回对象中的vue变量}}
vue指令 v-bind
定义：v-bind 用来绑定标签的动态属性，扩展标签的功能
用法 ： v-bind:属性=“vue变量”
如： imgSrc是 data方法的返回对象 中定义的 变量
特殊用法： 可以搭配 过滤器 使用
标签上 可以 v-bind:="{vue变量|过滤器名}"
vue的指令v-on
定义 ：v-on 用来 标签绑定事件的专用 指令
可以简写为： v-on ---> @ 如 <button @click="methods定义的方法（可传值）">
用法一：
v-on:事件=“少量代码”
如 <button @click="num=num++">
用法二：
v-on:事件=“methods中定义的方法”
<button @click="add">
用法三：
v-on:事件=“methods(参数)”
<button @click="add(2)">
vue的修饰符
扩展v-on的功能
vue指令v-on的修饰符
stop
语法： v-on:事件名.stop="fn"
作用：可以阻止事件冒泡
使用： v-on:事件名.stop="fn定义的函数"
例子：
功能 ：父盒子的冒泡事件会被阻止
prevent
语法：v-on:事件名.prevent="fn"
作用：可以阻止默认事件
使用；v-on:click.prevent="fn"
例子：
<a @click='fn' href="vue变量">
注意：使用以后 a标签失去跳转的功能
once
语法；v-on:事件名.once="fn"
作用；可以事件只触发一次
使用：v-on:click.once="fn"
例子：
<a @click.once.prevent="fn" :href="vue变量">
如果 fn 里面 是打印则 第一次 点击跳转 无效 后面还是会跳转
vue的事件对象
分为二种情况
一： 当绑定的方法 不传参时
<a @click="fn" href="www.baidu.com">
在methods 中：
fn(e/event){
参数是自己命名
e.preventDefault() //可以阻止默认事件
}
二：当绑定的方法：传入参数时
<a @click="fn（1，$event）" href="www.baidu.com">
注意：$event事件对象是固定的搭配，不可以修改名字
在methods 中：
fn(val,event){ //第一个是传入的参数，第二个参数对应你传的第二个事件对象$event
参数是自己命名
event.preventDefault() //可以阻止默认事件
}
vue里面的显示和隐藏
v-if 与v-else-if 与else 的使用
定义：可以使标签显示或者隐藏 （使用的是移除元素的方式实现）
语法： 在标签上 直接 使用 v-if="vue变量" vue变量是一个布尔值 true 表示显示 ，false 表示隐藏
例子；
注意事项： v-if 和v-else-if v-else 之间之后显示一个 ，且 中间不能插入其它元素，必须都是相邻的元素
v-show
定义：可以使标签显示和隐藏 （使用的是css中的display:none）
语法 ： 在标签上直接 使用 v-show="vue变量" vue变量是一个布尔值true表示显示，false表示隐藏
例子：
v-for
定义：可以循环遍历数据
语法；
在标签上直接 使用 v-for="值项 in 数据"
在标签上直接 使用 v-for="(值项,index) in 数据" :key="index" 当有id时 :key="值项.id"
可以用于 哪些类型的遍历
遍历数组： 把数组的每一项遍历出来 index第二项参数表示索引下标
遍历对象 ： 把对象每一项遍历出来
遍历数字 ：从一开始 遍历 ，到自身结束
遍历字符串 ：把每一个字符可以遍历出来
v-model
定义：对于表单元素的双向绑定 即 表单上的 value 和 数据里面的 vue变量可以双向绑定
语法：
一： 对于 input 框 获取输入值
v-model="vue变量"
例子：
在data方法的返回对象中 定义 val ,当你输入值时，对应的val值也会变为你输入
的内容
二： 对于 input 框的 单选框 如 男 女 性别来说 需要借住 value
语法：
在两个Input框上绑同一个变量 v-model="vue同一个变量"
例子：
三：针对与复选框
三 （方式一：）
对于表单复选框勾选这种单个标签 绑定的是 字符串
语法： v-model="vue变量" 注意：这里的vue变量是 字符串 绑定的值为 表单框的 checked 属性值 有true和false两种可能
例子
在data方法的返回对象中 str :''
三（方式二：）
对于表单多个复选框，绑定的是 数组
语法：v-model="vue变量" 注意：这里的vue变量是 数组 绑定的是 表单元素 的 value 值
例子：
在data方法的返回对象中 arr:[]
四：对于 多行文本 （文本域）
定义：绑定的是文本域的内容value
语法：v-model="val" val是在data方法中的定义的变量
例子
> val变量是data方法返回对象中的变量v-model的修饰符
trim
定义：去除 v-model 中 value的 输入值的前后 空白符
语法； v-model.trim="vue值"
lazy
定义：input框 失去焦点时触发的事件
语法：v-model.lazy= "vue值" 当失去焦点时触发value值更新
number
定义：把用户输入的值字符串转变为数字格式
语法：v-model.number="vue值"
注意：v-model不使用 .number修饰符 的话 用户输入的是 字符串 比如 输入3 为：“3”
keydown 或者keyup 键盘按键事件
定义：表单元素的键盘按键事件
语法；
@keydown.enter="fn" 为 Input框按下 Enter 键时触发的
@keyup.enter="fn" 为 Input框抬起 Enter 键时触发的
@keydown.esc="fn" 为 Input框按下 esc 键时触发的
@keydown.up="fn" 为 Input框抬起 esc 键时触发的
如果想要 绑定其它的按键 ： @keydown.a="fn" 按下a键 可以触发 注意 ： 只有小写没有大写
@keyup.a="fn" 抬起a键 可以触发 注意 ： 只有小写没有大写
vue组件的注册
组件是啥？ 每一个组件是一个vue实例
一：局部注册组件：在App.vue中注册
在src文件夹下 新建一个文件夹 ，里面可以放一个xxx.vue组件
如：
1，在 components文件夹下 创建 aTest文件夹,
2，要使用在App.vue中先引入组件
import aTest from '@/components/aTest.vue'
3,在data同级的地方components:{
自定义组件名：aTest(引入的名字)
如果一致可以 使用es6写法： aTest
}
二：全局注册组件
在main.js 中注册
1，先引入 要注册的组件
import aTest from '@/components/aTest.vue'
2, Vue.component('自定义名'，引入的组件名)
3,在任意.vue文件夹里 把自定义名当成标签使用即可
过滤器
1，局部注册：
在任意组件内data同级别的地方
filters:{
自定义名（val1,val2...）{
return val1 想要如何处理 ，val2是 要传入的值
}
}
过滤器可以使用在插值表达式中 和 v-bind绑定的属性中
在template中
例子：
在data返回对象中：
val:'word'
在methods 中：
reverseValue（v,symbol）{
return v.reverse() + symbol
}
可以多个 过滤器同时使用
语法： v-bind:属性=“vue变量|过滤器1，过滤器二，...”
2，全局注册 ： 过滤器
在main.js 中 可以 使用
Vue.filter('自定义过滤器名'，（val,val2....）=>{return val的处理 })
注意必须要返回值
v-text 和 v-html
定义：对于 向标签内插入内容 （含标签）
语法：在 data方法的返回对象中 可以 定义一个 有标签的变量 ，在标签上 挂上 v-text 或者 v-html
使用v-text 不会解析标签 插入标签 会一起显示到页面上
使用v-html会解析标签 插入到标签 会 解析标签内容然后只显示文本内容到页面
注意：都是 覆盖式插入 ，也就是说插入以后 ，会把原本的内容给覆盖掉
例子:
在 data方法的返回对象中 可以 定义一个变量 tag:"我是span标签"
ref的使用
定义： 对于使用原生的方式获取组件 是有缺陷的，会把组件当成一个div获取，但这样就获取不到组件内的属性和方法了，对此vue专门使用 $refs来获取 组件 的实例对象 ，也可以使用组件的属性和方法，同时可以进行传值等操作
语法 ： 在想要操作的 DOM 或者 组件上 直接 v-ref="自定义名"
在方法或者钩子等要处理的里面可以 使用 this.$refs.自定义名 来获取 DOM 或者 vue组件
例子：
在 App.vue里面 引入组件 aTest组件
页面
在 mounted(){
console.log(this.refs.test) //可以打印出这个DOM元素
}
如果 aTest组件内有一个 方法叫 log
log(){
console.log('我是组件里面aTest""')
}
可以在App.vue组件中使用
this.$refs.test.log() 来调用方法 打印出 ：我是组件里面aTest
this.$refs.test.log(123) //可以使用来传参
this.$refs.变量 这个变量指的是组件内部有data方法的返回对象中定义的变量，在 App.vue可以使用
自定义指令
定义：新增了指令的不足，如果有一些指令不能满足我们的要求，可以使用自定义指令来帮我们解决问题
局部注册：
在data的同级中 注册
directives:{
自定义名字：{
inserted(el,val2,..){
//el表示 使用的这个元素 ，val2或者其它（对象，数组形式）
console.log(el)
}
}
}
使用： 在template 中 标签 可以 使用 v-自定义名 来获取这标签 或者 传参设置这个标签
在
directives:{
colorRed：{
inserted(el,val){
//el表示 使用的这个元素 ，val2或者其它（对象，数组形式）
el.style.color = val //可以把标签设置为传入的颜色
}
}
}
全局注册 自定义指令：
在main.js中
Vue.direcive("自定义指令名"，{
inserted(el,val,...){
//el表示 使用的这个元素 ，val2或者其它（对象，数组形式）
}
})
组件的传参
父传子
1，在父组件上引入 注册组件，使用组件
2，在组件上使用 v-bind:子组件要接收时的名字=“你要传入的变量” 或者 :子组件要接收时的名字=“你要传入的子符串”
3,在子组件内部 data方法的返回对象同级别中：
子组件接收方式一：props:["你要传入的对应的子组件要接收时的名字"，“xxxxx”,....]
子组件接收方式二：限定类型传值
props:{
“定义要接收时的名字”：{
type:String,
max:6，
message:'hah',
trigger:'blur',
required:true,
default:[xxx,xxx]，
validator:function(value){
return 传入的数据进行处理 // （value参数为你传入的值） 为vue内置的校验
}
}
}
限定条件：
type: 表示限定类型 Array:表示传入数组， Object: 表示对象 String :表示为字符串类型 ，Number表示数字类型
String
Number
Boolea
Array
Object
Date
Function
Symbol
required:true 表示 传入的值 为必传
default 为设置默认值
把接收后的值当成 是 在 data方法中返回对象里面的变量 使用即可
单项流数据
父组件把数据传递给子组件后，子组件是不允许修改父组件的内容的，不然会造成 数据的不一致
注意：但是当传入的值是复杂数据类型时， 在子组件修改其属性并不会报错，因为vue的监测机制不会监测到属性的修改。其复杂数据的引用地址也没有修改，不会报错
子传父
定义：把子组件里面的数据放到父组件来使用，需要用到子传父
语法 ：
在子组件里面的某个方法或者钩子内 使用 this.$emit("自定义事件名"，要传入的值)
在父组件里面的子组件使用的标签上可以使用 @子组件内的自定义事件名=“你需要定义处理的事件名”
在父组件里面 methods里面 定义一个 处理的事件名 与子组件标签上一致 里面 的参数 是子组件传入的值
兄弟组件的传参
1，定义一个文件叫 eventBus.js
在内部要 import Vue from 'vue'
export new Vue()
aTest.vue ,bTest.vue
2 分别在 aTest.vue 和bTest.vue组件中引入 eventBus
假定为aTest要传值给bTest 则 在aTest 里面的某个方法内用 event.$emit("自定义方法名"，要传的值)
在接收值bTest文件中 使用 event.$on('自定义名'，（val）=>{处理的执行代码}) //注意 要传的自定义名字要一致
原理：利用一个空的组件事件总线充当一个中间的桥梁 ，利用 Vue对象自己监听自己传的值，来实现兄弟组件的传参
插槽
定义：对于 一些封装来说，可以子组件内部的标签或者内容希望可以在父组件来定义 ，我们可以使用插槽来解决这一类问题
普通插槽
语法：
一般用法：
父组件里子组件的标签里面直接插入标签或者内容
子组件 在需要插入的标签位置放 slot充当占位符，不会渲染出来，要插入的内容会覆盖这个标签
插槽的默认值设置
可以在slot标签内部设置 标签或者文本内容，当父组件这边没有传入值，会默认显示
具名插槽：
定义：需要插入多个标签时，我们需要区别哪个标签需要插入到哪个地方
v-slot：的简写 可以简写为#
语法：
在父组件里子组件的标签里面把要插入标签或者内容使用template包裹起来，在template标签上面使用 v-slot:自定义名字
在子组件的标记的slot 标签上面使用 name="自定义名字"
注意：每个名字一一对应，如果不一致会得不到值
插槽的传参
定义：如果父组件这边需要用到子组件里面值，可以使用 插槽的传参
语法： 在子组件这边 可以 slot标签使用 :自定义名 =“要传的值“ 一般 :row="值" row 为自定义
父组件这边template标签上 可以使用 v-slot="scope" 一般是scope自定义名 为包裹子组件所有传过来的值的对象
具名插槽传值
定义：含有name属性的插槽 传值给父组件这边显示
注意：传的值不可离开插槽使用，报错
如果： 子组件 既有 name="rigth" 又有 ：row="list"\
则父组件可以 template上 可以 v-slot:right="scope"
可以简写为： #:right=""{list}"" 传过来随便解构
设置动态组件
定义：当引入组件后使用 v-if使用组件频繁切换组件可以使用 设置动态组件
语法 ：
在父组件里引入 aTest ,bTest两个组件，在components中注册好，
在放子组件的地方把子组件的标签干掉，使用component标签 代替，
然后在 data方法的返回对象中 定义一个变量 isComponents:'aTest' 设置默认显示aTest
在component标签上 使用 :is=“isComponents” 可以设置两个按钮点击谁把isComponents的值变为想要切换的那个标签即可
注意：动态组件是使用 组件的销毁和创建来实现，影响性能
对于频繁切换动态组件可以采用 缓存组件
定义：对于频繁切换动态组件可以采用 缓存组件，使用 keep-alive组件把你的component包裹
注意：包裹之后钩子函数中创建和销毁只会在进入第一次调用 beforeCreate 和created这个，一次，
之后不会创建和销毁，也就是这两个钩子使用不了了。
可以组件内使用 activated 和 deactivated 这两个钩子函数
注意：这两个钩子函数 是用来判断 缓存组件 是否切换和隐藏的，可以里面进行操作
$nextTick的使用
定义：对于我们在一般函数内不能拿到最新更新的DOM上的数据，我们可以 使用这个方法
在方法内部使用 this.$nextTick(()=>{
//对于 input框 使用 ref属性 和 focus() 想要显示就聚焦
this.refs.自定义名.focus()
})
对于 label 标签内部有图片和 input的checked属性绑定
我们可以在 input上 使用 id ="xxx"
在label上面使用 for= "xxx" 注意要都唯一，并且一致，不然会点击其它图片也会把这个checked选中
对于事件监听 watch
定义：我们可以使用事件监听来监测任何一个变量值的变化
语法：在methods同级别中
watch:{
"对象里面的某个属性"：function(){
deep:true,
hander(val){
操作
}
}
}
注意：不能在监听的地方改变监听的值，不然无限递归
如果要监听的是某个对象的属性 ： obj.age 等这种 可以改为 “”引号包裹，改为 对象写法
