Vue 隨筆

由原文章「V for VEndetta」與「 Vue，關於作用域。 」合併。

這次面試聽到公司用 Vue.js ──嗯，沒聽過。晚上試試看吧。

然後我發現 Vue.js 頗有趣的，而且用 Angular 的我還有點熟悉感……

用這個簡單的小程式碼講些東西吧：

<div id="app">
    <p> {{ message }} </p>
</div>

<!-- 略 -->
var app = new Vue
({
    el: "#app",
    data:
    {
        message: "Hello VueJS!"
    }
});

來說說這些程式碼的意義吧：

1. new Vue 的意思是建立一個新的 Vue 物件。因為這個新物件裡面可能會放很多東西，所以我們要借用 JSON 格式 {} 來宣告。
2. el 的意思是是 element，也就是 HTML 元素。它會讓 Vue 知道這個物件應該作用到哪個 HTML 元素上。
3. data 會放置訊息。裡面的 message 就會對應到 HTML 的 {{ message }} 。

今天在撰寫一個小程式：

var app = new Vue
({
    el: '#app',
    data:
    {
        foo:"Hello there",
        bar:countries_data,
        ipt:"",
    },
    methods:
    {
        ret: function()
        {
            this.bar.forEach(function(ic)
            {
                if ( this.$data.ipt[0] == ic.abc )
                {
                    console.log( ic.xyz );
                }
            });
        }
    }
});

這個程式在執行 ret 函式的時候，應該要檢查 data 裡面的 ipt 是否與 bar 裡面的 abc 吻合。而且因為 bar 是陣列，所以我用了 forEach 語法……結果我一直得到錯誤訊息：this.$data is undefined。

上網問人，才發現是我搞錯了作用域：如果我希望找到 ipt，那把 this 放到 ret 函式裡面，就絕對找不到──我應該要把 this 以變數的形式，放在 forEach 函式的外面。然後在該函式裡面，呼叫變數：

var vm = this;
this.bar.forEach(function (ic) {
  console.log(vm.ipt);
});

把 vm 放在 forEach 外面的話，forEach 函式呼叫的 vm 就可以保留住我要的作用域了。

另外，好像還有 arrow function 以及 bind 語法能用……