专栏首页腾讯NEXT学位2018 我所了解的 Vue 知识大全

2018 我所了解的 Vue 知识大全

年初第一个 flag 就是掌握 vue ,哈哈

Vue ,React ,Angular 三大主流框架,最后我选择学习 Vue ,接触过 React ,自己感觉学习曲线有些陡峭,进而我选择了学习 Vue ,他的学习曲线平稳很多;不管选择什么框架,除了对基础的知识有一定的了解掌握,还应该对 ES6 有一定的了解;

这就是我脑海中的 Vue 知识体系

一句话概况了 Vue:通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件;

Vue 的创建

一个简单的 Vue 实例只需要四步即可

我们的学习目的肯定不止于创建简单的 Vue 实例;而是用它去实现更加多变的功能需求;那我们需要进一步去学习 Vue-router 和 Vuex 以及 Vue-cli;

先说说基础的 Vue 吧,在创建了一个简单 Vue 实例之后,我们是否还能在实例中添加更加完善的数据选项,去完成我们多变的功能需求;答案是肯定能的;

指令

下面是我用上述指令写的一个小案例,刚好所有的指令都上了用场

自定义指令

在代码的实例中

Vue API

Vue 常用选项

这就是我在学习 Vue 的时候,在 Vue 实例中添加的比较多的; directives 和 components 在 Vue 实例中为创建的 局部 自定义指令和注册组件,Vue.directive() 和 Vue.component() 则是注册全局

Vue 组件

生命周期钩子

每个 Vue 实例在被创建之前都要经过一系列的初始化过程。例如需要设置数据监听、编译模板、挂载实例到 DOM、在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数,给予用户机会在一些特定的场景下添加他们自己的代码。

在 QQ 群里看到一张生命周期图,我觉得写的特别好,感谢总结这张图的朋友

配合着实例代码效果更佳

生命周期钩子的函数简单说就是八个函数

如何让 Vue 书写更佳优美?

详细 style-guide 请参看官网:https://cn.vuejs.org/v2/style-guide/

进一步学习请参考官方文档:https://cn.vuejs.org/v2/guide/installation.html

部分资源来自网络


本文作者:晴窗一扇

原文链接:https://zhuanlan.zhihu.com/p/32564918

本文分享自微信公众号 - 腾讯NEXT学位(NextDegree)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2018-01-05

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 干货 | 前端阶段性总结之「框架相关」那些事

    其实本人接触框架里面,可能是Angular最多吧,之前项目都是Angular1,现在项目在用Angular2。

    腾讯NEXT学位
  • 干货 | 关于前端构建大型知识应用,你知道多少?

    与其说是构建大型应用,或许更多地是常用的应用构建吧。很多时候我们的项目在搭建的时候通常都不会定位为大型项目,但我们还是需要考虑到拓展性,或者说是在当项目开始变得...

    腾讯NEXT学位
  • 干货 | Vue事件、过渡和制作index页面

    “ 最近在学习使用Vue作为前端的框架,本文简单介绍Vue的过渡效果,以及记录制作首页的过程。 ” Vue事件 1 方法处理器 ● 可以用v-on指令监听DO...

    腾讯NEXT学位
  • 从一个奇怪的错误出发理解 Vue 基本概念

    有人在学习 Vue 过程中遇到一个奇怪的问题,并为之迷惑不已——为什么这么简单的一个项目都会出错。

    前端博客 : alili.tech
  • 01Vue.js快速入门(一)Vue概念及Helloworld

    Vue是一个前端的双向绑定类的框架,发音[读音 /vjuː/, 类似于 view]。新的Vue版本参考了React的部分设计,当然也有自己独特的地方,比如Vue...

    老马
  • 2018 我所了解的 Vue 知识大全(一)

    Vue ,React ,Angular 三大主流框架,最后我选择学习 Vue ,接触过 React ,自己感觉学习曲线有些陡峭,进而我选择了学习 Vue ,他的...

    sunseekers
  • 拥抱 Vue 3 系列之 JSX 语法

    “别再更新了,学不动了”。这句话不知道出了多少开发者的辛酸。在过去的一年中,Vue 团队一直都在开发 Vue.js 的下一个主要版本,就在 6 月底,尤大更新同...

    政采云前端团队
  • Vue3 对 Web 应用性能的改进[每日前端夜话0xE1]

    有关即将发布的 Vue.js 的第 3 个主要版本的信息越来越多。通过下面的讨论,虽然还不能完全确定其所有内容,但是我们可以放心地认为,它将是对当前版本(已经非...

    疯狂的技术宅
  • Vue 3 最值得期待的五项重大更新

    Vue 团队非常擅长改进框架 API。Evan You 总结了 Vue 3 的几大改进目标:

    Java帮帮
  • 【Vuejs】397- Vue 3最值得期待的五项重大更新

    我非常重视性能,所以在探索具体的 API 之前我想谈一谈 Vue 3 的性能。可讲的东西是很多的!几乎每个角落都能找到明显的改进!

    pingan8787

扫码关注云+社区

领取腾讯云代金券