小白入门学习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. @Autowired 作用范围

    一.@AutoWired 可以作用于:构造器.方法.参数.属性 二.作用在方法上 @Component public class Student{ private Book book; public ...

  2. 04springMVC数据类型转换

    数据类型转换简介 Spring Web MVC中的数据类型转换 内建的类型转换器 自定义类型转换器 1      数据类型转换简介 当从页面提交数据到后台Action的时候,通过请求发送的数据,通常都 ...

  3. BA--空调静压箱的作用

    空调静压箱的主要作用有两个,一个是降低噪音:一个是提高送风距离.工作原理如下:空调出风从空调风机里面出来的时候,具有很大的风速,同时由于空调风机自身的结构原因,空调的出风并不均衡,空气在风管中相互摩擦 ...

  4. BZOJ 2818 Gcd (莫比乌斯反演 或 欧拉函数)

    2818: Gcd Time Limit: 10 Sec  Memory Limit: 256 MB Submit: 2534  Solved: 1129 [Submit][Status][Discu ...

  5. Manarcher 求 字符串 的最长回文子串 【记录】

    声明:这里仅仅写出了实现过程.想学习Manacher的能够看下这里给出的实现过程,算法涉及的一些原理推荐个博客. 给个链接 感觉讲的非常细 引子:给定一个字符串s,让你求出最长的回文子串的长度. 算法 ...

  6. UVA 11542 Square 高斯消元 异或方程组求解

    题目链接:点击打开链接 白书的例题练练手. . . P161 #include <cstdio> #include <iostream> #include <algori ...

  7. angularjs1-过滤器

    <!DOCTYPE html> <html> <body> <header> <meta http-equiv="Content-Typ ...

  8. Apache支持多端口配置处理

    玩了这么多年,终于知道原来Apache也可以支持多个端口监听!!!!!!!!!!!!!!!!!!!这样就可以一个服务器,存放多个项目了,一个ip多个端口,匹配多个项目. 试了下linux,也是可以的 ...

  9. 【POJ 3904】 Sky Code

    [题目链接] http://poj.org/problem?id=3904 [算法] 问题可以转化为求总的四元组个数 - 公约数不为1的四元组个数 总的四元组个数为C(n,4),公约数不为1的四元组个 ...

  10. 院校-德国:亚琛工业大学(RWTH)

    ylbtech-院校-德国:亚琛工业大学(RWTH) 1.返回顶部 1. 亚琛工业大学(RWTH)成立于1870年,是德国著名理工类大学之一,也是世界顶尖理工类大学之一 ,长久以来被誉为“欧洲的麻省理 ...