这篇文章主要对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可以进行配置,配置多文件入口,进行多页面开发

渲染流程大概分以下几个步骤:

  1. new Vue,执行初始化
  2. 挂载$mount方法,通过自定义Render方法、template、el等生成Render函数
  3. 通过Watcher监听数据的变化
  4. 当数据发生变化时,Render函数执行生成VNode对象
  5. 通过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的简单总结的更多相关文章

  1. 基于vue.js的简单用户管理

    功能描述:添加.修改.搜索过滤 效果图: <!DOCTYPE html> <html lang="en"> <head> <title&g ...

  2. angular4.0和angularJS、react.js、vue.js的简单比较

    angularJS特性 模板功能强大丰富(数据绑定大大减少了代码量) 比较完善的前端MVC框架(只要学习这个框架,按照规定往里面填东西就可以完成前端几乎所有的的问题) 引入了Java的一些概念 ang ...

  3. Vue.js最简单的代码

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  4. 非node环境下的vue.js 实现简单的购物车计算功能 样式请无视

    都说vue的双向数据绑定好用,自己用了下,感觉做购物车没想象中好用.自己的实现如下: <!DOCTYPE html> <html lang="en"> &l ...

  5. Vue.js-----轻量高效的MVVM框架(二、Vue.js的简单入门)

    1.hello vue.js! (1)引入vue.js <script type="text/javascript" src="js/vue.js"> ...

  6. 【Vue.js】简单说下vuejs中v-model自定义使用姿势

    vue.js中有个v-model的语法,可以实现双向绑定. 起初刚看到的时候,觉得很神奇.后面随着对vue.js的熟悉.发现这个其实是vue官方给我们实现的一个语法糖. 使用v-model的时候,vu ...

  7. 【前端】Vue.js实现简单价格计算器

    价格计算器 实现效果: 实现代码及注释: <!DOCTYPE html> <html> <head> <title>价格计算器</title> ...

  8. Vue.js简单的应用

    1:一个简单实现 下面代码部分: <body> <div id="myDiv1"> {{userName}} </div> </body& ...

  9. Vue.js简单入门

    这篇文章我们将学习vue.js的基础语法,对于大家学习vue.js具有一定的参考借鉴价值,有需要的朋友们下面来一起看看. Vue.js是一个数据驱动的web界面库.Vue.js只聚焦于视图层,可以很容 ...

随机推荐

  1. ptmx

    ptmx DESCRIPTION The file /dev/ptmx is a character file with major number 5 and minor number 2, usua ...

  2. HDU 4012 Paint on a Wall(状压+bfs)

    Paint on a Wall Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 65768/65768 K (Java/Others) ...

  3. python 谈赋值和copy区别

    1变量赋值 a=1 b=a b=1 a=3 b还是等于1 2,列表赋值 嵌套列表情况 如果想让列表单独出来怎么办呢 ,这时候用到copy 如果列表嵌套列表情况 还是一样的, 如果想深度copy imp ...

  4. Springboot-技术专区-war包部署在Tomcat上并修改默认端口

    springboot项目内置Tomcat,直接打成jar包在dos下运行即可,但有时我们需要用war包以非内嵌Tomcat的方式来部署,以下是本人的实际经验 1.首先需要修改pom.xml文件 < ...

  5. CentOS7安装MySQL5.7.20

    参考1:https://www.cnblogs.com/technology-huangyan/p/10484838.html 参考1:https://blog.csdn.net/aiyowei110 ...

  6. ubuntu 系统类似QQ截图工具:DeepinScrot,flameshot

    经过一番探索! Ubuntu16.04 就用DeepinScrot 好用!不支持flameshot,反正我是半天没装成功 教程:https://blog.csdn.net/qq_19339041/ar ...

  7. 无法用另一台电脑上的navicat链接主机数据库lost connection toMYSQl server at "handshake":reading inital communication packet,system error:34

    同事要用navicat登陆我的数据库,主机地址和密码都没错,但是报错,lost connection toMYSQl server at "handshake":reading i ...

  8. 【串线篇】Mybatis之动态sql

    一.if标签 <select id="getTeacherByCondition" resultMap="teacherMap"> select * ...

  9. React、Redux、React-Redux学习

    React 是什么 用脚本进行DOM操作的代价很昂贵.有个贴切的比喻,把DOM和JavaScript各自想象为一个岛屿,它们之间用收费桥梁连接,js每次访问DOM,都要途径这座桥,并交纳"过 ...

  10. C#基础提升系列——C#异步编程

    C#异步编程 关于异步的概述,这里引用MSDN的一段文字: 异步编程是一项关键技术,使得能够简单处理多个核心上的阻塞 I/O 和并发操作. 如果需要 I/O 绑定(例如从网络请求数据或访问数据库),则 ...