善良的爱心话

小白学习vue笔记

文章目录

一安装Vue
二做移动端应用注意
- 2.1 在index.html中修改mate设置
- 2.2 reset.css重新设置样式，在入口文件中引入
- 2.3 引入border.css 解决一像素边框的问题
- 2.4 解决click延迟300ms的问题 fastclick插件
- 2.5 在style中引入其他样式，需要这样 ~@
- 2.6 对全局事件的解绑
- 2.7 解决么面滑动影响其他页面的问题
3 插件使用
- 3.1 stylus和stylus-loader
- 3.2 轮播图组件 vue-awesome-swiper
- - 3.2.1 使用vue代码
  - 3.2.2 swiper自定义图片轮播组件
- 3.3 数据请求 axios
- 3.4 页面跳转路由
- 3.5 Better-scroll 滚动插件
- 3.6 Vuex实现数据共享
- 3.6 本地存储 localStorage
- 3.7 keep-alive优化网页性能
- 3.8 递归组件的使用
4 样例
- 4.1 头部渐隐渐现的效果组件
- 4.2 渐影渐现的动画组件

一安装Vue

//全局安装 vue-cli
npm install --global vue-cli
//创建一个基于 webpack 模板的新项目
vue init webpack my-project
//安装依赖
cd my-project
npm install
//运行
npm run dev

安装过程中的问题解决
npm构建保存 code ELIFECYCLE解决办法

进入工作目录
rm -rf node_modules
rm -rf package-lock.json
npm cache clear --force
npm install

二做移动端应用注意

2.1 在index.html中修改mate设置

2.2 reset.css重新设置样式，在入口文件中引入

@charset "utf-8";html{background-color:#fff;color:#000;font-size:12px}
body,ul,ol,dl,dd,h1,h2,h3,h4,h5,h6,figure,form,fieldset,legend,input,textarea,button,p,blockquote,th,td,pre,xmp{margin:0;padding:0}
body,input,textarea,button,select,pre,xmp,tt,code,kbd,samp{line-height:1.5;font-family:tahoma,arial,"Hiragino Sans GB",simsun,sans-serif}
h1,h2,h3,h4,h5,h6,small,big,input,textarea,button,select{font-size:100%}
h1,h2,h3,h4,h5,h6{font-family:tahoma,arial,"Hiragino Sans GB","微软雅黑",simsun,sans-serif}
h1,h2,h3,h4,h5,h6,b,strong{font-weight:normal}
address,cite,dfn,em,i,optgroup,var{font-style:normal}
table{border-collapse:collapse;border-spacing:0;text-align:left}
caption,th{text-align:inherit}
ul,ol,menu{list-style:none}
fieldset,img{border:0}
img,object,input,textarea,button,select{vertical-align:middle}
article,aside,footer,header,section,nav,figure,figcaption,hgroup,details,menu{display:block}
audio,canvas,video{display:inline-block;*display:inline;*zoom:1}
blockquote:before,blockquote:after,q:before,q:after{content:"\0020"}
textarea{overflow:auto;resize:vertical}
input,textarea,button,select,a{outline:0 none;border: none;}
button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0}
mark{background-color:transparent}
a,ins,s,u,del{text-decoration:none}
sup,sub{vertical-align:baseline}
html {overflow-x: hidden;height: 100%;font-size: 50px;-webkit-tap-highlight-color: transparent;}
body {font-family: Arial, "Microsoft Yahei", "Helvetica Neue", Helvetica, sans-serif;color: #333;font-size: .28em;line-height: 1;-webkit-text-size-adjust: none;}
hr {height: .02rem;margin: .1rem 0;border: medium none;border-top: .02rem solid #cacaca;}
a {color: #25a4bb;text-decoration: none;}

2.3 引入border.css 解决一像素边框的问题

在入口文件中引入

@charset "utf-8";
.border,
.border-top,
.border-right,
.border-bottom,
.border-left,
.border-topbottom,
.border-rightleft,
.border-topleft,
.border-rightbottom,
.border-topright,
.border-bottomleft {
    position: relative;
}
.border::before,
.border-top::before,
.border-right::before,
.border-bottom::before,
.border-left::before,
.border-topbottom::before,
.border-topbottom::after,
.border-rightleft::before,
.border-rightleft::after,
.border-topleft::before,
.border-topleft::after,
.border-rightbottom::before,
.border-rightbottom::after,
.border-topright::before,
.border-topright::after,
.border-bottomleft::before,
.border-bottomleft::after {
    content: "\0020";
    overflow: hidden;
    position: absolute;
}
/* border
 * 因，边框是由伪元素区域遮盖在父级
 * 故，子级若有交互，需要对子级设置
 * 定位 及 z轴
 */
.border::before {
    box-sizing: border-box;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    border: 1px solid #eaeaea;
    transform-origin: 0 0;
}
.border-top::before,
.border-bottom::before,
.border-topbottom::before,
.border-topbottom::after,
.border-topleft::before,
.border-rightbottom::after,
.border-topright::before,
.border-bottomleft::before {
    left: 0;
    width: 100%;
    height: 1px;
}
.border-right::before,
.border-left::before,
.border-rightleft::before,
.border-rightleft::after,
.border-topleft::after,
.border-rightbottom::before,
.border-topright::after,
.border-bottomleft::after {
    top: 0;
    width: 1px;
    height: 100%;
}
.border-top::before,
.border-topbottom::before,
.border-topleft::before,
.border-topright::before {
    border-top: 1px solid #eaeaea;
    transform-origin: 0 0;
}
.border-right::before,
.border-rightbottom::before,
.border-rightleft::before,
.border-topright::after {
    border-right: 1px solid #eaeaea;
    transform-origin: 100% 0;
}
.border-bottom::before,
.border-topbottom::after,
.border-rightbottom::after,
.border-bottomleft::before {
    border-bottom: 1px solid #eaeaea;
    transform-origin: 0 100%;
}
.border-left::before,
.border-topleft::after,
.border-rightleft::after,
.border-bottomleft::after {
    border-left: 1px solid #eaeaea;
    transform-origin: 0 0;
}
.border-top::before,
.border-topbottom::before,
.border-topleft::before,
.border-topright::before {
    top: 0;
}
.border-right::before,
.border-rightleft::after,
.border-rightbottom::before,
.border-topright::after {
    right: 0;
}
.border-bottom::before,
.border-topbottom::after,
.border-rightbottom::after,
.border-bottomleft::after {
    bottom: 0;
}
.border-left::before,
.border-rightleft::before,
.border-topleft::after,
.border-bottomleft::before {
    left: 0;
}
@media (max--moz-device-pixel-ratio: 1.49), (-webkit-max-device-pixel-ratio: 1.49), (max-device-pixel-ratio: 1.49), (max-resolution: 143dpi), (max-resolution: 1.49dppx) {
    /* 默认值，无需重置 */
}
@media (min--moz-device-pixel-ratio: 1.5) and (max--moz-device-pixel-ratio: 2.49), (-webkit-min-device-pixel-ratio: 1.5) and (-webkit-max-device-pixel-ratio: 2.49), (min-device-pixel-ratio: 1.5) and (max-device-pixel-ratio: 2.49), (min-resolution: 144dpi) and (max-resolution: 239dpi), (min-resolution: 1.5dppx) and (max-resolution: 2.49dppx) {
    .border::before {
        width: 200%;
        height: 200%;
        transform: scale(.5);
    }
    .border-top::before,
    .border-bottom::before,
    .border-topbottom::before,
    .border-topbottom::after,
    .border-topleft::before,
    .border-rightbottom::after,
    .border-topright::before,
    .border-bottomleft::before {
        transform: scaleY(.5);
    }
    .border-right::before,
    .border-left::before,
    .border-rightleft::before,
    .border-rightleft::after,
    .border-topleft::after,
    .border-rightbottom::before,
    .border-topright::after,
    .border-bottomleft::after {
        transform: scaleX(.5);
    }
}
@media (min--moz-device-pixel-ratio: 2.5), (-webkit-min-device-pixel-ratio: 2.5), (min-device-pixel-ratio: 2.5), (min-resolution: 240dpi), (min-resolution: 2.5dppx) {
    .border::before {
        width: 300%;
        height: 300%;
        transform: scale(.33333);
    }
    .border-top::before,
    .border-bottom::before,
    .border-topbottom::before,
    .border-topbottom::after,
    .border-topleft::before,
    .border-rightbottom::after,
    .border-topright::before,
    .border-bottomleft::before {
        transform: scaleY(.33333);
    }
    .border-right::before,
    .border-left::before,
    .border-rightleft::before,
    .border-rightleft::after,
    .border-topleft::after,
    .border-rightbottom::before,
    .border-topright::after,
    .border-bottomleft::after {
        transform: scaleX(.33333);
    }
}

修改里面边框颜色的方法可以在样式中这样写

.border-topbottom
    &:before
      border-color #cccccc
    &after
      border-color #cccccc
  .border-bottom
    &:before
      border-color #cccccc

2.4 解决click延迟300ms的问题 fastclick插件

引入fastclick
在项目目录下，在终端中写入 --save表示开发环境还是上线打包都需要，用–save

//表示将此插件安装到项目中
npm install fastclick --save

使用
在main.js中

//引入
import fastClick from 'fastclick'

//使用
fastClick.attach(document.body)

2.5 在style中引入其他样式，需要这样 ~@

@import '~@/assets/styles/varibles.styl';

2.6 对全局事件的解绑

//绑定，作用于全局，不用时一定要解绑
window.addEventListener('scroll', this.handleScroll)

//解绑
// 使用keep-alive后出现的方法，页面即将被影藏时会执行
deactivated() {
    window.removeEventListener('scroll', this.handleScroll)
}

2.7 解决么面滑动影响其他页面的问题

在路由里面添加这句就解决了

// 解决页面滑动影响其他页面效果的问题
  scrollBehavior (to, from, savedPosition) {
    return {x:0 ,y:0}
  }

3 插件使用

3.1 stylus和stylus-loader

可以快速帮助编写css代码

npm install stylus --save

3.2 轮播图组件 vue-awesome-swiper

官网地址：https://www.swiper.com.cn/
github地址：https://github.com/surmon-china/vue-awesome-swiper
安装：npm install [email protected] --save，使用2.6.7这个版本

//使用
import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'

// require styles
import 'swiper/dist/css/swiper.css'

Vue.use(VueAwesomeSwiper, /* { default global options } */)

3.2.1 使用vue代码

3.2.2 swiper自定义图片轮播组件

3.3 数据请求 axios

1 安装

npm install axios --save

2 使用

//导入
import axios from 'axios'
//请求
axios.get('/api/index.json').then(this.getHomeInfoSucc)
//接收返回值的方法
getHomeInfoSucc (res) {
  console.log(res)
}

3 注意配置地址代理
在 config - index.js里面这么配置

// 代理配置
proxyTable: {
  '/api': {
    target: 'http://localhost:8080',
    pathRewrite: {
      // 将API 替换为 /static/mock
      '^/api': '/static/mock'
    }
  }
},

3.4 页面跳转路由

1 路由配置

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/pages/home/Home'
import City from '@/pages/city/City'

Vue.use(Router)
// 导出去的内容   是一个路由
// 当用户访问根路径时，我给用户展示HelloWorld这个组件
export default new Router({
  // 路由配置
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    }, {
      path: '/city',
      name: 'City',
      component: City
    }
  ]
})

2 路由跳转


        
          {{ this.city }}
          

3 跳转 router

this.$router.push('/')

3.5 Better-scroll 滚动插件

github地址：https://github.com/ustbhuangyi/better-scroll
1 安装

npm install better-scroll --save