中文代码示例之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-itemv-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)命名的支持程度.
转载于:https://juejin.im/post/5d2e46bc6fb9a07ecf725830
中文代码示例之Vuejs入门教程(一)相关推荐
- iOS(一):Swift纯代码模式iOS开发入门教程
Swift纯代码模式iOS开发入门教程 项目初始化(修改为纯代码项目) 安装第三方库(以`SnapKit`库为例) 桥接OC库(QMUIKit) 封装视图并进行导航跳转 示例:使用 `TangramK ...
- 中文代码示例之Spring Boot 2.0.3问好
上次试用Spring Boot还是两年前: 中文代码示例之Spring Boot 1.3.3演示. 打算用在一个讨论组内小项目上, 于是从官网Building an Application with ...
- python爬图片代码大全_爬虫入门教程⑩— 用漂亮的图表展示爬取到的数据
经过了前面的努力,我们成功获取到了数据,并且学会了保存,但是只是用网页展示出来,是不是有一些不够美观呢? 所以本节的内容是:数据的可视化.拿到了数据却不能使其简单易懂并且足够突出,那就是不是好的数据工 ...
- python入门教程完整版(懂中文就能学会)-Python入门教程完整版(懂中文就能学会)...
不过小编的内心是强大的,网友虐我千百遍,我待网友如初恋,因为今天又给大家带来了干货,Python入门教程完整版,完整版啊!完整版! 言归正传,小编该给大家介绍一下这套教程了,希望每个小伙伴都沉迷学习, ...
- 中文代码示例之5分钟入门TypeScript
"中文编程"知乎专栏原文 Typescript官方文档起的这个噱头名字: TypeScript in 5 minutes, 虽然光看完文章就不止5分钟...走完整个文档流水账如下( ...
- python初学者代码示例_Selenium 快速入门笔记和代码示例(Python版)
链接 文档链接: 安装 selenium 模块和 Chrome 浏览器驱动 步骤: 安装 Selenium 模块: pip install selenium 下载浏览器驱动(下载即可,无需安装,使用时 ...
- python入门教程完整版(懂中文就能学会)-Python入门教程完整版400集(懂中文就能学会)快来带走...
为了感谢大家的关注与支持, 小编今天给大家分享一套高老师的python400集视频教程,里面包含入门进阶,源码,实战项目等等,,不管你是正在学习中,还是想要学习的,通通来吧 肯定不会让你失望.活动仅限 ...
- 中文代码示例之冒泡算法, 后感
以前探讨过中文命名在业务部分的优势大于算法部分. 今天又一次看到了这个以冒泡算法的例子: 刘然:批判易语言的人是否用过这门语言,批判它的原因又是什么?有些感触. 先尝试对变量命名进行改进, 来看看是否 ...
- python入门教程完整版(懂中文就能学会)-Python入门教程完整版!(懂中文的就能学会)...
自学技能,高效办公,从职场中脱颖而出! 立志成立志成为最好的自己✨ 一起悄悄变优秀变强大� 1⃣为什么要学Python? Python在行为手机.数据分析.信息采集等方面 的应用非常普遍,已经成为职场 ...
最新文章
- Linux日常运维--6
- java构造方法的书写和注意事项(入门可看)
- DAG添加第二台主机报超时
- [YTU]_2566( 虚基类练习:动物)
- java中 indexOf() 与lastIndexOf() 用法详解
- 【Linux】库文件
- er图转关系模式规则_在石250谈及户外和解。神豪“木湙子”调侃“沈曼流水合同”?“青蛙”630万超皇续费!“婷er骚俊”舰队100图超高返利!...
- Django syncdb mysql error on localhost - (1045, Access denied for user 'ODBC'@'
- 凸透镜成像动画可拖动_光学实验二:探究凸透镜成像规律
- Android:应用商城
- R语言快速学习第一部分(有其他语言基础)
- 罗永浩签约抖音后,带货首秀或将献给小米,你看好这笔生意吗?
- WEB应用支持RESTFUL风格方法
- 数据结构笔记(八)-- 链式栈
- 高等数学上下册及习题解析(同济第七版)
- Hanselminutes播客247-从敏捷顾问到John Wilger的敏捷团队成员
- 宝宝吃饭不乖,怎么办?
- 腾讯云Ubuntu18.04.4上安装brat文本标注工具(2020年9月)
- 利用AnyLogic软件搭建多智能体模型验证Lanchester方程线性律和平方律
- 我用Python模拟了谷爱凌的凌空一跃