资讯专栏INFORMATION COLUMN

Vue 2 | PART 1 跟世界打个招呼吧

jerryloveemily / 3248人阅读

摘要:为了使界面稍微养眼一点,直接使用的。在里面它只接受表达式。后续的找了个免费音频录制软件,能稍微加大点音量。做的不好的地方大家多提意见和建议。

这是一个纯新手向的攻略系列(不是权威 「教程」),它:

√ 使用最简单的文字进行解释
√ 每期分享一个点,长度适中,适合碎片时间阅读
√ 图片均压缩在50k以下,把流量消耗降到最低
(其中一期因为截屏了比较大的面积用来展示效果,所以会稍微超出这个限制)

启程:

本系列是对VueJS 2.0(使用版本v2.1.3)最基础的东西的介绍,所以采用直接在html里面引入vue.js的方式。为了使界面稍微养眼一点,直接使用bootstrap的css。

Sa,我们马上来跟世界问好吧!

假设我们有这样一个data对象,希望把data.info的值绑定到html中:

var data = {
    info: "hello hacker cafe"
}

操作很简单(div#app和script之间还有vue的引入,为了节省空间使用省略号代替):


    
    

{{ info }}

当然js的部分还可以简化为:

大胡子(Mustache)

简单地说一下双重花括号这种语法。在Vue里面它只接受JS表达式。所以下面这几种写法都是ok的:

    

{{ info.concat("!!!") }}

{{ info.length }}

{{ info ? "has info" : "no info"}}

但是不要以为这就是在它里面可以写任何代码的意思,下面这些例子就会报错(例子来源于官网):

    

{{ var ok = 1 }}

{{ if (ok) { return info } }}

顺带说一下为什么直接引入未压缩的vue.js。在你跑上面这两行错误代码的时候,未压缩的版本会在console里面给出提示,而压缩了的版本是不会有提示的。可以自行尝试一下。

提前偷窥一下双向绑定

在console中打印出原来的info值

修改info值

本期就到这里,敬请期待下一期:双向绑定和vue-devtools

写在最后:

源码地址:https://github.com/levblanc/v...

视频攻略:小的不才,为求一赞,自制 本期视频攻略 在此。

第一次弄视频,弄好以后才发现这件事看起来简单,但是挺耗时间和精力的……

这一期唠叨了,而且声音是从耳机上的麦克风直接录的,声音有点小。后续的找了个免费音频录制软件,能稍微加大点音量。

做的不好的地方大家多提意见和建议。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/86627.html

相关文章

  • Vue 2 | 基础API系列文章合集

    摘要:在大家的鞭策和鼓励下,这个基础的系列终于完成了。关于更新的频率,因为是我自己一个人在做,文案视频都准备好了才发的话,最快也只能一周一更。最后这几期可以密集地更新,完全是因为公司放假了。不过月份的更新速度真的不能保证,抱歉。 在大家的鞭策和鼓励下,这个基础API的系列终于完成了。所幸是没有真的更到一百期才完结(笑)。最初是因为觉得录视频好玩,才挖的这个坑。也想过中途放弃,关掉专栏,但由于...

    instein 评论0 收藏0
  • SegmentFault 社区访谈 | Felix:一个如同空气般存在的人

    showImg(https://segmentfault.com/img/bVWOEd?w=900&h=385); 阔别已久的社区访谈又双叒叕和大家见面来,介绍我们这次嘉宾之前,清蒸先来简单地说下以后的社区专访将会加入的两个小模块:访谈嘉宾的优质内容以及为期一个星期的提问时间,在本文发布这天开始计时,在接下来的一个星期,你们可以对专访嘉宾进行提问,唔,注意提问姿势(太过八卦的就不会给予回复啦(//...

    刘玉平 评论0 收藏0
  • SegmentFault 社区访谈 | Felix:一个如同空气般存在的人

    showImg(https://segmentfault.com/img/bVWOEd?w=900&h=385); 阔别已久的社区访谈又双叒叕和大家见面来,介绍我们这次嘉宾之前,清蒸先来简单地说下以后的社区专访将会加入的两个小模块:访谈嘉宾的优质内容以及为期一个星期的提问时间,在本文发布这天开始计时,在接下来的一个星期,你们可以对专访嘉宾进行提问,唔,注意提问姿势(太过八卦的就不会给予回复啦(//...

    trilever 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<