爲了檢驗中文命名在主流框架中的支持程度, 在vuejs官方入門教程第一部分的示例代碼中儘可能使用了中文命名. 全部演示都在本地測試經過, 源碼在這裏. 下面省略了不少原教程的說明內容, 而着重於代碼示例自己. 歡迎問題/批評.javascript
<div id="元素id">
<p>{{ 問候 }}</p>
</div>
複製代碼
var 應用1 = new Vue({
el: '#元素id',
data: {
問候: '吃了麼?'
}
})
複製代碼
打開你的瀏覽器的控制檯 (就在這個頁面打開),並修改應用1.問候
,你將看到上例相應地更新。html
<div id="元素id2">
<span v-bind:title="動態綁定信息">
鼠標懸停幾秒鐘查看此處動態綁定的提示信息!
</span>
</div>
複製代碼
var 應用2 = new Vue({
el: '#元素id2',
data: {
動態綁定信息: '頁面加載於 ' + new Date().toLocaleString()
}
})
複製代碼
再次打開瀏覽器的 JavaScript 控制檯輸入應用2.動態綁定信息 = '新消息'
,就會再一次看到這個綁定了title
屬性的HTML已經進行了更新vue
<div id="元素id3">
<p v-if="看獲得">如今你看到我了</p>
</div>
複製代碼
var 應用3 = new Vue({
el: '#元素id3',
data: {
看獲得: true
}
})
複製代碼
繼續在控制檯設置 應用3.看獲得 = false,你會發現「如今你看到我了」消失了。 {% raw %}java
<div id="元素id4">
<ol>
<li v-for="任務 in 任務表">
{{ 任務.內容 }}
</li>
</ol>
</div>
複製代碼
{% endraw %}git
var 應用4 = new Vue({
el: '#元素id4',
data: {
任務表: [
{ 內容: '學習 JavaScript' },
{ 內容: '學習 Vue' },
{ 內容: '整個牛項目' }
]
}
})
複製代碼
警告以下, 但列表仍然顯示. 已經在Vue項目新建issuegithub
[Vue warn]: Error compiling template:
<div id="元素id4">
<ol>
<li v-for="任務 in 任務表">
{{ 任務.內容 }}
</li>
</ol>
</div>
- invalid v-for alias "任務" in expression: v-for="任務 in 任務表"
(found in <Root>)
複製代碼
在控制檯裏,輸入應用4.任務表.push({ 內容: '新項目' })
,你會發現列表中添加了一個新項。express
v-on:click
支持中文方法名, 但須要()
. 爲此在Vue項目新建issue, 經社區建議得知並檢驗, 另外一種方式@click
也支持中文命名, 一樣須要()
.瀏覽器
<div id="元素id5">
<p>{{ 問好 }}</p>
<button @click="倒着說()">@click有效</button>
<button v-on:click="倒着說()">v-on:click有效</button>
</div>
複製代碼
var 應用5 = new Vue({
el: '#元素id5',
data: {
問好: '你好'
},
methods: {
倒着說: function () {
this.問好 = this.問好.split('').reverse().join('')
}
}
})
複製代碼
表單輸入和應用狀態之間的雙向綁定:bash
<div id="元素id6">
<p>{{ 問好 }}</p>
<input v-model="問好">
</div>
複製代碼
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>
複製代碼
Vue.component('todo-item', {
props: ['待購'],
template: '<li>{{ 待購.名稱 }}</li>'
})
var 應用7 = new Vue({
el: '#元素id7',
data: {
購物單: [
{ 序號: 0, 名稱: '蔬菜' },
{ 序號: 1, 名稱: '肉' },
{ 序號: 2, 名稱: '隨便啥' }
]
}
})
複製代碼
這裏的HTML標籤todo-item
和其餘標籤(如div, ol)同樣, 不支持中文命名.框架
核心基本功能介紹結束.
初步看來Vuejs對中文命名的支持不錯, 尤爲是模板的部分. 個別改進建議已經在Vue的github庫以issue的方式提出, 社區的活躍度很高, 開發者對這些issue的反應很快, 標記上了」改進」標籤, 並針對一個不支持中文命名的問題提供瞭解決方案.
感受此類實踐能夠促進與其餘開源社區的交流, 並推動框架的業務代碼中對中文(Unicode)命名的支持程度.