Vue基础---表单数据绑定及生命周期

重点

1. 表单元素数据双向绑定
2. vue生命周期及相关钩子函数

表单数据绑定

 - 定义变量定义为一个json,key和后端要求的字段保持一致
 - 所有的表单元素通过v-model绑定数据
 - 单选框 准备value

1. 文本与文本框域数据绑定
   表单中文本包括文本框和文本域，都通过v-model进行数据的双向绑定

<div id="app">
	<input type="text" v-model="msg">
	<p>这是文本框内容:{{msg}}p>
	<textarea v-model="content" cols="20" rows="4" >textarea>
	<span>这是文本域内容：{{content}}span>
div>
<script>
new Vue({
	el:"#app",
	data:{
		msg:"hello world",
		content:"this is textContent"
})
script>

2. 复选框
   复选框单个勾选，选中时check时ture，取消是false；多个勾选，被勾选的选项会自动绑定到指定变量名队对应的值上

	<div>爱好：
    	<input type="checkbox" v-model="user.hobbies" value="sing">唱歌
        <input type="checkbox" v-model="user.hobbies" value="dancing">跳舞
        <input type="checkbox" v-model="user.hobbies" value="codding">写代码
    div>
    <div>
        <input type="checkbox" v-model="user.isAgree">我同意
    div>
    <script>
        new Vue({
            el: "#app",//挂载点
            data: {//属性
                user: {
            		hobbies: ['sing','dancing'],
                    isAgree: true
                }
            }
        })
    script>

3. 单选框

	<div>性别：
    	<input type="radio" name="sex" value="0" v-model="user.sex"> 男
        <input type="radio" name="sex" value="1" v-model="user.sex"> 女
    div>
    <script>
        new Vue({
            el: "#app",//挂载点
            data: {//属性
                user: {
                    sex: "0",
                }
            }
        })
    script>

4. 选择列表

	<div>专业：
	    <select v-model="user.job">
		    <option value="web">web工程师option>
		    <option value="php">php工程师option>
		    <option value="java">java工程师option>
	    select>
    div>
   
	   
    <div> 社团：
	    <select multiple v-model="user.org">
	        <option :value="1">篮球option>
	        <option :value="2">足球option>
	        <option :value="3">排球option>
	    select>
    div> 
    <script>
        new Vue({
            el: "#app",//挂载点
            data: {//属性
                user: {
                    job: "web",
                    org: [1,2,3]
                }
            }
        })
    script>

生命周期(vue重点）

vue实例被创建之前都有一个初始化过程，一个完整的生命周期。从开始的创建、初始化数据、编译模板、挂载DOM、渲染、更新、卸载等一系列过程被称为生命周期，同时在整个过程中回运行一些生命周期的钩子函数，用户可以在不同阶段添加自己的代码

Vue生命周期的八个阶段：

	beforeCreate：  创建之前
	created：       创建完成
	beforeMount：   挂载之前
	mounted：       挂载完成
	beforeUpdate：  更新之前
	updated：       更新完成
	beforeDestroy： 卸载之前
	destoryed：     卸载完成

Vue官方称这些为钩子函数，钩子函数就是在某阶段给你一个做某些处理的机会

	beforeCreate：  创建之前   el,data,methods都为undefined
	created：       创建完成   data,methods初始化完成，el为undefined
	beforeMount：   挂载之前  el为挂载标签，但页面{{}}还在
	mounted：       挂载完成  挂载完成，页面完成
	beforeUpdate：  更新之前  不是数据变化之前，而是数据已经变了，页面重新渲染之前
	updated：       更新完成
	beforeDestroy： 卸载之前
	destoryed：     卸载完成

生命周期：

<div id="app">
        <input type="text" v-model="msg">
        <h1>{{msg}}h1>
    div>
    <button class="destory">销毁button>
    <button class="mount">挂载button>
    <script>
        var vue = new Vue({
            el:"#app",
            data(){
                return{
                    msg:"天道酬勤"
                }
            },
            //渲染期
            // 创建完成
            created(){
                console.log("-----------创建完成-------------");
                console.log(this.$el);
                console.log(this.$data);
            },
            // 创建之前
            beforeCreate(){
                console.log("-----------创建之前-------------");
                console.log(this.$el);
                console.log(this.$data);
            },
             // 挂载之前
             beforeMount(){
                console.log("-----------挂载之前-------------");
                console.log(this.$el);
                console.log(this.$data);
            },
            // 挂载完成
            beforeMount(){
                console.log("-----------挂载完成------------");
                console.log(this.$el);
                console.log(this.$data);
            },
            // 更新之前
            beforeUpdate(){
                console.log("-----------更新之前-------------");
                console.log(this.$el);
                console.log(this.$data);
            },
            // 更新完成
            updated(){
                console.log("-----------更新完成-------------");
                console.log(this.$el);
                console.log(this.$data);
            },
            // 销毁之前
            beforeDestory(){
                console.log("-----------销毁之前-------------");
                console.log(this.$el);
                console.log(this.$data);
            },
            // 销毁完成
            destroyed(){
                console.log("-----------销毁完成-------------");
                console.log(this.$el);
                console.log(this.$data);
            }
        })
        // vue.$mount调用会触发beforeMount函数，vue.$destroy()方法调用回触发beforeDestroy函数
        document.querySelector(".destory").onclick=function(){
            // 销毁vue实例
            vue.$destroy();
        }
        document.querySelector(".mount").onclick=function(){
            // 将vue实例挂载到指定标签上
            vue.$mount("#app");
        }
    script>
    
    

生命周期图：