1. 程式人生 > >中文程式碼示例之Vuejs入門教程(一)

中文程式碼示例之Vuejs入門教程(一)

為了檢驗中文命名在主流框架中的支援程度, 在vuejs官方入門教程第一部分的示例程式碼中儘量使用了中文命名. 所有演示都在本地測試通過, 原始碼在這裡. 下面省略了很多原教程的說明內容, 而著重於程式碼示例本身. 歡迎問題/批評.
宣告式渲染
{% raw %}

  <div id="元素id">
      <p>{{ 問候 }}</p>
    </div> 

{% endraw %}

var 應用1 = new Vue({
  el: '#元素id',
  data: {
    問候: '吃了麼?'
  }
})

開啟你的瀏覽器的控制檯 (就在這個頁面開啟),並修改 應用1.問候,你將看到上例相應地更新。

  <div id="元素id2">
      <span v-bind:title="動態繫結資訊">
        滑鼠懸停幾秒鐘檢視此處動態繫結的提示資訊!
      </span>
    </div> 
var 應用2 = new Vue({
  el: '#元素id2',
  data: {
    動態繫結資訊: '頁面加載於 ' + new Date().toLocaleString()
  }
})

再次開啟瀏覽器的 JavaScript 控制檯輸入 應用2.動態繫結資訊 = ‘新訊息’,就會再一次看到這個綁定了 title 屬性的 HTML 已經進行了更新
條件與迴圈

  <div id="元素id3">
      <p v-if="看得到">現在你看到我了</p>
    </div> 
var 應用3 = new Vue({
  el: '#元素id3',
  data: {
    看得到: true
  }
})

繼續在控制檯設定 應用3.看得到 = false,你會發現“現在你看到我了”消失了。
{% raw %}

  <div id="元素id4">
      <ol>
        <li v-for="任務 in 任務表">
          {{ 任務.內容 }}
        </
li
>
</ol> </div>

{% endraw %}

var 應用4 = new Vue({
  el: '#元素id4',
  data: {
    任務表: [
      { 內容: '學習 JavaScript' },
      { 內容: '學習 Vue' },
      { 內容: '整個牛專案' }
    ]
  }
})

警告如下, 但列表仍然顯示. 已經在Vue專案新建issue

[Vue warn]: Error compiling template:
{% raw %}
<div id="元素id4">
      <ol>
        <li v-for="任務 in 任務表">
          {{ 任務.內容 }}
        </li>
      </ol>
    </div>
{% endraw %}
- invalid v-for alias "任務" in expression: v-for="任務 in 任務表"


(found in <Root>)

在控制檯裡,輸入 應用4.任務表.push({ 內容: ‘新專案’ }),你會發現列表中添加了一個新項。
處理使用者輸入

v-on:click支援中文方法名, 但需要(). 為此在Vue專案新建issue, 經社群建議得知並檢驗, 另一種方式@click也支援中文命名, 同樣需要().
{% raw %}

  <div id="元素id5">
      <p>{{ 問好 }}</p>
      <button @click="倒著說()">@click有效</button>
      <button v-on:click="倒著說()">v-on:click有效</button>
    </div> 

{% endraw %}

var 應用5 = new Vue({
  el: '#元素id5',
  data: {
    問好: '你好'
  },
  methods: {
    倒著說: function () {
      this.問好 = this.問好.split('').reverse().join('')
    }
  }
})

表單輸入和應用狀態之間的雙向繫結:
{% raw %}

  <div id="元素id6">
      <p>{{ 問好 }}</p>
      <input v-model="問好">
    </div> 

{% endraw %}

var 應用6 = new Vue({
  el: '#元素id6',
  data: {
    問好: '你好!'
  }
})

元件化應用構建

  <div id="元素id7">
      <ol>
        <todo-item
          v-for="物品 in 購物單"
          v-bind:待購="物品"
          v-bind:key="物品.序號">
        </todo-item>
      </ol>
    </div> 

{% raw %}

Vue.component('todo-item', {
  props: ['待購'],
  template: '<li>{{ 待購.名稱 }}</li>'
})
var 應用7 = new Vue({
  el: '#元素id7',
  data: {
    購物單: [
      { 序號: 0, 名稱: '蔬菜' },
      { 序號: 1, 名稱: '肉' },
      { 序號: 2, 名稱: '隨便啥' }
    ]
  }
})

{% endraw %}
這裡的HTML標籤todo-item和其他標籤(如div, ol)一樣, 不支援中文命名.

核心基本功能介紹結束.
後記

初步看來Vuejs對中文命名的支援不錯, 尤其是模板的部分. 個別改進建議已經在Vue的github庫以issue的方式提出, 社群的活躍度很高, 開發者對這些issue的反應很快, 標記上了”改進”標籤, 並針對一個不支援中文命名的問題提供瞭解決方案.

感覺此類實踐可以促進與其他開源社群的交流, 並推進框架的業務程式碼中對中文(Unicode)命名的支援程度.

11/20/2017 補記:

中文程式碼示例之Vuejs入門教程(一)問題後續