首页 > 其他分享 >vue生命周期,vue的购物车案例

vue生命周期,vue的购物车案例

时间:2022-10-26 19:45:25浏览次数:48  
标签:el 生命周期 console log Vue 购物车 vue data

表单控制

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>

购物车案例

# python中只有基于迭代的循环,没有基于索引的循环
# js,java,go中有基于迭代和索引的两种
# 补充:js中for 循环
	1 for(i=0;i<checkGroup.length;i++)     # 基于索引的循环
    2 for (i in checkGroup)                # 基于迭代的循环
    3 for (i of checkGroup)                # es6中 循环
    4 数组内置方法.forEach()
    5 jquery  $.each 循环
    
    
    
 # 代码演示
    // 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)
    // })

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>

 

标签:el,生命周期,console,log,Vue,购物车,vue,data
From: https://www.cnblogs.com/scx-xiaochun/p/16829781.html

相关文章

  • 【Vue】动态方法调用
     JS的动态方法调用是通过eval函数实现但是在Vue中是通过组件的$options.methods实现,写这篇的随笔的原因是因为今天为了封装面包屑组件,花了一下午折腾这个动态方法调用......
  • Vue生命周期
    Vue生命周期Vue的四个过程1.实例创建,数据放在实例中2.挂载模板:el---->div3.改页面,改变量,都会互相影响4.销毁实例四个过程对应的八个函数钩子函数作用bef......
  • Vue项目中,html高度无法撑开的解决方法
    在src目录中新建CSS目录,并在此目录下创建global.css文件,填写如下内容:  随后在main.js中引入该CSS文件。如下: ......
  • vue-js中键盘事件编码
    js里面的键盘事件经常用到的:keyCode8=BackSpaceBackSpacekeyCode9=TabTabkeyCode12=ClearkeyCode13=EnterkeyCode16=Shift_LkeyCode17=Control_Lkey......
  • vue2与vue3的区别
    1、vue使用的是object.defineProperty,vue3使用的是proxy+reflect2、Object.defineProperty(vue2)一次只能监视一个属性,如果要监视一个对象,那么需要遍历这个对象但proxy+......
  • vue-公共组件的注册
    注册公共组件,在每个需要的页面直接输入文件名(<g-table/>)即可引用该组件步骤:1.新建components/global文件夹,以及components/global/g-table.vue文件。2.新建unti......
  • vue.js+canvas实现随机验证码
    登录注册啥的,不需要下载插件,上图:<template><divclass="about"><p>当前验证码:{{codeStr}}</p><canvasid="canvas"width="100"height="43"@click="cr......
  • Vue学习笔记之Vue判断字符串(或数组)中是否包含某个元素
    0x00概述Vue判断字符串中是否包含某个字符串,有如下方法。 0x01includes方法(数组,字符串都可以)varstr=“HelloWorld!”;if(str.includes(“World”)){} ......
  • VUE CLI2 安装配置less,less-loader。webpack版本5
    先查看自己的webpack版本,我的是5.74。在node_modules/webpack里面查看   我尝试安装过7版本less-loader,没报错,但是当我导入antd的less文件时开始报错,于是卸载后安装......
  • Vue3笔记(二)了解组合式API的应用与方法
    一、组合式API(CompositionAPI)的介绍官方文档: https://v3.cn.vuejs.org/guide/composition-api-introduction.html组合式API(CompositionAPI)是一系列API的集合,......