vue入门4---表单输入的绑定、Vue实例生命周期

一、表单输入绑定

• 1. 使用v-model(双向数据绑定)自动收集数据
     text/textarea
     checkbox
     radio
     select

<div id="demo">
<!-- 点击按钮 @submit提交
 点击按钮 @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>性别radio: </span>
    <input type="radio" id="female" value="女" v-model="sex">
    <label for="female">女</label>
    <input type="radio" id="male" value="男" v-model="sex">
    <label for="male">男</label><br>
    <span>爱好checkbox: </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>城市select: </span>
    <select v-model="cityId">
      <option value="">未选择</option>
 <!--:value="city.id" 表达式；value="city.id"文本 -->
      <option :value="city.id" v-for="(city, index) in allCitys" :key="city.id">{{city.name}}</option>
    </select><br>
    <span>介绍textarea: </span>
    <textarea rows="10" v-model="info"></textarea><br><br>

    <input type="submit" value="注册">
  </form>
</div>
<script type="text/javascript">
  new Vue({
    el: '#demo',
    data: {
      username: '',
      pwd: '',
      sex: '男', // 默认显示  男 
      likes: ['foot'], // 默认显示  足球
      allCitys: [{id: 1, name: 'BJ'}, {id: 2, name: 'SS'}, {id: 3, name: 'SZ'}],
      cityId: '2', // 默认展示第2个城市
      info: ''
    },
    methods: {
      handleSubmit () {
        console.log(this.username, this.pwd, this.sex, this.likes, this.cityId, this.info)
        alert('提交注册的ajax请求')
      }
    }
  })
</script>

二、Vue实例生命周期：

1. vue对象的生命周期
   1). new vue()初始化显示

   *  beforeCreate()
   * created()
   * beforeMount()
   * mounted()

2). 更新状态

      this.xxx = value
    * beforeUpdate()
    * updated()

3). 销毁vue实例: vm.$destory()

    * beforeDestory()
    * destoryed()

2. 常用的生命周期方法
   created()/mounted(): 发送ajax请求, 启动定时器等异步任务
   beforeDestory(): 做收尾工作, 如: 清除定时器

   
   vue生命周期

<div id="test">
  <button @click="destroyVue">销毁vue</button>
  <p v-if="isShow">vue</p>
</div>
<script type="text/javascript">
  new Vue({
    el: '#test',
    data: {
      isShow: true
    },
// 初始化：执行一次
    beforeCreate() {
        console.log('beforeCreate()')
    },
    created() {
        console.log('created()')
    },
    berforeMount() {
        console.log('berforeMount()')
    },
     mounted () {
      // 执行异步任务
      // this.intervalld 全局的定时器
      this.intervalId = setInterval(() => {
        this.isShow = !this.isShow
      }, 1000)
    },
    // 更新
    beforeUpdate() {
        console.log('beforeUpdate()')
    },
    updated() {
        console.log('updated()')
    },
    // 销毁
    beforeDestroy() {
      console.log('beforeDestroy()');
      // 执行收尾的工作,清除定时器，否则内存溢出 
      clearInterval(this.intervalId);
    },
    destoryed() {
        console.log('destoryed()');
      }
    methods: {
      destroyVue () {
    // 销毁vm
        this.$destroy()
      }
    }
  })