Vue.js

如今的前端大战三分天下 react vue angular ，要说天朝谁与争锋，vue可谓是热火朝天。weex直接使用vue做数据层的传递，双向绑定。。。。具体知识点请各位看官老爷前往官网一探究竟。

作为一个iOS狗来看看vue.js .

• 构建项目
  -- 本人喜欢使用vue init webpack 构建。
  -- npm install vue-cli global
  -- vue init webpack
  -- npm install
  -- npm run dev
  如此 🐔构建成功。

• 文件组成 (只关心自己需要的)
  -src
  -- components 组件
  -- router
  --. main.js
  --.app.vue

main.js是入口函数

import Vue from 'vue'
import App from './App'
import router from './router'
import axios from 'axios'

Vue.config.productionTip = false
Vue.prototype.axios = axios
// Vue.use(axios)
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App }
})

这里看到 初始化了一个Vue 并且注入了网络请求类
这里不用 vue-resouce vue作者也做过申明 vue-resource不作为官方请求类。
使用axios
axios 安装
npm install axios --save
好消息是 webstorm爽快的支持vue了，写起代码也是飞起。但还是有些坑 注意下好了
Vue.prototype.axios = axios
这里就是申明使用的网络请求是啥子
以后直接 this.axios.get().then(res=>{success},res=>{error})即可以做请求

• 写代码了
  app.vue 是你做逻辑的部分。那你所有的组件 应该写在component中。
  ** 我们写一个组件万万 这个组件有网络请求 有数据绑定

<div class="moviee">
  <h1>{{movie}}</h1>
<button @click="hi">{{movie}}</button>
</div>
</template>
<script>
  export default {
    name: 'moviee',
    data () {
      return {
        movie: 'Welcome to Your Vue.js App'
      }
    },
    methods: {
      hi: function () {
//        alert('sda')
        let instance = this
        this.movie = 'fuck'
        instance.axios.get('https://foxforever.cn:3003/movies').then(function (response) {
         
        })
      }
    }
  }
</script>
<style scoped>
  h1, h2 {
    font-weight: normal;
  }
  ul {
    list-style-type: none;
    padding: 0;
  }
  li {
    display: inline-block;
    margin: 0 10px;
  }
  a {
    color: #42b983;
  }
</style>

export default这个是vue的组件固定形式。 可以 let vm = new Vue({})创建一个vue对象。
这里绑定了个movie，当请求的时候 movie被改为fuck。观众老爷们可以体会体会。
.
还有vue store这些我还没接触不写了 。困了睡觉了