# vue

**Repository Path**: boss_Z/vue

## Basic Information

- **Project Name**: vue
- **Description**: 笔记
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-08-26
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

    
## 1.vue是什么？  *****
**vue是一个用于构建用户界面的渐进式的自底层向上增量开发的MVVM框架**




## 2.MVVM是什么？ *****
```


    * M：model  模型  就等同于数据 就是在项目中写数据的地方
    * V：view      视图   就是用户可以看见的网页内容
    * VM：viewmodel   视图模型   就是用来关联数据模型与视图见面之间的桥梁


```


## 3.vue的核心是什么？
数据驱动与组件化  
数据驱动 ：通过控制数据的变化来显示vue的数据驱动是视图的内容随着数据的改变而改变  

## 4.框架的特点
轻量化，高效率，上手快，简单易学，文档全面而整洁



## 5.vue目的  *****
```
    * 解决数据绑定问题  
    * vue.js主要目的是为了开发大型单页面应用  
    * 支持组件化，也就是可以把页面封装为若干个组件，把组件进行拼装，这样可以让页面的复用性达到最高  
```
## 6.vue.js优势
* 简洁：HTML模板 + Vue实例 + JSON数据  
* 轻量：17kb，性能好  
* 设计思想：视图与数据分离，无需操作DOM  
* 社区：大量的中文资料和开源案例  



## 7. 声明式渲染  
**我们只需要告诉程序我们想要什么效果，其他的交给程序做。**  
命令式渲染：命令我们的程序做什么，程序就会跟着命令一步一步执行。


---------------------------------------------------------------------------------------------------------

## vue指令的概念
带有 v- 前缀的特殊属性

## vue指令的用途
它们作用于HTML元素，指令提供了一些特殊的特性，将指令绑定在元素上时，指令会为绑定的目标元素添加一些特殊的行为，我们可以将指令看作特殊的HTML属性（attribute）

## vue指令的书写位置
任意 HTML 元素的开始标签内

## v-show
    作用：控制一个元素的显示和隐藏
    v-show=表达式 根据表达式的返回值是true还是false，来确定显示或隐藏
```
<div id="demodiv">
        <h1 v-show="bool">{{text}} </h1>
        <button v-on:click="fun()">点我显示隐藏</button>
    </div>
    <script>
        new Vue({
            el: "#demodiv",
            data: {
                bool: true,
                text: "hahahahah"
            },
            methods: {
                fun() {
                    this.bool = !this.bool
                }
            }

        })



```
## v-model
    * 双向绑定
        Vue框架核心的功能就是双向的数据绑定。 双向是指：HTML标签数据 绑定到 Vue对象，另外反方向数据也是绑定的
        使用 v-model 指令来实现双向数据绑定 把视图数据与模型数据相互绑定
    * 双向绑定--原理数据劫持
        vue数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的
        数据劫持:当我们访问或设置对象的属性的时候，都会触发Object.defineProperty()函数来拦截（劫持），然后在返回(get)或设置(set)对象的属性的值。并且当数据发生改变的时候做出反应
    * 双向绑定--原理发布者-订阅者模式
        vue数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的
        发布者-订阅者模式:其定义对象间一种一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象都将得到通知
```
  <div id="box">
        <input type="text" v-model="inputValue">
        <p>{{inputValue}}</p>
    </div>
    <script>
        new Vue({
            el: "#box",
            data: {
                inputValue: ""
            }
        })


```

## v-for
    语法：v-for = "(item, index) in arr"
```
    <div id="box">
        <table border="1" cellspacing=0 cellpadding=0>
            <thead>
                <tr>
                    <th>学号</th>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>性别</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(v,i) in arr">
                    <td>{{i}} </td>
                    <td>{{v.name}} </td>
                    <td>{{v.age}} </td>
                    <td>{{v.sex?"男":"女"}} </td>
                </tr>
            </tbody>
        </table>
    </div>
    <script>
        new Vue({
            el: "#box",
            data: {
                arr: [
                    {name: "lile",age: 18,sex: 1},
                    { name: "zhaokun",age: 18,sex: 1}, 
                    { name: "mubiao",age: 18,sex: 1}, 
                    {name: "chenyan",age: 18,sex: 1}, ]
            }
        })



```
 ## v-on
    写法：v-on:事件名="函数名()"
    作用：为HTML元素绑定事件
    等同于@事件名="函数名()"
 ## v-bind
    作用：绑定 HTML 元素的属性
    语法:v-bind:属性名 = ‘表达式’
    简写     ：属性名=‘表达式’
 ## v-if
    作用：判断是否加载固定的内容
    语法：v-if = 表达式  根据表达式的返回值是true还是false，来确定删除还是不删除元素

```
        <div id="demodiv">
                <input type="checkbox" v-model="bool"/>{{bool?"您已经勾选":"您没有勾选"}}
                    <h1 v-if="bool">我想使用vue的指令来进行显示和隐藏</h1>
            
            </div>
            <script>

                new Vue({
                    el:"#demodiv",
                    data:{
                    bool:false
                    }
                })


            </script>

```
  * v-show与v-if区别：v-if有更高的切换消耗（安全性高）。
  * v-show有更高的初始化的渲染消耗（对安全性无要求选择）
## V-else
    作用：必须配合v-if使用否则无效。当v-if条件不成立的时候执行
```
        <div id="demodiv">

                    <input type="checkbox" v-model="bool"/>{{bool}}
                    <h1 v-if="bool">请您登陆</h1>
                
                    <h1 v-else>欢迎您尊敬的会员</h1>

                </div>
                <script>

                    new Vue({
                        el:"#demodiv",
                        data:{
                            bool:true
                        },
                        methods:{

                        }
                    })

                </script>
```
## v-else-if
    作用：当有一项成立时执行
```
     <div id="demodiv">
        <h1>{{inputValue}}</h1>
        <select v-model="inputValue">
            <option value="吃饭">吃饭</option>
            <option value="在吃">在吃</option>
            <option value="睡觉">睡觉</option>
            <option value="在睡">在睡</option>
        </select>


        <p v-if="inputValue=='吃饭'">您选择了吃饭</p>
        <p v-else-if="inputValue=='在吃'">您选择了在吃</p>
        <p v-else-if="inputValue=='睡觉'">您选择了睡觉</p>
        <p v-else-if="inputValue=='在睡'">您选择了在睡</p>
        <p v-else>您什么都没有选</p>
   </div>

    <script>

        new Vue({
            el:"#demodiv",
            data:{
                inputValue:""
            }
        })


    </script>



```

## v-text
    作用：操作网页元素中的纯文本内容。{{}}是他的另外一种写法  
  v-text 与{{}} 的1区别  
    v-text与{{}}等价，{{}}叫模板插值，v-text叫指令。    
    有一点区别就是，在渲染的数据比较多的时候，可能会把大括号显示出来，俗称屏幕闪动   


### 解决闪烁问题
    * 使用v-text渲染数据  
    * 使用{{}}语法渲染数据，但是同时使用v-cloak指令（用来保持在元素上直到关联实例结束时候进行编译），v-cloak要放在什么位置呢，v-cloak并不需要添加到每个标签，只要在el挂载的标签上添加就可以


## v-html
    作用：双大括号会将数据解释为纯文本，而非 HTML 。为了输出真正的 HTML ，你需要使用 v-html 指令  
    语法：<p v-html="text"></p>  


## v-once
    作用：当数据改变时，插值处的内容不会更新(会影响到该节点上的所有属性)  
    语法：<p v-once>{{text}}</p>  



## watch
    作用：当数据发生改变时，触发watch里面的逻辑
    语法：写在与data,el,methods。平级的地方

```
 <div id="demodiv">
            <p>{{text}}</p>
            <button v-on:click="up()">点我修改</button>
    </div>
    <script>
        new Vue({
            el:"#demodiv",
            data:{
              text:"你好么么哒"
            },
            methods:{
                up(){
                    this.text="哈哈"
                }
            },
            // 监听变量
            watch:{
                text(newval,oldval){
                    console.log("改变啦"+newval+"------"+oldval)
                }
            }
        })
    </script>




```


## filter 过滤器
* 全局过滤器

```
       全局过滤器  在所有Vue实例中都可以使用
     Vue.filter("过滤器的名字",(你要过滤的数据会自动传递给这个形参)=>{
         return 你过滤这个数据的逻辑
     })
```
* 局部过滤器
  语法：写在与data，methods，computed，watch。。。同级
```
 局部过滤器
    filters:{
        过滤器的名字(val你要过滤的数据会自动传递进来){
            return 你处理的方法
        }
    }
```
## vue的生命周期 
    * beforeCreate      创建实例前 
        el和data都是undefined
    * created           创建实例完成后 
        el为undefined，data已被初始化 
    * beforeMount       模板创建前 
        el已初始化，但未渲染 
        <h1>{{text}}</h1> 
    * mounted           模板创建h后 
        渲染完成 
        <h1>哈哈哈</h1>
    * beforeUpdata      更新前 
    * updated           更新后 
    * beforeDestory     销毁前 
    * destoryed         销毁后 
  

## vue的事件修饰符
    * @事件名.stop=""  z阻止事件冒泡 
    * 原生js：stoppropagation() 

    * @事件名.capture=""  事件变为捕获阶段触发 
    * 原生js： 事件监听 node.addEventListener("去on的事件名"，function(){}) 
    * @事件名.prevent=""  阻止浏览器默认行为 
    * 原生js： event.preventDefault() || return false 
    * @事件名.once = ""   事件只会触发一次 


```
阻止表单元素中提交按钮刷新页面 
<form   onsubmit="return false"> 

```

## vue 数据请求
  * vue-resonrce 
  * axios 

```
    axios({
        url: "http://api.artgoer.cn:8084/artgoer/api/v1/user/324380/v3/topic/topic
        HomeByLabel?pageIndextoken=b544cd63-6d42-46fe-a96c-3cf96bae3113&topicId=62187",
        method: "get"
    }).then((ok) => {
        //请求发送成功后触发函数
        this.bool = !this.bool
        this.arr = ok.data.data.commentList 
        console.log(this.arr) 
    }).catch((err) => { 
        //请求发送失败后触发函数 
        console.log(err) 
    })


```

## vue计算属性
    如果我们想在页面中对数据进行处理 又或者说 一条数据在不同位置展示出不同的形态 那么在这个时候我们就要使用计算属性 

```
    <h1>使用计算属性的参数</h1> 
    <input type="text" v-model="text"> 
    <h1>{{newtext}}</h1> 
    <h1>{{twotext}}</h1> 

    computed: { 
        newtext() { 
            console.log("bbbbbbbbb")
            return this.text.substr(1, 4)
        },
        twotext() { 
            return this.text.substr(1, 4).toUpperCase()
        }
    }
```
### 计算属性和方法的区别
  * 1.计算属性是基于它所依赖的数据进行更新,在有在相关依赖的数据发生变化了才会进行更新,而普通的方法每次都会执行  
  * 2.计算属性是有缓存的,只要它所依赖的数据没有发生改变,后面的每一次访问计算属性中的值,都是之前缓存的结果,不会重复执行



## 组件坑
* 1.如果组件中有大写  那么在本地模式中必须  大写转小写  前面加个-
* 2. 如果有多个标签的话, 必须必须必须有一个父元素包裹
* 3.组件怎么使用变量呢？
    组件是一个独立的完整的作用于  并且组件自己的事情自己干   所以组件中想使用变量必须必须必须在组件内部来进行定义,组件中来定义变量的时候千万要注意语法
* 4.外部模板    大家发现之前的内容HTML写起来非常的麻烦   可以吧这些html方法外部使用一个<template></template>标签进行包裹




## 父组件把数据传递给子组件(正向传值)
使用props
```
在子组件中
export default {
    props:["title","imgsrc"]
}

```
## 子组件把数据传给父组件（逆向传值)
```
在子组件中
<template>
    1.逆向传值是不被允许的，必须在事件来触发一个自定义事件的抛出
    <div id="item" @click="fun(index)">
        {{content}}
    </div>
</template>
<script>
export default {
  props:["content","index"],
  methods:{
      fun(i){
        2.开始抛出数据
        //this.$emit("抛出的事件名","抛出的数据")
          this.$emit("topsonindex",i)
      }
  }
}
</script>
```
```
在父组件中
    3.通过调用自定义事件但是父组件中函数不加()
    <div id="box">
        <Topson v-for="(v,i) in arr" :key="i" :content="v.content" :index="i" @topsonindex="fun"/>
    </div>
    4.必须传一个形参，这个形参就代表了子组件给父组件传的数据
      methods:{
        
        fun(v){
            alert("用户点击了"+this.arr[v].content)
        }
    }
```

## 父子组件
* 概念：就是组件与组件之间有嵌套关系的组件
* 使用：如果想使用父子组件   必须  1在父组件中引用组件  2.在父组件模板中引用子组件
* 作用域：就是父子组件  两者每一个都是一个独立完整的作用域，父子组件的数据  默认情况下不互通
虽然默认不互通 但是我们可以使用正向传值来进行父组件的数据给子组件

Props  是一个属性  可以用来接收外部传入给当前组件的数据

注意：props验证 只会给我们释放出错误  但是并不会影响我们的程序的进行 因为他主要的作用就是给开发者 一个数据类型传递错误的提示



```

 // 使用props验证
    props:{
        ziProps:Number,//验证数据类型
        // 有验证数据类型还要验证他的不能为空
        zione:{
            type:String,
            required:true
        },
        zitwo:{
            type:String,
            default:"我是默认值"
        }
    }

````


注意:如果 我们引用的vue包是min也就是压缩版本的话  是看不到props验证的错误的 原因就是在压缩版本中吧props验证的错误提示已经删除了


什么时候使用slot？
因为我们的组件可能是动态重复使用的 所以在这个时候我们就可以使用props来向组件内部传递他想显示的内容   但是但是props的使用场景是内容不同数量相同  那么slot就是内容不同数量也不相同

Slot：
1.     如果我在调用组件的时候用在自定义标签的开标签和关标签中插入dom元素会怎么样？
默认不会显示

使用slot来进行组件插槽的设置 
具名slot   使用name属性在定义槽口的时候起个名字
在使用槽口的时候  使用slot=“要插入的槽口名”  来进行使用


 




扩展：vue-cli配置



```
1.     自动开启  修改端口
必须 在项目的根目录下创建一个vue.config.js

module.exports={
        // 配置自动开启
        devServer:{
            open:true,
            port:8888
        }
    }

2。文件夹别名
module.exports={
    // 配置文件夹别名
    configureWebpack:{
        resolve:{
          alias:{
            // "别名":"对应的文件夹"
            "c":"@/components"
          }
        }
      },
 
    // 配置自动开启
    devServer:{
        open:true,
        port:8888
    }
}


```

## 1.路由是什么？
路由就是为了完成SPA单页面应用的技术点 路由就是根据用户所选择的url不同 ，根据这个url来自己分发对应的路由页面组件  

## 2.为什么使用路由？
让用户使用我们的应用体验效果更佳接近于原生app的那种丝滑感觉  也更加符合web3.0中的模块化组件化的开发方式  让页面与页面之间的耦合度降到最低  减少我们的测试难度提高开发效率



## 路由的使用流程
* 1.下载路由  npm install --save vue-router  (脚手架中因为我们已经让脚手架帮助我们下载了 所以不需要)
* 2.创建路由页面组件
* 3.创建路由规则
```
index.js:

    引入
import Vue from 'vue'
import VueRouter from 'vue-router'

import Sup from '@/views/sup.vue'
import List from '@/views/list.vue'
import Login from '@/views/login.vue'


    规则
const routes = [{
        path: "/shouye",
        name: "shouye",
        component: Shouye
    },
    {
        path: "/sup",
        name: "sup",
        component: Sup
    },
    {
        path: "/list",
        name: "list",
        component: List
    },


````
* 4.实例化路由对象并传入路由规则（脚手架默认设置好的）


```
index.js:

            //实例化路由对象
const router = new VueRouter({
    mode: 'history',
    base: process.env.BASE_URL,
    routes  //传入路由规则
})


```


* 5.把路由实例插入到Vue实例中（脚手架默认设置好的）
  
```
mian.js:

import Vue from 'vue'
import App from './App.vue'
import router from './router'

Vue.config.productionTip = false

new Vue({
  router,  //路由实例插入到Vue实例中
  render: h => h(App)
}).$mount('#app')


```

* 6.在你想显示内容的地方设置路由的出口    <router-view></router-view>


* 7.设置路由导航
```
<template>
    <div class="bot">
        <ul>
            <li>
            //一级路由，点击到shouye页面
                <router-link to="/shouye">首页</router-link>
            </li>
            <li>
                <router-link to="/list">列表</router-link>
            </li>
        </ul>
    </div>
</template>

```

## 扩展
* 如何知道当前用户选择的具体是哪个页面，我想让路由导航也页面联动。默认情况下router-link会被解析为a标签，但是不能使用a标签，使用路由导航的时候选中的页面会在对于应的路由导航中添加 router-link-active类名，可以给这个类名设样式
```
.router-link-active{
    background: chartreuse;
    color: white;
}

```


## 路由导航
分类：
1.声明式：就是使用router-link的跳转方式
    <router-link :to="/shouye"></router-link>

2.编程式：就是用js的跳转方式

    this.$router.push("/shouye")
    this.$router.replace("/shouye")
    这两种都是js的跳转方式，区别在于push的可以回退，而replace不可以回退


### 404页面
    必须写在路由规则的最下面，只需要在路由规则中path配置*

```
    {
        path: "/*",  //通配符，所以必须写在最下面
        name: "defalt",
        component: Defalt
    }

```

### 页面的重定向

```
    {
        path: "/",
        redirect: "shouye" 
    },

```


## 路由传参/动态路由匹配

作用：就是把一个路由页面的参数传递到另一个页面

1.params

````

* 1.在路由规则中创建参数的接收
    {
        path: "/info/:getinfo",
        name: "info",
        component: Info
    }
* 2.发送参数
     <router-link :to="{name:'info',params:{getinfo:item.id}}">{{item.title}} </router-link>

* 3.接收参数
    this.$route.params.getinfo
    // getinfo 就是在路由规则中配置的参数

````
  

## 路由传参/动态路由匹配

作用：就是把一个路由页面的参数传递到另一个页面

1.params

````

* 1.在路由规则中创建参数的接收
    {
        path: "/info/:getinfo",
        name: "info",
        component: Info
    }
* 2.发送参数
     <router-link :to="{name:'info',params:{getinfo:item.id}}">{{item.title}} </router-link>

* 3.接收参数
    this.$route.params.getinfo
    // getinfo 就是在路由规则中配置的参数

````


2.query


```
* 1.发送参数
 <router-link :to="{name:'info',query:{getinfo:item.id}}">{{item.title}} </router-link>

* 2.接收参数
    this.$route.query.getinfo
    // getinfo 就是在路由规则中配置的参数   

使用query的方式不用在路由规则设置参数

```

## params 和query的区别
  1.用法上的：query要用path来引入，params要用name来引入，接收参数都是类似的，分别是this.$route.query.name和this.$route.params.name。  
  2.url展示的：params类似于post，query更加类似于我们ajax中get传参，说的再简单一点，前者在浏览器地址栏中不显示参数，后者显示，所以params传值相对安全一些。  


## 路由模式
hash模式url里面永远带着#号，我们在开发当中默认使用这个模式。  
history模式没有#号，是个正常的url适合推广宣传。  
考虑url的规范那么就需要使用history模式，因为当然其功能也有区别，在开发app的时候有分享页面，这个分享出去的页面就是用vue做的，把这个页面分享到第三方的app里，有的app里面url是不允许带有#号的，所以要将#号去除那么就要使用history模式，history模式还有一个问题就是，做刷新操作，会出现404错误，那么就需要和后端人配合让他配置一下apache或是nginx的url重定向，重定向到你的首页路由上  



## 多级路由
  * 2级  
    1.创建页面组件  
    2.在路由规则中插入二级路由的路由规则  （在对应的1级路由规则中使用children来进行插入）  
```
 {
        //一级路由
        path: "/home",
        name: "home",
        component: () => import ('../views/home.vue'),
        children: [{
                //二级路由
                //第一种写法path中不加/
                path: "erjia",
                name: "erjia",
                component: () =>
                    import ('../views/erjia.vue')
            },
            {
                //第二种写法path的路径中加/
                path: "/erjib",
                nbme: "erjib",
                component: () =>
                    import ('../views/erjib.vue')
            },
            {
                path: "erjic",
                ncme: "erjic",
                component: () =>
                    import ('../views/erjic.vue')
            },
        ]

```
    3.设置路由出口（必须必须在对应的1级路由页面组件中进行插入）

```
    //在对应的页面设置路由出口
    <router-view></router-view>

```
    4.设置路由导航

```
            <li>
                //如果二级路由中没有加/，那么to后面的写法为/一级路由/二级路由
                <router-link to="/home/erjia">电影</router-link>
            </li>
            <li>
            //如果二级路由规则中加了/，那么to后面的写法为/二级路由
                <router-link to="/erjib">电视</router-link>
            </li>
            <li>
                <router-link to="/home/erjic">综艺</router-link>
            </li>


```



## 路由懒加载
    懒加载简单来说就是延迟加载或者按需加载，既在需要的时候加载
    为给客户更好的客户体验，首屏组件加载速度更快，解决白屏问题，做的一些项目越大，vue打包后的js文件也越来越大，  
    这会是影响加载时间的重要因素。当构建的项目比较大的时候，懒加载可以分割代码块，提高页面的初始加载效率。  


* 1.import
    在路由和规则中不需要import  from的方式引用了，改为下面这种
```
            {
                path: "erjib",
                nbme: "erjib",
                component: () =>import ('../views/erjib.vue')
            },



```


## 数据请求封装与promise
* 1.1.在src下新建一个文件夹api  创建对应组件页面的数据请求文件，然后在其中使用promise对数据请求进行封装
```
import axios from "axios"
export function erji() {
    return new Promise((resolve, reject) => {
        axios({
            url: "http://api.artgoer.cn:8084/artgoer/api/v1/user/324380/v3/topic/topicHomeByLabel
            ?pageIndex=1&token=b544cd63-6d42-46fe-a96c-3cf96bae3113&topicId=62187",
            method: "get"
        }).then((ok) => {
            resolve(ok)
        }).catch((erro) => {
            reject(erro)
        })
    })
}
export function erji2(){
    //第二个数据请求
}

```

* 2.在需要使用的组件页面中引用当前请求 但是注意 我们封装的时候使用的是export 进行的暴露 那么我们在import form 引用的时候必须必须必须必须使用{}对象解构的方式进行引用
  
```
// 2.使用export进行暴露，使用{}结构赋值
import {erji} from "@/api/erjiapi.js"
export default {
    mounted(){
        //3.接受数据
        erji().then((ok)=>{
           this.arr=ok.data.data.commentList
           console.log(ok.data.data.commentList) 
        }).catch((err)=>{
            console.log(err)
        })
    },
    data(){
        return{
            arr:[]
        }
    }
}



```

* 3.在合适的位置进行调用由于我们封装的请求是会返回一个promise对象  那么我们就可以使用.then 和. catch来接收


## vue 跨域问题

在vue.config.js中

```
module.exports = {
    devServer: {
        open: true,
        port: 666,
        proxy: {
            '/api': {
                target: 'http://www.weather.com.cn', //对应自己的接口
                changeOrigin: true,
                ws: true,
                pathRewrite: {
                    '^/api': ''
                }
            }
        }
    },

```

创建对应组件页面的数据请求文件

```
import axios from "axios"
export function erji2() {
    return new Promise((resolve, reject) => {
        axios({
            //////////////路径
            url: "/api/data/cityinfo/101110101.html",
            method: "get"
        }).then((ok) => {
            resolve(ok)
        }).catch((erro) => {
            reject(erro)
        })
    })
}

```


## 动态组件

让多个组件使用同一个挂载点，并动态切换，这就是动态组件。（tab选项卡）

```
1.创建页面组件
2.在对应的页面引用组件

import Taba from "@/components/taba.vue"
import Tabb from "@/components/tabb.vue"
import Tabc from "@/components/tabc.vue"


3.使用is特性来切换不同的组件

 <component :is="com"></component>

4.给页面的元素绑定事件，并让data中的数据变量等于对应的组件

     <li @click="fun()">tabA</li>
    <li @click="fun1()">tabB</li>
    <li @click="fun2()">tabC</li>    



export default {
        data(){
            return{
                com:Taba
            }
        },
        methods:{
            fun(){
                this.com=Taba
            },
            fun1(){
                this.com=Tabb
            },
            fun2(){
                this.com=Tabc
            },
        }

}


```


## keep-alive
在切换路由时，发现之前页面的状态丢失，原因是每次切换路由的时候，Vue都创建了一个新的组件实例  

解决这个问题，可以用<keep-alive></keep-alive>将路由出口包裹起来，在切换过程中将状态保存在内存中
，防止重复渲染DOM，减少加载时间及性能消耗，提高用户体验性。  

```
    //将路由出口包裹起来
    <keep-alive>
        <router-view/>        
      </keep-alive>

```


## 自定义指令

```
<template>
    <div>
        music
        //绑定自定义事件
        <h1 v-changecolor>七里香</h1>
    </div>
</template>

<script>                                 // 自定义钩子函数     
export default {                         bind：绑定指令到元素上，只执行一次
    //局部自定义指令定义                  inserted：绑定了指令的元素插入到页面中展示时调用，基本上都是操作这个钩子函数
    directives:{                          update：所有组件节点更新时调用
        //自定义指令的名字                componentUpdated：指令所在组件的节点及其子节点全部更新完成后调用
        changecolor:{                     unbind：解除指令和元素的绑定，只执行一次
            //自定义指令钩子函数                                         

            inserted(el){
                //el就是绑定了自定义事件的DOM元素
                el.style.color="red"
            }
        }
    }

}
</script>

```

## ref 和 $refs 的使用

Vue一般很少会直接操作DOM,需要操作DOM的时候可以使用ref和$refs实现（类似于js中的class类名）

```
 <p ref="demo" @click="fun()">hello world</p>
 methods:{
            fun(){
                console.log(this.$refs.demo)  //<p>hello world</p>
            }
        }


```
ref用在组件上可以快速访问组件实例，及其相关属性和方法
** 可以用来获取子元素的data数据 **

```
    //ref绑定在组件上
    <Botbar ref="getinfo"/>
    <button @click="fun1()">点我获取Botbar组件的数据</button>

    fun1(){
        console.log(this.$refs.getinfo)  //返回一个Vue实例化对象
        console.log(this.$refs.getinfo.text)  //hello world
    }

```