在现在的互联网世界里，自动完成的搜索功能是一个很常见的功能。比如百度、搜狗、360搜索 ...功能描述一下大概是这个样子的：有一个搜索框，用户在里面输入要查询的条件，系统会“智能”判断用户输完了，然后自动根据条件去搜索相关的数据返回给用户。网上这个自动完成的插件很多，实现自动完成功能也不复杂，特别是像vue、angularjs、react这类可以实现双向绑定的库出现以后，实现就更方便了。本文不讲自动完成功能的实现，而是介...
编写html，通过vue-resource.js库向后台提交数据 <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>用户注册</title><link href="bootstrap-4.3.1-dist/css/bootstrap.min.css" rel="stylesheet"><script src="js/jquery.js"></script><script src="bootstrap-4.3.1-dist/js/bootstrap.js"></script><script src="js/vue.js"></script><!-- 异步提交的库 --><script src="js/vue-resource.min.js"></script><st...
项目中遇到如下需求数据录入页面 , 用户没有保存数据的时候, 发生路由跳转, 浏览器返回 时加以阻止 , 并给出提示 , 询问未保存, 是否离开页面点击保存以后 , 可以返回 , 自动跳转 , 进入下一个页面不加限制实现过程 : 两个方面入手 , 浏览器返回功能 , 需要处理,vue-router 需要处理实现方法(两者结合)浏览器返回处理方式// mounted()的时候我们调用原生js , 操作一下historyhistory.pushState(null, null, document.URL); // 主要...
如果你了解前端，肯定对AJAX不陌生，那么通过AJAX技术能够达到更新网页部分内容来达到加载其他信息的效果。通过AJAX我们可以来对文章进行优化，如果我们的博客在首页载入时就加载全部的文章，势必会影响加载速度，所以我们要来异步加载文章的内容，通过分页或者向下加载的方式来加载更多的文章内容。这样大大降低了网页最初加载的速度，并且也能受用户的意愿加载更多的内容。1. 后端实现：其实后端实现分页的功能十分的简单，如果使...
<html> <meta charset="utf-8"> <head> <script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js"></script> </head> <body> <div id="app"> <ul v-show="flag==1"> <li v-for="item in lists.slice(0,3)">{{item.name}}</li> </ul> <ul v-show="flag==2"> <li v-for="item in lists.slice(3,7)">{{item.name}}</li> </ul> <ul v-show="flag==3"> <li v-for="item in lists.slice(7)">{{item.na...
<!doctype html> <html lang="en"> <head><meta charset="UTF-8"><script src="vue.js"></script><title id="title">{{title}}</title> </head> <body> <div id="ask"><!--vue不能控制body和html的标签--><ul><li v-for="(v,k) in list">{{v.content}}<button v-on:click="remove(k)">删除</button></li></ul><textarea v-model="content" cols="30" rows="10"></textarea><button v-on:click="push(‘pre‘)">发表到前面</button>...
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script src="../lib/vue.min.js"></script><link rel="stylesheet" href="../lib/bootstrap.min.css"><!--https://files.cnblogs.com/files/cgy-home/bootstrap.min.css--> </head> <body> <div id="app"><div class="panel panel-primary"><d...
第六节 地址列表过滤和展开所有的地址html：<li v-for="(item,index) in filterAddress">js：new Vue({ el:‘.container‘, data:{ limitNum:3, addressList:[], }, mounted:function () { this.$nextTick(function () { this.getAddressList(); }); }, computed:{ filterAddress:function () { return this.addressList.slice(0,this.limitNum); /*re...
这篇博客主要介绍树形控件的两个小小的功能：下拉菜单输入过滤框以CSS样式为主，也会涉及到Vue组件和element组件的使用。对于没有层级的数据，我们可以使用表格或卡片来展示。要展示或建立层级关系，就一定会用到树形组件了。 使用Vue + Element UI，构建出最基本的树如下图所示： 现在我们就要在这个基础上进行改造，使页面更加符合我们的交互场景。一、下拉菜单将下拉菜单嵌到树节点中，使操作更加简便、紧凑。效果演示效果如图：...
主要思路通过自定义指令，在视图初始化完成后，绑定scroll事件。当scrollTop + clientHeight >= scrollHeight时（此时滚定条到了底部）触发loadMore事件，<template><div v-scroll="loadMore"><!-- 列表数据传递给子组件，loading表示是否正在加载数据，避免在请求时多次触发 --><my-item :lists="lists" :loading="loading" /></div> </template><script> import MyItem from ‘~/components/Item.vue‘ export default {name: ‘...
cmd下安装axiosnpm install axios安装好后,会多出node_modules文件夹思路: 监听data里的word改变时,发送ajax异步请求数据, 把返回的数据赋值给data里的result,再传给模板里9.html<!DOCTYPE html> <html> <head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><title>vue</title><link rel="stylesheet" href=""><!--<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>--><scrip...
把最近学习vue的一些知识点记录下来，今天记录一下Vue通过vue-resource连接数据库接口渲染列表和添加删除功能首先我们得引入vue的版本文件和vue-resource.js,注意：vue-resource的引入要在vue版本文件之后然后把列表页面写好，然后在methods里写一个获取列表数据的方法： getAllList() { //获取所有的品牌列表this.$http.get(‘api/getprodlist‘).then(result => {var result = result.bodyif (result.status === 0) {this.lis...
登录功能概述 token原理分析 登录页面布局ElementUI官网文档地址：https://element.eleme.cn/2.0/#/zh-CN/component/form 代码编写之前先创建功能开发分支git status //查看当前工作区是否干净git checkout -b login //创建新的分支logingit branch //查看当前分支是哪一个git add .git commit -m "信息"git checkout master //切换回master分支git merge login //将login分支汇入master中git push //将本地master推...
vue组件代码<template><div><div style="padding:20px;"><div class="show"><div class="picture" :style="‘backgroundImage:url(‘+headerImage+‘)‘"></div></div><div style="margin-top:20px;"><input type="file" id="upload" accept="image/jpg" @change="upload"><label for="upload"></label></div></div></div> </template><script> import {Exif} from ‘./exif.js‘export default {data () {return {headerImage:‘‘...
在设计图中要求的效果为：文字限制超过9行即隐藏，并显示“展开”按钮，点击按钮进行切换，控制文本全部展示和部分展示在原本的实现过程中，使用了红框内的判断方式：页面代码： 样式则规定嵌套元素给一个死高度，通过对比来进行高度的修改但是发现打包以后，文字会出现被切割的情况，如下：奇了怪了，又没规定死宽度，咋了你还自己切自己呢？于是想尽办法，都定位不到原因之后，发现-webkit-box-orient: vertical;这个属性，他不生...