web前端
fuguoda
敲代码使我快乐
展开
-
新闻网项目总结:
项目制作总结:一、开放中最常用的流程:html → js(jq、angular) → php↑ ↓ js(jq、angular) ← php ← Mysql二、技术使用:Html 、css、js、jquery、Ajax、jso...原创 2018-12-08 23:36:29 · 458 阅读 · 0 评论 -
vue完成图片的单击切换--click事件
思路:根据图片的下标切换图片路径,使用v-for循环出小图片地址,大图片地址根据小图片的地址 切换代码如下:<div class="phoneP-box-left floatL"> <div class="left-bImg"> <img :src="'../../static/phone-img/phone'+itemIndex+'.p...原创 2019-06-01 11:01:23 · 16225 阅读 · 0 评论 -
使用vue-cli出现的问题总结
1.问题:`(Emitted value instead of an instance of Error) : component lists rendered with v-forshould have explicit keys. See https://vuejs.org/guide/list.html#keyfor more info.`解决方法:在组件内加入自定义属性key...原创 2019-06-01 17:28:29 · 169 阅读 · 0 评论 -
vue根据路由ID获取数据,设置html数据
1、在右路中跳转设置参数 <router-link :to="{path: 'PhoneParticular', query: { id: phone.id }}"> <img :src="phone.image[0].image1"/> </router-link>`2、引入全部数据,在被跳转到的vue页面,获取路由地址id。 impor...原创 2019-06-01 22:02:47 · 4401 阅读 · 0 评论 -
vue--点击添加class 其他标签删除class
1、css代码.active{ border: solid 1.3px #C82333; background-color:#fff ; }2、html代码<ul> <li class="floatL" :class="{ active: n==isActive}" v-for="n in 5" v-if="item.combo!==undefined" @...原创 2019-06-02 10:58:20 · 4482 阅读 · 0 评论 -
vue-cli中的axios本地get请求json出现404
axios中本地get请求json出现404的原因:需要把json文件放在static文件下原创 2019-06-07 16:40:08 · 2168 阅读 · 0 评论 -
使用vue-axios带参数发送get请求到php获取数据库数据
1、vue发送axios请求2、php接收请求并获取数据库<?php header("Access-Control-Allow-Origin: *"); header("Content-Type: application/json; charset=UTF-8"); if(isset($_GET["id"])){ $id=$_GET["id"]; $sql="SELECT...原创 2019-06-07 23:04:20 · 2853 阅读 · 0 评论 -
vue-购物商品数量的添加与减少--总价钱计算
1、html2、script原创 2019-06-02 16:54:33 · 1872 阅读 · 1 评论 -
vue--使用监听属性完成子组件传值给父组件
1、子组件template代码 <div class="panel-footer select-addr-list col-xs-6 col-md-3 col-sm-4 fontMin" v-for="(addr,index) in addrs"> <div class="addr-list-box" :class="{ active: index==isAt...原创 2019-06-02 17:55:39 · 2384 阅读 · 0 评论 -
在vuex中axios带多个参数发送post请求到php
首先在vue界面把axios对象传到vuex中:data是一组新数据,this.cartdata是购物车已经存在的数据,this.$ajax是axios对象新数据格式:使用commit转发到vuex中在store.js中引入qs,一般都是安装axios自己就有import Vue from 'vue'import Vuex from 'vuex'import qs from 'q...原创 2019-06-08 17:42:34 · 5292 阅读 · 0 评论 -
css3-贝塞尔曲线-完成小球的曲线运动
完成曲线运动使用贝塞尔曲线,可以去:贝塞尔曲线设置曲线的弧度复制参数过来替换 cubic-bezier(.15,.76,.25,.86);代码如下所示: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title&...原创 2019-06-09 13:16:04 · 1341 阅读 · 0 评论 -
vue-jquery实现购物车全选和反选
这是一个在vue里使用jquery完成全选和反选的功能template代码: <div class="cart-check-all"><input type=“checkbox” name=“checkAll” id=“checkAll” v-model=“checkedAll” @click=“checkAll()”/> <...原创 2019-06-03 17:02:18 · 597 阅读 · 0 评论 -
简单的jquery轮播图封装
HTML:<div class="col-md-6 floatL show-img"> <ul class="show-img-list clearfix"> <li> <a href="" target="_blank"> <img src="img/show1.png"/> ...原创 2019-06-19 17:03:44 · 255 阅读 · 0 评论 -
使用php采集网页内容
一、file_get_contents()获取网页获取网页http://news.sina.com.cn/c/nd/2016-10-23/doc-ifxwztru6951143.shtml全部内容<?php $url = "http://news.sina.com.cn/c/nd/2016-10-23/doc-ifxwztru6951143.shtml"; $html = f...原创 2019-06-11 00:00:51 · 1292 阅读 · 0 评论 -
vue-生命周期和钩子函数
生命周期探究下面代码可以直接复制出去执行 <!DOCTYPE html> <html> <head> <title></title> <script type="text/javascript" src="https://cdn.jsdelivr.net/vue/2.1.3/v...翻译 2019-06-22 21:20:43 · 246 阅读 · 0 评论 -
详解vue-router 中的导航钩子
vue-router 的导航钩子,主要用来作用是拦截导航,让他完成跳转或取消。有三种方式可以植入路由导航过程中:1.全局的2.单个路由独享的3.组件级的1. 全局导航钩子:全局导航钩子主要有两种钩子:前置守卫、后置钩子,注册一个全局前置守卫:const router = new VueRouter({ ... });router.beforeEach((to, from, nex...转载 2019-06-22 21:28:30 · 1219 阅读 · 0 评论 -
VUE框架父组件传值给子组件--props传值
关键点是script的代码以及v-for循环那句话1. 父组件在父组件中引入子组件(components)在父组件中引入数据(data)代码如下所示:<template> <div id="guoda-phone" class="container"> <!--手机类别--> <div class="phone-nav"> ...原创 2019-06-01 10:05:25 · 269 阅读 · 0 评论 -
通过vue监听事件实现一个简单的购物车
一、html页面<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><div id="app"> <table> <tr> <th>序号</th> <th>商品名称&l...转载 2019-05-17 15:25:31 · 693 阅读 · 0 评论 -
VUE运行命令行报错:Expected indentation of 2 spaces but found 4
原因:tab按键不可以使用,出现空格问题方法:想换回4个空格,才知道是项目初始时,默认安装ESLint(ESLint是一个语法规则和代码风格的检查工具,可以用来保证写出语法正确、风格统一的代码)的原因,关闭ESLint方法:在vue项目中找到build文件夹 --> webpack.base.conf.js --> module重新运行项目 npm run dev...原创 2019-05-17 10:20:31 · 2781 阅读 · 1 评论 -
JS中call() 方法和 apply() 方法的使用区别例子
function a(x, y) {alert(x, y);alert(this);alert(arguments);}a.apply(null, [21, 12]);a.call(null, 21, 12);**function a(x, y) {alert(x, y);alert(this);alert(arguments);}a.apply(null, [15, 5...原创 2018-12-13 21:36:47 · 135 阅读 · 0 评论 -
萍乡学院新闻网模块展示
原创 2018-12-13 21:36:55 · 179 阅读 · 0 评论 -
webpack入门之打包html,css,js,img(一)
webpack就是打包文件用的,html,css,js,img,为什么通过他打包?说白了就是我们可以提前使用新的东西,es6现在浏览器支持的其实并不是很好,但这不是问题,你可以采用es6去写脚本,然后通过webpack去打包成es5,vue项目里面的vue文件也是一样的,也是需要webpack打包成浏览器能够识别的文件才能正常使用,废话不多说,咱们搞起找个磁盘,新建一个demo文件,cmd进去...转载 2019-01-13 11:33:22 · 308 阅读 · 0 评论 -
javascript原型链
一、对象等级划分我们认为在javascript任何值或变量都是对象,但是我还需要将javascript中的对象分为一下几个等级。首先Object是顶级公民,这个应该毋庸置疑,因为所有的对象都是间接或直接的通过它衍生的。Function是一等公民,下面会做解释。几个像String,Array,Date,Number,Boolean,Math等内建对象是二等公民。剩下的则都是低级公民。二、原型p...转载 2019-01-13 17:12:06 · 97 阅读 · 0 评论 -
ES6的基础总结
一、箭头函数的使用一、rest进行 数组以及集合的转换二、symbol函数s2==s3结果为false三、set数据结构的用法四、Map数据结构原创 2019-05-14 10:41:03 · 82 阅读 · 0 评论 -
vue使用router-link跳转vue页面
要完成页面的跳转,需要在这几个文件下操作:1、主页面(Home.vue) 2、被跳转的页面 3、router下的index.js(page_share.vue)1、主页面(Home.vue) <li><router-link to='/PageShare'>前端</router-link></li>2、被跳转的页面(page_share...原创 2019-05-18 23:26:04 · 1498 阅读 · 0 评论 -
vue框架--组件以及路由的使用
一、组件可以扩展 HTML 元素,封装可重用的代码。Vue.component(tagName, options)<tagName></tagName>1、全局组件的使用 HTML:<div id="app"> <runoob></runoob></div> JS:Vue.component('ru...原创 2019-05-09 14:48:03 · 291 阅读 · 0 评论 -
vue框架指令总结
1、{{ 数据}}指令的使用<div id="app"> <p>{{ message }}</p> </div> <script> new Vue({ el: '#app', data: { message: 'Hello' } }) ...原创 2019-05-07 15:39:56 · 136 阅读 · 0 评论 -
ES6的导入与导出功能------export,import ,export default
一、定义import用于在一个模块中加载另一个含有export接口的模块。也就是说使用export命令定义了模块的对外接口以后,其他JS文件就可以通过import命令加载这个模块(文件)二、区别这样来说其实很多时候export与export default可以实现同样的目的,只是用法有些区别。通过export方式导出,在导入时要加{ },export default则不需要。使用expor...原创 2019-05-16 09:53:27 · 422 阅读 · 0 评论 -
设置div的内容及子标签向右对齐
主要是设置 :text-align: right;display: inline-block;HTML: <div class="sureSubmit"> <a href="javaceript:;" class="aDecoration">提交订单</a> </div>CSS: .submitOrder .sureSubmi...原创 2019-05-24 18:50:24 · 15330 阅读 · 0 评论 -
VUE项目--vue-cli环境配置
一、安装好node.js关于旧版本:Vue CLI 的包名称由 vue-cli 改成了 @vue/cli。 如果你已经全局安装了旧版本的 vue-cli (1.x 或 2.x),你需要先通过 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸载它。Node 版本要求:Vue CLI 需要 Node.js 8.9 或更高版本 (推荐...原创 2019-05-16 17:38:56 · 130 阅读 · 0 评论 -
vue项目--vue-cli项目打包上线
在命令行中用npm run build 进行打包打包完成之后项目目录中会多一个dist的目录,这个就是打包之后的代码,可以直接拿去部署就可以。打包之前,需要注意,需要把绝对路径改为相对路径,更改方式如下:打开config/index.js 会看到一个build属性,这里就我们打包的基本配置了。你在这里可以修改打包的目录,打包的文件名。最重要的是一定要把绝对目录改为相对目录。...转载 2019-05-16 18:04:20 · 464 阅读 · 0 评论 -
jQuery图片延迟加载插件jQuery.lazyload
链接:https://pan.baidu.com/s/1bkumJ5BaXoykZS8vRRjmSg提取码:ld0o在使用懒加载技术之前,先去百度网盘下载该插件使用方法引用jquery和jquery.lazyload.js到你的页面<script src="jquery-1.11.0.min.js"></script><script src="jquery...原创 2019-05-21 22:53:49 · 71 阅读 · 0 评论 -
jquery垂直时间轴--插件
链接:https://pan.baidu.com/s/1XnEOxOe6ElGMlROz6k51-A提取码:9fmcjquery时间轴-这是一个简单的响应时间轴交替的颜色标签。一个图标字体用于在时间轴上的图标的航点和媒体查询一些例子说明如何调整的时间表较小的屏幕。时间轴的主要结构是一个无序列表。使用步骤HTML<ul class="cbp_tmtimeline"> &...原创 2019-05-21 23:08:22 · 1040 阅读 · 0 评论 -
一个简单的 jQuery 图片裁剪插件----cropper
浏览器支持Chrome (latest 2)Firefox (latest 2)Internet Explorer 8+Opera (latest 2)Safari (latest 2)Cropper一个简单的 jQuery 图片裁剪插件。Demo不依赖 jQuery 的 Cropper 版本功能特性,支持选项,支持方法,支持事件,支持触屏 (移动端),支持缩放,支持旋转,支持翻...翻译 2019-05-21 23:33:32 · 826 阅读 · 0 评论 -
vue组件头部封装
一、先建一个header.vue文件,这是一个头部组件,将这个组件在index.vue中使用<meta charset="UTF-8"/><template> <div id="header"> <div> 这是网页的头部 </div> </div></template><scrip...原创 2019-05-16 23:12:01 · 1577 阅读 · 1 评论 -
fgd-简单的响应式滚动幻灯片插件制作(单击距离滚动)
可以直接复制代码使用 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *,body{ mar...原创 2019-06-24 23:51:33 · 222 阅读 · 0 评论