给正在学习Vuejs同学的几个小Tips.-原创手记-慕课网

如果你还不知道vuejs, 赶紧去恶补.

它是跟 Angular, React 齐名的 One page App 框架. 但是它更加先进, 也更加好学.

前些日子闹的沸沸扬扬的淘宝 weex 框架, 跟vue就有密切的关系.

Vue的开发效率极高. 一个商户端app的前端,我们就是用一周的时间写好的.

看本文之前, 先去看一下中文文档: http://cn.vuejs.org/guide/
本文整理了我们团队在开发项目时所遇到的问题和坑:

如何做一个页面的显示?

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 文件


# 下面内容存在于某个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,
<style> 最下方的标签,则是样式.

在vuejs 中, 没有链接到数据库的那种MODEL, 但是有跟 form object进行双向绑定的model. 所以, vue管这个模式叫 mvvm, model-view-viewmodel.

具体叫什么无所谓了. 关键大家知道它是在分层就可以了.

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

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

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

一个例子看 import


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

这句话是引用了 x-header. (XHeader 类似于 rails中的 partial) , 记得使用了引用之后,还要在代码中


components: {
  XHeader
}

这样声明一下,才能使用.

什么是 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中显示某个变量?

使用 {{ ... }}


jsp/php/.net/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()
      }
    },

如何与jQuery 一起使用?

非常简单, 普通的HTML怎么用, vue中就怎么用.

页面刷新完的钩子方法是什么？


export default(){

   data() {

   }
}

如果你有哪些不明白的问题, 可以在留言中发问~

给正在学习Vuejs同学的几个小Tips.原创