“ 关注 前端开发社区
,回复"1"
即可加入 前端技术交流群
,回复 "2"
即可免费领取 500G前端干货!
Vue.js是一个轻巧、高性能、可组件化的 MVVM 库,同时拥有非常容易上手的API Vue.js是一个构建数据驱动的Web界面的库。 Vue.js是一套构建用户界面的 渐进式框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。 Vue的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合. Vue 完全有能力驱动采用单文件组件和 Vue生态系统支持的库开发的复杂单页应用。数据驱动+组件化的前端开发。 简而言之:Vue.js是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API实现响应的数据绑定和组合的视图组件。核心是一个响应的数据绑定系统。
MVVM 是 Model-View-ViewModel 的缩写。mvvm 是一种设计思想。Model 层代表数据模型,也可以在 Model 中定义数据修改和操作的业务逻辑;View 代表 UI 组件,它负责将数据模型转化成 UI 展现出来,ViewModel 是一个同步 View 和 Model 的对象。
当一个Vue实例创建时,vue会遍历data选项的属性,用 Object.defineProperty poroupoti 将它们转为 getter/setter并且在内部追踪相关依赖,在属性被访问和修改时通知变化。 每个组件实例都有相应的 watcher 程序实例,它会在组件渲染的过程中把属性记录为依赖,之后当依赖项的 setter 被调用时,会通知 wocher watcher 重新计算,从而致使它关联的组件得以更新。
简洁:页面由HTML模板+Json数据+Vue实例组成 数据驱动:自动计算属性和追踪依赖的模板表达式 组件化:用可复用、解耦的组件来构造页面 轻量:代码量小,不依赖其他库 快速:精确有效批量DOM更新 模板友好:可通过npm,bower等多种方式安装,很容易融入
预处理css,把css当前函数编写,定义变量,嵌套.
总共分为 8 个阶段创建前/后,载入前/后,更新前/后,销毁前/后。 创建前/后: 在 beforeCreate 阶段,vue 实例的挂载元素 el 还没有。 载入前/后:在 beforeMount 阶段,vue 实例的$el 和 data 都初始化了,但还是挂载之前为虚拟的 dom 节点,data.message 还未替换。在 mounted 阶段,vue 实例挂载完成,data.message 成功渲染。 更新前/后:当 data 变化时,会触发 beforeUpdate 和 updated 方法。 销毁前/后:在执行 destroy 方法后,对 data 的改变不会再触发周期函数,说明此时 vue 实例已经解除了事件监听以及和 dom 的绑定,但是 dom 结构依然存在。
对象为引用类型,当重用组件时,由于数据对象都指向同一个data对象,当在一个组件中修改data时,其他重用的组件中的data会同时被修改;而使用返回对象的函数,由于每次返回的都是一个新对象(Object的实例),引用地址不同,则不会出现这个问题。
vue-router模块的router-link组件。
三种。
第一种:全局导航钩子:router.beforeEach(to,from,next),作用:跳转前进行判断拦截。 第二种:组件内的钩子; 第三种:单独路由独享组件
v-if:判断是否隐藏;v-for:数据循环出来;v-bind:class:绑定一个属性;v-model:实现双向绑定
解析.vue文件的一个加载器,跟template/js/style转换成js模块。
assets文件夹是放静态资源; components是放组件; router是定义路由相关的配置; view视图; app.vue是一个应用主组件; main.js是入口文件
在我们运用vue的时候一定少不了用计算属性computed和watch
computed计算属性是用来声明式的描述一个值依赖了其它的值。当你在模板里把数据绑定到一个计算属性上时,Vue 会在其依赖的任何值导致该计算属性改变时更新 DOM。这个功能非常强大,它可以让你的代码更加声明式、数据驱动并且易于维护。 watch监听的是你定义的变量,当你定义的变量的值发生变化时,调用对应的方法。就好在div写一个表达式name,data里写入num和lastname,firstname,在watch里当num的值发生变化时,就会调用num的方法,方法里面的形参对应的是num的新值和旧值,而计算属性computed,计算的是Name依赖的值,它不能计算在data中已经定义过的变量。
我们在父组件给子组件传值得时候,为了避免不必要的错误,可以给prop的值进行类型设定,让父组件给子组件传值得时候,更加准确,prop可以传一个数字,一个布尔值,一个数组,一个对象,以及一个对象的所有属性。组件可以为 props 指定验证要求。如果未指定验证要求,Vue 会发出警告比如传一个number类型的数据,用defalt设置它的默认值,如果验证失败的话就会发出警告。
props: {
visible: {
default: true,
type: Boolean,
required: true
},
},
父:自定义属性名 + 数据(要传递)=> :value="数据" 子:props "父组件上的自定义属性名“ =>进行数据接收)
在父组件中注册子组件并在子组件标签上绑定自定义事件的监听。
子:this.$emit(‘自定义事件名称’, 数据) 子组件标签上绑定@自定义事件名称=’回调函数’ 父:methods: {自定义事件() {//逻辑处理} }
通过中央通信 let bus = new Vue()
A:methods :{ 函数{bus.$emit('自定义事件名’,数据)} 发送 B:created (){bus.$on('A发送过来的自定义事件名’,函数)} 进行数据接收
最近几天会陆续更新的~~,觉得总结的可以的话,麻烦给小编点一个 在看
, 谢谢!
请各位帅哥美女多多支持帅编,回复“1”
即可加入前端技术交流群,回复’2‘
即可领取 500G 前端干货
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。