vue过度

1、scoped处理样式冲突

<style scoped></style>      //会导致此样式自由此范围的会有渲染，新添加的组件不渲染

2、TodoList的案例

数组reduce方法
this.hobby.reduce((pre,current) => {
                // console.log('@',pre);
                return pre + (current.done ? 1 : 0);
            },0)   

 

v-model可以实现绑定，但是不要用它来修改值.

可以用来判断true和false

使用最多的就是props进行传递方法和一些数据

3、localStorage浏览器缓存sessionStorage

一样的使用方法

  let person = {
        id:'001',
        name:'张曦',
        age:18
    }
    //添加本地存储
    function addLocalStorage(){
        localStorage.setItem('msg',"this is localStorage")
        localStorage.setItem('person',JSON.stringify(person))
    }
​
    //获取localStorage的值
    function getLocalStorage(){
        console.log(localStorage.getItem('msg'));
        console.log(JSON.parse(localStorage.getItem('person')));
    }
​
    //删除localStorage中的值
    function removeLocalStorage(){
        localStorage.removeItem("msg")
        localStorage.removeItem("person")
    }
​

4、组件自定义事件绑定

绑定的方式一
<Student @getName = "getName"/>
​
绑定方式二
<Student ref="sudent"/>
this.$refs.sudent.$on('getName',this.getName);
触发
 this.$emit('getName',this.name)

事件解绑

this.$off('名称')

5、事件绑定的坑

自定义事件适用于：子组件 ==> 父组件

props适用于：父组件 ==> 子组件

this.$refs.sudent.$on('getName',this.getName);
[this.getName的this使用的是这是组件的的VueComponent]不是Vue实例对象
​
()==>{}这个就会向外找 外面则是Vue的实例对象

@事件.native          //表示原来的事件，不是自定义的

6、全局事件总线

兄弟之间的传递

任意组件间的通信

main.js使用beforeCreate()中创建$bus

在组件的里面使用

使用完后beforeDestroy()中销毁

注意：main.js中声明全局事件总线，在需要修改的地方：例如：App.vue中完成绑定事件，在需要出发事件的地方触发事件$emit()

7、消息订阅与发布

使用的pubsub-js插件

需要数据的地方订阅消息，提供数据的地方发布消息

消息订阅
pubsub.subscribe(),
这里返回id
this.pubId = pubsub.subscribe('deleteOne',this.deleteOne)
使用完解绑
 beforeDestroy() {
        this.$bus.$off('changeDone')
        // this.$bus.$off('deleteOne')
        //订阅取消
        pubsub.unsubscribe(this.pubId)
    },
​
​
消息发布
pubsub.publish('deleteOne',id);

8、使用$nextTick[重点使用]

下一轮使用，Vue解析模板会解析完一个部分才会执行，这个可以等下一轮执行

例如:

 //点击按钮的时候直接获取焦点
            this.$nextTick(function(){
                this.$refs.inputTitle.focus()
            })

9、效果

transition模板动画效果

属性name              //名称
属性appear            //显示和隐藏
​
  .v-enter-active{
        animation: test 1s linear;
    }
    .v-leave-active{
        animation: test 1s reverse;
    }

//案例
<template>
    <div>
        <button @click="show = !show">显示/隐藏</button>
        <transition name="demo">
            <h1 v-show="show">transition属性的使用动画效果</h1>
        </transition>
    </div>
</template>
​
<script>
export default {
    name:'Test',
    data() {
        return {
            show:true
        }
    },
​
}
</script>
​
<style scoped>
​
    h1{
        
    }
    
    .demo-enter-active{
        animation: test 1s linear;
    }
​
    .demo-leave-active{
        animation: test 1s reverse;
    }
​
​
    @keyframes test{
        from{
            transform: translateX(-100%);
        }
        to{
            transform: translateX(0px);
        }
    }
</style>
​

过度效果

<template>
    <div>
        <button v-on:click="isShow = !isShow">显示/隐藏</button>
        <transition name="demo" appear>
            <h1 v-show="isShow">过度效果</h1>
        </transition>
    </div>
</template>

<script>
export default {
    name: 'Test2',
    data() {
        return {
            isShow:true
        }
    },
}
</script>

<style>
    h1{
        
    }

    /* 进入开始和离开的时候添加样式渲染 */
    .demo-enter-active,.demo-leave-active{
        transition: 1s linear;
    }

    /* 进入的开始位置 离开的最终位置*/
    .demo-enter,.demo-leave-to{
        transform: translateX(-100%);
    }

    /* 进入后的位置 离开的开始位置*/
    .demo-enter-to,.demo-leave{
        transform: translateX(0);
    }
</style>

多元素的过度 transition-group

需要key值
  <transition-group name="demo" appear>
            <h1 v-show="isShow" key="1">第一个元素</h1>
            <h1 v-show="!isShow" key="2">第二个元素</h1>
        </transition-group>

第三方库 例【animate.css】

引入使用即可

animate.css

<transition 
            appear
            name="animate__animated animate__bounce"
            enter-active-class="animate__swing"
            leave-active-class="animate__fadeOutDown"
        >
          <h1 v-show="isShow">使用第三方库的显示和隐藏animate.css</h1>
      </transition>

10、配置代理axios

npm i axios

• nginx

• vue-cli

前端配置代理服务器解决

第一种服务代理的API

• 不能配置多个代理

• 不能控制是否走代理

//开启代理服务器
    devServer: {
        proxy: 'http://localhost:9001'
    }

 

第二种代理

• 可以配置多个代理

• 可以控制是否走代理

 devServer:{
        proxy:{
            'api':{
                target:'http://localhost:9001',
                //转发给服务器的是前缀清除
                pathRewrite:{'^/api':''},
                //用于支持websocket
                //ws:true,
                //如实回答端口false    true是说假的   默认是true
                changeOrigin:false
            }
        }
    }

11、案例的注意

• 使用你的样式如果会出现缺少的状态，不要放在vue的的assets中，会出现报错

• 可以在publish中引入

•