中文代码示例之Vuejs入门教程(一)

为了检验中文命名在主流框架中的支持程度, 在vuejs官方入门教程第一部分的示例代码中尽可能使用了中文命名. 全部演示都在本地测试经过, 源码在这里. 下面省略了不少原教程的说明内容, 而着重于代码示例自己. 欢迎问题/批评.

声明式渲染

<div id="元素id">
      <p>{{ 问候 }}</p>
    </div> 
复制代码

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:

<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({ 内容: '新项目' })，你会发现列表中添加了一个新项。

处理用户输入

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('')
    }
  }
})
复制代码

表单输入和应用状态之间的双向绑定:

<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)命名的支持程度.