自学内容网 自学内容网
自学内容网 > 正文

前端学习笔记-Vue篇-03

🕗 发布于 2024-12-14 01:16 前端  学习  笔记  vue.js  vue  

3、使用Vue脚手架

Home | Vue CLI

3.1 具体步骤

  • 第一步(仅第一次执行):全局安装@vue/cli               npm install -g @vue/clie
  • 第二步:切换到你要创建项目的目录，然后使用命令创建项目 vue create xxxx
  • 第三步:启动项目npm run serve

3.2 脚手架项目的结构

-------版本一------------
|-- build : webpack 相关的配置文件夹 ( 基本不需要修改 )
        |-- dev-server.js : 通过 express 启动后台服务器
|-- config: webpack 相关的配置文件夹 ( 基本不需要修改 )
        |-- index.js: 指定的后台服务的端口号和静态资源文件夹
|-- node_modules
|-- src : 源码文件夹
        |-- components: vue 组件及其相关资源文件夹
        |-- App.vue: 应用根主组件
        |-- main.js: 应用入口 js
|-- static: 静态资源文件夹
|-- .babelrc: babel 的配置文件
|-- .eslintignore: eslint 检查忽略的配置
|-- .eslintrc.js: eslint 检查的配置
|-- .gitignore: git 版本管制忽略的配置
|-- index.html: 主页面文件
|-- package.json: 应用包配置文件
|-- README.md: 应用描述说明的 readme 文件
-------版本二------------
|--node_modules
|--public
        |--favicon.ico:页签图标
        |--index.html:主页面
|--src
        |--assets:存放静态资源
                |--logo.png
        |--component:存放组件
                |--HelloWorld.vue
        |--App.vue:汇总所有组件
        |--main.js:入口文件
|--.gitignore:git版本控制忽略的配置
|--babel.config.js:babel的配置文件
|--package.json:应用描述文件
|--package-lock.json:包版本控制文件
关于不同版本的Vue:
1.vue.js与vue.runtime.xxx.js的区别:
  • vue.js是完蜂版的Vue，包含:核心功能+模板解析器。
  • vue.runtime.xxx.js是运行版的Vue，只包含:核心功能;没有板解器
2.因为vue.runtime.xxx.js没有模板解析器，所以不能使用template配置项，需要使用render函数接收到的createElement所数去指定具体内容。

3.3 ref属性

  • 被用来给元素或子组件注册引用信息（id的替代者）
  • 应用在html标签上获取的是真是的DOM元素，应用在组件标签上是组件实例对象（vc)
  • 使用方式
    • 打标识：<h1 ref="xxx">...<⁄h1>或<School ref="xxx">...<⁄School>
    • 获取：this.$refs.xxx

3.4 props属性

功能:让组件接收外部传过来的数据

传递数据：

        <Demo name="'xxx"/>

接收数据:

        第一种方式(只接收):props:['name']

        第二种方式(限制类型)

                props:{

                        name :Number

                }

        第三种方式(限制类型、限制必要性、指定默认值):

                props:{

                        name :{

                                type:string，//类型

                                required:true，//必要性

                                default:'老王’//默认值

                        }

                }
备注:props是只读的，Vue底层会监测你对props的修改，如果进行了修改，就会发出警告，若业务需求确实需要修改，那么请复制props的内容到data中一份，然后去修改data中的数据。

props声明方式

//简单声明接收
props:['name','age','sex]

//接收的同时对数据进行类型限制
props:{
    name:String,
    age :Number,
    sex:String
} 

//接收的同时对数据:进行类型限制+默认值的指定+必要性的限制
props:{
    name :{
        type:string，//name的类型是字符串
        required:true，//name是必要的
    }
    age:{
       type:Number,
       default:99 //默认值
    }
    sex:{
        type:string,
        required:true
    }
}

3.5 mixin混入（合）

功能:可以把多个组件共用的配置提取成一个混入对象使用方式:
第一步定义混合，例如:

        {
                data(){....}

                methods:{....}

        }
第二步使用混入，例如:
        (1).全局混入:Vue.mixin(xxx)
        (2).局部混入:mixins:['xxx'] 

如果设置了数据以自己为准，涉及到声明周期函数则以混合为准

局部混合示例：

全局混合示例：

3.6 插件

功能:用于增强Vue
本质:包含instal1方法的一个对象，insta11的第一个参数是vue，第二个以后的参数是插件使用者传递的数据。

//定义插件
对象.install =function(Vue, options){
    // 1.添加全局过滤器
    Vue.filter(....)
    // 2.添加全局指令
    Vue.directive(....)
    // 3.配置全局混入(合)
    Vue.mixin(....)
    // 4.添加实例方法
    Vue.prototype.$myMethod =function(){...}
    Vue.prototype.$myProperty = xxxx
}
使用插件:Vue.use()

3.7 scoped样式

作用:让样式在局部生效，防止冲突。

写法:<style scoped>

可以设置在App.vue里面，特定的样式使用。设置了scoped就代表这个样式只是在当前的使用

3.8 Todo list案例

  • 输入任务名称，按回车键确认后新增加的任务名称出现在页面顶端，“全部”数量增加1。
  • 勾选框摁下，“已完成”增加1。
  • Footer的勾选框全选，“清除已完成任务”，悬浮任务名称时出现“删除”按钮，全部任务删除完就显示List和Footer为空白。

组件化编码流程(通用)
1.实现静态组件:抽取组件，使用组件实现静态页面效果
2.展示动态数据:
        2.1.数据的类型、名称是什么?
        2.2.数据保存在哪个组件?
3.交互--从绑定事件监听开始

1.组件化编码流程:
        (1).拆分静态组件:组件要按照功能点拆分，命名不要与html元素冲突。

        (2).实现动态组件:考虑好数据的存放位置，数据是一个组件在用，还是一些组件在用:
                1).一个组件在用:放在组件自身即可。
                2).一些组件在用:放在他们共同的父组件上(状态提升)

        (3).实现交互:从绑定事件开始
2.props适用于:
        (1).父组件 ==>子组件 通信
        (2).子组件 ==>父组件 通信(要求父先给子一个函数)
3.使用v-model时要切记:v-model绑定的值不能是props传过来的值，因为props是不可以修改的!
4.props传过来的若是对象类型的值，修改对象中的属性时Vue不会报错，但不推荐这样做。

App.vue

<template>
<div id="root">
  <div class="todo-container">
    <div class="todo-wrap">
      <MyHeader :receive="addTodo"/>
      <MyList :todos="todos" :checkTodo="checkTodo" :deleteTodo="deleteTodo"/>
      <MyFooter :todos="todos" :checkAllTodo="checkAllTodo" :clearAllTodo="clearAllTodo"/>
    </div>
  </div>
</div>

</template>

<script>
    import MyFooter from './components/MyFooter.vue';
    import MyHeader from './components/MyHeader.vue';
    import MyList from './components/MyList.vue';

    export default {
        name:'App',
        components:{MyHeader,MyList,MyFooter},
        data(){
            return {
                todos:[
                    {id:'001',title:'Smoking',done:true},
                    {id:'002',title:'Drinking',done:false},
                    {id:'003',title:'Driving',done:true}
                ]
            }
        },
        methods:{
          /* 添加一个todo */
          addTodo(todoObj){
              this.todos.unshift(todoObj)
          },
          /* 取消勾选一个todo */
          checkTodo(id){
            this.todos.forEach(()=>{
              if(todo.id === id) todo.done = !todo.done
            })
          },
          /* 删除一个todo */
          deleteTodo(id){
            this.todos = this.todos.filters( todo => todo.id !== id)
          },
          /* 全选 | 全取消 */
          checkAllTodo(done){
            this.todos.forEach((todo)=>{
              todo.done = done
            })
          },
          /* 清除已经完成的所有todo */
          clearAllTodo(){
            this.todos = this.todos.filter((todo)=>{
              return !todo.done
            })
          }
          
        }
    }
</script>

<style>
/*base*/
body {
  background: #fff;
}

.btn {
  display: inline-block;
  padding: 4px 12px;
  margin-bottom: 0;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
  border-radius: 4px;
}

.btn-danger {
  color: #fff;
  background-color: #da4f49;
  border: 1px solid #bd362f;
}

.btn-danger:hover {
  color: #fff;
  background-color: #bd362f;
}

.btn:focus {
  outline: none;
}


/*app*/
.todo-container {
  width: 600px;
  margin: 0 auto;
}
.todo-container .todo-wrap {
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
}

</style>

MyHeader.vue

<template>
    <div class="todo-header">
        <input type="text" placeholder="请输入你的任务名称，按回车键确认" v-model="title" @keyup.enter="add"/>
    </div>
</template>

<script>
    import {nanoid} from 'nanoid'
    export default {
        name:'MyHeader',
        props:['addTodo'],
        data(){
            return{
                title:''
            }
        },
        methods:{
            add(){
                /* 校验数据 */
                if(!this.title.trim()) return alert("Your input cannot be null!")
                /* 将用户的输入包装成为一个todo对象 */
                const todoObj = {id:nanoid(),title:this.title,done:false}
                /* 通知app组件去添加一个todo对象 */
                this.addTodo(todoObj)
                /* 清空输入 */
                this.title=''
            }
        }
    }
</script>

<style scoped>
    /*header*/
.todo-header input {
  width: 560px;
  height: 28px;
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 4px 7px;
}

.todo-header input:focus {
  outline: none;
  border-color: rgba(82, 168, 236, 0.8);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
}
</style>

MyList.vue 

<template>
    <ul class="todo-main">
        <MyItem 
            v-for="todoObj in todos" 
            :key="todoObj.id" 
            :todo="todoObj" 
            :checkTodo="checkTodo"
            :deleteTodo="deleteTodo"></MyItem>
    </ul>
</template>

<script>
    import MyItem from './MyItem.vue';
    export default {
        name:'MyList',
        components:{MyItem},
        props:['todos','checkTodo']
    }
</script>

<style scoped>
    /*main*/
.todo-main {
  margin-left: 0px;
  border: 1px solid #ddd;
  border-radius: 2px;
  padding: 0px;
}

.todo-empty {
  height: 40px;
  line-height: 40px;
  border: 1px solid #ddd;
  border-radius: 2px;
  padding-left: 5px;
  margin-top: 10px;
}
</style>

MyItem.vue  

<template>
    <li>
        <label>
            <input type="checkbox" :checked="todo.done" @change="handleCheck(todo.id)"/>
            <!-- 以下代码也可以实现，但是不建议，因为有点违反原则，修改了props，但是Vue没有检测到 -->
            <!-- <input type="checkbox" :checked="todo.done"/> -->
            <span>{{todo.title}}</span>
        </label>
        <button class="btn btn-danger" @click="handleDelete(todo.id)">删除</button>
    </li>
</template>

<script>
    export default {
        name:'MyItem',
        /* 声明接受todo对象 */
        props:['todo','checkTodo','deleteTodo'],
        methods:{
          /* 勾选 | 取消勾选 */
          handleCheck(id){
            /* 通知app组件将对应的todo对象的done值取反 */
            this.checkTodo(id)
          },
          /* 删除 */
          handleDelete(id){
            if(confirm('Are you sure to delete?')){
              this.deleteTodo(id)
            }
          }
        }
    }
</script>

<style scoped>
/*item*/
li {
  list-style: none;
  height: 36px;
  line-height: 36px;
  padding: 0 5px;
  border-bottom: 1px solid #ddd;
}

li label {
  float: left;
  cursor: pointer;
}

li label li input {
  vertical-align: middle;
  margin-right: 6px;
  position: relative;
  top: -1px;
}

li button {
  float: right;
  display: none;
  margin-top: 3px;
}

li:before {
  content: initial;
}

li:last-child {
  border-bottom: none;
}

li:hover{
  background: #ddd;
}

li:hover bottom{
  display: block;
}
</style>

MyFooter.vue   

<template>
    <div class="todo-footer" v-show="total">
        <label>
          <!-- 1.<input type="checkbox" :checked="isAll" @change="checkAll"/> -->
          <input type="checkbox" :v-model="isAll"/>
        </label>
        <span>
          <span>已完成{{doneTotal}}</span> / 全部{{total}}
        </span>
        <button class="btn btn-danger" @click="clearAll">清除已完成任务</button>
    </div>
</template>

<script>
    export default {
        name:'MyFooter',
        props:['todos','checkAllTodo','clearAllTodo'],
        computed:{
          total(){
            return this.todos.length
          },
          doneTotal(){
            /* const x = this.todos.reduce((pre,current)=>{
                console.log('@',pre,current)
                return pre + (current.done ? 1 : 0)
              },0) */
            return this.todos.reduce(pre,todo=>pre+(todo.done ? 1 : 0),0)
          },
          /* 1.isAll(){
            return this.doneTotal === this.total && this.total > 0
          } */
          isAll:{
            get(){
              return this.doneTotal === this.total && this.total > 0
            },
            set(value){
              this.checkAllTodo(value)
            }
          }
        },
        methods:{
          /* checkAll(e){
            this.checkAllTodo(e.target.checked)
          }, */
          clearAll(){
            this.clearAllTodo()
          }
        }
    }
</script>

<style scoped>
    /*footer*/
.todo-footer {
  height: 40px;
  line-height: 40px;
  padding-left: 6px;
  margin-top: 5px;
}

.todo-footer label {
  display: inline-block;
  margin-right: 20px;
  cursor: pointer;
}

.todo-footer label input {
  position: relative;
  top: -1px;
  vertical-align: middle;
  margin-right: 5px;
}

.todo-footer button {
  float: right;
  margin-top: 5px;
}
</style>

3.9 Webstorage


1.存储内容大小一般支持5MB左右(不同浏览器可能还不一样)
2.浏览器端通过 Window.sessionStorage 和 Window.localStorage 属性来实现本地存储机制。
3.相关AP1:
        1)xxxxxStorage.setItem('key', 'value');

                该方法接受一个键和值作为参数，会把键值对添加到存储中，如果键名存在，则更新其对应的值。
        2)xxxxxStorage.getItem(person');
                该方法接受一个键名作为参数，返回键名对应的值
        3)xxxxxStorage.removeItem('key');
                该方法接受一个键名作为参数，并把该键名从存储中删除。
        4)xxxxxStorage.clear()
                该方法会清空存储中的所有数据
4.备注:

  • SessionStorage存储的内容会随着浏览器窗口关闭而消失。
  • LocalStorage存储的内容，需要手动清除才会消失。
  • xxxxxstorage.getItem(xxx)如果xxx对应的value获取不到，那么getltem的返回值是null。
  • JSoN.parse(nul1)的结果依然是nul。

对案例进行浏览器存储设置

 App.vue完整代码

        data(){
            return {
                /* 由于todos是MyHeader组件和MyFooter组件都在使用，所以放在App中（状态提升） */
                todos:JSON.parse(localStorage.getItem('todos')) || []
            }
        },
        
        watch:{
          todos:{
            deep:true,
            handler(value){
              localStorage.setItem('todos',JSON.stringify(value))
            }
          }
        }

 3.10 组件自定义事件

1.一种组件间通信的方式，适用于:子组件 ==>父组件

2.使用场景:A是父组件，B是子组件，B想给A传数据，那么就要在A中给B绑定自定义事件(事件的回调在A中)。

3.绑定自定义事件:

  • 第一种方式，在父组件中:<Demo @atguigu="test"/>或<Demo v-on:atguigu="test"/>
  • 第二种方式，在父组件中:
<Demo ref="demo"/>
......
mounted(){
    this.$refs.xxx.$on('hjj',this.test)
}
  • 若想让自定义事件只能触发一次，可以使用 once 修饰符，或 $once 方法。

4.触发自定义事件:this.$emit('hjj',数据)
5.解绑自定义事件:this.$off('hjj')
6.组件上也可以绑定原生DOM事件，需要使用 native 修饰符
7.注意:通过 this.$refs.x.$on('atguigu',回调)绑定自定义事件时，回调要么配置在methods中，要么用箭头函数，否则this指向会出问题！

案例代码更新

App.vue

<template>
<div id="root">
  <div class="todo-container">
    <div class="todo-wrap">
      <MyHeader @addTodo="addTodo"/>
      <MyList :todos="todos" :checkTodo="checkTodo" :deleteTodo="deleteTodo"/>
      <MyFooter :todos="todos" :checkAllTodo="checkAllTodo" @clearAllTodo="clearAllTodo"/>
    </div>
  </div>
</div>
</template>

MyFooter.vue

<script>
    export default {
        name:'MyFooter',
        props:['todos'],
        computed:{
          total(){
            return this.todos.length
          },
          doneTotal(){
            /* const x = this.todos.reduce((pre,current)=>{
                console.log('@',pre,current)
                return pre + (current.done ? 1 : 0)
              },0) */
            return this.todos.reduce(pre,todo=>pre+(todo.done ? 1 : 0),0)
          },
          /* 1.isAll(){
            return this.doneTotal === this.total && this.total > 0
          } */
          isAll:{
            get(){
              return this.doneTotal === this.total && this.total > 0
            },
            set(value){
              /* this.checkAllTodo(value) */
              this.$emit('checkAllTodo',value)
            }
          }
        },
        methods:{
          /* checkAll(e){
            this.checkAllTodo(e.target.checked)
          }, */
          clearAll(){
            /* this.clearAllTodo() */
            this.$emit('clearAllTodo')
          }
        }
    }
</script>

3.11全局事件总线

1.一种组件间通信的方式，适用于任意组件间通信。
2.安装全局事件总线:

new Vue({
    ......
    beforeCreate(){
        Vue.prototype.$bus=this //安装全局事件总线，$bus就是当前应用的vm
    },
    ......
})

3.使用事件总线:
        1.接收数据:A组件想接收数据，则在A组件中给$bus绑定自定义事件，事件的回调留在A组件自身

methods(){
    demo(data){......}
}
mounted(){
    this.$bus.$on('xxxx',this .demo)
}

        2.提供数据:

this.$bus.$emit('xxxx',数据)

4.最好在beforeDestroy钩子中，用$off去解绑当前组件所用到的事件。

案例代码更新：

Main.js

new Vue({
    el:'#app',
    render:h =>h(App),
    beforeCreate() {
        Vue.prototype.$bus = this
    },
})

App.vue

<template>
      /* 删除内容 */
      <MyList :todos="todos" />
</template>

<script>
        /* 以下为新增绑定 */
        methods:{
          /* 新增绑定 */
        mounted(){
          this.$bus.$on('checkTodo',this.checkTodo)
          this.$bus.$on('deleteTodo',this.deleteTodo)
        },
        deforeDestory(){/* 解绑 */
          this.$bus.$off('checkTodo')
          this.$bus.$off('deleteTodo')
        }
    }
</script>

MyItem.vue

<script>
    export default {
        name:'MyItem',
        /* 声明接受todo对象 */
        props:['todo'],
        methods:{
          /* 勾选 | 取消勾选 */
          handleCheck(id){
            /* 通知app组件将对应的todo对象的done值取反 */
            /* this.checkTodo(id) */
            this.$bus.$emit('checkTodo',id)
          },
          /* 删除 */
          handleDelete(id){
            if(confirm('Are you sure to delete?')){
              /* this.deleteTodo(id) */
              this.$bus.$emit('deleteTodo',id)
            }
          }
        }
    }
</script>

MyList.vue

<template>
    <ul class="todo-main">
        <MyItem 
            v-for="todoObj in todos" 
            :key="todoObj.id" 
            :todo="todoObj"></MyItem>
    </ul>
</template>

<script>
    import MyItem from './MyItem.vue';
    export default {
        name:'MyList',
        components:{MyItem},
        props:['todos']
    }
</script>

3.12 消息订阅与发布 pubsub

1.一种组件间通信的方式，适用于 任意组件间通信。
2. 使用步骤:
        1.安装pubsub:npm i pubsub-js
        2.引|入:import pubsub from 'pubsub-js'
        3.接收数据:A组件想接收数据，则在A组件中订阅消息，订阅的回调留在A组件自身 
methods(){
    demo(data){......}
}
......
mounted(){
    this.pid = pubsub.subscribe('xxx',this.demo)//订阅消息
}

4.提供数据: pubsub.publish('xxx',数据)
5.最好在beforeDestrov钩子中，用 Pubsub.unsubscribe(pid)去

<span style="color:red">取消订阅。</span>

案例代码更新：

App.vue:

<script>
    import pubsub from 'pubsub-js'
    ......
    export default {
        ......,
        methods:{
          ......,
          /* 删除一个todo */
          deleteTodo(_,id){
            this.todos = this.todos.filters( todo => todo.id !== id)
          },
          ......,
        mounted(){
          ......,
        deforeDestory(){/* 解绑 */
          this.$bus.$off('checkTodo')
          /* this.$bus.$off('deleteTodo') */
          /* 取消订阅 */
          pubsub.unsubscribe(this.pubId)
        }
    }
</script>

MyItem.vue

<script>
    /* 引入库 */
    import pubsub from 'pubsub-js'
    export default {
        .....
        methods:{
          ......,
          /* 删除 */
          handleDelete(id){
            if(confirm('Are you sure to delete?')){
              /* this.deleteTodo(id) */
              /* this.$bus.$emit('deleteTodo',id) */
              /* 使用订阅 */
              pubsub.publish('deleteTodo',id)
            }
          }
        }
    }
</script>

3.13 Todo list案例新增编辑功能与nextTick

nextTick

1.语法: this.$nextTick(回调函数)
2.作用:在下一次 DOM 更新结束后执行其指定的回调。
3.什么时候用:当改变数据后，要基于更新后的新DOM进行某些操作时，要在nextTick所指定的回调函数中执行

案例代码更新：

App.vue

<script>
    ......
        methods:{
          ......,
          /* 更新一个todo */
          updateTodo(id,title){
            this.todos.forEach(()=>{
              if(todo.id === id) todo.title = title
            })
          },
          ......,
        mounted(){
          this.$bus.$on('checkTodo',this.checkTodo)
          this.$bus.$on('updateTodo',this.checkTodo)
          /* this.$bus.$on('deleteTodo',this.deleteTodo) */
          /* 订阅消息 */
          this.pubId = pubsub.subscribe('deleteTodo',this.deleteTodo)
        },
        ......
    }
</script>

<style>
......

.btn-danger {
  color: #fff;
  background-color: #da4f49;
  border: 1px solid #bd362f;
}
/* 新增编辑的样式 */
.btn-edit {
  color: #fff;
  background-color: pink;
  border: 1px solid #9d2f29;
  margin-right: 5px;
}
......

</style>

MyItem.vue

<template>
    <li>
        <label>
            ......
            <input 
              v-show="todo.isEdit" 
              type="text" 
              :value="todo.title"
              @blur="handleBlur(todo,$event)"
              ref="inputTitle">
        </label>
        <button class="btn btn-danger" @click="handleDelete(todo.id)">删除</button>
        <button v-show="!todo.isEdit" class="btn btn-edit" @click="handleEdit(todo)">编辑</button>
    </li>
</template>

<script>
    ......,
          /* 编辑 */
          handleEdit(todo){
            if(todo.hasOwnProerty('isEdit')){
              todo.isEdit=true
            }else{
              this.$set(todo,'isEdit',true)
            }
            this.$nextTick(function(){
              /* nextTick所指定的回调，会在dom节点更新完毕之后再执行 */
              this.$refs.inputTitle.focus()
            })
          },
          /* 失去焦点回调，真执行修改逻辑 */
          handleBlur(todo,e){
            todo.isEdit=false
            if(!e.target.value()) return alert('Your input cannot be null!')
            this.$bus.$emit('updateTodo',todo.id,e.target.value)
          }
        }
    }
</script>

3.14 Vue封装的过度与动画

Animate.css | A cross-browser library of CSS animations.

1.作用:在插入、更新或移除 DOM元素时，在合适的时候给元素添加样式类名。

2.图示：

3.写法：

1)准备好样式:

  • 元素进入的样式:
    • 1.v-enter:进入的起点
    • 2.v-enter-active:进入过程中
    • 3.v-enter-to:进入的终点
  • 元素离开的样式:
    • 1.v-leave:离开的起点
    • 2.v-leave-active:离开过程中
    • 3.v-leave-to:离开的终点

2.使用<transition>包裹要过度的元素，并配置name属性:

<transition name="hello">
    <h1 v-show="isShow">你好啊!</h1>
</transition>

3.备注:若有多个元素需要过度，则需要使用:<transition-group>，且每个元素都要指定 key 值。

案例代码更新：

MyItem.vue

<template>
    /*给li添加transition*/
    <transition name="todo" appear>
      <li>
        ......
      </li>
    </transition>
</template>

<style scoped>
/*添加代码*/
......
.todo-enter-active{
  animation: atguigu .5s linear;
}
.todo-leave-active{
  animation: atguigu 0.5s linear reverse;
}
@keyframes atguigu {
  from{
    /*左边进入，设置为100%则是右边进入*/
    transform:translateX(-100%);
  }
  to{
    transform:translateX(0px);
  }
}
</style>


原文地址：https://blog.csdn.net/Yvonne_hjj/article/details/144220822

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

相关文章

自学内容网
Copyright © 2015-2024