小白入门学习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. 在数据表中字段存有excel、word文件数据,让其随着记录指针移动而改变显示

    这是一个及其简单的问题,可是被绕住了.当记录移动时,装载数据到excel显示数据.这个方法写在哪里?如何触发? datasource.cds等空间的触发都是多次.到现在也没明白如何去做.笨方法: 1. ...

  2. redis代码解析-事务

    redis 的事务相关的几个命令分别为 watch multi exec. watch 可以监控一个变量在事务开始执行之前是否有被修改.使用方式为: WATCH key [key ...] 在redi ...

  3. POJ 2133

    类似于DP一样做,但这题有个大坑,自己看DIS吧.... #include <iostream> #include <cstdio> #include <cstring& ...

  4. Android新手入门2016(8)--ListView之ArrayAdapter

    本文来自肥宝传说之路,引用必须注明出处! ListView是Android中经常使用的控件. 什么是列表视图,让我们先看看图: watermark/2/text/aHR0cDovL2Jsb2cuY3N ...

  5. Spring MVC学习------------核心类与接口

    核心类与接口: 先来了解一下,几个重要的接口与类. 如今不知道他们是干什么的没关系,先混个脸熟,为以后认识他们打个基础. DispatcherServlet   -- 前置控制器 HandlerMap ...

  6. Android持久化保存cookie

    在解析网页信息的时候,需要登录后才能访问,所以使用httpclient模拟登录,然后把cookie保存下来,以供下一次访问使用,这时就需要持久化cookie中的内容. 在之前先科普一下基础知识: 什么 ...

  7. 下压栈(LIFO)详解

    写在前面的话: 一枚自学Java和算法的工科妹子. 算法学习书目:算法(第四版) Robert Sedgewick 算法视频教程:Coursera  Algorithms Part1&2 本文 ...

  8. ubuntu下谷歌浏览器字体模糊解决方案

    一般来说,这种问题应该是缺少字体造成的,因此重新安装字体就可以解决问题. 1.双系统下,查找Windows C盘下:Windows/font/???? ???可在3中查找相应字体 2.分别双击安装那两 ...

  9. Scrapy Architecture overview--官方文档

    原文地址:https://doc.scrapy.org/en/latest/topics/architecture.html This document describes the architect ...

  10. adplus 抓取dump

    工具所在路径   C:\Program Files\Windows Kits\10\Debuggers\x64 cmd窗口切换目录倒adplus所在路径下,输入抓取命令.adplus -hang -p ...