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
<input type="text" @input="handleInput()">

// 监听输入框，失去焦点时触发 @change 
<input type="text" @change="handleChange()">

// 点击事件  @click
<button @click="handleClick()"></button>  

Q：如何在事件中传参？

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

 2.2 事件修饰符

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

//原生js 在方法中写入阻止方法
<ul @click="handleUlClick">
    <li @click="handleLiClick($event)">111</li>
    <li>222</li>
</ul>


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

// vue中 在子标签事件后增加“.stop” 或 在父标签事件后增加“.self”
<ul @click.self="handleUlClick">
    <li @click.stop="handleLiClick">111</li>
    <li>222</li>
</ul>

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

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

//原生js 在方法中写入阻止方法
<a href="http://www.baidu.com" @click="handleChangePage($event)">跳转链接</a>
handleChangePage(e){
    e.preventDefault();  //原生js阻止默认事件
}

// vue中 在事件后增加“.prevent”
<a href="http://www.baidu.com" @click.prevent="handleChangePage()">跳转链接</a>

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

        使用场景：比如抽奖

<button @click.once="handleClick()">按钮</button>

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

// 判断是否触发回车键，触发时才执行对应方法
<input type="text" @keyup.enter="handleKeyup">

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

 2.4 动态绑定

// 行内的属性需要动态绑定某些数据的时候，需要加“:”，比如  :value
<ul v-for="data in dataList">
    <li>
        <input type="checkbox" v-model="checkGroup" :value="data.price">
        {{data}}
    </li>
</ul>

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

// v-model的修饰符 .lazy
// 阻止实时监听内容，当时去焦点时才会同步
<input type="text" v-model.lazy="mytext">

// 去首尾空格 .trim
<input type="text" v-model.trim="myusername">

三、实现数据请求

3.1 fetch

写法：

fetch("../data.json").then(res=>{
    return res.json();
}).then(res=>{
    console.log(res);
})

或

fetch("../data.json").then(res=>res.json()).then(res=>{
    console.log(res);
})

// 需要两层.then才能取出真正想要的json内容

备注：

1. 非Vue独有，原生js就支持

2. 需要两层.then才能取出真正想要的json内容

3. 比较麻烦，不推荐

3.2 axios

axios.get("../list.json").then(res=>{   //get请求
    console.log(res);
    this.dataList = res.data.data;
}).catch(err=>{
    console.log(err);
})

备注：

1. 非Vue独有，独立的组件，需要引入axios.js

2. axios会自动包装一个data属性，res.data才是真正的数据