Vue系列（三）之 基础语法下篇【事件处理，表单综合案例，组件通信】

<div id="app">
      <button type="button" @click="clickMe">点我</button>
    </div>
    <script type="text/javascript">
      new Vue({
        el:"#app",
        data(){
          return {
            msg:'今天的不开心就到此为止吧！'
          }
        },
        methods:{
          clickMe(){
            alert(this.msg)
          }
        }
      })
    </script>

<!-- 阻止单击事件冒泡 -->
            <a v-on:click.stop="doThis"></a>
            <!-- 提交事件不再重载页面 -->
            <form v-on:submit.prevent="onSubmit"></form>
            <!-- 修饰符可以串联  -->
            <a v-on:click.stop.prevent="doThat"></a>
            <!-- 只有修饰符 -->
            <form v-on:submit.prevent></form>
            <!-- 添加事件侦听器时使用事件捕获模式 -->
            <div v-on:click.capture="doThis">...</div>
            <!-- 只当事件在该元素本身（而不是子元素）触发时触发回调 -->
            <div v-on:click.self="doThat">...</div>
            <!-- click 事件只能点击一次 -->
            <a v-on:click.once="doThis"></a>

<div id="app">
      姓名:<input name="name" v-model="name" /><br>
      密码:<input type="password" v-model="pwd" /><br>
      性别:<span v-for="s in sexList">
        <input type="radio" name="sex" v-model="sex" :value="s.id">{{s.name}}
      </span><br>
      爱好:<span v-for="h in hobbies">
        <input type="checkbox" name="myHobby" v-model="myHobby" :value="h.id">{{h.name}}
      </span><br>
      籍贯:<select name="myAddr" v-model="myAddr">
        <option v-for="a in address" :value="a.id">{{a.name}}</option>
      </select><br>
      个人简介:<textarea v-model="sign" cols="8" rows="5"></textarea><br>
      确认:<input type="checkbox" v-model="ok" /><br>
      <button v-show="ok" @click="dosubmit">提交</button>
    </div>
    <script type="text/javascript">
      new Vue({
        el:"#app",
        data(){
          return {
            name:'小灰灰',
            pwd:'123456',
            sex:1,
            sexList:[{
              name:'男',id:1
            },{
              name:'女',id:2
            },{
              name:'未知',id:3
            }],
            hobbies:[{
              name:'跑步',id:1
            },{
              name:'打游戏',id:2
            },{
              name:'唱歌',id:3
            },{
              name:'绘画',id:4
            }],
            myHobby:[null],
            address:[{
              name:'湖南',id:1
            },{
              name:'湖北',id:2
            },{
              name:'云南',id:3
            },{
              name:'贵州',id:4
            }],
            myAddr:null,
            sign:null,
            ok:false
          }
        },
        methods:{
          dosubmit(){
            var obj = {};
            obj.name = this.name;
            obj.pwd = this.pwd;
            obj.sex = this.sex;
            obj.hobby = this.myHobby;
            obj.address = this.myAddr;
            obj.sign = this.sign;
            obj.ok = this.ok;
            console.log(obj);
          }
        }
      })
    </script>