小白入门学习vue和vue实例,vue总结

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

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

Vue 的创建

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

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

指令

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

详细请看 demo 源码

自定义指令 

查看代码源

Vue API

Vue 组件

Vue 实例

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

生命周期钩子

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

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

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

如何让 Vue 书写更佳优美?

详细 style-guide 请参看官网

参考网站: https://github.com/sunseekers

Vue入门教程(2)的更多相关文章

  1. wepack+sass+vue 入门教程(三)

    十一.安装sass文件转换为css需要的相关依赖包 npm install --save-dev sass-loader style-loader css-loader loader的作用是辅助web ...

  2. wepack+sass+vue 入门教程(二)

    六.新建webpack配置文件 webpack.config.js 文件整体框架内容如下,后续会详细说明每个配置项的配置 webpack.config.js直接放在项目demo目录下 module.e ...

  3. wepack+sass+vue 入门教程(一)

    一.安装node.js node.js是基础,必须先安装.而且最新版的node.js,已经集成了npm. 下载地址 node安装,一路按默认即可. 二.全局安装webpack npm install ...

  4. webpack+sass+vue 入门教程(三)

    十一.安装sass文件转换为css需要的相关依赖包 npm install --save-dev sass-loader style-loader css-loader loader的作用是辅助web ...

  5. webpack+sass+vue 入门教程(二)

    六.新建webpack配置文件 webpack.config.js 文件整体框架内容如下,后续会详细说明每个配置项的配置 webpack.config.js直接放在项目demo目录下 module.e ...

  6. webpack+sass+vue 入门教程(一)

    一.安装node.js node.js是基础,必须先安装.而且最新版的node.js,已经集成了npm. 下载地址 node安装,一路按默认即可. 二.全局安装webpack npm install ...

  7. vue入门教程 (vueJS2.X)

    vue入门教程vueJS2.X 写在前面 看完此教程可以达到:能看懂并能修改简单的vue项目. 看的过程中,请把所有例子都放到html文件中跑一遍. Vue.js 是什么 Vue.js(读音 /vju ...

  8. VUE 入门教程

    http://www.runoob.com/w3cnote/vue-js-quickstart.html VUE安装教程 https://segmentfault.com/a/119000001218 ...

  9. Vue入门教程 第一篇 (概念及初始化)

    注:为了本教程的准确性,部分描述引用了官网及网络内容. 安装Vue 1.使用npm安装vue: npm install vue 2.下载使用js文件: https://vuejs.org/js/vue ...

随机推荐

  1. Charles抓包工具抓取HTTS请求

    1. 移动端(手机)配置证书 1.1 进入Charles,点击Help,选择SSL Proxying --> 选择安装手机证书 1.2 在Charles弹框提示中,按照提示内容,进入手机进入下图 ...

  2. 如何用Vim提高开发效率

    即可 ●输入m获取到文章目录 推荐↓↓↓ C/C++编程 更多推荐<18个技术类公众微信> 涵盖:程序人生.算法与数据结构.黑客技术与网络安全.大数据技术.前端开发.Java.Python ...

  3. MySQL 触发器 -1

    MySQL包含对触发器的支持.触发器是一种与表操作有关的数据库对象,当触发器所在表上出现指定事件时,将调用该对象,即表的操作事件触发表上的触发器的执行. 创建触发器 在MySQL中,创建触发器语法如下 ...

  4. ASP.NET - 单元测试

    Assert类的使用 Assert.Inconclusive() 表示一个未验证的测试: Assert.AreEqual() 测试指定的值是否相等,如果相等,则测试通过: AreSame() 用于验证 ...

  5. BA-深化设计流程

    本文分三个层次描述了常规BA系统深化设计应包含了步骤和文件,第一个.第二个为转载别人的步骤,第三个为本人写的步骤. 深化系统大体步骤: 1.认真阅读招标文件,明确招标方需求. 2.仔细查阅图纸,确定被 ...

  6. HDU 2054 A==B? 大数

    Problem Description Give you two numbers A and B, if A is equal to B, you should print "YES&quo ...

  7. 使用记事本开发第一个java程序

    记事本是开发java程序最基础的一个工具 第一步:编写 新建一个文件名为Hello的文本文档,并将文件扩展名改为.java. 在文本框内输入我们的程序代码 ——————————————我是分割线——— ...

  8. nyoj--1185--最大最小值(线段树)

    最大最小值 时间限制:1000 ms  |  内存限制:65535 KB 难度:2 描述 给出N个整数,执行M次询问. 对于每次询问,首先输入三个整数C.L.R: 如果C等于1,输出第L个数到第R个数 ...

  9. xBIM 学习与应用系列目录

        xBIM 实战04 在WinForm窗体中实现IFC模型的加载与浏览   xBIM 实战03 使用WPF技术实现IFC模型的加载与浏览   xBIM 实战02 在浏览器中加载IFC模型文件并设 ...

  10. 常见问题处理之Emoji

    所谓Emoji就是一种在Unicode位于\u1F601-\u1F64F区段的字符.这个显然超过了目前常用的UTF-8字符集的编码范围\u0000-\uFFFF.Emoji表情随着IOS的普及和微信的 ...