1.安装vue

npm install -g @vue/cli
yarn global add @vue/cli

查看版本
vue --version

2.创建项目

第一步 vue create 项目名 （选择的时候确认取消用空格）
第二步选择Manually select features
第三部选择 babel cssprocessors
第四步选择2.x
第五步选择 less
第6步选择第一个
第7步输入y敲回车
第八步 cd 文件名进入仓库
第九步 yarn serve

3.在vscode安装插件

代码高亮vetur
代码补全 Vue VSCode Snippets

4.单文件组件.vue

每一个.vue文件都称为组件
三部分 组成 html css js

html 代码
//template：html模板 要求有且只有一个子节点
<template>
    <div>
        <header></heaader>
        <footer></footer>
    </div>
</template>


ji代码
<script>
export default{

    js代码
}
</script>


css代码
//css预处理器说明 lang="预处理器"
//该css代码作用域：该css代码 是全部生效还是当前组件 有效 scoped
<style lang="less">

</style>

5.data()函数与mustach语法

vue最大特点数据驱动==数据的双向绑定
定义组件需要数据
data函数
export  default{

    data（）{
    return{
    key：“val”
    }
   }
}

mustach 语法
作用：在HTML 代码中获取data中的数据
语法{{js代码}}

6.vue中的js代码配置项

//组件
components:{

}
//方法 函数的封装 用户事件执行函数
methods:{

}
//数据监听器 和侦听器
watch:{

}
//过滤器
filters:{

}

//组件生命周期 四个生命周期--八个方法 - - 钩子函数（自动触发的函数 hooks）
。。。待更新

7.组件创建

快捷 vbese-lees
1.创建.vue文件
appheader.app
组件名 必须使用大驼峰 约定 避开关键字
组件的位置 src/coomponents/appheader.app 可以创建目录
分类目录名；必须是小驼峰
2.父组件导入子组件
<script>
 import xxx from '子件路径'
</script>
3.父组件使用组件注册子组件
<script>
 import xxx from '子健路径'
 export  default{

    data（）{
    return{
    key：“val”
    }
   }
   //组件注册
   component：{
       子组件名
   }
}
</script>

<template>
<div>
//标签的形式，直接使用子组件
<></>
</div>
<template>

8.指令

指令：vue中用来替代原生js的dom早在快捷命令 所有的指令都是直接写到html
标签中，类似于属性的写法
语法
<标签 v-*="表达式">  </标签>

8.1v-text 和v-html 页面输入

作用
v-text：相当于inntext 不能识别带有html标签的字符串，
将html标签当作静态文本输出。
v-html：相当于innerHTML解析标签
{{}}：更改适合 在页面中展示碎片化的变量的值

8.2 v-show与v-if 显隐切换

作用：
v-show="表达式" ===表达式的值表示为真 dom显示，
否则隐藏。
区别
v-show:通过css样式 display进行显影控制
v-if="表达"  通过dom节点增加和删除 实现显影控制
如果页面中经常在切换显影状态：使用v-show的效率更高
重绘不一定导致重排，重排一定导致重绘

8.3 v-on 与 methods方法 事件的

语法 v-on：事件="函数名(可以传值||不传)"
 export  default{

    data（）{
    return{
    key：“val”
    }
   }
   methods：{
       函数名（）{
       要执行的东西
       }
   }
}
methods 方法相关

8.4 v-bind 属性操作

<标签 v-bind:属性名="表达式"></标签>
简写 <标签 :属性名="表达式"></标签>
<标签 ：type = '表达式' value placehloder name id class
src loop controls muted style alt  :自定义属性名=”表达式“>
注意 ：修改style时，表达式的值必须是一个对象

8.5 v-if v-else v-elise-if 判断

作用：判断是否满足条件v-if满足显示当前的dom
不满足--v-else-if 满足显示v-if的dom
不满足v-else前面的都不满足显示当前的dom

8.6 v-for循环

生成批量dom节点
注意：key不能重复加字符串
div v-for="表达式" :v-bind:key="整个组件的唯一值"
//循环体===重复生成dom节点
div class="box"
item：每个数据 index：下标索引 key   :key='index'
                                    :key="'111'+index"
                                    
div v-for = '(item,index) in 数组/对象'   :key='整个组件的唯一值'
div v-for='item in 数字' :key ='整个组件的唯一值'


双重 for 循环使用
data（）{
rerntn{
    arr：【【1.2】.【3，4】】
}
}

8.7 v-model 绑定form表单元素数据

双向绑定
input select textarea radio chckbox file 
<input type:'' v-model="表达式">

8.8 v-pre v-cloak v-once

将vue muastach语法中的{{}}直接当成静态输出到页面
span v-pre 


 v-cloak 最开始的数据没有 直接将mastach语法显示到页面
 问题：vue2.6以前
 临时增加的：拿到数据咋hi后在全区渲染页面
 v-once 只渲染一次页面

9.vue组件

公共组件src/components
页面组件src/view/页面路径/页面组件.vue
业务组件 src/vivw/页面路径/comp

路由 v-router 配置

从新创建一个页面
加一个router 最后no

app.vue 根组件
main.js 入口文件 主模块

9.1 路由的设置使用

创---配 ----使用(留入口)==测试
创建一个页面组件
进来src删除views里面的全部文件
在删除index里面的第三句 和数组里面的东西 在清空app.vue里面的东西
创建一个页面组件 index.vue
路由配置（导入组件==routes组件 和路由的一一对应关系）
找到父级页面留下入口==占位
测试路由url输入/index

router-view 占位
router-link 相当于a标签语法 router-link to=""


1在views里面创建自己的组件
2然后去index.js里面配置
3在数组里面{path:"/index" //路由 , component:Index}
4然后去App.vue留入口 scrpit后面router-view占位

二级路由 重定向
{
    path:'/'
    //重定向 用redirect（用户访问 当前用户 自动的切换到重定向的目标路由）
    redirect:'/discover'
}

dy 3

1. watch侦听器 监听器

watch:{
//vue 的实例对象 上的数据
监听的数据（newvalue,oldvalue){
    console.log(newValue)
}
}
<input type="text" v-model="name">
data(){
    return{
    name:'',
    }
}
watch:{
age(newVal,oldVal){
    console.log(newVal);
    console.log(oldVal);
}
}

2. computed计算属性

和methods类似，
作用：将数据计算之后输出结果；如果参与计算的数据源没有发生变化只会执行一次，
computed不能有形参
区别：
使用语法：
computed：调用时没有小括号（不需要形参）定义计算属性函数必须有return；
性能：
computed 只要参与计算的数据源 没有发生改变===不会再次重新计算（调用该函数）
<div>{{计算函数名}}</div> 不能有小括号

computed:{
    计算函数名（）{
    //经过一系列的计算
    return 结果；        
    }
}

<p v-for='item in 100' :key='item'>
    {{getdata}}
    </p>
    data(){
    return{
        num:50,
    }
    },
    computed:{
        getdata(){
            return this.num%2
        }
    }

3.filters 过滤器

vue3.x 已经取消了
将数据的数据进行处理并返回一个新数据
语法 methods中的方法一样 ，
filters中的函数 必须要有返回值return
filters中 获取不到data（）中的数据

<标签>{{数据 | 过滤器名 }}</标签>

filters:{
    过滤器名（形参）{
       return 新数据 ；
    }
}

<div v-for = '(item,index) in imgList' :key = 'index'>
    <P>
        {{item.url | getBaseUrl}}
    <P>
<div>

filters: {
    getBaseUrl(url) {
      return "http://www.baidu.com" + url;
    },
  },

4. 两个路由对象

4.1 meta 路由信息---【手动配置】

任意写数据 必须是一个对象 $route对象 更多时候是用来获取当前用户的信息数据的

{
fullPath: "/discover/recommend"   #当前页面的path 
hash: ""   //hash路由  没有作用
matched: (2) [{…}, {…}]   //当前路由的 全部匹配到的路由 包含 爷爷的路由 自己的爸爸  自己的路由  
meta: {name: '推荐'}   //写入到 当前路由的元数据信息
name: undefined    //路由的别名
params: {}      //固定传值方法---修改路由的写法
path: "/discover/recommend"
query: {key1: 'value'}      // 获取路由的参数 ?key=val&key1=val1
}

4.$router对象

封装location的方法 封装history的方法 更多使用是调用方法

this.$router.push('path路由')  //localtion.href
this.$router.push('路由的地址 path ')     #在js中进行页面的跳转
this.$router.back()           #返回上一页  history.back()
this.$router.forward()        #前进一页
this.$router.go(数字)          #前进后退任意页面

5.生命周期

vue组件从诞生到销毁的全过程

四大阶段8个钩子函数都有自己的函数，当组件到达这个阶段自动触发对应的函数===（生命 周期的钩子函数hooks） 所有的钩子函数都可以写任何的js代码

• 创建阶段
• 挂载阶段
• 更新阶段
• 销毁阶段

第一大阶段  create  创建阶段
beforeCreate()  #vue组件创建之前  组件中的任何资源都获取不到  可以获取到 Vue 顶级实例this 
created()     #vue组件创建完成  可以获取到 data（）里面的数据   axios发送请求数据

第二大阶段  mount 挂载阶段
beforeMount()     # 挂载之前   可以获取data()   获取不到页面的dom
mounted()         # 挂载之后   可以获取所有的 dom 节点   

第三大阶段   update  更新阶段
beforeUpdate()    #更新之前  
updated()         #更新之后   

第四大阶段   destroy  销毁阶段
beforeDestroy(){
 #销毁之前触发
destroyed()        #销毁之后触发

一般情况下 created钩子发送axios接收后端的数据 mounted dom节点获取 beforeDesteoy销毁前清空定时器延时器解除事件绑定

组件销毁清空定时器延时器 解除事件绑定

mounted(){
    this.timmer = setInterval(()=>{
    this.num++
    },1000)
}
//销毁阶段destroy
beforeDestroy(){
   //清空定时器 延时器 解除window的所有绑定事件
   clearInterval(this.timer);
   window.removeEventListener("resize",this.fn)
   console.log("我是组件销毁之前的函数"); 
},

6.页面传值

• 通过url链接

url？key1=value&key2=value2 this.$route.query() //{key1:value,key2:value2}

• 本地存储localStorage sessionStorage cookie

localStorage.setItem('key',value) localStorage.getIttem('key')

7.组件传值

• 父传 子
• 字传夫
• 中央事件总线 $bus
• vuex状态管理（完美乱传）

7.1父传子

父组件：动态属性和属性值 子组件：props接受数据

父组件
<song-item :imgUrl="表达式" :title='表达式'></song-item>

data(){
    return{
    
    }
}
接收父组件传递的参数
//1.接收参数 并且不对参数的格式进行限制
props:['imgUrl' , 'title']

 <song-item :imgurl="imgUrl" :title="title"></song-item>
<script>
import SongItem from "./components/SongItem.vue";
export default {
   data(){
    	return {
         imgUrl:"http://p2.music.126.net/tbR3FNCOIpqtwC_M4NNwnQ==/109951166578963138.jpg?param=140y140",
             title: "誓言-求佛（DJ小可 remix《建议随机播放》",
},
 components: {
            SongItem,
  },
}
    
</script>  

子组件
<template>
  <div class="item">
    <div class="img-box">
      <img :src="imgurl"  alt="" />
    </div>
    <div class="title"> {{title}} </div>
  </div>
</template>

<script>
export default {
    data(){
        return {      
        }
    },
    // props 获取父组件 传过来的 动态属性值  
    // 拿到的动态属性值  可以跟 data中的变量使用方法完全一样
    props:['imgurl','title'],
  
};
</script>

传输数据的格式限制

#父组件     
<song-item :imgUrl="表达式"  name="张三" :title="title" :age="age"></song-item>
data(){
    return {
        title:"标题"
  }
},
//接收父组件传递的参数
//1.接收参数 并且对参数进行数据类型限制
	props:{
        name:{
            type:String,
            default:"昵称"
        }
        imgUrl:{
            type:String,   //数据类型  
            default:"默认值"  //如果父组件没有传递该值 使用默认值
        },
     	title:{
              type:String,    
            default:"默认值"
        },
        age:{
              type:String | Number,    
            default:"默认值"
        }
    }

7.2 子传父

子组件中有一个事件触发了，将数据传递给父组件

# 父组件
<子组件  @自定义的事件类型名称="事件执行函数">  </子组件>

methods：{
    事件执行函数(传递的数据){
        console.log(传递的数据)
    }
}

# 子组件中
<button @click="save()"> 提交</button>

methods:{
    save(){
        //获取自己的组件中的数据
        // 组装给 父组件的数据 
        //$emit 相当于 在父组件中触发了一个事件 事件类型:自定义的事件类型名称
       this.$emit('自定义的事件类型名称',传递的数据) 
    }
}

7.3 中央事件总线

在同一个页面中 可以任意组件触发一个自定义事件，在另一个任意组件中监听这个事件 
将自定义事件 放到Vue实例上 通过实例上的监听方法
$bus $emit $on
1.定义一个$bus
2.触发自定义事件
3.定义监听 自定义事件的执行函数

1.定义一个$bus 写在main.js里面 import下面vue上面 
Vue.prototype.$bus = new Vue()
2.触发自定义事件 数据传入
this.$bus.$eimt('自定义的事件类型名称',传递的数据)
3.在需要拿 数据的组件中 根据事件的监听 获取数据===事件监听卸载 created
created(){
   this.$bus.$on('自定义的事件类型名称',function(res){
       console.log(res);  //别人触发自定义事件传递过来的数据
   }) 

8.slot插槽

降幅组建的html代码传入子组件，子组件提前占位并加载父组件传过来的html代码 父组件的功能传递给了子组件放到子组件的插槽里面

8.1匿名插槽

匿名插槽只能存在一个

父组件
<子组件>
任意html 代码  自动找子组件中的 slot 标签； 并用这里html 代码把子组件的slot 替换 覆盖 
</子组件>

<div>
    //子组件 给父组件 要传过来的html 代码 预留的位置
  <slot> </solt>   
</div>

8.2具名插槽

具有插槽：有名字的插槽 ，将父组件的html代码放入到对应的子组件插槽中 无数个

#父组件
<子组件> 
        // 替换匿名插槽的位置
		<div> 
    		//很多的html 代码
    	</div>
		<div slot="插槽名">
        </div>	
</子组件>

9.作用域插槽

将子组件的数据回传给父组件使用子组件 插槽的html代码中获取

• 特点一般情况下作用域插槽都是具名插槽

父组件
<子组件>
//替换匿名插槽的位置
<div>
//很多的html代码
</div>
//scope就是子组件回传的数据对象
<div slit="插槽名" slot-scope="scope">
    {{scope.name}} {{scope.age}}
</div>

子组件
<div>
    //子组件 给父组件 要传过来的html代码 预留的位置
    <slot></solt>
    //通过属性 回传数据
    <slot  name="插槽名" :name="张三" :age="40"></slot>
</div>

9.1插槽指令 v-slot

简化老语法 slot只针对 父组件里面使用子组件插槽语法的简化，子组件的任何代码都没发生变化
<template  v-slot:插槽名="接收的数据">
	<div>  </div>
</template>

<子组件> 
    <template  v-slot:插槽名="接收的数据">
		<div>   
        	{{scope.name}}  {{scope.age}}   //张三 401
        </div>	
	</template>
</子组件>

<template #插槽名="接收的数据">
	<div>  </div>
</template>