Vue
傻狍子学前端
每天都是一个起点,每天都有一点进步,每天都有一点收获!Make a little progress every day!
展开
-
Vue报错 The template root requires exactly one element
Vue报错 The template root requires exactly one element.Vue2解决因为vue的模版中只能有一个根节点,由于不支持多根节点组件,所以在<template>中插入第二个元素就会报错,将<template>中的元素用一个大的<div>包起来,这样就可以在其中添加多个元素了Vue3解决在 3.x 中,组件可以包含多个根节点!但是为什么还会报错呢是因为插件vetur设置了校验规则,改一下配置规则就不会显现错误了原创 2022-01-07 11:13:36 · 1914 阅读 · 0 评论 -
Vue CLI4创建Vue项目
Vue CLI4创建Vue项目Node 版本要求Vue CLI4.x需要 Node.js v8.9 或更高版本(推荐 v10 以上)。用 npm -v和node -v可以查看对应版本关于旧版本Vue CLI的包名称由 vue-cli 改成了 @vue/cli。 如果你已经全局安装了旧版本的 vue-cli (1.x 或 2.x),你需要先通过 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸载它。使用下列任一命令安装这个新的原创 2022-01-05 14:19:27 · 706 阅读 · 0 评论 -
点击标题标签切换显示对应内容
Vue点击标题标签切换显示对应内容html<div class=" "> <div class=" "> <ul class=" "> <li :class=" reqinx == 0 ? 'active' : '' " @click="reqTagle(0)">星期一</li> <li :class=" reqinx == 1 ? 'active' : '' " @click="re原创 2021-12-31 16:59:27 · 957 阅读 · 0 评论 -
异步数据asyncData调用请求后端接口
Nuxt.js增加了一个叫 asyncData 的方法,使得我们可以在设置组件的数据之前能异步获取或处理数据。asyncData 方法asyncData方法会在组件(限于页面组件)每次加载之前被调用。它可以在服务端或路由更新之前被调用。在这个方法被调用的时候,第一个参数被设定为当前页面的上下文对象,你可以利用 asyncData方法来获取数据,Nuxt.js 会将 asyncData 返回的数据融合组件 data 方法返回的数据一并返回给当前组件。 async asyncData(..原创 2021-12-31 10:04:36 · 1366 阅读 · 0 评论 -
拼接后端接口返回的图片地址
拼接后端接口返回的图片地址使用 服务器+返回的图片地址 方法服务器使用axios.jsexport default ({ app: { $axios } }) => { $axios.defaults.imgURL = '服务器地址(我们要的图片地址是这个服务器)';}服务器地址 + 图片地址<img :src="$axios.defaults.imgURL + 图片地址"/>...原创 2021-12-29 16:07:06 · 1260 阅读 · 0 评论 -
上下篇文章切换
上下篇文章切换(Vue.js)<div> <p :style="{ visibility: isPrev ? 'unset' : 'hidden' }"> <span> <div @click="previousPage" >< 上一篇:{{ active != 0 ? totals[+active - 1].title : "" }}</div> &l原创 2021-12-29 16:44:40 · 485 阅读 · 0 评论 -
Vue跳转页面传值(带参数)
Vue跳转页面传值(带参数)<div> <div> <input type="text" placeholder="输入关键字搜索" v-model="keycode" /> <img src="搜索图标图片" @click="search()" /> </div></div>发送数据的页面methods: { search() { if (this.keycode) {原创 2021-12-30 17:02:41 · 5581 阅读 · 0 评论