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

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

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

Vue 的创建

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

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

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

指令

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

详细请看 demo 源码

自定义指令

在代码的实例中:

查看代码源

Vue API

Vue 常用选项

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

Vue 组件

生命周期钩子

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

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

配合着实例代码效果更佳查看代码源

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

如何让 Vue 书写更佳优美?

详细 style-guide 请参看官网 进一步学习请参考官方文档

2018 我要告诉你的 Vue 知识大全的更多相关文章

  1. vue知识总结

    vue: 渐进式JavaScript 框架 Vue项目构建 npm install -g vue vue init webpack-simple my-project cd my-project np ...

  2. 总结vue知识体系之实用技巧

    vue 作为目前前端三大框架之一,对于前端开发者可以说是必备技能.那么怎么系统地学习和掌握 vue 呢?为此,我做了简单的知识体系体系总结,不足之处请各位大佬多多包涵和指正,如果喜欢的可以点个小赞!本 ...

  3. python知识大全目录,想学的看过来!

    Python总结篇——知识大全   python装饰器   PyCharm安装与配置,python的Hello World   sort与sorted的区别及实例   我必须得告诉大家的MySQL优化 ...

  4. PHP知识大全

    --------------------------------------------------------- PHP知识大全 ---------------------------------- ...

  5. VC6.0调试知识大全

    VC6.0调试知识大全 分类: C++ 2010-09-06 21:33 7080人阅读 评论(5) 收藏 举报 debuggingmfcfunctionmenumicrosoftdll My Not ...

  6. .Net知识大全(个人整理)

    .Net知识大全 本章内容适用于对.NET有一定基础的或者是想通过本文章对.NET基础知识记不清楚的朋友,可以通过本文章进行回顾. 面试的时候可能也会遇到相应的题目,建议面试前进行回顾!!! 1.NE ...

  7. 前端Vue知识小白

    感觉是已好久没写博文了.今日难得有时间,便写一篇文章.此文章是关于前端知识的,我本身是后端,因工作或其他需要,便学习了前端Vue.此文章是在菜鸟教程上学习的.那么下面进入正文! 首先,Vue.js是一 ...

  8. 前端知识扫盲-VUE知识篇一(VUE核心知识)

    最近对整个前端的知识做了一次复盘,总结了一些知识点,分享给大家有助于加深印象. 想要更加理解透彻的同学,还需要大家自己去查阅资料或者翻看源码.后面会陆续的更新一些相关注知识点的文章. 文章只提出问题, ...

  9. vue知识总汇

    学前预备知识 ECMAScript简介和ES6的新增语法 Nodejs基础 webpack的介绍 babel简介 vue基础 vue基础

随机推荐

  1. wpf socket 简单通讯示例

    源码下载地址:https://github.com/lizhiqiang0204/WPF-Socket 效果如下:

  2. C++ GUI Qt4编程-创建自定义窗口部件

    C++ GUI Qt4编程-创建自定义窗口部件   Qtqt4 通过Qt窗口部件进行子类化或者直接对QWidget进行子类化,就可以创建自定义窗口部件,下面示范两种方式,并且也会说明如何把自定义窗口部 ...

  3. re模块下的的常用方法

    引入模块: import re 1.查找findall   匹配所有,每一项都是列表中的一个元素 ret=re.findall("\d+","sjkhk172按实际花费9 ...

  4. 微信小程序-坑1-await-async

    VM45:1 thirdScriptError sdk uncaught third Error regeneratorRuntime is not defined ReferenceError: r ...

  5. React Native 之项目的启动

    运行项目有两种方法 1. 到根目录,执行 react-native run-ios 命令 会开启一个本地服务,加载jsbundle文件,然后是去index.js文件 import {AppRegist ...

  6. HTML5解决大文件断点续传

    一.概述 所谓断点续传,其实只是指下载,也就是要从文件已经下载的地方开始继续下载.在以前版本的HTTP协议是不支持断点的,HTTP/1.1开始就支持了.一般断点下载时才用到Range和Content- ...

  7. Java——常用类(Math)

    [常用方法]   这些方法为静态方法.  

  8. 数位dp进阶(hdu2089,3652)

    之前的文章已经讲过如何求1—r中的特殊数,这篇博客就来讲些进阶操作: 直接看例题(hdu2089): (题目是中文的我就不写大意了) 这题与hdu3555最大的区别就是规定了l,不再以1开始: 解决这 ...

  9. CodeForces 1187D Subarray Sorting

    Problem You are given an array \(a_1\),\(a_2\),-,\(a_n\) and an array \(b_1\),\(b_2\),-,\(b_n\). For ...

  10. BZOJ 4939: [Ynoi2016]掉进兔子洞(莫队+bitset)

    传送门 解题思路 刚开始想到了莫队+\(bitset\)去维护信息,结果发现空间不太够..试了各种奇技淫巧都\(MLE\),最后\(\%\)了发题解发现似乎可以分段做..这道题做法具体来说就是开\(3 ...