前端学习之一Vue.js笔记

ES6 Vue.js Babel

!

1学习任务

1.1ES6为主

ES6是基础一定要多敲，学好箭头函数、let/const、作用域、Promise、解构赋值

1.2 Vue.js

GitHub：https://github.com/vuejs/vue

Vue源码分析： 

https://segmentfault.com/a/1190000007484936 

https://github.com/DDFE/DDFE-blog/issues/18

Vue常用语法 

https://segmentfault.com/a/1190000004012600

钩子函数、基础应用、指令、computed、watch、 

组件及组件通信、路由（分为很多点，）、Transition动画、vue-cli 

下载Vue路由,打包vue-cli webpack 

分析Vue.js源码

开发环境搭建 

D:\Allison\动脑前端课程\Vue\ES6及Vue环境搭建.pdf 

路由

1.3 Babel

掌握如何使用babel-cLi 

详情见文档babel从入门到入门

1.4参考链接

CSS /trasition /animate.css

Element-UI

安装命令： 

```Shell

> npm i -g vue-cli

> mkdir my-project && cd my-project

> vue init webpack

> npm i element-ui -S

```

在 main.js 中写入以下内容：

```JavaScript

import Vue from 'vue'

import ElementUI from 'element-ui'

import 'element-ui/lib/theme-chalk/index.css'

import App from './App.vue'Vue.use(ElementUI)

new Vue({

  el: '#app',

  render: h=> h(App)

})

```

饿了么的UI，更适合desktop，迁移Boostrap为Vue专用版本

AOP面向切面编程 - 高级编程

Element 兼容 [email protected]，搭配使用能更方便地实现多语言切换。

iconfont.cn -阿里的矢量图标网站

要求： 多尝试不同的属性，自己多敲代码

Mint-UI

饿了么的UI，更适合mobile

cube-滴滴移动端UI框架

Vue中文社区

Node+babel

browsersync 

cd 到html页面， 启动命令browser-sync start --server --files 

然后通过http://localhost:3000/todo-withAddPanel.html访问

Fiddle

1.5Vue Router

Vue Router官网资料 

对于缺省的 HashHistory 模式（也就是基于页面地址的 hash 部分来实现路由功能，如http://example.com/path#/foo、http://example.com/path#/bar），是通过监听 hashChange 事件来实现： 

window.addEventListener('hashchange', () => { 

// this.transitionTo(...) 

})

router分析：http://cnodejs.org/topic/58d680c903d476b42d34c72b

“滴滴”源码分析：https://github.com/DDFE/DDFE-blog（分析得很透彻，可以看下）

待分类

如何使用GitHub 

如何搭建个人博客

思考： 

如果用原生JS怎么实现类Vue组件？

@AllisonForeverYoung 2018-01-21 09:32 字数 1011 阅读 1