VUE学习四自动获取提交的数据，生命周期

Posted 2021-03-09 wangchuang

<div id="demo">
  <form @submit.prevent="handleSubmit">
    <span>用户名:</span>
    <input type="text" v-model="user.username">
    <br>
    <span>密码:</span>
    <input type="password" v-model="user.pwd">
    <br>
    <span>性别:</span>
    <input type="radio" id="female" value="female" v-model="user.sex">
    <label for="female">女</label>
    <input type="radio" id="male" value="male" v-model="user.sex">
    <label for="male">男</label>
    <br>
    <span>爱好:</span>
    <input type="checkbox" id="basket" value="basketball" v-model="user.likes">
    <label for="basket">篮球</label>
    <input type="checkbox" id="foot" value="football" v-model="user.likes">
    <label for="foot">足球</label>
    <input type="checkbox" id="pingpang" value="pingpang" v-model="user.likes">
    <label for="pingpang">乒乓</label>
    <br>
    <span>城市:</span>
    <select v-model="user.cityId">
      <option value="">未选择</option>
      <option v-for="city in allCitys" :value="city.id">{{ city.name }}</option></select>
    <br>
    <span>介绍:</span>
    <textarea v-model="user.desc" rows="10"></textarea>
    <br>
    <br>
    <input type="submit" value="注册"></form>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">var vm = new Vue({
    el: ‘#demo‘,
    data: {
      user: {
        username: ‘‘,
        pwd: ‘‘,
        sex: ‘female‘,
        likes: [],
        cityId: ‘‘,
        desc: ‘‘,
      },
      allCitys: [{
        id: 1,
        name: ‘BJ‘
      },
      {
        id: 2,
        name: ‘SZ‘
      },
      {
        id: 4,
        name: ‘SH‘
      }],
    },
    methods: {
      handleSubmit(event) {
        alert(JSON.stringify(this.user))
      }
    }
  })</script>

<div>
  <button @click="destoryVue">destory vue</button>
  <p v-show="isShowing">{{msg}}</p></div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">var vue = new Vue({
    el: ‘div‘,
    data: {
      msg: ‘尚硅谷 IT 教育‘,
      isShowing: true,
      persons: []
    },
    beforeCreate() {
      console.log(‘beforeCreate() msg=‘ + this.msg)
    },
    created() {
      console.log(‘created() msg=‘ + this.msg) this.intervalId = setInterval(() = >{
        console.log(‘-----‘) this.isShowing = !this.isShowing
      },
      1000)
    },
    beforeMount() {
      console.log(‘beforeMount() msg=‘ + this.msg)
    },
    mounted() {
      console.log(‘mounted() msg=‘ + this.msg)
    },
    beforeUpdate() {
      console.log(‘beforeUpdate isShowing=‘ + this.isShowing)
    },
    updated() {
      console.log(‘updated isShowing=‘ + this.isShowing)
    },
    beforeDestroy() {
      console.log(‘beforeDestroy() msg=‘ + this.msg) clearInterval(this.intervalId)
    },
    destroyed() {
      console.log(‘destroyed() msg=‘ + this.msg)
    },
    methods: {
      destoryVue() {
        vue.$destroy()
      }
    }
  })</script>