vue data数据修改_Vue 超清晰思维导图(7张),详细知识点梳理!
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:'<h3>这是使用Vue.extend搭建的全局组件</h3>'
})
- 方法二:使用对象创建模板
{template:'<h3>这是使用Vue.extend搭建的全局组件-com3</h3>'
}
- 方法三:使用
template
标签(写在受控区域外面)创建模板,通过id
建立联系
<template id="tmpl"> 写在受控区域外面......
</template> { template:'#tmpl' }
组件中的data是一个函数的原因
- 多次使用该组件,如果修改其中一个中的数据,另一个也会改变。
- 写成函数的形式,每次调用函数,返回一个新的对象
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过滤器方法
原作者姓名:1024 FED
原出处:腾讯云
原文链接:面试必备 Vue 知识点 - 云+社区 - 腾讯云
vue data数据修改_Vue 超清晰思维导图(7张),详细知识点梳理!相关推荐
- vue data数据修改_VUE的数据响应式
什么是数据响应式? const vm =newVUE({data:{n:0}}) 上面的代码中,如果修改vm.n,那么UI中的n就会通过变化来响应我,这就是数据响应式. VUE对data做了什么? 当 ...
- 超清晰思维导图(vue)
1.class和style动态绑定 2.computed 计算属性 3.EventBus 4.filter过滤器方法
- 思维导图系列之MySQL知识梳理
上一系列:思维导图系列之Redis知识梳理 从MySQL的基础.存储引擎.索引.锁.事务.分库分表.性能分析.使用规范及优化方面去罗列主要知识点,以思维导图的方式进行呈现,可以让读者更条理清晰的在最短 ...
- 思维导图系列之Redis知识梳理
从Redis的基础.分布式锁.缓存雪崩.缓存击穿.缓存穿透.持久化.高可用.内存淘汰机制等方面去罗列主要知识点,以思维导图的方式进行呈现,可以让读者更条理清晰的在最短的时间内掌握Redis的主要知识 ...
- 关于主机的思维导图_「停课不停学」思维导图—初中语文全部知识点总结,高清可打印...
导读 思维导图的创始人东尼·博赞先生在读大学的时候,作为一名大一新生,在第一天上课时,好奇心就被略带傲慢的教授点燃了,因为他之前从来没见一个老师可以不用翻花名册点名,而且是第一次上课,全部是新生的情况 ...
- mindmaster思维导图 常用快捷键 详细使用技巧 做笔记你真的应该尝试一下这个软件
本文是众多使用技巧中其中的一篇, 全部使用技巧点击链接查看, 保证你收获满满 我主页中的思维导图中内容大多从我的笔记中整理而来,相应技巧可在笔记中查找原题, 有兴趣的可以去 我的主页 了解更多计算机学 ...
- 初中各科思维导图汇总PDF,初中生物思维导图汇总,初中数学知识点
初中各科思维导图汇总PDF,初中生物思维导图汇总,初中数学知识点 链接:https://pan.baidu.com/s/1O0Kry18KYKy4FpBao1DnZw?pwd=k6o7 提取码:k6 ...
- 超人气思维导图XMind新年新版本,这6个新功能你一定要看
2018 年初,XMind公司推出了这款花了三年时间重写了每一行代码的新旗舰产品XMind: ZEN.经过不断的优化和完善,终于成为了一款全平台.功能丰富的优秀思维导图软件,如今已然成为国内人气思维导 ...
- 高瓴张磊《价值》读书笔记,超全思维导图(附pdf下载)
高瓴张磊<价值>读书笔记 大家好,我是 Lemon . 今天来给大家介绍一本新出不久的书,书的名称是<价值>,作者是高瓴资本的张磊先生. 正如书名,这是一本难得的好书,这本书给 ...
最新文章
- 就是一个斜杠的事情!
- JS难点剖析-原型原型链
- 关于Java中何时使用static和工具类相关知识
- 脚本启动Tomcat
- 一个数据应用闭环(转载)
- 【uva 1617】Laptop(算法效率--贪心,2种理解)
- CentOS7的/tmp目录自动清理规则(转)
- 在javafx中界面主题_最小的JavaFX演示文稿(在JavaFX中)
- C# winform对话框用法大全收藏
- Tensorflow入门之运算篇
- sqlserver字符串处理函数
- 博图导入的程序用step7读出_博图软件TIA STEP7 V16 上载程序方法
- dell网卡linux驱动,Dell R720上安装linux网卡驱动
- 服务器网站5m带宽可以同时在线多少人?
- ZUI————对话框闪退问题
- Android 定制关机界面
- 抖音上超火系列的透明头像是怎么弄的?操作原来如此简单
- html5 自动扣图,html5利用canvas实现颜色容差抠图功能
- Linux实战技巧--文件系统操作(五)--打包压缩和解压缩(tar)
- Miniconda, ImportError: DLL load failed while importing win32api
热门文章
- 深入浅出Dotnet Core的项目结构变化
- .NET Core AWS S3云存储
- 为 CefSharp 应用内置 C++ 运行环境并启用 AnyCPU 支持
- 在传统行业做数字化转型之业务篇
- 【BCVP】实现基于 Redis 的消息队列
- 如何隐藏运行 winform 程序?
- LINQ :最终统治了​所有的语言!
- ASP.NET Core 通过 Microsoft.DotNet.Watcher.Tools 实现热部署
- .NET Core 时代已经到了,你准备好了吗
- Blazor 0.5.0 升级及新特性介绍