前端学习笔记

vue前端框架学习笔记分享！下图为前端学习的基础知识框架，大致覆盖全部内容，包括DOM等基础知识点、vue学习、下载源码资料学习、关于vue的ui框架。如果感兴趣的话，不妨收藏本张思维导图跟着一起学习呀！

前端技术知识学习

• vue学习
  • 搭建vue开发环境
    • 1.安装node.js（https://nodejs.org/en/）
      • 可以参考 https://www.cnblogs.com/zhaomeizi/p/8483597.html
      • 使用vue必须要安装node.js吗
        • 直接引入vue的方式也可以，只是使用npm安装Vue可以方便包管理。等到应用需要越来越多的前端库和前端框架的时候，一个一个在HTML文件中引入会很不方便。 然后直接使用Vue命令，会使用webpack工具，创建项目，前端构建工具会让前端开发更加高效。
    • 2.设置nodejs prefix（全局）和cache（缓存）路径
      • 在nodejs安装路径下，新建node_global和node_cache两个文件夹
      • npm config set cache "D:\vueProject\nodejs\node_cache" npm config set prefix "D:\vueProject\nodejs\node_global"
    • 3.基于 Node.js 安装cnpm（淘宝镜像）
      • npm install -g cnpm --registry=https://registry.npm.taobao.org
    • 4.设置环境变量
      • 修改系统变量PATH：D:\SoftWare\nodejs\node_global 新增系统变量NODE_PATH：D:\SoftWare\nodejs\node_modules
    • 5.安装Vue
      • cnpm install vue -g
        • “-g”这个参数意思是装到global目录下，也就是上面说设置的 “d:\nodejs\node_global”里面。
    • 6.安装vue命令行工具，即vue-cli 脚手架 cnpm install vue-cli -g
      • 脚手架
        • vue-cli就是Vue的脚手架工具，和我们工地看到的脚手架真是那么一回事，它帮助我们搭建基本的开发环境，好比架子搭建好了，利用它可以搞定目录结构，本地调试，单元测试，热加载及代码部署等。
        • 也可以自己搭建自己的脚手架
    • 7.新项目的创建：自行新建一个保存项目的文件夹：vue init webpack-simple 项目名称（使用英文）
    • 8.安装工程依赖模块
      • 定位到mytest的工程目录下，安装该工程依赖的模块，这些模块将被安装在：mytest\node_module目录下，node_module文件夹会被新建，而且根据package.json的配置下载该项目的modules cd mytest cnpm install cnpm run dev
  • 关于 VueCLI3 和 VueCLI2 以及 Vue2.x Vue3.x
    • Vue CLI 3 是 Vue CLI 2 的升级版本，并不是 Vue3.0 。 Vue3.0 目前（2019 年 3 月 5 日）还没有正式发布。Vue CLI 3 和老版本的 Vue ClI 创建的项目方式是不一样的， 创建项目的用法是一样的。Vue CLI 3 在项目编译速度上面做了一些优化。无论你用哪个版 本的 ClI，Vue3.0 发布之前写代码的方式都是一样的。目前 Vue3.0 还在重写中，暂时还没 有任何消息，Vue3.0 发布后我们会第一时间更新教程。
    • VueCLI 旧版本的安装以及创建项目
      • 1、搭建vue的开发环境 ，安装vue的脚手架工具 官方命令行工具 npm install --global vue-cli / cnpm install --global vue-cli
      • 2、创建项目 必须 cd到对应的一个项目里面 vue init webpack vue-demo01 cd vue-demo01 cnpm install / npm install npm run dev
      • 3.另一种创建项目的方式 （推荐） vue init webpack-simple vuedemo02 cd vuedemo02 cnpm install / npm install npm run dev
    • VueCLI3 的安装以及创建项
      • 1.装 vue 的脚手架工具（VueCli3） 官方命令行工具 npm install -g @vue/cli 或者：cnpm install -g @vue/cli 或者：yarn global add @vue/cli
      • 2.创建项目 必须cd 到对应的一个项目里面 vue create hello-world 运行：npm run serve 编译：npm run build
  • 双向数据绑定
    • MVVM vue就是一个MVVM的框架 M Model V View model的改变会影响view视图，view视图的改变也会影响model
  • component组建
    • 引入组建
      • 创建components文件夹，创建组建 Home.vue
    • 挂载组建
      • 在根组件中引入 import Home from './components/Home.vue'
    • 在模板中应用
      • <script>标签中应用 components:{'v-home':Home} <template>模板中应用 <v-home></v-home>
  • 组件的生命周期
    • 生命周期含义：
      • 组件挂载以及组件更新，组件销毁的时候触发的一系列方法
      • • 方法
          • beforeCreate(){console.log('实例刚刚创建1')}, created(){console.log('实例已经创建2')}, beforeMount(){console.log('模板编译之前3')}, mounted(){console.log('模板编译完成4')}, beforeUpdate(){console.log('数据更新之前5')}, updated(){console.log('数据更新完毕6')}, beforeDestory(){console.log('数据销毁之前7')}, destroyed(){console.log('数据已经销毁8')}
  • 与接口数据的交互
    • vue-resource的使用
      • 1.安装 cnpm install vue-resource --save 2.main.js中引入 import VueResource from 'vue-resource'; Vue.use(VueResource); 3.在组建里面直接使用 var api = "http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1"; this.$http.get(api).then( function(response){ console.log(response); alert(response.body.result); },function(err){ } )
    • axios的使用
      • cnpm install axios --save 哪里用哪里引入 import Axios from 'axios';
    • https://github.com/camsong/fetch-jsonp
  • 组件之间的传值
    • 父子组件主动获取对方的值
      • 父组件主动获取子组件的值
        • 父组件在引入子组件的时候定义一个ref 然后通过this.$ref.header.属性或者方法去调用(此处的header为ref的值)
      • 子组件主动获取父组件的值
        • 通过如下方式获取 this.$parent.数据 this.$parent.方法
    • 父组件给子组件传值
      • 1.父组件调用子组件的时候 绑定动态属性 比如：home组件中动态引入了header组件 <v-header :title="title" :homemsg="msg" ></v-header> home组件中的msg组件值为-我是首页 2、在子组件里面通过 props接收父组件传过来的数据 props里面也可以验证参数的类型，同时可以暴露方法及整个组件对象 在header组件中 <tmplate> <div> 我是头部组件==={{homemsg}}</div> </template> <script> export default{ data(){ return{ msg:'我是头部组件' } } },props:['homemsg'] </script> 最终结果--头部组件中的输出值为：我是头部组件===我是首页
    • 非父子组件的传值
      • 在model文件夹在创建VueEvent.js
        • import Vue from 'vue'; var VueEvent = new Vue(); export default VueEvent;
      • Home.vue中 广播消息给其他组件
        • import VueEvent from '../model/VueEvent.js'; VueEvent.$emit('to-news',this.msg);//to-news 为广播的消息名称
      • 其他组件需要在组建加载后接受消息
        • mounted(){ VueEvent.$on('to-news',function(data){ console.log(data); }) }
  • vue路由
    • https://router.vuejs.org/zh/guide/#javascript
    • 路由配置
      • 1、创建组件 引入组件 2、定义路由 （建议复制s） const routes = [ { path: '/foo', component: Foo }, { path: '/bar', component: Bar }, { path: '*', redirect: '/home' } /*默认跳转路由*/ ] 3、实例化VueRouter const router = new VueRouter({ mode:'history',//hash模式改为history模式 routes // （缩写）相当于 routes: routes }) 4、挂载 new Vue({ el: '#app', router， render: h => h(App) }) 5 、根组件的模板里面放上这句话 <router-view></router-view> 6、路由跳转 <router-link to="/foo">Go to Foo</router-link> <router-link to="/bar">Go to Bar</router-link>
    • 配置动态路由
      • 1.配置动态路由 routes:[ //动态路径的参数以：开头 {path:'user/:id',component:User} ] 2.在对应的页面 this.$route.params 获取动态路由的值
    • get方式获取路由的参数
      • 需要注意写在不同的界面跳转的呈现存在差异
      • <ul> <li v-for="(item,key) in list"> <router-link :to="'/content?id='+key">{{key}}--{{item}}</router-link> </li> </ul> 在接收值的组件 mounted方法中打印 console.log(this.$route.query)
    • 路由结合请求数据
      • 路由配置
        • <ul> <li v-for="(item,key) in list"> <router-link :to="'/content/'+item.aid">{{item.title}}</router-link> </li> </ul>
      • 发出请求
        • 获取请求的新闻列表
          • methods:{ requestData(){ //jsonp请求的话 后台api接口要支持jsonp var api='http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1'; this.$http.jsonp(api).then((response)=>{ console.log(response); //注意：用到this要注意this指向 this.list=response.body.result; },function(err){ console.log(err); }) } }, mounted(){ this.requestData(); }
        • 请求的新闻列表点击之后展开新闻详情
          • mounted(){ console.log(this.$route.params.aid); var aid = this.$route.params.aid; this.requestData(aid); },methods:{ requestData(aid){//获取新闻链接点击之后传递过来的参数 var api = "http://www.phonegap100.com/appapi.php?a=getPortalArticle&aid="+aid; this.$http.jsonp(api).then((response)=>{ console.log(response); this.list=response.body.result[0]; },(err)=>{ console.log(err); }) } }
    • 编程式导航
      • 1.this.$router.push({path:'news'}) 2.this.$router.push({path:'content/495'})
    • 命名路由
      • const routes=[ {path:'/home',component:Home}, {path:'/news',component:News,name:'news'},//name属性为命名路由所加参数 {path:'/content/:aid',component:Content},//动态路由 {path:'*',redirect:'/home'}//默认跳转路由 ] this.$router.push({name:'news'})
    • 嵌套路由
      • const routes=[{ path:'/user', component:'User'，//<router-view></router-view>需要设置在这个组件的template中 childre:[ {path:'useradd',component:UserAdd}, {path:'userlist',component:UserList} ] }]
  • 学习过程中的疑点
    • vue运行的机制
      • https://www.cnblogs.com/hello-wuhan/p/6961948.html
    • 入口文件不一定为main.js文件
      • https://blog.csdn.net/grape875499765/article/details/75279343
    • 删除下载下来的工程中的node_modules，不到万不得已不使用
      • cnpm install rimraf -g rimraf node_modules
  • vuex
    • 解决不同组件的数据共享，数据持久化
      • 大项目中使用Vuex
        • 1.在 src文件夹在新建vuex的文件夹 2.在vuex文件夹中新建一个store.js 3.安装vuex cnpm install vuex --save 4.在创建的store.js中引入vuex并且use vuex import Vue from 'vue'; import Vuex from 'vuex'; Vue.use(Vuex); 5.定义数据 //state在vuex中用于存储数据 var state={ count:1 } 6.定义方法 // 里面放方法，方法主要用于改变state中的数据 var mutations={ incCount(){ ++state.count; } } //vuex实例化 const store = new Vuex.Store({ state:state, mutations:mutations }) export default store;//暴露出去store
          • 其他组件中属性的使用
            • 1.引入store.js import store from '../vuex/store.js' 2.注册 export default{ data(){ return{ msg:'', value:'' }}, store,//在此处注册 methods:{} } 3.获取state里面的数据 this.$store.state.count; 4.出发mutations改变state中的数据 this.$store.commit('incCount');
      • 小项目中使用LocalStorage或者sessionStorage
• 下载源码资料学习
  • 1.vue学习地址 https://cn.vuejs.org/v2/guide/ 2.MUI地址 http://dev.dcloud.net.cn/mui/ 3.构建地址 https://www.cnblogs.com/dmcl/p/6722315.html 4.国内镜像 https://npm.taobao.org/ 5.node.js镜像 https://npm.taobao.org/mirrors/node/latest/docs/api/index.htm 1.比较贴近eoms项目开发的开源项目 项目演示地址：http://139.196.87.48:9002/kitty/#/generator/generator 用户名：admin 密码：admin 项目码云查看地址：https://gitee.com/liuge1988/kitty-ui git地址：https://gitee.com/liuge1988/kitty-ui.git 代码生成器地址码云查看地址：https://gitee.com/liuge1988/kitty-generator 代码生成器git下载地址：https://gitee.com/liuge1988/kitty-generator.git 2.路由，单表增删改查联系项目地址 在线演示地址：https://gitee.com/ruyangit/my-vuejs-skye-cli git下载地址：https://gitee.com/ruyangit/my-vuejs-skye-cli.git 3.常用组件联系项目-导航，时间组件，单选，多选，下拉框 git下载地址：https://gitee.com/catchlife/backend.git 在线演示地址：http://cms.edaoe.com/ （没有账号、密码，可以直接登录） 4.购物车进度条，附件上传，tab练习项目 git下载地址：https://gitee.com/dahouge/houtai 在线演示地址：https://dahouge.oschina.io/houtai/dist/#/activePublic
• nginx
• 基于vue的ui框架
  • mint-ui-基于移动端
  • elementUI-基于pc端
    • elementUI的使用 1.找官网 http://element.eleme.io/#/zh-CN/component/quickstart 2.安装 cnpm i element-ui -S //-S表示 --save 3.引入element UI的css和插件 import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; Vue.use(ElementUI); 4.在webpack.config.js 中配置file_loader { test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/, loader: 'file-loader' }//注意需要在package.json中查看是否已经存在file_loader，如果不存在，则需要安装 cnpm install file-loader --save-dev 5.看文档直接使用。
• 基础知识点
  • DOM
    • DOM是文档对象模型(Document Object Model)的简称.借助DOM模型,可以将结构化文档转换成DOM树,程序可以访问,修改树里的节点,也可以新增,删除树里的节点.程序操作这棵DOM树时,结构化文档也会随之动态改变. DOM并不是一种技术,它只是访问结构化文档(主要是XML文档和HTML文档)的一种思想.基于这种思想,各种语言都有自己的DOM解析器,通过DOM解析器的作用就是完成结构化文档和DOM树之间的转换关系.通常来说,DOM解释器解析结构化文档,就是讲磁盘上的结构化文档转换成内存中的DOM树.而从DOM树输出结构化文档,就是讲内存中的DOM树转换成磁盘上的结构化文档.
  • node.js
    • node.js是什么？ Node.js是一个Javascript运行环境(runtime)。 node.js类似于jvm vue类似于springboot等框架
  • JavaScript
    • 1. ECMAScript（核心） 作为核心，它规定了语言的组成部分：语法、类型、语句、关键字、保留字、操作符、对象
      • • 什么是ES5 作为ECMAScript第五个版本（第四版因为过于复杂废弃了）
        • 什么是ES6 ECMAScript6在保证向下兼容的前提下，提供大量新特性
          • 1.块级作用域 关键字let, 常量const 2.箭头函数 Arrow functions
    • 2.DOM（文档对象模型） DOM把整个页面映射为一个多层节点结果，开发人员可借助DOM提供的API，轻松地删除、添加、替换或修改任何节点。 PS：DOM也有级别，分为DOM1、DOM2、DOM3，拓展不少规范和新接口
    • 3. BOM （浏览器对象模型） 支持可以访问和操作浏览器窗口的浏览器对象模型，开发人员可以控制浏览器显示的页面以外的部分。 PS：BOM未形成规范
  • node.js与JavaScript的区别
    • node.js和前端js有什么区别 进行前端开发工作需要掌握技能有html、 css、js以及各种前端框架，把这些技术玩6就可以成为一名合格的前端开发工作者而进行nodejs开发，需要掌握js、web服务器原理、关系数据使用， 如果玩想玩的深一点， 那么还需要掌握网络原理以及一些服务器方面的知识。 前端开发和nodejs开发， 两者间除了js是重合的以外， 其它技能互相之间完全没有半毛钱关系。语法一样，组成不一样 JavaScript： ECMAScript（语言基础，如：语法、数据类型结构以及一些内置对象） DOM（一些操作页面元素的方法） BOM（一些操作浏览器的方法） Node.js： ECMAScript（语言基础，如：语法、数据类型结构以及一些内置对象） OS（操作系统） file（文件系统） net（网络系统） database（数据库）
    • Node.js与JavaScript的区别是什么？ Javascript 主要应用前端是编程语言，客户端编程语言(需要浏览器的javascript解释器进行解释执行) node.js 主要应用后端， 1个平台运行环境(一个基于Chrome JavaScript运行时建立的平台，它是对Google V8引擎进行了封装的运行环境) 简单的说node.js就是把浏览器的解释器封装起来作为服务器运行平台