vue2重写饿了么

构建

vue有本身的脚手架构建工具vue-cli,使用起来很是方便，使用webpack来集成各类开发便捷工具，好比：

• 代码热更新，修改代码以后网页无刷新改变，对前端开发来讲很是的方便
• PostCss，不再用去管兼容性的问题了，只针对chrome写css代码，会自动编译生成支持多款浏览器的css代码
• Eslint，统一代码风格，规避低级错误，对于有代码洁癖的人来讲是绝对的好东西，不过有些地方的代码校验有时候也挺麻烦的-.-
• bable，ES2015出来已经有一段时间了，可是很多浏览器尚未兼容ES6.有了bable，放心使用ES6语法，它会自动转义成ES5语法。
• Stylus，相似于SASS/SCSS，可是能够不写{}和“：”，使用起来仍是很方便的
• …

除此以外，vue-cli已经使用node配置了一套本地服务器和安装命令等，本地运行和打包只须要一个命令就能够搞定，很是的方便

开发

vue很是好的融合了react的组件化思想和angular的指令思想。 一个vue的组件将HTML、CSS、JS代码写在一个文件里面，这样既方便编写，也方便管理和修改

Axios

在vue1.x的时候，vue的官方推荐HTTP请求工具是vue-resource，可是在vue2.0的时候将推荐工具改为了axios。

使用方式都差很少，但须要注意的是：接口返回的res并不直接是返回的数据，而是通过axios自己处理过的json对象。真正的数据在res.data里：

 

axios.get(url).then((res)=>{
  this.data = res.data
})

 

Vuex

vue提供了一个数据管理工具vuex，有点相似于angular中factory和service，能够进行数据上的通讯。 好比存储一些公共变量或者是不一样组件间的数据处理等。

这个有一些高级用法在这里不细说，想要了解的能够去官方文档看，有中文版本。

const store = new Vuex.Store({  state: {  count: 0 },  mutations: { increment(state) { state.count++ } } })

axios.get(url).then((res)=>{ this.data = res.data })

Vue-Router

vue-router是vue的路由系统，能够用来建立单页应用。基本思想是在主页面中引入标签，而后定义路由，把router挂在到app上，而后把各个子页面渲染到view里面。使用起来仍是很方便的， 跳转页面只须要

router.push('test')

获取元素节点

vue2.0废除了v-el指令，全部的节点指令修改成ref，而后经过ref来获取元素节点，如

<div ref="testHook">test</div> ...js code this.$ref.testHook

 

组件间的通讯

一。若是是和子组件通讯，则使用ref就能够实现，如：

<test ref="testHook"></test>
...js code
this.$ref.testHook.add() //调用test子组件的add方法

二。使用emit来发送广播

vue2提供了一套广播机制，即一边发送广播，一边接收广播来执行相应操做。使用方法以下：

好比想要给test组件发送一个“相加”广播:

export default {
  method:{
    click(){
      Vue.$emit('add',{}) //第二个参数可做为传递数据传送到监听端口，不须要则传空对象
    }
  }
}

那么test组件中就须要监听，在created方法里写

export default {
  created(){
   Vue.$on('add',this.add)
  },
  method:{
    add(){
      this.count++
    }
  }
}

个人GitHub地址：https://github.com/LeaderAndMaster/vue2-element