Data & 模板語法

2019鐵人賽 vue.js

Andy Tsai

團隊好想工作室第二屆鐵人賽

2018-10-19 09:13:11

2333 瀏覽

分享至

菜菜菜的 Vue 30天 - Day4

在前一章有介紹了如何去撰寫 Hello Wolrd，裡面有使用了 Data 及模板語法，在這章就來介紹一下這 2 個東西。

模板語法

先來講一下模板法好了。

以前一章寫的一個 Hello World 來說。

<body>
    <div id="app">
      <p>{{ message }}</p>
    </div>
</body>
<script>
    const vm = new Vue({
      el: '#app',
      data: {
        message: 'Hello World'
      }
    });
</script>

我們在 body 的地方寫了一個 {{}} 這樣的東西，我可以在這雙花括號裡面去放入動態的資料來做渲染。

所以我們就能夠將 data 裡的 message 放進 {{}} 渲染。

另外我們也能夠在 {{}} 裡面做計算或是其他邏輯執行，例如：

<body>
    <div id="app">
      <p>{{ count * 2 }}</p>
    </div>
</body>
<script>
    const vm = new Vue({
      el: '#app',
      data: {
        count: 5
      }
    });
</script>

我們在 {{}} 內去執行 count * 2 ，他會執行運算後渲染出 10。

但雖然我們能夠在 {{}} 裡面做運算，但其實使用 computed 來做這件事會更適合，後面的章節會再提到。

再來我們也能夠在 {{}} 裡面執行除了運算以外的程式邏輯，例如：

<body>
    <div id="app">
      <p>{{ arr.map(item => {
        return item * 2
      }) }}</p>
    </div>
</body>
<script>
    const vm = new Vue({
      el: '#app',
      data: {
        arr: [1, 2, 3, 4, 5]
      }
    })
</script>

我可以在裡面執行迴圈，渲染結果如下：

但是在 {{}} 主要會是用在渲染文字或是數字。

Data

在 Vue 實例內可以建立一個 Data 的方法。

Vue 會將 Data 的屬性轉換為 getter/setter 從而可以達到響應式。

我們可以在 Data 裡面放入屬性，就像上面寫的 message：

<script>
    const vm = new Vue({
      el: '#app',
      data: {
        message: 'Hello World'
      }
    });
</script>

data 裡面 message 屬性的值就是 'Hello World'。

我們也可以用其他的方式來賦予 data 屬性：

<script>
    const data = {
        message: 'Hello World'
    }//先在 Vue 實例外面宣告一個 data 再放入 data
    const vm = new Vue({
      el: '#app',
      data: data
    });
</script>

接下來我們也能透過 Vue 內部的方法取得 data 的值：

<script>
    const data = {
        message: 'Hello World'
    }//先在 Vue 實例外面宣告一個 data 再放入 data
    const vm = new Vue({
      el: '#app',
      data: data
    });
    
    console.log(vm.$data.message); // 'Hello World'
</script>

也可以對它做修改：

<script>
    const data = {
        message: 'Hello World'
    }//先在 Vue 實例外面宣告一個 data 再放入 data
    const vm = new Vue({
      el: '#app',
      data: data
    });
    
    vm.$data.message = 'Hello My Friend';
    
    console.log(vm.$data.message); // 'Hello My Friend'
</script>

但是這個方式只能在 data 裡面已有的屬性做修改，並不能透過這樣的方式來新增一個 data 屬性，若使用會出現以下錯誤：