vue.js快速入門

之前看到多少天學習系列，我都深感煩躁，短短几天怎麼能夠精通，那是對於他們而言。可是，今天我要寫一個快速入門，本人以爲仍是有一點用處，由於，我不可能在一天以內精通某種東西，卻能夠在一兩小時入門。

回到vue自己，當初據說它只作view層。而向通常人隱藏了，其實它的view是帶有model的。它的特色之一是雙向綁定，可是它出現的頻率太多，人們早就對它沒那麼驚喜了。若是你之前看過angular，過濾器，路由，指令這些必定不會陌生，在vue中它們都有。

下面即是個人一次快速入門，雖說是快速入門，並不叫Javascript快速入門，看以前還要有JS的基礎，我是帶着三個問題：

1. 做用域

2. 自定義事件(event)和用戶事件(methods)

3. vue文件與普通引入的區別

1. 做用域

首先，咱們看它的做用域，直接上代碼。

// 1.定義
var MyComponent = Vue.extend({
  template: '<div>A custom component!</div>'
})

// 2.註冊
Vue.component('my-component', MyComponent)

// 3.建立根實例
new Vue({
  el: '#example'
});

不當心就把組件的API文檔貼上來了，咱們看代碼說明：若是有看過angular的同事，應該會對ng-app不陌生。那是代表它如下的東西都會在angular之內，ng-controller則是這個controller內的變量能夠訪問。同理，咱們看3那裏，實例化一個vue對象，el指明瞭它的做用域。就在這個example的元素。咱們能夠修改一下，加一個data看看：

new Vue({
  el: '#example',
  data: {
      text: 'hello,vue;
  }
});

不用猜也知道，這個text是能夠綁定在example元素所在的範圍內。下面，咱們做死一下，試試在這個組件去訪問
這個text屬性。

var MyComponent = Vue.extend({
  template: '<div>{{text}} A custom component!</div>'
})

而後，就能夠發現這並不能顯示出來。這時候應該怎麼作呢？回到文檔，這是一個很好的方案，當你快速入門的時候，
不管何時都要想起文檔，找不到再去網絡上。篇幅有限，並不能從零開始教到一百，並且我也是跟你同樣入門級的。廢話不說回到代碼。這裏的text不能訪問是正確的，一個組件就是要可以複用，爲了達到這個目的，纔跟外面的分開。可是components寫法真的有data這個選項，可是隻接收一個function。這樣作也是爲了每一個組件能夠獨立。

組件實例的做用域是孤立的，可使用 props 把數據傳給子組件，這裏就很少說了。

2. 自定義事件(event)和用戶事件(methods)

我在翻文件的時候，看到了這樣的東西。

{
    methods: {

    },
    events: {

    }
}

用戶事件通常都放在methods，新手這時又看到了events，它們有什麼區別呢？看標題。

至於詳細的，仍是要看文檔。事件無非就是監聽和觸發，與angular類似，它也有on emit這相似的實現。

vue有一個比較有趣的東西，事件修飾符。或者其餘構架也會有，可是看起來頗有逼格。

綁定多個事件
<div v-on="click: a, keyup: b">

也能夠這樣寫
<div v-on:click="a" v-on:keyup="b">

而後還有縮寫
<div @:click="a" @:keyup="b">

3.vue文件與普通引入的區別

對於大型項目，可能會用vue文件這種方式來組織代碼。這跟react就有點像了，樣式，腳本，模板都在一個文件內。
這樣很好管理，壞處就是初學者會暈，若是有好多的組件一塊兒。

在這裏注意一下，組件就是一個vue文件，而後都是經過require的方式進來（廢話）。在普通引入腳本的方式，你能夠這樣建立組件和過濾器：

Vue.component('name', function(){
  // ...
});

Vue.filter('name', function(){
 // ...
});

若是換到了vue文件這種模式，你得明白這是一個大前提，這是適合大型項目使用的，因此寫法也會變得規範。這時，你會有components，filters這種目錄，再經過require進入到你所須要的地方。全部寫法都是模塊化你要記得導出這個方法，這一點要注意。

<script>
import Hello from './components/Hello'
// import Filter from './filter/filter' 僞代碼
export default {
  data: function() {
    return {
      text: 'hello'
    }
  },
  filters: {
    // up: Filter.up 僞代碼
    up: function(val) {
      return val.toUpperCase();
    }
  },
  components: {
    Hello
  }
}
</script>

寫在最後

vue.js應該快迎來2.0。不知道還要不要再來一個快速入門，vue.js發展得挺快，東西也像react相似的全家：vue-router,vuex。對於入門來講其實仍是有點累，從最初只要引入一個文件，到使用構建工具，再到一系列全家桶。前端開發已經變得沒那麼純粹，或者最後仍是看一個項目怎麼這些工具吧。