vue 去哪儿学习总结

Vue - 幕布

Vue

学习前提
- .js：基础语法
- es6：语法
- webpack：项目打包
- npm：node包管理工具
知识点
- Axios：ajax数据的获取
- Vue Router：多页面之间的路由
- Vuex：各个组件之间的数据共享
- 异步组件：代码上线，性能更优
- Stylus：编写前端样式
- 递归组件：组件自身调用自己
- 插件
- 公用组件：拆分
MVVM
- 传统mvp设计模式：Model <--> Presenter <--> View (大部分操作都是在presenter中做DOM的操作) （面向DOM编程）
- mvvm设计模式：Model 数据 <--> ViewModel（DOM Listeners,Data Bindings）(由vue控制)<--> View 视图（面向数据编程）
页面组件化
- 将页面整体拆分多个部分，每个组件就是一个页面的区域
- 全局组件：Vue.component
- 局部组件：普通变量，同时需要注册局部组件
- 父组件向子组件传值用v-bind的形式，使用props接收（v-bind可以简写为:）
- 子组件向父组件传值：this.$emit
- 每一个组件都是Vue的实例
Vue实例的生命周期钩子
- 生命周期函数就是vue实例在某一个时间点会自动执行的函数
模版语法
- {{name}} 插值表达式
- v-text：等同于插值表达式
- v-html：html内容绑定
- v-bind简写:
- v-on简写@
计算属性，方法，侦听器
- 计算属性：computed，内存缓存的形式，依赖的值没有变化时，不会重新执行：（计算属性是基于它们的依赖进行缓存的）
  - 有get，set方法
- 方法：methods不保留缓存，页面任意变量变化都会重新执行
- 侦听器：watch，也有缓存的机制，不过语法较复杂，（当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。）
Vue中的样式绑定
- :class="{activated: isActivated}"
- :class="[activated , activatedOne]"
- 三元运算：this.activated = this.activated === "activated" ? "" : "activated"
- :style="styleObj" 里面是个Object ，也可以写数组 :style="[styleObj,{fontSize:'20px'}]"
Vue中的条件渲染
- v-if="show"：显示与取消会频繁的创建与清除DOM，不建议使用；同时对应v-eif，v-else，必须紧邻使用
- v-show="show"：优先使用，---> style="display: none;"
- 给DOM元素标签加key值，防止vue元素的自动复用
- 在<template>元素上使用v-if条件渲染分组，最终的渲染结果将不包含<template>元素
Vue中的列表渲染
- <div v-for="(item,index) of list" :key="item.id">{{item.text}} --- {{index}}</div>
- vue中有专门的数组变异方法操作：push pop shift unshift splice sort reverse；或者直接改变数组的直接引用；或者使用Vue.set,vm.$set
- <template> 模版占位符：不会真正的渲染到页面上
- 对象：对象增加元素也是重新直接改变引用；也可以使用set方法，Vue.set(vm.userInfo,"address","beijing") 或者 vm.$set(vm.userInfo,"address","beijing")
组件
- 使用 is ="row" 属性解决模版标签组件bug
- 在子组件中定义data时，data必须是个function() ，不能是个对象
- div标签中：$refs.标签名，获取的是标签对应的DOM元素；在组件中使用$refs.标签名，获取的是子组件的引用
父子组件传值
- 父组件通过属性的方式向子组件传值
- 子组件不能直接改变父组件的数据，通过克隆的形式，更改副本的值
- 子组件向父组件传值通过事件的形式 this.$emit('inc', 2) --》<counter :count="2" @inc="handleIncrease"></counter> --》handleIncrease: function(step)
组件参数校验与非props特性
- 校验：<child :content="123"></child> --》props: {content: [Number, String]},
- props特性：需要父组件传，子组件接收，不会将属性显示在DOM中
- 非props特性：父组件传，子组件不接收，会将属性显示在DOM中
给组件绑定原生事件
- <child @click.native="handleClick"></child> ：组件绑定加.native 原生事件
非父子组件之间传值
- 方式1：vuex
- 方式2：总线机制：Vue.prototype.bus = new Vue();
Vue中使用插槽
- 具名插槽：<div class="header" slot="header">header</div> --》 <slot name="header"></slot>
- 作用域插槽：slot-scope="props"
动态组件与v-once指令
- <component :is="type"></component>
- v-once：从内存中取组件，有效提高静态内容的展示效率
Vue环境配置
- 安装nodejs
  - node -v
  - npm -v
- 安装git
  - 配置ssh(免密登陆)
  - 创建项目及下载克隆
- 安装vue-cli
  - npm install --global vue-cli
  - 项目初始化：vue init webpack Travel
  - 进入项目目录：npm run dev
  - 启动项目：npm run start
- 项目同步
  - git add .
  - git commit -m 'project initialized'
  - git push
项目代码结构
- README.md：项目说明文件
- package.json：第三方依赖包
- package-lock.json：锁文件，确定第三方依赖包的版本
- index.html：默认首页模版
- .postcssrc.js：postcss的配置项
- .gitignore：指定格式文件不上传到git中
- .eslintrc.js：代码规范检测
- .eslintignore：指定文件夹下内容不受eslintrc.js检测
- .editorconfig：配置编辑器语法
- .babelrc：vue单文件解析器，转换浏览器可以解析的内容
- static：静态资源
- node_modules：第三方依赖的包
- src：整个项目源代码
  - assets：项目的图片
    - style
      - border.css：1像素边框
  - components：项目的组件
  - router：项目的路由
  - App.vue：原始的根组件
  - main.js：项目的入口文件
- config：项目的配置文件
  - index.js：基础的配置信息
  - dev.env.js：开发环境的配置信息
  - prod.env.js：线上环境的配置信息
- build：项目打包的webpack的内容
单文件组件与Vue中的路由
- 单文件组件：以.vue结尾
- 路由就是根据网站不同，返回不同的内容给用户 <router-view/>
多页应用
- 页面跳转--返回HTML
- 优点：首屏时间快，SEO效果好
- 缺点：页面切换慢
单页应用
- 页面跳转-JS渲染
- 优点：页面切换快
- 缺点：首屏时间稍慢，SEO差
项目代码初始化
- reset.css：样式统一
- 300毫秒延迟： npm install fastclick --save
- border.css：1像素边框
- iconfont：注册
- 项目同步
  - git add .
  - git commit -m 'project init'
  - git push
- 创建分支
  - git pull
  - git checkout index-swiper
  - 查看：git status
- 合并分支：在自己的分支上开发，测试完成后再上传
  - git add.
  - git commit -m 'change'
  - git push
  - 检出master：git checkout master
  - 合并：git merge origin/index-swiper
  - 上传master：git push
安装stylus，在Travel目录下
- npm install stylus --save
- npm install stylus-loader --save
Chrome安装vue devtools
报错：Expected indentation of 0 spaces but found 2
- .eslintrc.js中rules中增加："indent": ["off", 2]
css
- 1rem = html font-size = 50px
- .wrapper >>> .swiper-pagination-bullet-active 样式穿透，不受scoped限制
主题
- 定义背景色的全局变量，创建 varibles.styl 文件
- style中引用：@import '~@/assets/styles/varibles.styl'
webpack.base.conf.js
- build目录下resolve中可以定义别名：'styles': resolve('src/assets/styles'),
- 修改完需要重启项目
轮播图
- vue-awesome-swiper：https://github.com/surmon-china/vue-awesome-swiper
- npm install [email protected] --save
vue-ajax
- axios：npm install axios --save
- config -- index.js ：proxyTable
页面滚动
- better-scroll：https://github.com/ustbhuangyi/better-scroll
- npm install better-scroll --save
函数节流
- setTimeout：控制函数执行的频率
vuex：数据框架
- https://vuex.vuejs.org/zh/
- npm install vuex --save
Vue Router：路由
- 编程式导航
- 路由切换每次返回到最顶层：scrollBehavior (to, form, savedPositon)
<keep-alive>json数据存入内存，不重复加载
对全局事件的绑定与解绑
- 绑定：activated () {window.addEventListener('scroll', this.handleScroll)}
- 解绑：deactivated() {window.removeEventListener('scroll', this.handleScroll)}
通过IP地址访问项目
- 在package.json中 -- scripts --dev下的webpack-dev-server后面增加 --host 0.0.0.0
- 手机端输入地址使用，无线局域网适配器 WLAN:中提供的IP
- 关闭防火墙
- Android手机访问白屏，不能识别proxy：npm install babel-polyfill --save
  - main.js添加import 'babel-polyfill'
项目打包
- npm run build
- 构建完成后，目录中会多出一个dist的目录，这就是最终要上线的代码，将项目放到后端项目中
- 设置后端项目的运行目录，修改index.js下的build中 assetsPublicPath: '/', --> assetsPublicPath: '/project',
异步组件实现按需加载
- index.js中routers的componet : Home 改为 component: () => import('@/pages/home/Home')，同时头部不需要import了
- 当app.js比较小的时候不建议拆分，因为请求http的代价比加载每个页面的js要高
后续
- vue基础api
- 核心插件
  - vue-router
  - vuex
  - vue 服务端渲染
- vue插件
  - 资源列表-vue资源

vue 去哪儿学习总结

猜你喜欢