Vue基础（2）(事件修饰符及冒泡事件)

Vue基础（2）

checkbox

 <div id="app">
        <form action="">
            <div>
                <label for="">爱好：</label><br>
                <input type="checkbox" v-model="likes" name="li" value="hua">滑板</br>
                <input type="checkbox" v-model="likes" name="li" value="yu">瑜伽</br>
                <input type="checkbox" v-model="likes" name="li" value="liyou">旅游</br>
                <input type="checkbox" v-model="likes" name="li" value="yin">音乐</br>
            </div>
        </form>
        {{likes}}//可以自动获取被选中的value值
    </div>
    <script src="./node_modules/vue/dist/vue.min.js"></script>
    <script>
    var app =new Vue({
        el:"#app",
        data:{
            likes:[],
        }
    })
    </script>

radio

 <div id="app">
        <form action="">
            <div>
                <label for="">性别</label><br>
                <input type="radio" name="sex" v-model='sex' value="nan">男<br>
                <input type="radio" name="sex" v-model='sex' value="nv">女<br>
            </div>
        </form>
        {{sex}}//获取单选框的value值
    </div>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                sex: ''
            }
        })
    </script>

select

 <div id="app">
    <select name="" id="" v-model="selects" multiple>
      <option value="china">中国</option>
      <option value="USA">美国</option>
      <option value="KO">土耳其</option>
      <option value="RS">俄罗斯</option>
    </select>
    {{selects}}
  </div>
  <script>
    //multiple 可以多选，在select上添加
    var vm = new Vue({
      el: "#app",
      data: {
        selects: ''
      }
    })
  </script>

事件的修饰符

• .stop 阻止冒泡;
• .prevent 阻止默认事件；
• .captrue 添加事件侦听器时，使用事件捕获模式； (和冒泡相反，先父后子)
• .self 只当事件在该元素本身(比如不是子元素)触发时触发回调; (点击本身才会触发，其它不会触发)
• .once 事件只触发一次；
• prevent 阻止默认事件。。。

     grandfather.addEventListener("click", function() {
                  console.log("grandfather捕获阶段")
                }, true)

添加事件 addEventListener(“click”，函数）
去除事件用 removeEventListener(‘click’, 函数)

冒泡及捕获事件

事件委托？ 通过冒泡事件，给父元素绑定事件。
捕获事件 从外向里
冒泡事件 从里向外

异步函数— async 和 defer

async 和 defer 的区别：
它们两个都是异步；

• defer 异步有顺序，上面的异步没执行完，下面的异步不会执行；
• async 异步没顺序，