vuejs 的急速入门

2016-07-16 14:56

访问量: 3330

感谢 ivan , 做出vue这么好的框架. 极大的减少了我们的工作.

如何做一个页面的显示?

1. 修改 src/routers.js:

    '/': {
      name: 'home',
      component: function (resolve) {
        require(['./views/fangbian.vue'], resolve)
      }
    },
    '/orders/new': {
      name: 'ordersnew',
      component: function (resolve) {
        require(['./views/orders/new.vue'], resolve)
      }
    },

上面的 name, 类似于 rails中的 naming route path, 至于 component, 则是语法糖.

2. 建立好对应的vue 文件

: src/views/orders/new.vue

<template>
  <x-header>
    新建订单
    <a @click="create" href="" slot="right">
      保存
    </a>
  </x-header>
  <p> 产品 id: </p>
  <p>{{{product_id}}}</p>
  <p> 购买数量: </p>
  <input class="weui_input" type="number"
    pattern="[0-9]*" placeholder="1" v-model="buy_counts"/>
  <p> 附言:</p>
  <input class="weui_input" type="text"
    placeholder="请输入附言" v-model="remarks"/>
  <p>地址 id:</p>
  <input class='weui_input' type='text'
    placeholder="地址id"  v-model='address_id'/>
</template>
<script>
import XHeader from 'vux/dist/components/x-header'
export default {
  // 下面是页面需要用带的变量
  data: function () {
    return {
      product_id: this.$route.query.product_id,
      address_id: 1,
      buy_counts: 1,
      remarks: ''
    }   
  },  
  components: {
    XHeader
  },
  methods: {
    create () {
      this.$route.router.go({name: 'order', params: {id: 1}})
      window.alert(2)
    }
  }
}
</script>
<style></style>

可以认为, 上面的 vue 文件分成三部分: <template> 标签, 类似rails中的视图. <script>标签,类似rails中的 controller, 最下方的标签,则是样式.

在vuejs 中, 没有链接到数据库的那种MODEL, 但是有跟 form object进行双向绑定的model. 所以, vue管这个模式叫 mvvm, model-view-viewmodel. 具体叫什么无所谓了. 关键大家知道它是在分层就可以了.

vue 文件中, 这三部分,会在编译时(运行命令 $ npm run build) 分别把三大快摘出来,然后把相同的代码组合到一起, 重新编译成传统的 html 文件.

vue 的<script>部分中,使用了 ES6 代码, (希望了解es6的朋友, 阮一峰已经出了开源的书: http://es6.ruanyifeng.com/#docs/style )

使得js更加强大.

vue的<style>中,可以直接使用sass 语言(CSS的变种, sass可以编译成css)

import XHeader from 'vux/dist/components/x-header'

这句话是引用了 x-header. (XHeader 类似于 rails中的 partial) ,
记得使用了引用之后,还要在代码中
66 components: {
67 XHeader
68 }
这样声明一下,才能使用.

export default { }

这句话是 es6的语法. 类似于commonJS的 export. 目的是为了给View中暴露需要使用的函数.

下面函数中,比较重要的是两个 data 方法.

  export default {
    vuex: {
      getters: {}, 
      actions: {
        showAlert,
        showLoading,
        hideLoading
      }   
    },  
    // 这个data是对View中要用到的变量的声明.  可以认为是一个getter.  (可以认为是一个 instance variable ) 
    data () {  
      return {
        product: {}
      }   
    },  

    route: {
      // 这个 data 是每次打开该页面,发起http 请求时, 需要实现的方法. 该方法中,把 上一个data()中定义的 @变量 的值给
      // 设置好. 所以,    this.$set('product',  直接对应于上面的   return { product: {} }
      data (transition) {  
        this.showLoading()
        this.$http.get(this.$config.API + '/interface/shoppings/product_details', {product_id: this.$route.params.pid}).then(function (r
          this.$set('product', response.data.product)
        }, function (response) {
          this.showAlert(response.data.error)
        })
        this.hideLoading()
      }   
    },  
    methods: {
      //
    },  
    components: {
      // XHeader
    }   
  }

如何在View中显示某个变量?

rails: <%= @item.name %>,

vue: {{{ item.name}}}

如何跳转到某个链接?

1. 跳转到 /orders/new?product_id=3 ( 用query)

<a href="javascript:;" v-link="{name: 'ordersnew', query: {product_id: 3}}"

2. 跳转到 /orders/:id/ ( 用 params )

<a href="javascript:;" v-link="{name: 'ordersnew', params: {id: 3}}"

vue 的路由都是GET方法.

都是靠GET来访问的

    '/signin': {
      name: 'signin',
      component: function (resolve) {
        require(['./views/signin.vue'], resolve)
      }
    },

vue发起http请求

如下:

    route: {
      data (transition) {
        this.showLoading()
        this.$http.get(this.$config.API + '/interface/shoppings/product_details', {product_id: this.$route.params.pid}).then(function (r
          this.$set('product', response.data.product)
        }, function (response) {
          this.showAlert(response.data.error)
        })
        this.hideLoading()
      }
    },