vue-cli(二)

箭头函数

一般的函数:

这里window是用来调用函数的

复制代码
function fun(){
  console.log(this)
}
window.fun();

箭头函数:

1、如果只有一个参数,形参的小括号可以省略

2、如果只有一条语句,{}可以省略

完整的写法

复制代码
let fun2 = a=>{
  console.log(a);
}
fun2(10);

过滤器

这里使用了filter的箭头函数,对nums进行过滤,大于5的才能过去,也就是才能被留下。

复制代码
let nums = [1,2,3,4,5,6,7];
let res = nums.filter((num)=>{
  return num > 5
})
console.log(res);

把他加入计算方法中:

复制代码
computed:{
  searchResult(){
    return this.arr.filter(item => item.uname.indexOf(this.str)!= -1)
  }
}

@click事件

点击事件:

和在vscode中使用方法差不多

方法就写在methods中

通过生命周期进行函数挂载

vue的生命周期有8个,常用的有4个,创建前创建后,挂载前挂载后,更新前更新后,销毁前销毁后。

这里就是在挂载后进行查询接口。

复制代码
mounted(){
        this.$axios.get("http://music.apesource.cn:3000/artist/desc?id="+this.singerId).then((res)=>{
            console.log("res::",res);
        }).catch((err)=>{
            console.log(err);
        })
    },

循环遍历对象

在main.js中,可以通过这种方式来遍历对象

复制代码
//导入过滤器
import * as filter from "@/filter/index"
for(let key in filter){
  Vue.filter(key,filter[key])
}

遇到语法检查严格导致程序无法运行怎么办

在vue.config.js中添加

复制代码
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  //关闭语法检查
  lintOnSave: false,
})

不过修改了config.js文件后,需要重启vue-cli项目

npm run serve

相关推荐
CodeSheep2 分钟前
大家有没有发现一个奇特现象:你能在一个公司工作 12 年以上,无论你多忠诚多卖力,一旦公司赚的少了,那你就成了“眼中钉肉中刺”
前端·后端·程序员
亿元程序员6 分钟前
你知道三国志战略版的地图是怎么实现的吗?
前端
Rewloc14 分钟前
IntelliJ IDEA 打包 Web 项目 WAR 包(含 Tomcat 部署+常见问题解决)
前端·tomcat·intellij-idea
devii6616 分钟前
120html
前端
.生产的驴17 分钟前
React useEffect组件渲染执行操作 组件生命周期 监视器 副作用
前端·css·react.js·ajax·前端框架·jquery·html5
峥无24 分钟前
HTML 零基础入门到实战:从骨架到页面的完整指南
前端·html
南囝coding30 分钟前
《独立开发者精选工具》
前端·后端·开源
IT_陈寒34 分钟前
JavaScript 性能优化的 7 个致命陷阱:我从 P5 到 P8 的核心突破都在这里!
前端·人工智能·后端
艾小码1 小时前
告别加班!这些数组操作技巧让前端开发效率翻倍
前端·javascript
Rhys..2 小时前
ES6是什么
前端·javascript·es6