zoukankan      html  css  js  c++  java
  • Vue 事件处理 事件修饰符 表单处理 表单修饰符 双向绑定 生命周期 钩子函数

    1-事件处理

    1.1-事件绑定

    • 通过v-on:事件名称="事件处理函数"绑定事件

      <button v-on:事件名称="事件处理函数">按钮</button>
      

    1.2-事件传参

    • 通过事件处理函数后的()传递参数即可

      <button v-on:事件名称="事件处理函数(参数)">按钮</button>
      

    1.3-事件对象

    • 无需给事件处理函数传递额外参数

      系统会自动注入事件对象, 直接在事件处理函数定义的位置通过形参接受即可

      const vm=new Vue({
           el:'#app',
           data:{
      
           },
           methods:{
               // 键盘事件处理函数, e是系统自动注入的事件对象
               checkUser(e){
                   console.log(e.target.value);
               }
           }
       });
      
    • 需要给事件处理函数传递额外参数

      $event是一个系统变量, 代表事件对象

      <input type="text" placeholder="请输入用户名" @keyup="checkUser($event,'hello')"/>
      <script>
       const vm=new Vue({
              el:'#app',
              data:{
                  // 错误提示信息
                  tips:''
              },
              methods:{
                  // 键盘事件处理函数, e是系统自动注入的事件对象
                  checkUser(e,msg){
                      // 系统已经存在的用户名
                      const users=['admin','jack','tom','rose'];
                      const username=e.target.value.trim();
                      if(username===''){
                          return  this.tips='请输入用户名';
                      }
                      if(users.indexOf(username)===-1){
                          // 更新tips: 用户名可以
                          return this.tips='恭喜你, 用户名可用';
                      }
                      this.tips='用户名不可用';
                  }
              }
          });
      </script>	
      

    1.4-事件修饰符

    • 作用: 限制事件触发的条件

    • 语法

      @事件名称.事件修饰符="事件处理函数"
      

    1.4.1-stop

    • 作用: 阻止事件冒泡
    <div id="app">
        <div class="wrap" @click="wrapClick">
            <!-- 使用事件修饰符stop, 阻止事件冒泡 -->
            <div class="box" @click.stop="boxClick"></div>
        </div>
    </div>
    

    1.4.2-prevent

    • 作用: 阻止默认行为
    <a href="http://baidu.com" @click.prevent="handle">a标签</a>
    

    1.4.3-once

    • 作用: 限定事件只执行一次
    <!--使用事件修饰符once, 限制事件只执行一次-->
    <button @click.once="handle">按钮</button>
    

    1.4.4-self

    • 作用: 限定事件只能被自己触发(不能被冒泡行为触发)
    <!-- self是限定事件只能由元素自己触发, 不能被冒泡行为触发 -->
    <div class="wrap" @click.self="wrapClick">
        <div class="box" @click="boxClick"></div>
    </div>
    

    1.4.5-capture

    • 作用: 修改事件触发的顺序(事件触发顺序变成由外向内)

      <div class="wrap" @click.capture="wrapClick">
           <div class="box" @click="boxClick"></div>
      </div>
      

    1.5-按键修饰符

    • 作用: 修饰键盘事件, 限制键盘事件的触发时机

    • 语法

      @事件名称.按键修饰符="事件处理函数"
      
    • 系统内置的按键修饰符

      • .enter
      • .tab
      • .delete (捕获“删除”和“退格”键)
      • .esc
      • .space
      • .up
      • .down
      • .left
      • .right

    2-表单处理

    2.1-v-model指令

    • 作用: 实现双向数据绑定(数据层<=>视图层)
    • 注意: v-model指令只能在表单元素上使用

    <div id="app">
        <!-- v-model: 可以将用户的输入自动同步到数据层 -->
        <h1>{{keywords}}</h1>
        <hr>
        <input type="text" placeholder="请输入搜索关键词" v-model="keywords">
        <button @click="search">搜索</button>
    </div>
    <script>
    
        const vm = new Vue({
            el: '#app',
            data: {
                keywords:''
            },
            methods: {
                search(){
                    console.log(this.keywords);
                }
            }
        });
    </script>
    

    2.2-常见表单元素双向数据绑定

    <div id="app">
        <!-- v-model: 可以将用户的输入自动同步到数据层 -->
        <div>
            <input type="text"  v-model="user.name" placeholder="姓名">
        </div>
        <div>
            <input type="radio" value="男" v-model="user.sex">男
            <input type="radio" value="女" v-model="user.sex">女
        </div>
        <div>
            <input type="checkbox" value="学习" v-model="user.hobby">学习
            <input type="checkbox" value="读书" v-model="user.hobby">读书
            <input type="checkbox" value="弹钢琴" v-model="user.hobby">弹钢琴
        </div>
        <div>
            <!-- multiple:实现多选 -->
            <select  v-model="user.language" multiple>
                <option value="vue">vue</option>
                <option value="react">react</option>
                <option value="angular">angular</option>
            </select>
        </div>
        <div>
            <textarea  v-model="user.introduce" cols="30" rows="2" placeholder="个人简介"></textarea>
        </div>
        <div>
            <button @click="submit">立即提交</button>
        </div>
    </div>
    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                user:{
                    name:'',
                    hobby:[],
                    sex:'',
                    language:[],
                    introduce:''
                }
            },
            methods: {
                submit(){
                    // 获取用户输入
                    console.log(this.user);
                }
            }
        });
    </script>
    

    2.2-表单修饰符

    2.2.1-书写位置

    一般是个v-model指令结合起来使用

    2.2.2-语法规范

    v-model.表单修饰符="数据对象"
    
    • trim

      • 作用: 自动去除用户输入内容的首位空格
    • number

      • 作用: 将用户输入内容自动转换成数值类型, 对于无法转换成数值的内容, 不会处理
    • lazy

      • 作用: 延迟数据同步, 当失去焦点的时候, 再将数据同步到数据层(v-model默认会实时同步数据)

    3-vm.$set

    • vm.$set(操作的数组或者对象,数组下标或者对象属性名,值): vm代表vue实例对象

    通过数组下标操作(新增/更新)数组元素, 不会触发视图的刷新;

    通过赋值的方式给对象动态添加属性, 不会触发视图的更新;

    使用$set方法添加的数组元素或对象属性可以触发视图的更新;

    3.1-作用

    • 通过下标添加或者修改数组元素(传统赋值方式无法触发视图更新)
    • 给对象动态添加元素(传统赋值方式无法触发视图更新)

    3.2-别名

    • Vue.set(操作的数组或者对象,数组下标或者对象属性名,值);

    4-vue核心原理

    4.1-双向数据绑定(数据劫持)

    • 通过Object.defineProperty(所属的对象,属性名,{get(){},set(){}})定义的数据的读取和赋值, 都可以被监听到

      <body>
          <h1>Object.defineProperty()实现数据劫持</h1>
          <hr>
          <h1 id="h1"></h1>
      </body>
      <script>
          // Object.defineProperty(所属的对象,属性名,{get(){},set(){}})定义数据的另外一种方式
          // 定义了一个全局变量msg
          Object.defineProperty(window,'msg',{
              get(){
                  //get访问器: 当读取数据msg的时候, 会被触发
                  console.log('get');
                  // 需要在此处指定变量的值
                  return 'msg的初始值';
              },
              // value是一个系统自动注入的参数, 代表的是msg最新的赋值
              set(value){
                  // set访问器: 当对数据msg进行二次赋值的时候, 会被触发
                  // 应用场景: 通过视图更新(vue底层会在此处触发模板的重新编译)
                  console.log('set',value);
                  // 通知视图更新
                  document.querySelector('#h1').innerHTML=value;
              }
          });
          // console.log(msg);    // 读取数据, 会自动触发get方法的执行
          // msg='hello';     // 重新赋值, 会自动触发set方法的执行
          // 页第一加载的时候,输出的内容
          const h1=document.querySelector('#h1');
          h1.innerHTML=msg;
      
      </script>
      

    4.2-模板编译(正则替换)

    • 模板编译底层主要是通过正则替换来实现的
    class Vue{
        // 系统方法, 自动执行, 进行数据初始化
        // props={el:'#app',data:{},methods:{}}
        constructor(props){
            // 将data中的数据,挂载到this上
            for(let key in props.data){
                this[key]=props.data[key];
            }
            // 将methods中的方法,挂载到this上
            for(let key in  props.methods){
                this[key]=props.methods[key];
            }
            // 将模板对应的选择器挂载到this上, 方便在其他方法中获取
            this.$el=props.el;
            // 调用一次渲染方法
            this.render();
        }
    
        // 渲染方法(模板编译)
        render(){
            // 获取对应的dom对象
            const app=document.querySelector(this.$el);
            // 编写正则表达式
            const reg=/{{(w+)}}/g;
            const html=app.innerHTML.replace(reg,(a,b)=>{
                // a:是整个正则表达式匹配到的结果
                // b:是()子表达式匹配到的结果
                return this[b]
            });
            // 刷新视图
            app.innerHTML=html;
        }
    }
    

    5-生命周期钩子函数

    • 本质: 一种特殊的函数, 会在vue实例创建, 运行,销毁阶段的不同时期自动触发
    • 注意: 钩子函数是vue 在完成特定操作之后, 通知我们的一种方式
    • 写书位置: 和data,methods平级

    5.1-创建阶段

    特点

    • 只执行一次

    钩子函数

    • beforeCreate: 创建前(还没有完成数据和方法的创建, 数据和方法还不能使用)
    • created: 创建后(完成数据和方法的创建,可以调用数据和方法)
    • boforeMount: 挂载前(还没有完成视图的渲染)
    • mounted: 挂载后(已经完成了视图的渲染)

    5.2-运行阶段

    特点

    • 执行次数不确定
    • 只有在视图中引用过的data数据更新的时候, 才会被触发

    钩子函数

    • beforeUpdate: 更新前(还没有完成视图更新)
    • updated: 更新后(已经完成了视图更新)

    5.3-销毁阶段

    特点

    • 执行一次

    钩子函数

    • beforeDestroy: 销毁前
    • destroyed: 销毁后
  • 相关阅读:
    通过HttpListener实现简单的Http服务
    WCF心跳判断服务端及客户端是否掉线并实现重连接
    NHibernate初学六之关联多对多关系
    NHibernate初学五之关联一对多关系
    EXTJS 4.2 资料 跨域的问题
    EXTJS 4.2 资料 控件之Grid 那些事
    EXTJS 3.0 资料 控件之 GridPanel属性与方法大全
    EXTJS 3.0 资料 控件之 Toolbar 两行的用法
    EXTJS 3.0 资料 控件之 combo 用法
    EXTJS 4.2 资料 控件之 Store 用法
  • 原文地址:https://www.cnblogs.com/bnzw/p/13995724.html
Copyright © 2011-2022 走看看