12_尚硅谷_Vue_表单数据的自动收集&13_尚硅谷_Vue_生命周期

最新推荐文章于 2024-05-29 10:48:54 发布
最新推荐文章于 2024-05-29 10:48:54 发布
阅读量295 收藏
点赞数
分类专栏： 前端

1、表单数据的自动收集

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script>
</head>
<body>
<div id="demo">
    <!--@submit.prevent禁用表单自动提交-->
    <form action="/xxx" @submit.prevent="handleSubmit">
        <span>用户名: </span>
        <input type="text" v-model="username"><br>

        <span>密码: </span>
        <input type="password" v-model="pwd"><br>

        <span>性别: </span>
        <input type="radio" id="female" value="女" v-model="sex">
        <!--Label标签要绑定的HTML元素,你点击这个标签的时候,所绑定的元素将获取焦点。-->
        <label for="female">女</label>
        <input type="radio" id="male" value="男" v-model="se">
        <label for="male">男</label><br>

        <span>爱好: </span>
        <input type="checkbox" id="basket" value="basket" v-model="likes">
        <label for="basket">篮球</label>
        <input type="checkbox" id="foot" value="foot" v-model="likes">
        <label for="foot">足球</label>
        <input type="checkbox" id="pingpang" value="pingpang" v-model="likes">
        <label for="pingpang">乒乓</label><br>

        <span>城市: </span>
        <select v-model="cityId">
            <option value="">未选择</option>
            <!--遍历填充下拉框-->
            <option :value="city.id" v-for="(city, index) in allCitys" :key="city.id">{{city.name}}</option>
        </select><br>
        <span>介绍: </span>
        <textarea rows="10" v-model="info"></textarea><br><br>

        <input type="submit" value="注册">
    </form>
</div>
<script>
    new Vue({
        el:'#demo',
        data:{
            username:'小兵兵',
            pwd:'000000',
            sex:'男',
            likes: ['foot'],
            allCitys: [{id: 1, name: 'BJ'}, {id: 2, name: 'SS'}, {id: 3, name: 'SZ'}],
            cityId: '2',
            info: ''
        },
        methods:{
            log(){
                console.log.apply(console,arguments)
            },

            /**
             * 收集表单数据信息
             */
            handleSubmit(){
                this.$options.methods.log("this==========>",this)
                //调用log方法
                this.$options.methods.log("username==========>",this.username)
                this.$options.methods.log("passwd==========>",this.pwd)
                alert('提交注册的ajax请求')
            }
        }


    })
</script>
</body>
</html>

2、生命周期

测试一：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script>
</head>
<body>
<div id="test">
    <button @click="destroyVue">destory vue</button>
    <!--显示与隐藏-->
    <p v-if="isShow">尚硅谷IT教育</p>
</div>

<script>
    //创建一个Vue实例
    new Vue({
        el: '#test',
        data: {
            isShow: true
        },
        mounted: function () {
            this.log("this===========>", this)

            /*
            此时的this是Window
            setInterval(function () {
                console.log('setInterval this==========>',this)
                this.log('setInterval this==========>', this) //会报错，log方法属于Vue实例的
            },1000)
            */

            //开启定时器
            this.intervalId=setInterval(() => {
                this.log('setInterval this==========>', this)
                //显示与隐藏
                this.isShow=!this.isShow
            }, 1000)
        },
        /**
         *执行生命周期销毁前的准备工作
         */
        beforeDestroy(){
            this.log('beforeDestroy==========>')
            //清除定时器任务
            clearInterval(this.intervalId)
        },
        methods: {
            log() {
                console.log.apply(console, arguments)
            },
            destroyVue(){
                //执行生命周期销毁工作
                this.$destroy()
            }
        },

    })
</script>
</body>
</html>

测试二：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script>
</head>
<body>
<!--
1. vue对象的生命周期
  1). 初始化显示
    * beforeCreate()
    * created()
    * beforeMount()
    * mounted()
  2). 更新状态
    * beforeUpdate()
    * updated()
  3). 销毁vue实例: vm.$destory()
    * beforeDestory()
    * destoryed()
2. 常用的生命周期方法
  created()/mounted(): 发送ajax请求, 启动定时器等异步任务
  beforeDestory(): 做收尾工作, 如: 清除定时器
-->

<div id="test">
    <button @click="destroyVue">destory vue</button>
    <p v-if="isShow">尚硅谷IT教育</p>
</div>

<script>
    new Vue({
        el: '#test',
        data: {
            isShow: true

        },
        beforeCreate() {
            //this.log('this=========>',this) 报错
            console.log('beforeCreate===========>')

        },
        created() {
            this.log('created=============>')
        },
        beforeMount() {
            this.log('beforeMount===========>')
        },
        mounted() {
            this.log('mounted============>')
            this.intervalId = setInterval(() => {
                this.log('setInterval==========>')
                this.isShow = !this.isShow
            }, 1000)
        },

        beforeUpdate() {
            this.log('beforeUpdate============>')
        },
        updated() {
            this.log('updated============>')
        },
        beforeDestroy() {
            this.log('beforeDestroy==========>')
            // 执行收尾的工作
            clearInterval(this.intervalId)

        },
        methods: {
            //自定义log函数
            log() {
                console.log.apply(console, arguments)
            },
            //定义函数2
            destroyVue: function () {
                this.log('destroyVue===========>')
                //执行生命周期销毁工作
                this.$destroy()
            }
        }
    })
</script>
</body>
</html>
qq_34983808
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue收集表单数据（尚硅谷笔记）
m0_48283799的博客
05-07 145
<body> <!-- 收集表单数据： 若：<input type="text"/> 则v-model收集的是value值，用户输入的就是value值 若：<input type="radio"/> 则v-model收集的是value值，且要给标签配置value值 若：<input type="checkbox"/> 1、没.
最新尚硅谷vue系列笔记
02-11
组件可以有自己的模板、数据、方法和生命周期钩子，可以嵌套使用，实现模块化的代码组织。 3. **指令系统**：Vue提供了一系列预定义的指令，如`v-if`（条件渲染）、`v-for`（循环遍历）、`v-on`（事件处理）等，...
vue的生命周期
qq_37133554的博客
07-05 91
1. vue对象的生命周期 1). 初始化显示 * beforeCreate() * created() * beforeMount() * mounted() 2). 更新状态 * beforeUpdate() * updated() 3). 销毁vue * beforeDestory() * destoryed() 2. 常用的生命周期方法 created()/mounted(): 发送ajax请求, 启动定时器等异步任务 beforeDestory(): 做收尾工作, 如: 清除定时器 实例: vm.
vue3快速上手笔记(尚硅谷)
最新发布
weixin_41844140的博客
05-29 1195
修改名字
尚硅谷Vue学习——生命周期
小缘同学的博客
03-18 648
生命周期： 又名：生命周期回调函数、生命周期函数、生命周期钩子。 含义：Vue在关键时期帮我们调用的一些特殊名称的函数。 生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的。 生命周期函数中的this指向是vm或组件实例对象。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-e...
尚硅谷Vue学习——生命周期总结
小缘同学的博客
03-21 722
常见生命周期钩子： mounted：发送ajax请求、启动定时器、绑定自定义事件、订阅消息等【初始化操作】。 beforeDestroy：清除定时器，解绑在定义事件、取消订阅消息等【收尾工作】。 关于销毁Vue实例： 销毁后借助Vue开发者工具看不到任何信息。 销毁后自定义事件会失效，但原生DOM依然有效。 一般不会在beforeDestroy操作数据，因为此时操作了数据也不会再触发更新流程了。 总结：生命周期钩子共有八个，包括beforeCreate、c...
Vue技术—收集表单数据
u013140948的博客
12-27 330
<!-- 收集表单数据： 若：<input type="text"/>，则v-model收集的是value值，用户输入的就是value值。 若：<input type="radio"/>,则v-model收集的是value值，且要给标签配置value值。 若：<input type="checkbo"/> 1.没有配置input的value属性，那么收集的就是checked（勾选or未勾选，是布尔值） 2.配置input的value属性：
test_vue教程_DEMO_vue教程入门_vue_
10-01
Vue的特点包括虚拟DOM、响应式数据绑定、组件系统和生命周期管理等。 2. **安装Vue** 要开始使用Vue，首先可以通过CDN链接在HTML中引入Vue.js，或者通过npm在项目中安装。对于初学者，可以使用Vue的官方在线编译器...
vue-xue_javascript_xuevue_join28a_vue_
09-30
"vue-xue_javascript_xuevue_join28a_vue_"这个标题可能是某次关于Vue.js学习或培训的资料集合，主要关注Vue的双向数据绑定、计算属性以及生命周期等方面。下面我们将深入探讨这些知识点。 首先，我们来看双向数据...
vue_vue_
10-04
Vue组件有自己的生命周期，从创建、挂载、更新到销毁。开发者可以在特定的生命周期钩子函数中执行逻辑，如`beforeCreate`、`created`、`beforeMount`、`mounted`等。 6. 计算属性与侦听器： - 计算属性（`...
VUI.zip_vue_vue的ui组件
09-22
2. **脚本（Script）**：在这里，你可以定义组件的选项，如data、methods、computed、生命周期钩子函数等。`data`属性必须是一个返回初始数据对象的函数，以确保每个组件实例都有自己的数据副本。`methods`包含组件...
vue2生命周期笔记（尚硅谷张天禹老师）
热爱编程的你我
05-15 1266
vue2生命周期详解（尚硅谷张天禹老师）
03.VUE详细整理（三）--VUE指令与生命周期-尚硅谷最新课程
a2274001782的博客
12-09 296
1. 常用内置指令 01.总览 我们学过的指令： v-bind : 单向绑定解析表达式, 可简写为 :xxx v-model : 双向数据绑定 v-for : 遍历数组/对象/字符串 v-on : 绑定事件监听, 可简写为@ v-if : 条件渲染（动态控制节点是否存存在） v-else : 条件渲染（动态控制节点是否存存在） v-show : 条件渲染 (动态控制节点是否展示) v-text指令： 1.作用：向其所在的节点中渲染文本内容，放入标签则
VUE——收集表单数据
王王仙贝的博客
04-06 895
若：<input type="text">，则v-model收集的是value值。 若：<input type="radio">，则v-model收集的是value值，且要给标签配置value值。 若：<input type="checkbox"> 1.没有配置input的value属性，那么收集的就是checkbox（勾选or未勾选，是布尔值） 2.配置input的value属性： （1）v-model的初始值是非数组，那么收集的就是checkbox（勾选or未勾选，是
vue 收集表单数据
MCCLS的博客
07-16 573
要点： 这样可以进行把两个控件进行绑定,实现点击账号文字的同时,也会选中text文本框 v-model 默认为value text框默认输入的就是value 而radio则要加value 表示value为对应值 要一开始就默认选择一个则设置一个初始值 因为model为双向绑定 在checkbox中要默认不设置value的话,value则为,复选框的checked 为什么勾选一个就会同时勾选其他三个： 原因：因...
Vue收集表单数据
XunLin233的博客
10-17 286
一般常用的text类型输入框和password类型使用v-model进行数据双向绑定即可，但是要注意的是，v-model绑定的对象是value。其完整写法是v-model:value="account"
Vue 收集表单数据
Errol's Blog
03-25 948
Vue 表单手机数据
Vue面试深度解析：数据绑定、生命周期与全局方法
"Vue.js面试题解析" Vue.js是一个流行的前端JavaScript...以上就是对一些Vue.js面试题的详细解答，涵盖了数据绑定、组件交互、生命周期和扩展等关键知识点。理解并熟练掌握这些概念对于成为Vue.js开发专家至关重要。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值