![](https://img-blog.csdnimg.cn/20201014180756916.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
VUE
赖赖赖先生
这个作者很懒,什么都没留下…
展开
-
PHP做接口数据---简单版
创建一个web.php页面:<?phprequire_once("include/mysql.Open.php"); //打开数据库require_once("public/conn.php"); //个人的配置文件header('content-type:application/json;charset=utf8'); $sql ="select * from web_product order by Id"; //我自己的数据库 $value=$db->getList(原创 2021-03-19 15:07:49 · 199 阅读 · 0 评论 -
VUE 下拉加载,无限循环--- infinite-loading
还在理解中,简单的先写一下。思路:1、安装插件 npm install vue-infinite-loading2、引入插件 import InfiniteLoading from ‘vue-infinite-loading’3、注册组件 components:{InfiniteLoading},4、在结束v-for循环后,进行调用。<li v-for="(item,uniquekey) in list" :key="uniquekey"> <div class="im原创 2020-11-11 17:42:59 · 1627 阅读 · 0 评论 -
VUE中给JSON加个参数
我们拿到产品列表的JSON文件后。JSON中没有count(数量)这个参数。所以我们需要在代码上给JSON加上 count 参数。上源码:vue.set创建count属性 add(){ this.number++; this.$emit('data',this.number) //在json中是没有count这个属性的这;在这里我们需要用到vue中提供的方法vue.set创建count属性 if(!this.food.count)原创 2020-10-21 15:52:32 · 4776 阅读 · 2 评论 -
兄弟组件传值
兄弟组件传值创建3个文件1:bus,公交JS文件2:哥哥组件3:弟弟组件bus.js代码import Vue from 'vue'export default new Vue()哥哥组件代码:<template> <div id="gege"> <top title="兄弟组件"></top> <p>这里是哥哥组件</p> <p>这个是哥哥的数据----{{txt}}</p>原创 2020-10-14 09:58:04 · 351 阅读 · 0 评论 -
子组件给父组件传值
子组件给父组件传值视觉效果:下次再补上,可以直接复制代码展示。父组件代码:<template> <div id="fuqin"> <top title="父子组件"></top> <p>这个是父组件</p> <p>{{txt}}</p> <!-- 这里的 func是一个函数方法,给子组件调用的--> <erzi @func='msgtxt' :tx原创 2020-10-14 09:55:14 · 152 阅读 · 0 评论 -
简单化的防抖与节流防止重复点击
简单的防抖、节流防止重复点击防抖和节流是我们在开发过程中常用优化性能的方式<div id="fangdou" style="margin:50px;"> <input style="border:1px solid #38f;padding:10px;" type="button" @click="debounce()" value="防抖按钮"> <input style="border:1px solid #38f;padding:10px;"原创 2020-09-28 15:20:59 · 427 阅读 · 0 评论 -
VUE递归树形实现多级列表
VUE递归树形实现多级列表什么是递归?简单来说就是在组件中内使用组件本身。为什么要用递归?如果出现很多下拉菜单,同级,分级数据,层级混杂,可以使用v-for的嵌套循环不就完事了。对,没毛病这样的话也可以做,但是如果数据又多加了【很多】级分类呢;使用v-for也能实现,但是代码可能会比较杂或混乱!也不适合后期的维护,这个时候呢,我们就可以使用我们所说道的【递归组件 】了,使用递归组件,无论你的数据怎么增加我们都不用改动我们的代码。先看效果:1、创建两个文件父组件tree.vue 子组件tr原创 2020-09-08 15:46:30 · 2572 阅读 · 2 评论 -
VUE种图片懒加载
VUE种图片懒加载1、安装图片懒加载组件npm install vue-lazyload2、在main.js中引入import VueLazyLoad from 'vue-lazyload' Vue.use(VueLazyLoad,{ error:'./static/error.png', //加载报错图片路径 loading:'./static/loading.gif'//加载中图片路径})3、使用方式:将<img :src="路径"> 修改成:<原创 2020-09-07 11:23:31 · 77 阅读 · 0 评论 -
vue-cli搭建教程
vue-cli搭建教程1、先在项目文件下安装 vue-clinpm i vue-cli 2、接着安装webpacknpm i webpack 3、安装vue组件,如果不安装,会出现 “没有该内部指令”npm i vue4、最后一步vue init webpack //接着根据提示安装即可。整个项目包就安装完成。 可以直接 npm run dev 跑项目 ,也可以npm run build 打包文件。...原创 2020-09-07 10:11:34 · 72 阅读 · 0 评论 -
VUE调用API教程,解决VUE跨域问题。
VUE调用API方法1、使用VUE-CLI脚手架做项目的情况下。//VUE-CLI做项目太方便了。2、安装axios.npm i axios3、在main.js文件引入axios原型链import axios from 'axios'Vue.prototype.$axios = axios 4、在config文件夹中的index.js文件中有的 proxtable{} proxyTable: { '/book': { //聚合平台有很多免费的API,大家可以原创 2020-09-07 09:50:21 · 2675 阅读 · 0 评论 -
VUE路由组件懒加载方法
VUE路由组件懒加载方法1、使用VUE-CLI脚手架做项目的情况下;2、在build文件下的webpack.base.conf.js文件3、在 output:中添加一句 chunkFilename: ‘chunk[id].js?[chunkhash]’, output: { path: config.build.assetsRoot, filename: '[name].js', chunkFilename: 'chunk[id].js?[chunkhash]', //原创 2020-09-07 09:38:45 · 165 阅读 · 0 评论 -
VUE-list渲染后-添加、删除、搜索功能
视图:功能:1:列表渲染 2:添加功能 3:删除功能 4:关键词搜索DIV代码如下: <div id="list" class="list"> <div class="lt-nr"> <div class="lt-tt">id:</div> <input class="lt-text" type="text" v-model="id" /> </div> <div class="lt-nr"&g原创 2020-06-05 11:01:38 · 384 阅读 · 1 评论 -
VUE的list渲染
页面视图: <div id="list" class="list"> <table class="table table-bordere"> <tr><th>序号</th> <th>名称</th> <th>编辑</th> </tr> <tr v-for="item in list" :key="item.id">原创 2020-06-05 10:53:33 · 934 阅读 · 0 评论