vue.js
依米_
这个作者很懒,什么都没留下…
展开
-
异步组件实现按需加载
当然了,所有的组件都可以采用异步加载原创 2018-11-27 14:48:57 · 279 阅读 · 0 评论 -
vue编程式路由
点击链接跳转到另一个页面,<router-link to="/Cart">点击跳转到购物车页面</router-link>这里是绝对路径在路由里要把路径写到routes的数组里{ path:'/Cart', component:Cart}同时也不要忘记引入通过点击事件跳转另一个页面<button @click="jump"&...原创 2018-10-02 16:56:54 · 4599 阅读 · 0 评论 -
如何把组件渲染到页面上
首先编好组件GoodsList.vue,然后在ruoter/index.js里引入import GoodsList from './../views/GoodsList'以及在routes里声明这个组件export default new Router({ routes: [ { path: '/', name: 'GoodsList...原创 2018-10-02 15:27:32 · 2736 阅读 · 0 评论 -
vue路由的基础介绍
原创 2018-10-02 11:09:44 · 200 阅读 · 0 评论 -
Vue基础语法
组件的创建和定义定义html之后,在data,之后定义方法,然后在另一个页面里引用,首先在js里引入这个组件,然后在components里声明这个组件,然后在template里引入这个组件.这个是定义的组件<template> <div > <button @click="increment">+...原创 2018-10-01 21:12:05 · 189 阅读 · 0 评论 -
webpack打包
进入工作空间,npm run build,打一下生产的包打包完之后,会生成一个dist目录 static是静态文件的存放地址在config目录下有一个index.js文件build: { // Template for index.html index: path.resolve(__dirname, '../dist/index.html'), // Pa...原创 2018-10-01 18:29:31 · 105 阅读 · 0 评论 -
vue配置
可以去http://www.npmjs.com去查看包是干什么的https://segmentfault.com/a/1190000010659925原创 2018-10-01 17:40:57 · 182 阅读 · 0 评论 -
初始化vue项目
vue环境搭建以及vue-cli使用Vue多页面应用文件引用vue官网下载在项目目录下输入: npm i vue --save,会出现module,然后引用vue.min.js安装vue-cli脚手架,返回项目目录,全局安装clinpm i vue-cli -g创建新项目vue init webpack-simple Demo5webpack-simple...原创 2018-09-05 22:13:45 · 766 阅读 · 0 评论 -
Vue源码解析
https://ustbhuangyi.github.io/vue-analysis/原创 2018-09-02 22:31:58 · 977 阅读 · 0 评论 -
Vuex
Vuex 是⼀个专为 Vue.js 应⽤程序开发的状态管理模式。它采⽤集中式存储管理应⽤的所有组件的状 态,并以相应的规则保证状态以⼀种可预测的⽅式发⽣变化。 什么是“状态管理模式”? Vuex 初始化这⼀节我们主要来分析 Vuex 的初始化过程,它包括安装、Store 实例化过程 2 个⽅⾯...原创 2018-09-02 17:28:03 · 158 阅读 · 0 评论 -
Vue-Router
路由的概念相信⼤部分同学并不陌⽣,它的作⽤就是根据不同的路径映射到不同的视图。我们在⽤ Vue 开发过实际项⽬的时候都会⽤到 Vue-Router 这个官⽅插件来帮我们解决路由的问题。Vue-Router 的能⼒⼗分强⼤,它⽀持 hash 、 history 、 abstract 3 种路由⽅式,提供了 &l...原创 2018-09-02 17:12:16 · 227 阅读 · 0 评论 -
扩展
event...V-model很多同学在理解 Vue 的时候都把 Vue 的数据响应原理理解为双向绑定,但实际上这是不准确的,我们 之前提到的数据响应,都是通过数据的改变去驱动 DOM 视图的变化,⽽双向绑定除了数据驱动 DOM 外, DOM 的变化反过来影响数据,是⼀个双向关系,在 Vue 中,我们可以通过 ...原创 2018-09-02 15:42:43 · 122 阅读 · 0 评论 -
编译
之前我们分析过模板到真实 DOM 渲染的过程,中间有⼀个环节是把模板编译成 render 函数,这个 过程我们把它称作编译。 虽然我们可以直接为组件编写 render 函数,但是编写 template 模板更加直观,也更符合我们的 开发习惯。 Vue.js 提供了 2 个版本,⼀个是 ...原创 2018-09-02 15:20:16 · 245 阅读 · 0 评论 -
深⼊响应式原理
前⾯ 2 章介绍的都是 Vue 怎么实现数据渲染和组件化的,主要讲的是初始化的过程,把原始的数据最 终映射到 DOM 中,但并没有涉及到数据变化到 DOM 变化的部分。⽽ Vue 的数据驱动除了数据渲染 DOM 之外,还有⼀个很重要的体现就是数据的变更会触发 DOM 的变化。 其实前端开发最重要的 2 个⼯作...原创 2018-09-02 14:53:12 · 248 阅读 · 0 评论 -
组件化
createElement....patch......合并配置 组件场景 总结 那么⾄此,Vue 初始化阶段对于 options 的合并过程就介绍完了,我们需要知道对于 options 的 合并有 2 种⽅式,⼦组件初始化过程通过 initI...原创 2018-09-02 14:01:56 · 391 阅读 · 0 评论 -
数据驱动
Vue.js ⼀个核⼼思想是数据驱动。所谓数据驱动,是指视图是由数据驱动⽣成的,我们对视图的修改, 不会直接操作 DOM,⽽是通过修改数据。它相⽐我们传统的前端开发,如使⽤ jQuery 等前端库直接 修改 DOM,⼤⼤简化了代码量。特别是当交互复杂的时候,只关⼼数据的修改会让代码的逻辑变的⾮ 常清晰,因为 DOM 变成了数据的映射,我们所有的逻辑都是对数...原创 2018-09-02 13:43:02 · 4767 阅读 · 0 评论 -
从⼊⼝开始
我们之前提到过 Vue.js 构建过程,在 web 应⽤下,我们来分析 Runtime + Compiler 构建出来的 Vue.js, 它的⼊⼝是 src/platforms/web/entry-runtime-with-compiler.js :Vue 的⼊⼝ 在这个⼊⼝ JS 的上⽅我们可以找到 Vue 的来源: impor...原创 2018-09-02 12:57:18 · 212 阅读 · 0 评论 -
Vue.js 源码⽬录设计和Vue.js 源码构建
dist 目录放构不同版本的vue.js Vue.js 的源码都在 src ⽬录下,其⽬录结构如下。src├── compiler├── core├── platforms├── servercompiler 在写代码的时候大都写template 而不是render函数,那么关于template的编译逻辑都在compilercompiler...原创 2018-09-01 22:51:00 · 336 阅读 · 0 评论 -
Vue-Resource基础介绍
get一般是向服务器端拿数据, 就是在很多http请求时,关闭一个loading一个 在a标签里,href="javascript:;"是因为a标签是跳转标签,为了防止页面刷新.<a href="javascript:;" class="btn btn-primary">get请求</a> get请求举例,get里有2个参数,一...原创 2018-10-02 21:06:34 · 874 阅读 · 0 评论 -
axios数据请求方式
get请求get:function () { axios.get("../package1.json",{ params:{ userId:"999" }, headers:{ token:"jack" } }).then(res=>{ this.msg=res.data; ...原创 2018-10-02 22:32:17 · 4853 阅读 · 0 评论 -
Promise对象
他解决了一层一层的回调问题,让代码变成链式调用,代码更清晰,变成一行一行的document.cookie.indexOf("userId")//cookie是用来获取存放用户的信息let checkLogin = function () { return new Promise(function (resolve,reject) { let flag = document....原创 2018-10-03 15:21:29 · 101 阅读 · 0 评论 -
前后端联调和真机测试以及上线
前后端联调很简单:只要修改config/index.js的内容就可以了这里要求你的数据在服务器端的/api文件夹下面。就可以了。 如果服务器在不在本地怎么办呢就不能写localhost了,而是域名,或者ip前端请求就可以转发给任何一台服务器了.,从而非常方便地实现了前后端的联调.当用本地的ip访问网页的时候,不可以用8080端口了(前提是前端项目已经可以请求后端数据了)...原创 2018-11-27 13:53:03 · 910 阅读 · 0 评论 -
vue项目 组件显示的动画
如何使用这个组件呢组件显示的动画vue项目中,为优化用户体验,我们通常在组件显示的时候,我们加上动画效果。除了直接用transition标签作为组件的跟标签外,我们还可以把动画效果抽离成组件,方便复用。FadeAnimation.vue<template> <transition> <slot></slot> &...原创 2018-11-27 12:06:06 · 3181 阅读 · 0 评论 -
vue ajax和数据传递
引入 ajax在router里已经定义了id 点击不同的景点,进入不同详情页看一下数据能否请求到看到数据已经被显示出来呢然后替换掉静态数据然后子组件还要接收父组件的值此时数据渲染没有问题但是当点击第二个景点的时候,并没有进行数据请求这是缓存的原因要想每次进去页面,要发送ajax请求,就要添加actived生命周期钩子函数或者是在A...原创 2018-11-27 11:47:55 · 656 阅读 · 0 评论 -
Vue项目详情页 - 使用递归组件实现详情页列表
此时list已经显示出来如何使用递归组件实现详情页列表父组件Detail.vue里的父组件这时分类就会显示出来然后布局样式一级列表项已经显示出来了,然后如何显示二级列表项呢这里的二级关系.自己调用他自己的这个组件但是没有层级关系这时是三级列表但是头部景点并没有完全盖住下方的字体这是list.vue...原创 2018-11-27 10:52:11 · 5897 阅读 · 0 评论 -
Vue——对全局事件的解绑
activated () { window.addEventListener('scroll', this.handleScroll) }, deactivated () { window.removeEventListener('scroll', this.handleScroll) }全局事件会影响到其他的组件所以要解绑,activated生命周期钩子是用...原创 2018-11-26 22:50:52 · 3750 阅读 · 0 评论 -
Vue项目详情页 - 实现Header渐隐渐显效果
<template> <div style="height: 890px;"> <router-link tag="div" to="/" class="header-abs" v-show="showAbs"> <div class="iconfont header原创 2018-11-26 22:39:49 · 627 阅读 · 0 评论 -
keep-alive优化网页性能
每次当点击城市页面的按钮跳转到首页都会请求一次数据,这就造成了性能低,我们在app.vue里面给 显示的内容包上 keep-alivecity.json就不会重新加载了.2、每次点击城市取对应的数据渲染到首页,在home.vue里请求数据json数据要加上参数 ?city= 在vuex里存的城市参数然后刷新网页.城市参数已经请求过来城市切换过来了,首页里的内容也要跟...转载 2018-11-22 20:40:12 · 547 阅读 · 0 评论 -
momgo+node+vue商品列表分页和排序功能实现
1、分页 商品列表的分页实现是后台根据前端请求的页面大小、页码位置,去数据库中查询指定位置的数据然后返回给前端。比如页面大小为8,要查第3页的数据,则跳过2*8条数据,然后返回8条数据。 在实现滚动加载时,页面刚一加载完成并不需要请求所有数据,当用户下拉到页面底部时,再去请求数据并拼接到商品数据列表中。 通过vue-infinite-scroll插件实现滚动加载,在框架...原创 2018-10-20 21:42:20 · 786 阅读 · 0 评论 -
webstorm启动方法以及pm2插件
我们在学习Node.js的时候,经常会配合Vue等这样的框架进行工程化构建,但是在代码编写的阶段需要使用npm run dev 或者 cnpm run dev启动前端的试图,进行挂载,但是如果要进行前后端调试的话,必须启用node,才能进行本地数据库增删查改,而我们启用node服务的方式有很多种,其中有些方法非常方便:下面是我练习的一个项目,为了方便代码调试,把node和vue放在了...原创 2018-10-07 20:48:24 · 1372 阅读 · 0 评论 -
搭建基于Express框架运行环境
1.它是node的框架,可以快速搭建node服务2.安装espress generator生成器,就像利用vue-lic可以快速生成一个vue2,.0的项目号框架3.通过生成器自动创建项目4.配置分析这个项目是把前后端合在一起开发的,也可以单独生成一个项目,创建服务器,再把服务器引进来第一步安装npm install -g express-generator通过 e...原创 2018-10-05 11:17:23 · 144 阅读 · 0 评论 -
node,服务器的创建
let http= require('http');let server = http.createServer((req,res)=>{ res.statusCode = 200; res.setHeader("Content-Type","text/plain;charset=utf-8"); res.end("Hello,nOded.js")});server.li...原创 2018-10-04 22:35:03 · 120 阅读 · 0 评论 -
vue-lazyload 图片懒加载
第一步npm install vue-lazyload --save然后在main.js里引入 import VueLazyLoad from 'vue-lazyload'然后使用这个VueLazyLoadVue.use(VueLazyLoad,{loading:"/static/loading-svg/loading-bars.svg"});然后把用到图片的地方,用v-l...原创 2018-10-04 19:14:44 · 203 阅读 · 0 评论 -
价格渲染和价格区间的选择,以及响应式价格区间的隐藏与显示
在data里定义一个变量priceFilterpriceFilter:[ { startPrice:'0.00', endPrice:'500.00' }, { startPrice:'500.00', endPrice:'1000.00' }, { startPrice:'1000.00', endPrice:'1500....原创 2018-10-04 17:49:06 · 1656 阅读 · 0 评论 -
vue数据渲染
在webpack.dev.conf.js里它后面const portfinder = require('portfinder'),加入const express = require('express')const app = express() //创建express应用程序var goodsData = require('../mock/goos.json')//加载本地数据文件...原创 2018-10-04 15:32:22 · 6471 阅读 · 0 评论 -
vue首页页面呈现
main.js是加载路由的文件第一步新建一个views页面,定义一个GoodsList.vue组件,在template里写入代码,然后在script里引入import引入要加载的css文件例如这样 <script> import './../assets/css/base.css'然后在router里的index.js里定义路由:,首先要引入GoodList....原创 2018-10-03 22:42:06 · 6352 阅读 · 0 评论 -
AMD CMD,CommonJs和ES6对比
AMD是RequireJS在推广过程中对模块化定义的规范化产出cmd是SeaIs在推广过程中对模块化定义的规范化化产出同步的概念CommonJS是跑在服务端的规范 ES6特性 export/import,只有先导入,才有导出...原创 2018-10-03 18:38:37 · 172 阅读 · 0 评论 -
es6模块化开发
如果不是默认导出则要用{}导入5.文件导入导出在一个util.js文件里写入export let sum=(x,y)=>{ return x+y;};在main.js里导入import {sum,minus} from "./util";//也可以这么引入import * as util from "./util"打印:console.log(`sum():...原创 2018-10-03 15:23:23 · 958 阅读 · 0 评论 -
Vue.js源码--准备工作
1.认识flowFlow 是 facebook 出品的 JavaScript 静态类型检查⼯具。Vue.js 的源码利⽤了 Flow 做了静态类型检查, 所以了解 Flow 有助于我们阅读源码。为什么⽤ FlowJavaScript 是动态类型语⾔,它的灵活性有⽬共睹,但是过于灵活的副作⽤是很容易就写出⾮常隐蔽的隐患代码,在编译期甚⾄看上去都不会报错,但在运⾏阶段就可能出现各种奇怪...原创 2018-09-01 22:41:46 · 521 阅读 · 0 评论 -
实现首页和搜索结果页的数据共享,以及点击之后数据传递且跳转
首先创建city-vuex分支git pullgit checkout city-vuexnpm run start如何实现,点击搜索结果页的条例,可以把数据传递到首页呢,这就需要首页和城市页,需要一些数据要分享了,城市选择页的数据如何传递给首页呢City.vue文件和Home.vue文件没有一个公用的父级组件的,如何进行数据传递呢,vue官方提供了一个工具vuex,这是一个数据框架,在一个大型项...原创 2018-05-23 13:47:30 · 1403 阅读 · 0 评论