一、使用vue实现对数组的增删改查

1、新建vue容器--表格及编辑框

 <div id="app">
       <button @click='showEdit=true'>添加</button>
       <table>
           <thead>
               <tr>
                   <th>学号</th>
                   <th>姓名</th>
                   <th>年龄</th>
                   <th>性别</th>
                   <th>操作</th>
               </tr>
           </thead>
           <tbody>
               <tr v-for='(item,index) in students' :key='index'>
                   <td>{{item.no}}</td>
                   <td>{{item.name}}</td>
                   <td>{{item.age}}</td>
                   <td>{{item.sex}}</td>
                   <td><button @click='getOne(item.no)'>修改</button>
                      <button @click='delStudent(index)'>删除</button>
                   </td>
               </tr>
           </tbody>
       </table>
       <div id="edit" v-show='showEdit'>
           <p>学号：<input type="text" v-model='student.no' :readonly='!isAdd'></p>
           <p>姓名：<input type="text" v-model='student.name'></p>
           <p>年龄：<input type="text" v-model='student.age'></p>
           <p>性别：<input type="text" v-model='student.sex'></p>
           <p>
               <button v-if='isAdd' @click='addStudent'>添加</button>
               <button v-else @click='updateStudent'>修改</button>
               <button @click='clear'>取消</button>
           </p>
           <div class="close" @click='close'>×</div>
       </div>
   </div> 

2、给vue容器里面的表格及编辑框添加样式

<style>
        table{
            border-collapse: collapse;
        }
        th,td{
            padding: 10px;
            border: 1px solid black;
            text-align: center;
        }
        #edit{
            width: 300px;
            height: 230px;
            border: 1px solid #ccc;
            padding: 20px;
            position: fixed;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            margin: auto;
        }
        #edit .close{
            width: 30px;
            height: 30px;
            line-height: 30px;
            background-color: brown;
            color: white;
            font-size: 20px;
            border-radius: 50%;
            position: absolute;
            top: 10px;
            right: 10px;
            text-align: center;
            cursor: pointer;
        }
    </style>

3、引入vue

 <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.js"></script>

4、创建一个vue对象--学生对象

<script>
       new Vue({
           el:'#app',
           data:{
               students:[
                   {
                       no:'1001',
                       name:'张华',
                       age:23,
                       sex:'男'
                   },
                   {
                       no:'1002',
                       name:'陈烨',
                       age:22,
                       sex:'男'
                   },
                   {
                       no:'1003',
                       name:'刘薇',
                       age:23,
                       sex:'女'
                   },
               ],
               //是否显示编辑窗口
               showEdit:false,
               isAdd:true,
               //学生对象
               student:{
                   no:'',
                   name:'',
                   age:0,
                   sex:''
               }
           },

5、方法--添加学生对象

  methods:{
               //添加方法
                   addStudent(){
                       //将表单数据展开后，返回一个新的对象
                       let stu = {...this.student}
                       //将学生对象添加到学生数组中
                       this.students.push(stu)
                       //调用清空表单数据的方法
                       this.clear()
                   },

6、方法--清空表单数据

 //清空表单数据的方法
                   clear(){
                       this.student = {
                           no:'',
                           name:'',
                           age:0,
                           sex:''
                       }
                   },

7、方法--关闭编辑窗口

 //关闭编辑窗口
                   close(){
                       this.showEdit = false
                       this.isAdd = true
                       this.clear()
                   },

8、方法--根据学号查询学生对象

 //根据学号查询学生对象
                   getOne(no){
                       //打开编辑窗口
                       this.showEdit = true
                       //编辑窗口是修改状态
                       this.isAdd = false
                       //根据学号查询学生对象
                       let stu = this.students.find(s=>s.no===no)
                       this.student = {...stu}
                   },

9、方法--修改学生信息

//修改学生信息
                   updateStudent(){
                       //根据学号，找到原始数组中指定的学生对象
                       let stu = this.students.find(s=>s.no===this.student.no)
                       //修改数组里面学生对象的属性
                       stu.name = this.student.name
                       stu.age = this.student.age
                       stu.sex = this.student.sex
                   },

10、方法--删除学生信息

  //删除学生
                   delStudent(index){
                       if(confirm('确定删除吗？')){
                           this.students.splice(index,1)
                       }
                   }

二、vue的生命周期

1、创建一个vue容器

 <div id="app">
        <h2 id="name">{{name}}</h2>
        <h2 id="age">{{age}}</h2> 
        <div>
            <button @click='name="李四"'>修改姓名</button>
            <button @click='age=33'>修改年龄</button>
            <button @click='destroy'>不过了</button>
        </div>
    </div>

2、引入vue

<script src="../js/Vue.js"></script>

3、创建一个vue对象

 Vue.config.productionTip = false
        let vm = new Vue({
            // //指定挂载的容器
            // el:'#app',
            // //指定模板（如果有模板，vue会渲染整个模板，如果没有模板，vue会将el里面的所有内容当成模板使用）
            // template:'<div><h2>{{name}}</h2><h2>{{age}}</h2></div>',
            //数据
            data:{
                name:'张三',
                age:22
            },
            methods: {
                destroy(){
                    //调用销毁当前vue实例的方法
                    //注意：销毁后，当前vue实例对象还在，只是该对象不能在重新挂载页面
                    this.$destroy()
                }
            },

4、vue生命周期函数

4.1、beforeCreate（）--创建之前（数据初始化之前）

 beforeCreate() {
                console.log('---------beforeCreate-------------')
                //这个生命周期函数，基本上不用，除非要设置Vue实例的内容
                this.__proto__.fn = function(){
                    alert('你好！')
                }
                //vue实例，已经创建完成
                console.log(this);
                //Vue实例身上的数据还没有初始化完成
                console.log(this.name+' '+this.age);
            },

4.2、created()--创建完成（数据初始化完成）【常用】

 created() {
                console.log('---------created-------------')
                //这个生命周期函数，通常用于初始化vue管理的数据,比如：发送Ajax请求会放在这里。 
                console.log(this);
                console.log(this.name+' '+this.age);
            },

4.3、beforeMount()--挂载之前（模板已经成功渲染，但是还没有将内容挂载到页面中）

 //挂载之前（模板已经成功渲染，但是还没有将内容挂载到页面中）
            beforeMount() {
                console.log('---------beforeMount-------------')
                //这个生命周期函数，基本上不用
                console.log(this.$el);
                document.querySelector('#name').innerHTML = '世界'
            },

4.4、mounted（）--挂载完成（模板已经成功渲染，并将内容挂载到页面中）【常用】

 //常用
            //挂载完成（模板已经成功渲染，并且将内容挂载到页面中）
            mounted() {
                console.log('---------mounted-------------')
                //这个生命周期函数，通常用于对DOM的重新改动
                console.log(this.$el);
                document.querySelector('#name').innerHTML = '真好'
            },

4.5、beforeUpdate（）--修改之前（数据已经改了，但是还没有重新挂载页面）

 //修改之前（数据已经改了，只是还没有重新挂载页面）
            beforeUpdate() {
                console.log('---------beforeUpdate-------------')
                console.log(this.name+' '+this.age);
                console.log(this.$el);
            },

4.6、updated（）--修改完成（数据已经改了，页面也已经重新挂载）

        //修改完成（数据已经改了，页面也已经重新挂载）
            updated() {
                console.log('---------updated-------------')
                console.log(this.name+' '+this.age);
                console.log(this.$el);
            },

4.7、beforeDestroy（）--销毁之前（）【常用】

       //常用
            //销毁之前（）
            beforeDestroy() {
                console.log('---------beforeDestroy-------------')
                //这个生命周期函数，会用的多一些
                console.log(this);
                //对数据做任何的修改，都不会重新渲染到页面
                this.name = '王五'
            },

4.8、destroyed()--销毁完成（）

 //销毁完成（）
            destroyed() {
                console.log('---------destroyed-------------')
                //这个生命周期函数，几乎不用
                console.log(this);
                //对数据做任何的修改，都不会重新渲染到页面
                this.name = '王五'
            },

5、$mount方法--手动挂载容器

 setTimeout(() => {
            //通过vue实例的$mount方法，手动挂载容器
            //公共el选项指定挂载容器，当模板渲染成功后，会离开挂载页面
            //$mount方法的好处是，可以自行选择挂载的时机
            vm.$mount('#app')
        }, 1000);

三、轮播图练习

1、创建vue容器

 <div id="app" @mouseenter='mouseenter' @mouseleave='mouseleave'>
        <img :src="imgs[showActive]" alt="">
        <div class="left" @click='left'>&lt;</div>
        <div class="right" @click='right'>&gt;</div>
        <button @click='destroy'>停止播放</button>
    </div>

2、给容器添加样式

 <style>
        #app {
            position: relative;
            width: 500px;
        }

        img {
            width: 100%;
        }

        .left {
            width: 40px;
            height: 40px;
            line-height: 40px;
            color: white;
            background-color: rgba(0, 0, 0, 0.507);
            font-size: 30px;
            text-align: center;
            position: absolute;
            top: 0;
            bottom: 0;
            left: 10px;
            margin: auto 0;
        }

        .right {
            width: 40px;
            height: 40px;
            line-height: 40px;
            color: white;
            background-color: rgba(0, 0, 0, 0.507);
            font-size: 30px;
            text-align: center;
            position: absolute;
            top: 0;
            bottom: 0;
            right: 10px;
            margin: auto 0;
        }
    </style>

3、引入vue

<script src="../js/Vue.js"></script>

4、创建vue对象

 Vue.config.productionTip = false
        new Vue({
            //定义定时器
            timer: null,
            el: "#app",
            data: {
                //显示的下标
                showActive: 0,
                //图片数据
                imgs: ['https://img.alicdn.com/imgextra/i2/6000000006243/O1CN01EMp2wT1vzLMEZoBhU_!!6000000006243-0-octopus.jpg',
                    'https://gtms01.alicdn.com/tps/i1/TB1r4h8JXXXXXXoXXXXvKyzTVXX-520-280.jpg',
                    'https://img.alicdn.com/imgextra/i3/6000000004843/O1CN01MBBsqD1le8rhmNEJs_!!6000000004843-0-octopus.jpg',
                    'https://img.alicdn.com/imgextra/i2/6000000000993/O1CN01WFzF7N1JCq0y2vNPd_!!6000000000993-0-octopus.jpg',
                    'https://gtms02.alicdn.com/tps/i2/TB10vPXKpXXXXacXXXXvKyzTVXX-520-280.jpg'
                ]
            },

5、给vue对象添加方法

5.1、点击向左箭头图片往前滑动

  methods: {
                left() {
                    this.showActive--
                    //如果下标越界，重新从0开始
                    if (this.showActive < 0) {
                        this.showActive = 4
                    }
                },

5.2、点击向右箭头图片向后滑动

 right() {
                    this.showActive++
                    if (this.showActive >= 5) {
                        this.showActive = 0
                    }
                },

5.3、鼠标经过图片时图片停止滑动

 mouseenter() {
                    clearInterval(this.timer)
                },

5.4、鼠标离开时图片继续滑动

 mouseleave() {
                    this.run()
                },

5.5、打开页面图片每一秒滑动一次

 run() {
                    this.timer = setInterval(() => {
                        this.showActive++
                        //如果下标越界，查询从0开始
                        if (this.showActive >= 5) {
                            this.showActive = 0
                        }
                    }, 1000)
                },

5.6、点击停止按钮图片停止滑动

 destroy() {
                    this.$destroy()
                }

6、使用生命周期函数来实现打开页面图片滚动的效果

//生命周期函数（表示页面挂载完成）
            mounted() {
                //开启定时器
                this.run()
            },

7、在生命周期函数中，清除定时器

  //在这个生命周期函数中，清除定时器
            beforeDestroy() {
                clearInterval(this.timer)
            },