vue.js学习笔记（二）常用 *** 作、常用事件、常用修饰符

接上文，上文地址：vue.js学习笔记（一）引入、初始化、写法与基本结构、6个常用指令https://blog.csdn.net/zhaodahan_88/article/details/123983358

一、常用 *** 作 增删改数组/对象中的属性

Vue.set(vm.classObj,"c",true);   //Vue.set(数组名称，增加或修改的属性名，值);

二、事件 2.1 常用事件

// vue中的大部分事件都会带“@”

// 监听输入框内的值，实时触发 @input


// 监听输入框，失去焦点时触发 @change 


// 点击事件  @click
  

Q：如何在事件中传参？

// 以下写法均可，按你需要的场景来使用
@click="handeleClick"    //直接调用方法名，默认会传事件对象
@click="handeleClick()"  //直接调用方法，不传参
@click="handeleClick($event)"  //调用方法，传参 
@click="isSHow = !isShow"   //将方法直接写入行内

 2.2 事件修饰符

Q：点击事件如何阻止冒泡？（事件修饰符：.stop 和  .self）

//原生js 在方法中写入阻止方法

    111
    222



//JS
handleLiClick(e){
    e.stopPropagation();  //原生js阻止冒泡事件
}

// vue中 在子标签事件后增加“.stop” 或 在父标签事件后增加“.self”

    111
    222

Q：vue中如何阻止标签的默认行为？（事件修饰符：.prevent）

        默认行为包括但不限于，a标签的跳转

//原生js 在方法中写入阻止方法
跳转链接
handleChangePage(e){
    e.preventDefault();  //原生js阻止默认事件
}

// vue中 在事件后增加“.prevent”
跳转链接

Q：vue中如何使该事件只能被触发一次？（事件修饰符：.once）

        使用场景：比如抽奖

按钮

2.3 按键修饰符（@keyup的修饰符）

// 判断是否触发回车键，触发时才执行对应方法


其他按键也都支持：
    space 空格键
    up 向上键
    down 向下键
    ...
    亦可输入键值  @keyup.13

 2.4 动态绑定

// 行内的属性需要动态绑定某些数据的时候，需要加“:”，比如  :value

    
        
        {{data}}
    

2.5 表单修饰符（v-model的修饰符）

// v-model的修饰符 .lazy
// 阻止实时监听内容，当时去焦点时才会同步


// 去首尾空格 .trim