分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 运营维护

vue.js的简单总结

发布时间:2023-09-06 01:25责任编辑:胡小海关键词: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可以进行配置,配置多文件入口,进行多页面开发

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

  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: true12. ???????}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的简单总结

原文地址:http://www.cnblogs.com/akun-2017/p/7837483.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved