Vue 超清晰思维导图,带你详细梳理知识点
逆锋起笔
共 2493字,需浏览 5分钟
· 2020-09-15
Vue思维导图目录
MVC
与MVVM
的区别Vue
基本代码结构Vue
指令Vue
组件class
和style
动态绑定computed
计算属性EventBus
filter
过滤器方法
Vue
是一套构建用户界面的框架,只关注视图层,它不仅易于上手,还便于与第三方库或既有项目整合。(Vue
有配套的第三方类库,可以整合起来做大型项目的开发)
0.MVC 与MVVM的区别
MVC
是后端的分层开发概念;MVVM
是前端视图层的概念,主要关注于 视图层分离。MVVM
把前端的视图层分为了三部分:Model
,View
,VM ViewModel
1.Vue基本代码结构
const vm = new Vue({
el:'#app',//所有的挂载元素会被 Vue 生成的 DOM 替换
data:{ // this->window },
methods:{ // this->vm},
//注意,不应该使用箭头函数来定义 method 函数 ,this将不再指向vm实例
props:{} ,// 可以是数组或对象类型,用于接收来自父组件的数据
//对象允许配置高级选项,如类型检测、自定义验证和设置默认值
watch:{ // this->vm},
computed:{},
render(){},
// 声明周期钩子函数
})
当一个Vue
实例被创建时,它将data
对象中的所有的property
加入到Vue
的响应式系统中。当这些property
的值发生改变时,视图将会产生 响应,即匹配更新为新的值。
例外:
Vue
实例外部新增的属性改变时不会更新视图。Object.freeze()
,会阻止修改现有的property
,响应系统无法追踪其变化。
实例属性和方法
访问 el
属性:vm.$el
,`document.getElemnetById(‘app’)``;访问 data
属性:vm.$data
以 _
或$
开头的property
不会被Vue
实例代理,因为它们可能和Vue
内置的property
、API
方法冲突。你可以使用例如vm.$data._property
的方式访问这些property
。访问 data
中定义的变量:vm.a
,vm.$data.a
访问 methods
中的方法:vm.方法名()
访问 watch
方法:vm.$watch()
不要在选项property
或回调上使用箭头函数,this
将不会指向Vue
实例 比如created: () => console.log(this.a)
或vm.$watch('a', newValue => this.myMethod())
。
因为箭头函数并没有this
,this
会作为变量一直向上级词法作用域查找,直至找到为止,经常导致Uncaught TypeError: Cannot read property of undefined
或Uncaught TypeError: this.myMethod is not a function
之类的错误。
2. Vue指令
插入数据:
插值表达式相当于占位符,不会清空元素中的其他内容。直接写在标签中。会将 html
标签作为文本显示。v-text
会覆盖元素中原本的内容。写在开始标签中,以属性的形式存在。会将html
标签作为文本显示。v-html(innerHTML)
会覆盖元素中原本的内容,会将数据解析成html
标签。
3. Vue组件
组件配置对象和vue实例的区别
组件配置对象没有 el
,组件模板定义在template
中;组件配置对象中 data
是函数,该函数返回的对象作为数据。
创建组件模板
方法一
var com = Vue.extend({
//通过template属性 指定组件要展示的html结构
template:'这是使用Vue.extend搭建的全局组件
'
})
方法二:使用对象创建模板
{
template:'这是使用Vue.extend搭建的全局组件-com3
'
}
方法三:使用 template
标签(写在受控区域外面)创建模板,通过id
建立联系
"tmpl"> 写在受控区域外面
......
</template>
{ template:'#tmpl' }
组件中的data是一个函数的原因
多次使用该组件,如果修改其中一个中的数据,另一个也会改变。 写成函数的形式,每次调用函数,返回一个新的对象 关注公众号 逆锋起笔,回复 pdf,下载你需要的各种学习资料。
ref属性
获取 dom
元素/组件:标签上添加ref
属性,this.$refs.ref
属性值获取该dom元素/组件
。this.$refs.ref
属性值.变量名
获取组件中的数据this.$refs.ref
属性值.方法名()
获取组件中的方法
$parent
和 $children
获取 父/子组件的数据和方法
this.$parent
获取父组件$children
由于子组件的个数不确定 返回的是一个数组 ,不是对象this.$children[0]
获取第一个子组件
作用域插槽:父组件替换插槽的标签,内容由子组件决定。
编译的作用域:自身的数据在自身模板
template
标签中生效
插槽上添加 属性绑定: data=’子组件中的数据’
父组件通过 template
标签,添加slot-scope=’slot’
slot-scope
属性接收子组件中的数据slot.data
template
标签中的html结构替换slot
插槽中的默认html
结构。
4.class和style动态绑定
5.computed 计算属性
6.EventBus
7.filter过滤器方法
我为什么不再用 Vue,而改用 React?
点赞+在看,小编感恩大家❤️
评论
周四002 瑞超:同样落寞的境遇——北雪平vs埃尔夫斯堡
上赛季最终排名联赛第9的北雪平本赛季伊始表现不佳,4轮战罢他们仅以1胜1平2负的战绩排在倒数第三,这支历史上曾夺得13次联赛冠军、6次杯赛冠军老牌劲旅,正如英格兰赛场上的一众百年俱乐部,在低谷中不断探索着出路。球队主教练安德烈亚斯·阿尔姆曾是AIK索尔纳及赫根队的主教练,他于今年年初刚刚拿起球队教鞭
产品与体验
0
面试官:电商库存扣减如何设计?如何防止超卖?
来源:my.oschina.net/xiaolyuh/blog/1615639👉 欢迎加入小哈的星球 ,你将获得: 专属的项目实战 / Java 学习路线 / 一对一提问 / 学习打卡 / 赠书福利全栈前后端分离博客项目 2.0 版本完结啦, 演示
小哈学Java
0
一篇文章带你了解JavaScript作用域
点击上方“前端进阶学习交流”,进行关注回复“前端”即可获赠前端相关学习资料今日鸡汤杨家有女初长成,养在深闺人未识。在JavaScript中,对象和函数也是变量。在JavaScript中,作用域是你可以访问的变量、对象和函数的集合。JavaScript 有函数作用域: 这个作用域在函数内变化。一、本地
前端进阶学习交流
0
智慧城市一张图,空天信息企业两条路
图源:《未来城市》纪录片撰文 | 朱君编辑 | 神璐璐审核 | 刘玉琳封面 | 《未来城市》纪录片4月2日,国家数据局就《深化智慧城市发展 推进城市全域数字化转型的指导意见》(以下简称《意见》)向社会公开征求意见,智慧城市建设方向再次明确。图源:国家数据局《意见》明确指出,鼓励有
泰伯网
5
超赞!这个ChatGPT提问教程,PDF免费下载
你好,我是郭震AI来袭,我们该如何学习?今天先分享给大家一份超好的GPT提问指南。教程的详细介绍参考下面视频:这个PDF资料旨在教我们更好的给GPT发送指令,让GPT更准确的回答我们的提问。一共有30页,内容包括7个小章节,按照逻辑展开。分别介绍文本回答,代码辅助,结构化结果输出,非结构化结构输出,
Python与算法社区
3
提升思维,格局就打开了
每个人,都需要打破困住自己的牢笼不是因为很厉害才会变得快乐和自由而是要首先勇于冲破那个困住你的牢笼先让自己自由了才会渐渐变得快乐才会找回真正的自己才会变得越来越厉害.🌿哲学家叔本华说:世界上最大的监狱,是人的思维。回想我们过往犯过的错误,或者失去的机会,你会发现:绝大多数都是“思维牢笼”带来的,人一
小Q聊产品
1
北斗聚焦 | 工信部组织开展2024年5G轻量化贯通行动;2024全球6G技术大会在南京召开;智能制造装备产业规模超三点二万亿元
周报第一百七十四期2024/4/15-2024/4/21△点击页面右上角“…” 选择 “查找页面内容” 搜索【一周快报】,即可跳转到新版块★★ ★ ★★NO.1工信部组织开展2024年5G轻量化贯通行动记者4月16日从工业和信息化部获悉,工业和信息化部近日印发关于开展2024年度5G轻量
今日北斗
0
6大类最新AI工具,共计39个分类梳理!
你好,我是郭震俗话说,工欲善其事必先利其器,用好AI工具一定事半功倍!这也是AI技术革命带给我们最能感知到的地方之一。这篇文章总结了6大类AI工具,分别包括:问答,图像,视频,AI编程,AI提示词和AI大模型,一共梳理挑选了共计39个AI工具,其中很多都是开源!文末还包括完整思维导图,大家记得收藏这
Python与算法社区
10