Back

vuejs 的急速入门

发布时间: 2016-07-16 06:56:00

感谢 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()
      }
    },

Back