这篇文章主要对vue的理解进行总结:参考来源 1.轻量级的框架 2.双向数据绑定 3.指令 4.插件化 Vue目前的的开发模式主要有两种:1.直接页面级的开发,script直接引入Vue2.工程性开发,webpack+loader或者直接使用脚手架工具Vue-cli, ...
这篇文章主要对vue的理解进行总结:
参考来源 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: 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函数。
我们在使用过程中具体要使用哪种调用方式,要根据具体的需求来。
生命周期:
beforeCreate(创建前)
created(创建后)
beforeMount(载入前)
mounted(载入后)
beforeUpdate(更新前)
updated(更新后)
beforeDestroy(销毁前)
destroyed(销毁后)
海外公司注册、海外银行开户、跨境平台代入驻、VAT、EPR等知识和在线办理:https://www.xlkjsw.com
原标题:vue.js的简单总结
关键词:JS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。