Vue入门教程(2)
小白入门学习vue和vue实例,vue总结

这就是我脑海中的 Vue 知识体系;
一句话概况了 Vue 通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件
Vue 的创建

我们的学习目的肯定不止于创建简单的 Vue 实例;而是用它去实现更加多变的功能需求;那我们需要进一步去学习 Vue-router 和 Vuex 以及 Vue-cli;
先说说基础的 Vue 吧,在创建了一个简单 Vue 实例之后,我们是否还能在实例中添加更加完善的数据选项,去完成我们多变的功能需求;答案是肯定能的;
指令

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

自定义指令


Vue API

Vue 组件

Vue 实例

这就是我在学习 Vue 的时候,在 Vue 实例中添加的比较多的; directives 和 components 在 Vue 实例中为创建的 局部 自定义指令和注册组件,Vue.directive() 和 Vue.component() 则是注册全局
生命周期钩子
每个 Vue 实例在被创建之前都要经过一系列的初始化过程。例如需要设置数据监听、编译模板、挂载实例到 DOM、在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数,给予用户机会在一些特定的场景下添加他们自己的代码。
在QQ群里看到一张生命周期图,我觉得写的特别好,感谢总结这张图的朋友

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


如何让 Vue 书写更佳优美?

参考网站: https://github.com/sunseekers
Vue入门教程(2)的更多相关文章
- wepack+sass+vue 入门教程(三)
十一.安装sass文件转换为css需要的相关依赖包 npm install --save-dev sass-loader style-loader css-loader loader的作用是辅助web ...
- wepack+sass+vue 入门教程(二)
六.新建webpack配置文件 webpack.config.js 文件整体框架内容如下,后续会详细说明每个配置项的配置 webpack.config.js直接放在项目demo目录下 module.e ...
- wepack+sass+vue 入门教程(一)
一.安装node.js node.js是基础,必须先安装.而且最新版的node.js,已经集成了npm. 下载地址 node安装,一路按默认即可. 二.全局安装webpack npm install ...
- webpack+sass+vue 入门教程(三)
十一.安装sass文件转换为css需要的相关依赖包 npm install --save-dev sass-loader style-loader css-loader loader的作用是辅助web ...
- webpack+sass+vue 入门教程(二)
六.新建webpack配置文件 webpack.config.js 文件整体框架内容如下,后续会详细说明每个配置项的配置 webpack.config.js直接放在项目demo目录下 module.e ...
- webpack+sass+vue 入门教程(一)
一.安装node.js node.js是基础,必须先安装.而且最新版的node.js,已经集成了npm. 下载地址 node安装,一路按默认即可. 二.全局安装webpack npm install ...
- vue入门教程 (vueJS2.X)
vue入门教程vueJS2.X 写在前面 看完此教程可以达到:能看懂并能修改简单的vue项目. 看的过程中,请把所有例子都放到html文件中跑一遍. Vue.js 是什么 Vue.js(读音 /vju ...
- VUE 入门教程
http://www.runoob.com/w3cnote/vue-js-quickstart.html VUE安装教程 https://segmentfault.com/a/119000001218 ...
- Vue入门教程 第一篇 (概念及初始化)
注:为了本教程的准确性,部分描述引用了官网及网络内容. 安装Vue 1.使用npm安装vue: npm install vue 2.下载使用js文件: https://vuejs.org/js/vue ...
随机推荐
- 【XSY2384】【GDOI2017】微信
致去年的我:这是道广义SAM模板题啊…… 题意: Description Input Output HINT $1\leq N\leq 20$,$1\leq Q\leq 10^5$,字符串总长$\le ...
- 【codeforces 799C】Fountains
[题目链接]:http://codeforces.com/contest/799/problem/C [题意] 你有两种不同的货币; 余额分别为c和d 然后有n种商品; 每种商品只能由两种货币中的某一 ...
- java import跨包引用类理解
当前类要用其他类时,import具体包路径+.+具体的类 import引入的是被引用类的class文件,所以当我们build path第三方jar包时, 要用他们的类,要把jar包add to bui ...
- jQuery动画animate()的使用
自己定义动画效果: 使用方法:animate(js对象,运行时间.回调函数): js对象:{ }描写叙述动画运行之后元素的样式 运行时间:毫秒数 回调函数:动画运行结束后要运行的函数 html代码: ...
- https 证书 certbot-auto执行错误
报错:ImportError: /root/.local/share/letsencrypt/lib/python2.7/site-packages/cryptography/hazmat/bindi ...
- Oracle回滚段的概念,用法和规划及问题的解决
回滚段概述 回滚段用于存放数据修改之前的值(包括数据修改之前的位置和值).回滚段的头部包含正在使用的该回滚段事务的信息.一个事务只能使用一个回滚段来存放它的回滚信息,而一个回滚段可以存放多个事务的回 ...
- HTML、CSS和JS中注释类型的总结
添加必要的注释,是一个优秀的程序员必须具备的好习惯,可以大大提高代码的可维护性.可读性. 1.HTML注释 <!--注释的内容--> 注释的地方(根据个人习惯可能有所不同): 结束标签的后 ...
- myeclipse打开jsp页面慢或者卡死
不知道你们有没有这种经历,反正无论是公司电脑还是自己电脑,myeclipse打开jsp页面卡的不行不行的,又是甚至会出现卡死的现象,几经周折,找到了解决办法,亲测有效 打开window-prefere ...
- 转:Eclipse上安装GIT插件EGit及使用
一.Eclipse上安装GIT插件EGit Eclipse的版本eclipse-java-helios-SR2-win32.zip(在Eclipse3.3版本找不到对应的 EGit插件,无法安装) E ...
- jquery 登录,删除提示信息框
<a onclick="return confirm('确认要退出登录吗?')">退出</a> //删除,修改,添加时提示信息框 (del,edit,add ...