vue学习篇--03事件处理 表单处理 生命周期

事件处理

v-on: 绑定事件 简写@

    1. html:
        <div>count: {{count}}</div>
        <button v-on:click="count+=1;">添加</button>
        <!-- 绑定自定义方法不写(),默认有一个参数ev -->
        <button v-on:click="btnAction">按钮</button>
        <!-- 写了(),要获取事件对象需要手动输入$event参数，还可以传其他参数 -->
        <button v-on:click="btnAction2($event, 1, 2, 3)">按钮2</button>
    2. js:
        var vm = new Vue({
            el: '#app',
            data: {
                count: 0
            },
            methods: {
                btnAction: function(ev){
                    console.log('btnAction执行了');
                    console.log(ev);
                },
                btnAction2(ev, ...rest){
                    console.log('btnAction2执行了');
                    console.log(ev);
                    console.log(rest);
                }
            }
        )}

事件修饰符：@contextmenu 右击

    1. html:
        <!-- 事件修饰符
            .stop  阻止事件冒泡  3  2  1
            .capture 事件捕获   1  2  3
            .prevent 阻止默认事件
            .self 只有点击当前的标签才能触发
            .once 事件只触发一次
        -->
        <div class="box1" @click="action1">
            <p>box1</p>
            <div class="box2" @click.self="action2">
                <p>box2</p>

                <div class="box3" @click="action3">
                    <p>box3</p>
                </div>
            </div>
        </div>
        <div class="wrap" @contextmenu.prevent.once="wrapAction"></div>
    2. js:
        methods:{
            action1: function(){
                console.log('1');
            },
            action2: function(){
                console.log('2');
            },
            action3: function(){
                console.log('3');
            },
            wrapAction(){
                console.log('wrapAction');
            }
        }

键盘事件：

    1. html:
        <!-- 
            按键修饰符：.enter  .tab  .delete  .esc  .space  .up  .down  .left  .right
            系统修饰符：.ctrl  .alt  .shift  .meta
         -->
        <!-- 任意键 -->
        <input type="text" @keyup="keyupAction">  
        <!-- 回车 -->
        <input type="text" @keyup.enter="keyupAction">
        <!-- 数字：1 -->
        <input type="text" @keyup.49="keyupAction">
        <!-- ctrl+a -->
        <input type="text" @keyup.ctrl.65="keyupAction">
    2. js:
        methods:{
            keyupAction(ev){
                console.log('keyupAction');
                console.log(ev);
            }
        }

v-model: 表单处理

    1. html:
        <!-- 单行文本 -->
        <p>{{message}}</p>
        <input type='text' v-model='message' />

        <!-- 多行文本输入: 样式 resize:none 固定大小不可拖动 -->
        <textarea cols='30' rows='30' v-model='message'></textarea>

        <!-- 单选框: 想知道用户选中了哪个值，就使用v-model绑定对应的数据，用户选中的值将保存在这个数据当中
            使用v-model就可以不用设置name属性了，因为v-model绑定的数值只可能为男或女 
        -->
        <div>
            性别：
            <label>
                <input type='radio' value='男' v-model='gender' />男
            </lable>
            <label>
                <input type='radio' value='女' v-model='gender' />女
            </lable>
        </div>

        <!-- 多选框 用法一: 绑定Boolean，进行true/false切换，隐藏或显示 -->
        <div>
            <input type='checkbox' v-model='isSelected'>
            <div style="width:100px;height:100px;background:red" v-show='isSelected'></div>
        </div>
        <!-- 用法二：绑定数组 -->
        <div>
            兴趣爱好：
            <label for="">
                    <input type="checkbox" value="唱歌" v-model="fav">唱歌
            </label>
            <label for="">
                    <input type="checkbox" value="跳舞" v-model="fav">跳舞
            </label>
            <label for="">
                    <input type="checkbox" value="打篮球" v-model="fav">打篮球
            </label>
            <label for="">
                    <input type="checkbox" value="跑步" v-model="fav">跑步
            </label>
        </div>

        <!-- 下拉菜单 选择框 -->
        <select v-model='answer'>
            <option value='A'>A<option>
            <option value='B'>B<option>
            <option value='C'>C<option>
            <option value='D'>D<option>
        </select>
        <!-- 下拉菜单，多选：multiple 允许多选， -->
        <select v-model='answer' multiple style='width:30px;height:100px;'>
            <option value='A'>A<option>
            <option value='B'>B<option>
            <option value='C'>C<option>
            <option value='D'>D<option>
            <option value='E'>E<option>
            <option value='F'>F<option>
        </select>

    2. js:
        <script src='vue.js'></script>
        <script>
            var vm = new Vue({
                el:'app',
                data:{
                    message:'hello',
                    <!-- 默认为男 -->
                    gender:'男',
                    isSelected:true,
                    fav:[],
                    answer:'',
                    <!-- 可以默认选择 A,B -->
                    answerArr:['A','B']
                }
            })
        </script>

v-model修饰符

v-model.lazy   将input的时时更新，变成change后再更新
v-model.number   将输入的字符串转为数字
v-model.trim     将用户输入的首尾空格删除掉

生命周期：

每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。----从创建到销毁的过程

生命周期钩子=钩子函数=生命周期函数：在实例的生命周期过程提供的函数，这些函数在vue实例自己调用

首先：初始化 加载事件和生命周期 
=> 执行 beforeCreate钩子函数，还不能读取data数据
=> 然后 注册数据，就是读取data computed watch监听  component 
=> 执行 created函数 此时可以访问到数据，但dom结构中的数据还不能解析出来数据
=> 判断实例有没有el配置项，如果有 yes
=> 则再判断有没有template配置项，如果有，就把template进行编译，编译之后
=> 执行 beforeMount，此时dom结构的数据还不能被解析
=> 执行mounted，模板渲染完成，此时dom结构可以解析出实例中的数据
=> 执行beforeUpdate,更新前，此时可以访问到更新后的新数据，而dom结构上的数据渲染的还是更新前的数据
=> 虚拟dom树的渲染和对比
=> 执行updated,更新完成，此时都是更新后的数据
=> 调用vm.$destroy(),将执行 beforeDestroy,然后再是destroy

如果没有el配置项 => 需要执行vm.$mount('#app'),这样才接下去执行===>动态将vm实例挂载到dom结构上
如果没有template => 将el属性标签中的outerHTML当中template,
                    即包含#app这个标签的结构读取出来当做虚拟dom树 进行编译，
                    编译完成之后生成真实dom树,但还保存在js当中，在create vm.$el这一步骤才替换掉html结构上，所以在mounted这个钩子函数才能读取出数据

原生js监听input输入框内容变化的事件时onInput()，按一下按键就触发
onChange()事件是失去焦点之后才开始执行