资讯专栏INFORMATION COLUMN

Vue.js 官方示例初探(ES6 改写)

Jason / 1394人阅读

摘要:双叹号强制类型转换为布尔值。官方示例代码用注册了全局组件,会把自动注册为属性,所以没有手动写属性。如果对象是响应的,将触发视图更新。这是用来布尔值,又学了一招和分别代表单击和双击事件绑定。

如果觉得有帮助,欢迎 star哈~

https://github.com/jiangjiu/blog-md/issues/11

感谢作者 @尤小右 大大边写的超级带感的 Vue.js 前端框架,赠送的几个小例子都很有代表性,代码逻辑清晰简明,不禁想抄上一抄嗯。

官方的示例都是 ES5直接编写运行,并没有使用ES6以及构建工具,考虑到以后开发大一些的项目以及官方出品的 vue-cli脚手架,决定这次学习之旅采用两者结合写写官方的示例。

初探步骤:

观摩示例的 result

思考组件模板和逻辑实现思路

遇到问题先搜一下 api 和官方教程(好像看过一遍还是记不住什么。。。结合实践重要嗯)

还是不会就看例子的代码吧(不出意外的话都会走到这步哈哈)

整理一下代码和总结

markdown Editor

一个极简的 markdown 编辑器,用了 marked 这个工具。

新建一个 Marked 组件就 ok。看起来很简单,textarea 标签作为输入编辑器,另一个 div 标签通过 marked 这个 markdown工具 转码。

npm i marked --save 来安装好 marked,import 后通过定义过滤器实现。

textarea 设置了 debounce指令。debounce 设置一个最小的延时,在每次敲击之后延时同步输入框的值与数据。如果每次更新都要进行高耗操作(例如在输入提示中 Ajax 请求),它较为有用。



github commits

编写一个小组件,异步获取 github 的两条 branch的数据。

created:生命周期的钩子,在实例创建后同步调用。此时实例已经结束解析选项,意味着已经建立了数据绑定,计算属性,方法,watcher/事件回调。但是还没有开始 DOM 编译,$el 还不存在。

watch:一个对象,键是观察表达式,值是对应回调。值也可以是方法名,或者是对象,包含选项。在实例化时为每个键调用 $watch() 。

遇到的问题:eslint 总是提示 new XMLHttpRequest() 错误,not defined,并不知道为啥会这样,看到了很多代码也并没出错啊,暂时在 eslint 的配置文件把 no-undef 设为0忽略它了,如果有知道的童鞋可以指点一二。



Validation+Firebase

firebase 实时后端云简单搂了一眼,号称无后端数据存储加实时通信还是很带感的,不过自己写的时候总是报错,只好自己在本地 mock 一下了。以后写可以使用 wilddog,国内的

计算属性:由于模板中只可以用表达式,相对复杂的逻辑并不适合放在模板中,所以计算属性就派上用场了,简单易用。计算属性默认只是 getter 函数,不过也可以自定义 getter 和 setter函数。

transition 过渡:这个过渡系统听勾股大大说很值得学习,所以暂时放下以后看源码先。

mock 数据对象以后比较蛋疼,会把 newUser这个对象直接 push 进 userRef 中,导致以后对 newUser 的操作都会被双向绑定显示到列表中。。。所以只好深拷贝一下数据 push 进去,这个留坑以后填。

!!:双叹号强制类型转换为布尔值。

树状视图

这个例子实现了树状视图,主要演示如何递归调用组件。

递归组件:组件在自身的模板内可以递归调用自己,但是要有 name 选项才可以,在这上面花了好长时间又去查了教程才发现。。。官方示例代码用 Vue.component()注册了全局组件,会把 id 自动注册为name 属性,所以没有手动写 name 属性。我在 cli 里写的时候一直没注意,导致递归总是不显示嗯。

Vue.set:全局 API,设置对象的属性。如果对象是响应的,将触发视图更新。这个方法主要用于解决不能检测到属性添加的限制。

open = !open:这是用来 toggle 布尔值,又学了一招~

@click和@dblclick分别代表单击和双击事件绑定。后一个还真是没注意过。

动态 props:可以绑定 props,这样父组件数据变化后,也会传递给子组件。

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

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

相关文章

  • 初探Vue之环境搭建

    摘要:最近得闲,想总结总结最近在学习上的一些心得,毕竟作为新手多写多练好处多多,话不多说,马上开始前端工程化为开发带来了很多便利,但实际是,环境的配置也要大费周章一番。 最近得闲,想总结总结最近在学习Vue上的一些心得,毕竟作为新手多写多练好处多多,话不多说,马上开始! 前端工程化为开发带来了很多便利,但实际是,环境的配置也要大费周章一番。我用的是在Node环境下基于webpack来编译打...

    hiYoHoo 评论0 收藏0
  • 个人分享--web前端学习资源分享

    摘要:前言月份开始出没社区,现在差不多月了,按照工作的说法,就是差不多过了三个月的试用期,准备转正了一般来说,差不多到了转正的时候,会进行总结或者分享会议那么今天我就把看过的一些学习资源主要是博客,博文推荐分享给大家。 1.前言 6月份开始出没社区,现在差不多9月了,按照工作的说法,就是差不多过了三个月的试用期,准备转正了!一般来说,差不多到了转正的时候,会进行总结或者分享会议!那么今天我就...

    sherlock221 评论0 收藏0
  • 面试分享:一年经验初探阿里巴巴前端社招

    摘要:三轮技术面上一轮发挥感觉没前两轮发挥好,所以还是有点不自信的,没想到第三天后,就来电话了,通知我去阿里园区面试。 一般阿里社招都是招3-5年的P6+高级工程师,当初自己一年经验也没有想过有这个面试机会。 虽然没想着换工作,但是经常关注一些招聘网站的信息,某一天,在某boss上有个人找我,叫我发一下简历,我一看是阿里的某技术专家,虽然之前也有阿里的在某boss上给我要简历,但是我深知自己...

    ACb0y 评论0 收藏0

发表评论

0条评论

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