Vue.js Template Syntax 模板語法

VusJs 是個便利的框架，它的便利在於幫我們把一些較複雜的事情都先做好了，據說 Vue 的入門較簡單，單是也是會讓我們將 JS 武功廢掉的框架，還記得有位朋友說，他寫了一陣子 Vue 之後，幾乎 JS 的武功都廢了，聽起來蠻聳動的。所以一定要記住，時不常回來寫原生還是必要的。

這裡記錄一些學習上的筆記和用法，以便將來腦殘可回來補腦。

我們先以 CDN 的方式將 Vue.js 引入就可以用了，記得也要先創建一個 Vue 的實例來用，裡面會有所有控制與資料的部分。
接著，在 HTML 裡將要控制的部分以一個<div>包住，並給予 ID <div id="app">這個 #app就可以以標籤綁定資料的方式，和 Vue 的實例裡的資料做溝通。

資料綁定

資料綁定最常用的是雙大括號，裡面的變數就是聯繫實例裡面Data物件裡的屬性資料。
我們如何使用它：

可以以 HTML 的形式來綁定如<p v-html="msg"></p> (顯示 html 格式)
用 text 的形式來綁定如<p v-text="msg"></p>(顯示純文字)
雙花括號不可直接用在 html 的屬性上，在需要用的情況下，可以用v-bind的方式如

1	<button v-bind:disabled="isDisabled">Button</button>

直接使用 JS 表達式，在雙大括號裡可以直接些三元運算子，甚至是直接用 JS 的內建函式。

1	{{ isName ? Yes : No; }} or {{ name .split('') .reverse() .join(''); }}

必須寫在 Html 的屬性裡：<div v-bind:id="'list-' + id"></div>

我們想要在一個 input 裡即使顯示我們輸入的內容，在實例的data先準備好初始化的資料，在input裡，用指令v-model(資料)去綁住，然後再到要顯示的 html 裡，以雙花括號包住在data裡的某一屬性，就可以達到即使顯示的效果。

1 2	<p>my name is {{ name }}</p> <input v-model="name" placeholder="Write your name" />

在監聽事件的部分，可使用v-on:click="方法名"去觸發想要做的事情或資料>
<button @click=”showHi(say)”>click

去 codepen 看看效果

<div id="app">
  <p v-html="msg"></p>

  <p>my name is {{ name }}</p>
  <p>{{ name.toUpperCase() }}</p>
  <p>{{ isName ? `Your Name is ${name}` : `Name not good ou null`}}</p>
  <p>{{ name.split('').reverse().join('') }}</p>
  <p v-bind:name="'list-' + name + ' ' + say"></p>

  <input v-model="name" placeholder="Write your name" />
  <img v-bind:src="imgUrl" alt="" />

  <button @click="showHi(say)">click</button>
</div>

在 Vue 的實例裡會有什麼？

在 vm 的實例裡，我們需要準備我們想對組件操控的方法和顯示的資料，當然不只這些，實例有點像是控制中心，在這裏控制 V:viem 和 M:model ，我們也成實例為 VM: viewModel。

const vm = new Vue({
  el: '#app', //  指定 DOM 標籤容器的選擇器，Vue 就會針對這個容器做管理
  data: {
    // 物件，所有這個容器（組件）的資料來源，是初始化資料狀態的物件，vm 會自動擁有data 中所有屬性，在頁面中也可直接調用這些屬性。
    name: 'Tracy',
    isName: true,
    msg: '<h2>Today is good day</h2>',
    imgUrl: 'https://cn.vuejs.org/images/logo.png',
    say: 'Hi Paris'
  },
  methods: {
    // 這個組件會用到的方法，供頁面中的事件指令來綁定 callback
    showHi(sayHi) {
      alert(sayHi);
    }
  }
});

data: { }

data 物件的屬性大多為初始化的屬性字面值。

methods: { }

methods 裡面包含多個方法的物件，來提供給頁面中的v-on事件指令來綁定 callback 回調函式
callback 函式預設有 event 參數, 但也可以指定自己的參數
所有的方法由 vue 物件來呼叫, 調用 data 中的屬性直接使用 this.xxx

今天先寫到這裡，一定要堅持下去喔！

題外話，近日武漢肺肺炎的關係，開始關注一些中國的現狀，和中國朋友閒聊時，才知道真的是水深火熱的環境。
另如，我不解為何中國朋友都不太敢對自己的國家有所批評，台灣說的「批評求進步」簡直是讓自己陷入危險。上次看法國報導，記者試著採訪中國遊客，關於看到法輪功的感想，一團幾十個，沒有一個願意開口。後來朋友跟我說，如果從中國第一次出國，就要參加一種叫行前教育的活動，需要政府部門批准他們出去，那時工作人員會告誡他們不要把外面的信息帶回來。這可能也是很多海外華人不像多評論政治的原因。他去台灣的第一次是這麼要求，他的父母也是。

想想，生活在台灣真的還是件蠻幸福的事。