今日内容 Vue生命周期

标签：count el 生命周期 console log Vue 内容 data name

表单控制

input：checkbox（单选，多选），radio（单选）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
    <h1>表单控制</h1>
    <p>用户名：<input type="text" v-model="name"></p>
    <p>密码：<input type="text" v-model="password"></p>
    <p><input type="checkbox" v-model="isRemember"> 记住密码</p>
    <p>
        <input type="radio" v-model="gender" value="1"> 男
        <input type="radio" v-model="gender" value="2"> 女
        <input type="radio" v-model="gender" value="0"> 未知
    </p>
    <p>
        爱好：
        <input type="checkbox" value="篮球" v-model="hobby"> 篮球
        <input type="checkbox" value="足球" v-model="hobby"> 足球
        <input type="checkbox" value="乒乓球" v-model="hobby"> 乒乓球
        <input type="checkbox" value="橄榄球" v-model="hobby"> 橄榄球
    </p>
    {{hobby}}

</div>
</body>

<script>

    new Vue({
        el: '#app',
        data: {
            name: '',
            password: '',
            isRemember: false,  // checkbox单选，使用布尔类型
            gender: '',  // radio单选，使用字符串
            hobby: [],  // checkbox 多选使用数组
        },
    })
</script>
</html>

购物车案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
</head>
<body>
<div id="app">
    <div class="container-fluid">
        <h1 class="text-center">购物车</h1>
        <div class="row">
            <div class="col-md-6 col-md-offset-3">
                <table class="table table-bordered">
                    <thead>
                    <tr>
                        <th>商品id</th>
                        <th>商品名字</th>
                        <th>商品价格</th>
                        <th>商品数量</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr v-for="good in goodList">
                        <th>{{good.id}}</th>
                        <td>{{good.name}}</td>
                        <td>{{good.price}}</td>
                        <td>{{good.count}}</td>
                        <td><input type="checkbox" v-model="checkGroup" :value="good"></td>
                    </tr>

                    </tbody>
                </table>
                <hr>
                选中的商品是：{{checkGroup}}
                <br>
                总价格是：{{getPrice()}}

            </div>
        </div>

    </div>

</div>
</body>

<script>

    new Vue({
        el: '#app',
        data: {
            goodList: [
                {id: 1, name: '小汽车', price: 1200000, count: 1},
                {id: 2, name: '钢笔', price: 12, count: 34},
                {id: 3, name: '鸡蛋', price: 2, count: 4},
                {id: 4, name: '面包', price: 9, count: 10},
            ],
            checkGroup: []


        },
        methods: {
            getPrice() {
                // 取出checkGroup中得商品数量和商品价格相乘 做累加
                // js 中 for 循环
                var total = 0
                for (item of this.checkGroup) {
                    total += item.price * item.count
                }
                return total
            }
        }
    })


    var goodList = [
        {id: 1, name: '小汽车', price: 1200000, count: 1},
        {id: 2, name: '钢笔', price: 12, count: 34},
        {id: 3, name: '鸡蛋', price: 2, count: 4},
        {id: 4, name: '面包', price: 9, count: 10},
    ]
    // 1 方式一：js的基于索引的循环
    // for (var i = 0; i< goodList.length; i++) {
    //     console.log(goodList[i])
    // }
    // 2 方式二：基于迭代的循环
    // for (i in goodList){
    //     console.log(goodList[i])
    // }

    // 3 方式三：of 循环，基于迭代的
    //   for (i of goodList){
    //     console.log(i)
    // }
    // 4 方式四：数组的循环方法
    // goodList.forEach(item => {
    //     console.log('---', item)
    // })

    // 5 jquery:引入
    // $.each(goodList, (i, v) => {
    //     console.log(v)
    // })

</script>
</html>

v-model进阶(了解)

lazy：等待input框的数据绑定时区焦点之后再变化
number：数字开头，只保留数字，后面的字母不保留；字母开头，都保留
trim：去除首位的空格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
    <h1>v-model进阶</h1>
    <input type="text" v-model.lazy="name1"> ---->{{name1}}
    <br>
    <input type="text" v-model.number="name2"> ---->{{name2}}
        <br>
    <input type="text" v-model.trim="name3"> ---->{{name3}}


</div>
</body>

<script>

    new Vue({
        el: '#app',
        data: {
            name1: '',
            name2: '',
            name3: '',
        },

    })
</script>
</html>

vue生命周期

var vm=new Vue实例()

1 实例创建，数据放到实例中
2 挂在模板：el---》div
3 改页面，改变量，都会相互影响 update
4 销毁实例

4个过程，对应八个函数，依次执行（到某个过程就会执行某个函数）

beforeCreate 创建Vue实例之前调用，data，el都没有
created 创建Vue实例成功后调用（可以在此处发送异步请求后端数据），data有了，el没有的
beforeMount 渲染DOM之前调用，data有了，el没有
mounted 渲染DOM之后调用
beforeUpdate 重新渲染之前调用（数据更新等操作时，控制DOM重新渲染）
updated 重新渲染完成之后调用
beforeDestroy 销毁之前调用
destroyed 销毁之后调用

5 钩子函数（hook） AOP的体现：面向切面编程--》装饰器实现aop

6 vm实例：看不到它销毁组件vc

7 组件：组件化开发

8 学习生命周期重点掌握的

1 组件向后端发送请求，获取数据，应该放在 created 写，此时data已经有数据了
2 destroyed做一些资源清理性的工作

9 小案例：组件创建，开启定时器，不停的打印hello，在destroyed中对定时器进行销毁

补充：js 定时任务和延时任务

// 延时任务
    setTimeout(()=>{
       console.log('3s后执行我')
    },3000)
    #定时任务
   setInterval(()=>{
     console.log('hello')
   },3000)

10 什么场景下用定时任务？

1 实时跟后端交互基于http+定时任务（websocket协议：服务端主动推送消息，手机app的消息推送）
2 秒杀场景：先提交秒杀请求，每隔3s，查询是否秒到

代码操作：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
    <h1>vue声明周期</h1>
    <button @click="handleShow">点我组件显示和消失</button>
    <hr>
    <child v-if="show"></child>
    <hr>

</div>


</body>

<script>
    // 定义一个全局组件
    Vue.component('child', {
        template: `
          <div>
          <button>后退</button>
          {{ title }}
          <button @click="handleClick">前进</button>
          </div>`,
        data() {
            return {
                title: '好看的首页',
                t:''
            }
        },
        methods: {
            handleClick() {
                // alert('前进')
                this.title = 'lqz'

            }
        },
        beforeCreate() {
            console.log('beforeCreate')
            console.log(this.$data)
            console.log(this.$el)
        },
        created() {
            console.log('created')
            console.log(this.$data)
            console.log(this.$el)
            // 开启定时器，每隔3s，打印hello
            this.t=setInterval(()=>{
                console.log('hello')
            },3000)
        },
        beforeMount() {
            console.log('beforeMount')
            console.log(this.$data)
            console.log(this.$el)
        },
        mounted() {
            console.log('mounted')
            console.log(this.$data)
            console.log(this.$el)
        },
        beforeUpdate() {
            console.log('beforeUpdate')
        },
        updated() {
            console.log('updated')
        },
        beforeDestroy() {
            console.log('当前状态：beforeDestroy')
        },
        destroyed() {
            console.log('当前状态：destroyed')
            // 销毁定时器
            clearInterval(this.t)
            this.t=null

        },
    })

    var vm = new Vue({
        el: '#app',
        data: {
            show: true
        },
        methods: {
            handleShow() {
                this.show = !this.show
            }
        }

    })
</script>
</html>

标签：count,el,生命周期,console,log,Vue,内容,data,name
From： https://www.cnblogs.com/tai-yang77/p/16829776.html

表单控制

购物车案例

v-model进阶(了解)

vue生命周期

var vm=new Vue实例()

4个过程，对应八个函数，依次执行（到某个过程就会执行某个函数）

5 钩子函数（hook） AOP的体现：面向切面编程--》装饰器实现aop

6 vm实例：看不到它销毁组件vc

7 组件：组件化开发

8 学习生命周期重点掌握的

9 小案例：组件创建，开启定时器，不停的打印hello，在destroyed中对定时器进行销毁

10 什么场景下用定时任务？

代码操作：

相关文章

赞助商

阅读排行

今日内容 Vue生命周期

表单控制

购物车案例

v-model进阶(了解)

vue生命周期

var vm=new Vue实例()

4个过程，对应八个函数，依次执行（到某个过程就会执行某个函数）

5 钩子函数（hook） AOP的体现：面向切面编程--》装饰器实现aop

6 vm实例：看不到它销毁 组件vc

7 组件：组件化开发

8 学习生命周期重点掌握的

9 小案例：组件创建，开启定时器，不停的打印hello，在destroyed中对定时器进行销毁

10 什么场景下用定时任务？

代码操作：

相关文章

赞助商

阅读排行

6 vm实例：看不到它销毁组件vc