vue js的简单总结
这篇文章主要对vue的理解进行总结:
参考来源:http://blog.csdn.net/generon/article/details/72482844
vue.js是一套构建用户界面的渐进式框架,它的核心库只关注视图层。它相比之其它的框架来说要更加的轻便,易于上手,相对与大部分的框架在性能方面要好一些。
不过也有不足的地方:比如不能支持IE8及以下的IE版本。
Vue.js的特性如下:
1.轻量级的框架
2.双向数据绑定
3.指令
4.插件化
Vue目前的的开发模式主要有两种:
1.直接页面级的开发,script直接引入Vue
2.工程性开发,webpack+loader或者直接使用脚手架工具Vue-cli,里面的文件都配置好了
webpack可以进行配置,配置多文件入口,进行多页面开发
渲染流程大概分以下几个步骤:
- new Vue,执行初始化
- 挂载
$mount
方法,通过自定义Render方法、template、el等生成Render函数 - 通过Watcher监听数据的变化
- 当数据发生变化时,Render函数执行生成VNode对象
- 通过patch方法,对比新旧VNode对象,通过DOM Diff算法,添加、修改、删除真正的DOM元素
下面说一说vue的渲染模式有三种:
1、自定义的render函数
1.Vue.component('anchored-heading', {
2. render: function (createElement) {
3. return createElement(
4. 'h' + this.level, // tag name 标签名称
5. this.$slots.default // 子组件中的阵列
6. )
7. },
8. props: {
9. level: {
10. type: Number,
11. required: true
12. }
13. }
14.})
2、 template写法
1.var vm = new Vue({
2. data: {
3. // 以一个空值声明 `msg`
4. msg: ''
5. },
6. template: '<div>{{msg}}</div>'
7.})
3、el写法
1.var app = new Vue({
2. el: '#app',
3. data: {
4. message: 'Hello Vue!'
5. }
6.})
这三种渲染模式最终都是要得到Render函数。只不过用户自定义的Render函数省去了程序分析的过程,等同于处理过的Render函数,而普通的template或者el只是字符串,需要解析成AST,再将AST转化为Render函数。
记住一点,无论哪种方法,都要得到Render函数。
我们在使用过程中具体要使用哪种调用方式,要根据具体的需求来。
如果是比较简单的逻辑,使用template和el比较好,因为这两种都属于声明式渲染,对用户理解比较容易,但灵活性比较差,因为最终生成的Render函数是由程序通过AST解析优化得到的;
而使用自定义Render函数相当于人已经将逻辑翻译给程序,能够胜任复杂的逻辑,灵活性高,但对于用户的理解相对差点。
生命周期:
beforeCreate(创建前)
created(创建后)
beforeMount(载入前)
mounted(载入后)
beforeUpdate(更新前)
updated(更新后)
beforeDestroy(销毁前)
destroyed(销毁后)
vue js的简单总结的更多相关文章
- 基于vue.js的简单用户管理
功能描述:添加.修改.搜索过滤 效果图: <!DOCTYPE html> <html lang="en"> <head> <title&g ...
- angular4.0和angularJS、react.js、vue.js的简单比较
angularJS特性 模板功能强大丰富(数据绑定大大减少了代码量) 比较完善的前端MVC框架(只要学习这个框架,按照规定往里面填东西就可以完成前端几乎所有的的问题) 引入了Java的一些概念 ang ...
- Vue.js最简单的代码
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- 非node环境下的vue.js 实现简单的购物车计算功能 样式请无视
都说vue的双向数据绑定好用,自己用了下,感觉做购物车没想象中好用.自己的实现如下: <!DOCTYPE html> <html lang="en"> &l ...
- Vue.js-----轻量高效的MVVM框架(二、Vue.js的简单入门)
1.hello vue.js! (1)引入vue.js <script type="text/javascript" src="js/vue.js"> ...
- 【Vue.js】简单说下vuejs中v-model自定义使用姿势
vue.js中有个v-model的语法,可以实现双向绑定. 起初刚看到的时候,觉得很神奇.后面随着对vue.js的熟悉.发现这个其实是vue官方给我们实现的一个语法糖. 使用v-model的时候,vu ...
- 【前端】Vue.js实现简单价格计算器
价格计算器 实现效果: 实现代码及注释: <!DOCTYPE html> <html> <head> <title>价格计算器</title> ...
- Vue.js简单的应用
1:一个简单实现 下面代码部分: <body> <div id="myDiv1"> {{userName}} </div> </body& ...
- Vue.js简单入门
这篇文章我们将学习vue.js的基础语法,对于大家学习vue.js具有一定的参考借鉴价值,有需要的朋友们下面来一起看看. Vue.js是一个数据驱动的web界面库.Vue.js只聚焦于视图层,可以很容 ...
随机推荐
- Java负整数的左移、右移、无符号右移
转自 Java负整数的左移.右移.无符号右移 Java负整数的左移.右移.无符号右移.正数的位移没有涉及到符号,而且正数的原码.反码.补码都是一样的,所以相对简单,但是对于负整数的位移,往往容易混淆 ...
- SLA服务可用性4个9是什么意思?怎么达到?
SLA:服务等级协议(简称:SLA,全称:service level agreement).是在一定开销下为保障服务的性能和可用性,服务提供商与用户间定义的一种双方认可的协定.通常这个开销是驱动提供服 ...
- 关于Echarts的使用和遇到的问题
对于插件工具,感觉按着官方的教程,便可以使用,但是看这个Echarts有点晕乎乎的,还是不能快速的学习啊. 一.在webpack中使用ECharts //通过 npm 获取 echartsnpm in ...
- centos7中mysql不能输入中文问题的解决
首先在数据库里面输入 mysql> show variables like'%char%' -> ; +--------------------------------------+--- ...
- Js数据去重复,时间更换格式,cookie,localStorage和sessionStorage的使用等通用方法
一,数组去重复 function unique(arr) { // 遍历arr,把元素分别放入tmp数组(不存在才放) var tmp = new Array(); for (var i in arr ...
- 2018-8-10-win10-uwp-MetroLog-入门
title author date CreateTime categories win10 uwp MetroLog 入门 lindexi 2018-08-10 19:16:53 +0800 2018 ...
- JSP项目中使用ueditor(百度编辑器)
1. 从http://ueditor.baidu.com下载JSP版本的ueditor,注意GBK和UTF-8两种版本. 2. 在Web Project项目的WebRoot目录下新增thirdpart ...
- JSOI2018冬令营游记&总结(迁移自洛谷博客)
游记 一开始在冬令营还没开始的时候,十分期待,殊不知每天都有一场浩劫在等着我. Day0 10:50出发,看见lbn同学发了一条说说,也随便发了一个. 然后在车上一直在睡觉,现在感觉挺后悔的,其实可以 ...
- Hibernate入门核心配置文件和orm元数据配置文件详解
框架是什么? 框架是用来提高开发效率的 封装了一些功能,我们需要使用这些功能时,调用即可,不用手动实现 所以框架可以理解为一个半成品的项目,只要懂得如何使用这些功能即可 Hibernate是完全面向对 ...
- toj 4602 松鼠聚会
题目: 草原上住着一群小松鼠,每个小松鼠都有一个家.时间长了,大家觉得应该聚一聚.但是草原非常大,松鼠们都很头疼应该在谁家聚会才最合理. 每个小松鼠的家可以用一个点x,y表示,两个点的距离定义为:点( ...