我与我周旋久

我与我周旋久 查看完整档案

南京编辑南京邮电大学  |  信息管理与信息系统 编辑  |  填写所在公司/组织填写个人主网站
编辑
_ | |__ _ _ __ _ | '_ \| | | |/ _` | | |_) | |_| | (_| | |_.__/ \__,_|\__, | |___/ 该用户太懒什么也没留下

个人动态

我与我周旋久 发布了文章 · 9月18日

搭建脚手架(vue-cli),并创建一个项目

最近刚学习到vue脚手架相关的知识,所以整理了一个用vue-cli搭建项目的过程


1、安装node.js环境

node -v
npm -v

如果能出现相关的版本号,说明安装成功
image


2、全局安装vue-cli

npm install vue-cli -g

结果如下:
image


3、选定路径,创建项目,我的项目名为tabbar

vue init webpack tabbar

image


4、运行项目

进入文件所在目录
cd tabbar
安装依赖
npm install
运行项目
npm run dev

5、通过项目展示路径,打开初始界面

image

打开 界面如下
image


6、最终获得一个这样的文件目录

image
我们的代码写在src文件夹中

查看原文

赞 0 收藏 0 评论 0

我与我周旋久 发布了文章 · 9月16日

vue-router:路由的理解

认识路由

  • 路由用于设定访问路径,将路径和组件映射起来

在vue-router中的单页面应用中,页面的路径的改变就是组建的切换


后端路由:后端处理URL和页面之间的映射关系
前端路由:前端管理URL和页面之间的映射关系

vue-router基本使用

步骤一:安装vue-router

npm install vue-router --save

步骤二:在模块化工程中使用
  1. 导入路由对象,并调用Vue.use(VueRouter),安装插件
import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter);
  1. 创建路由实例,并且传入路由映射配置
//从上层文件导入两个组件
import Aaa from '../components/Aaa'
import Bbb from '../components/Bbb'

const routes = [
//配置映射关系,一个{}对应一个组件
   {
     path:'/aaa',
     component:Aaa
   },
   {
     path:'/bbb',
     component:Bbb
   }
]
const router = new VueRouter({
  routers
})
export default router
  1. 在Vue实例中挂载创建的路由实例
new Vue({
  el:'#app',
  router,
  render: h => h(App)
})

使用vue-router的步骤:
  1. 创建路由组件
  2. 配置路由映射:组件与路径映射关系
  3. 使用路由:通过<router-link><router-view>
<router-link>:该标签是vue-router中已经内置的组件,它会被渲染成一个<a>标签.
<router-view>:该标签会根据当前的路径,动态渲染出不同的组件.

<router-link>的属性:
  • to:用于指定跳转的路径
<router-link to="/about">关于</router-link>
  • tag:可以指定<router-link>之后渲染成什么组件
<router-link to="/about" tag="button">关于</router-link>
  • replace:不会留下history记录,因此指定replace的情况下,后退键不能返回到上一个页面中
<router-link to="/about" tag="button" replace>关于</router-link>
//replace后面不需要加任何东西

vue-router动态路由

1.配置user,创建一个简单的映射关系

{
  path:'/user/:aaa',
  component:User
}
  1. <router-link>中使用v-bind动态绑定
<router-link :to="/user/+userId">用户</router-link>

3.在User.vue文件中拿到传过来的用户ID

userId(){
      return this.$route.params.aaa
}

路由的懒加载

当打包构建应用时,Javascript包会变得很大,因此将路由对应的组件分割成不同的代码块,当路由被访问时才加载对应组件,提高效率.
懒加载的方式:
  1. 结合Vue的异步组件和Webpack的代码分析
const Home = resolve => {require.ensure(['../components/Home.vue'],() => {resolve(require('../components/Home.vue'))})};
  1. AMD写法
const About = resolve => require(['../components/About.vue'],resolve);

3.在ES6中,可以用更简单的写法来组织Vue异步组件和Webpack的代码分割

const Home = () => import('../components/Home.vue')
//推荐写法,写在入口文件中

vue-router嵌套路由

在实际应用界面中,页面往往由多层嵌套的组件组成

  1. 定义“登录”和“注册”两个组件
<template id="login"> 
    <div>登录界面</div>
</template> 
<template id="reg">
    <div>注册界面</div>
</template>
//定义路由组件
const Login = { template: '#login' }; 
const Reg = { template: '#reg' };

2.定义路由,通过children嵌套

const routes = [
   { path: '/', redirect: '/home' },
  { 
    path: '/home',
    component: Home, 
    children:[ 
       { path: '/home/login', component: Login}, 
       { path: '/home/reg', component: Reg}
    ] 
  }, 
  { path: '/news', component: News}
]

vue-router参数传递

传递参数主要有两种类型:paramsquery

params的类型:

  • 配置路由格式:/router/:id
  • 传递的方式:在path后面跟上对应的值
  • 传递后形成的路径:/router/aaa,/router/bbb

query的类型:

  • 配置路由格式:/router,也就是普通配置
  • 传递的方式:对象中使用query的key作为传递方式
  • 传递后形成的路径:/router?id=aaa,/router?id=bbb

这里讲一下URL:
协议://主机:端口/路径?查询
scheme://host:port/path?query#fragment

vue-router导航守卫(guard)

一、全局守卫
前置钩子(hook)
 router.beforeEach((to,from,next)=>{
 
  })
to:即将要进入的目标的路由对象
from:当前导航即将要离开的路由对象
next:调用该方法后,才能进入下一个钩子

可以利用beforeEach来完成标题的修改


后置钩子
router.afterEach((to,from)=>{
  
  })
只有两个参数,to和from
二、组件内的守卫
beforeRouteEnter
beforeRouteEnter:(to,from,next)=>{}

注意:beforeRouteEnter函数在data()函数之前,即,调用beforeRouterEnter函数时,组件还没有初始化,此时不能使用this来代表实例组件

beforeRouteUpdate
beforeRouteUpdate:(to,from,next)=>{}
beforeRouteLeave
beforeRouteLeave:(to,from,next)=>{}
三、路由独享的守卫
beforeEnter:(to,from,next)=>{}

用法与全局前置守卫一致,只是将其写进其中一个路由对象中,只在这个路由下起作用


keep-alive

keep-alive是Vue内置的一个组件,可以使被包含的组件保留状态,或避免重新渲染

<keep-alive>
      <component>
      <!--该组件将被缓存-->
      </component>
</keep-alive>

include:字符串或正则表达,只有匹配的组件会被缓存
<keep-alive include="a">
   <component>
  <!-- name 为 a 的组件将被缓存! -->
    </component>   
</keep-alive>
exclude:字符串或正则表达式,任何匹配的组件都不会被缓存
<keep-alive exclude="a">    
   <component>   
 <!-- 除了 name 为 a 的组件都将被缓存! -->    
   </component>  
</keep-alive>
router-view 也是一个组件,如果直接被包在 keep-alive 里面,所有路径匹配到的视图组件都会被缓存
<keep-alive>   
   <router-view>    
 <!-- 所有路径匹配到的视图组件都会被缓存! -->   
   </router-view>  
</keep-alive>
增加 router.meta 属性
//routes配置
export default [
 {
   path:'/',
   name:'home',
   component:Home,
   meta:{
      keepAlive:true  //需要被缓存
   }
 },{
   path:'/:id',
   name:'edit',
   component:Edit,
   meta:{
      keepAlive:false  //不需要被缓存
   }
 }
]
<keep-alive>
   <router-view v-if="$route.meta.keepAlive">
      <!--这是是会被缓存的视图组件,比如Home-->
   </router-view>
</keep-alive>

<router-view v-if="!$route.meta.keepAlive">
      <!--这是是不会被缓存的视图组件,比如Edit-->
</router-view>
查看原文

赞 0 收藏 0 评论 0

我与我周旋久 发布了文章 · 9月15日

箭头函数的使用和this指向

箭头函数:也是一种定义函数的方式

定义函数的方式:

1、function

const day = function(){}

2、对象字面量中定义函数

const obj={
    day(){
   }
  }

3、ES6中的箭头函数

const day =() =>{
 }
箭头函数参数问题

1.1放入两个参数

const sum = (num1,num2) => {
  return num1+num2
}

1.2放入一个参数(括号可以省略)

const power = num => {
  return num*num
}
返回值问题

2.1函数代码块中只有一行代码时:

const sum = (num1,num2) => num1+num2

箭头函数中的this
const obj = {
  day(){
     setTimeout(function(){
        console.log(this); // 打印的是window
   })
   
     settimeout(() => {
        console.log(this); //打印的是obj对象
   })
 }
}

结论:箭头函数中的this的查找方式是向外层作用域中,一层一层的查找this,直到有this的定义


查看原文

赞 0 收藏 0 评论 1

我与我周旋久 关注了用户 · 9月15日

心叶 @yelloxing

我还惊讶地意识到, 在我生命中有很多时刻, 每当我遇到一个遥不可及、令人害怕的情境,并感到惊慌失措时, 我都能够应付——因为我回想起了很久以前自己上过的那一课。

我提醒自己不要看下面遥远的岩石, 而是注意相对轻松、容易的第一小步, 迈出一小步、再一小步,就这样体会每一步带来的成就感, 直到完成了自己想要完成的, 达到了自己的目标,然后再回头看时, 不禁对自己走过的这段漫漫长路感到惊讶和自豪。

               ———— 摘自 莫顿·亨特《走一步,再走一步》

关注 106

我与我周旋久 收藏了文章 · 9月15日

前端文档收集

H5系列

JS系列

JQ系列

CSS系列

响应式

正则表达式

面试

ES6

Promise

Babel

Node.Js

Vue.js

React

Redux

Angular.Js

Gulp

Webpack

Typescript

网络基本

Express

React

Weex

Lodash

Zepto

Electron

Unity3D

shell

查看原文

我与我周旋久 关注了专栏 · 8月6日

【前端有的玩】公众号

我是子君,我的公众号是【前端有的玩】,欢迎关注。每周我会至少分享一篇前端相关文章,希望可以帮助到致力于前端开发的你。

关注 1409

我与我周旋久 关注了专栏 · 8月6日

达达前端

达达前端技术社群:囊括前端Vue、JavaScript、数据结构与算法、实战演练、Node全栈一线技术,紧跟业界发展步伐,一个热爱前端的达达程序员。

关注 511

我与我周旋久 关注了专栏 · 8月6日

网易云音乐大前端团队

网易云音乐大前端技术团队专栏

关注 1612

我与我周旋久 关注了专栏 · 8月6日

AWS_AI开发社区

AWS_AI 开发者社区是专注于人工智能领域 IT 人士交流与互动的平台。在这里,你可以分享和获取一切有关人工智能的相关技术和前沿知识,也可以与同行或爱好者们交流探讨,共同成长。

关注 629

我与我周旋久 关注了用户 · 8月6日

pingan8787 @pingan8787

个人博客:http://www.pingan8787.com
Github:https://github.com/pingan8787

微信公众号【前端自习课】和千万网友一起,每日清晨,享受一篇前端优秀文章。

目前已连续推送文章 700+ 天,愿每个人的初心都能一直坚持下去!

关注 271

认证与成就

  • 获得 0 次点赞
  • 获得 1 枚徽章 获得 0 枚金徽章, 获得 0 枚银徽章, 获得 1 枚铜徽章

擅长技能
编辑

(゚∀゚ )
暂时没有

开源项目 & 著作
编辑

(゚∀゚ )
暂时没有

注册于 8月6日
个人主页被 91 人浏览