双向绑定 修饰符 生命周期

双向绑定（***）

用法： v-model

原理：

<input type="text" :value="uname" @input="fun">
fun(e) {
  console.log(e)
  console.log("用户输入了")
  this.uname = e.target.value
},

<div id="app">
        <!-- 普通输入框 -->
        <input type="text" v-model="msg">
        <h1>{{ msg }}</h1>

        <!-- 单选 -->
        <input type="radio" name="gender" v-model="sex" value="男"> 男
        <input type="radio" name="gender" v-model="sex" value="女"> 女
        <h1>{{ sex }}</h1>

        <!-- 多选 -->
        <h2>多选单独出现</h2>
        <input type="checkbox" v-model="isAgree"> 是否同意此协议
        <button>注册</button>
        <h1>{{isAgree}}</h1>


        ===============================
        <h2>多选多个同时出现</h2>
        <input type="checkbox" name="hobby" v-model="hobby" value="篮球"> 篮球
        <input type="checkbox" name="hobby" v-model="hobby" value="足球"> 足球
        <input type="checkbox" name="hobby" v-model="hobby" value="唱"> 唱
        <h1>{{ hobby }}</h1>


        <!-- textarea -->
        <textarea name="" id="" cols="30" rows="10" v-model="area"></textarea>
        <h1>{{area}}</h1>

        <!-- select -->
        <select name="" id="" v-model="city">
            <option value="北京">北京</option>
            <option value="上海">上海</option>
            <option value="长沙">长沙</option>
        </select>
        <h1>{{city}}</h1>

        <input type="date">
    </div>
    <script>
        let vm = new Vue({
            el: '#app',
            data: {
                city: "长沙",
                area: "",
                msg: "hello",
                sex: "男",
                isAgree: true,
                hobby: ["篮球"]
            }
        });
    </script>

修饰符

• 事件修饰符
  • .stop 阻止事件冒泡
  • .prevent 阻止默认行为
  • .once 事件只会触发一次
  • .self 只有点击自己才会触发
• 鼠标修饰符
  • .right
  • .middle
• 键盘修饰符
  • .enter
  • .up
  • .down
  • .left
  • .right
• 双向数据绑定修饰符
  • .lazy 不加lazy是实时的赋值，加了lazy会在change事件内进行赋值
  • .number 对绑定的值进行一个转数值的操作
    • 如果第一个字符是非数字，.number将失效
    • 如果第一个字符是数字，会将后面不是数字的部分去掉
  • .trim

生命周期（理解困难）

人的生命周期就是从出生到死亡所经历的过程

vue: 从vue的实例创建 到 实例消亡的整个过程

• 初始阶段(baby => 大学毕业)：4个生命周期钩子函数
  • 共同点：只要写了就一定执行，自执行
  • 区别：beforeCreate不能通过this访问数据和方法
  • beforeCreate
  • created
  • beforeMount
  • mounted **
• 运行阶段(进入社会 => 退休):数据发生改变才会执行
  • beforeUpdate 值是最新的，但是页面不是最新的
  • updated 值时最新的，同时页面也是最新的
• 销毁阶段(坐等死): 一般做收尾性工作（清除定时器，释放闭包内存）
  • beforeDestroy
  • destroyed

MVVM 设计模式 MVC设计模式

mvc

m => model

v => view

c => controller

MVVM

m => model

v => view

Vm => viewModel

笔试题

1. 请简述vue中的双向数据绑定实现的原理和方式

   v-model实现了数据和视图的双向绑定。如果是普通文本输入框，是value和input事件配合实现的，如果是单选或多选这种，是checked和change事件配合实现的