2018 我要告诉你的 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 请参看官网 进一步学习请参考官方文档
2018 我要告诉你的 Vue 知识大全的更多相关文章
- vue知识总结
vue: 渐进式JavaScript 框架 Vue项目构建 npm install -g vue vue init webpack-simple my-project cd my-project np ...
- 总结vue知识体系之实用技巧
vue 作为目前前端三大框架之一,对于前端开发者可以说是必备技能.那么怎么系统地学习和掌握 vue 呢?为此,我做了简单的知识体系体系总结,不足之处请各位大佬多多包涵和指正,如果喜欢的可以点个小赞!本 ...
- python知识大全目录,想学的看过来!
Python总结篇——知识大全 python装饰器 PyCharm安装与配置,python的Hello World sort与sorted的区别及实例 我必须得告诉大家的MySQL优化 ...
- PHP知识大全
--------------------------------------------------------- PHP知识大全 ---------------------------------- ...
- VC6.0调试知识大全
VC6.0调试知识大全 分类: C++ 2010-09-06 21:33 7080人阅读 评论(5) 收藏 举报 debuggingmfcfunctionmenumicrosoftdll My Not ...
- .Net知识大全(个人整理)
.Net知识大全 本章内容适用于对.NET有一定基础的或者是想通过本文章对.NET基础知识记不清楚的朋友,可以通过本文章进行回顾. 面试的时候可能也会遇到相应的题目,建议面试前进行回顾!!! 1.NE ...
- 前端Vue知识小白
感觉是已好久没写博文了.今日难得有时间,便写一篇文章.此文章是关于前端知识的,我本身是后端,因工作或其他需要,便学习了前端Vue.此文章是在菜鸟教程上学习的.那么下面进入正文! 首先,Vue.js是一 ...
- 前端知识扫盲-VUE知识篇一(VUE核心知识)
最近对整个前端的知识做了一次复盘,总结了一些知识点,分享给大家有助于加深印象. 想要更加理解透彻的同学,还需要大家自己去查阅资料或者翻看源码.后面会陆续的更新一些相关注知识点的文章. 文章只提出问题, ...
- vue知识总汇
学前预备知识 ECMAScript简介和ES6的新增语法 Nodejs基础 webpack的介绍 babel简介 vue基础 vue基础
随机推荐
- POJ2942 UVA1364 Knights of the Round Table 圆桌骑士
POJ2942 洛谷UVA1364(博主没有翻墙uva实在是太慢了) 以骑士为结点建立无向图,两个骑士间存在边表示两个骑士可以相邻(用邻接矩阵存图,初始化全为1,读入一对憎恨关系就删去一条边即可),则 ...
- class和style绑定
在数据绑定中,一个常见需求是,将数据与元素的 class 列表,以及元素的 style 内联样式的操作绑定在一起.由于它们都是属性(attribute),因此我们可以使用 v-bind 来处理它们:只 ...
- vue使用过滤器 filters:{}
在项目开发过程中,经常会用到过滤器,下面就来说说我用的用法 我从后台获取到一个时间字段,是2017-03-23的格式,但是我要的是年月日分开显示,那就要用到过滤器了 在没有用过滤器的时候,是这样的: ...
- 判断内网机器的真实外网IP或域名的方法总结
在内渗透中有时需要在某台WEB服务器中留下后门,可以通过内网IP建立IPC连接,但还需要获知外网IP才能访问Wbshell,在无网关权限的情况下,我总结了有如下方法: nslookup myip.op ...
- CTO爆料:2019程序员最需要了解的行业前沿技术是什么?
安森,个推CTO 毕业于浙江大学,现全面负责个推技术选型.研发创新.运维管理等工作,已带领团队开发出针对移动互联网.金融风控等行业的多项前沿数据智能解决方案. 曾任MSN中国首席架构师,拥有十余年资深 ...
- 前端入门——day1(简介及推荐书籍和网站)
写给谁 这篇文章写给想要入门前端或者刚入门前端的小白~如果是已经工作好几年的小伙伴们可以直接跳过这一系列文章啦. 为啥写这篇文章 终于决定给自己挖这个坑了,之前一直没打算写这样的系列文章.回想起自己的 ...
- 启用和配置 FILESTREAM
2017/08/23 在开始使用 FILESTREAM 之前,必须在 SQL Server 数据库引擎实例中启用 FILESTREAM. 本主题说明了如何使用 SQL Server 配置管理器来启用 ...
- 【adb真机查Log】Android Studio 3.X 找不到Android Device Monitor
参考来源:https://blog.csdn.net/yuanxiang01/article/details/80494842 以下信息来源于Android Developers官网 Android设 ...
- C# 防火墙操作之特定端口
针对将特定端口加入到windows系统的防火墙中,使其允许或禁止通过防火墙.其大概思路是: /// <summary> /// 添加防火墙例外端口 /// </summary> ...
- 三十一、python中urllib和requests包详解
A.urllibimport urllibimport urllib.requestimport json '''1.loads,dumpsjson.loads():将字符串转化成python的基础数 ...