new Vue() 和 export default {}及Vue页面组件和标签组件说明与比较(非常重要)
说明与比较:new Vue() 和 export default {}
(1)vue就是一个构造函数
(2)vue标签组件:是HTML标签的扩展https://www.cnblogs.com/w-wanglei/p/5851629.html 什么是组件:组件是Vue.js最强大的功能之一。组件可以扩展HTML元素,封装可重用的代码。在较高层面上,组件是自定义的元素,Vue.js的编译器为它添加特殊功能。在有些情况下,组件也可以是原生HTML元素的形式,以is特性扩展。(Vue.component页面内复用,可把Vue页面组件、HTML元素等当作一个标签内容进行复用)
你可能已经注意到 Vue.js 组件非常类似于自定义元素——它是 Web 组件规范的一部分。实际上 Vue.js 的组件语法参考了该规范。例如 Vue 组件实现了 Slot API 与 is 特性。但是,有几个关键的不同:
1)Web 组件规范仍然远未完成,并且没有浏览器实现。相比之下,Vue.js 组件不需要任何补丁,并且在所有支持的浏览器(IE9 及更高版本)之下表现一致。必要时,Vue.js 组件也可以放在原生自定义元素之内。
2)Vue.js 组件提供了原生自定义元素所不具备的一些重要功能,比如组件间的数据流,自定义事件系统,以及动态的、带特效的组件替换。
(3)vue页面组件:在生成、导出、导入、使用 Vue 页面组件的时候,像我这种新手就会常常被位于不同文件的 new Vue() 和 export default{} 搞得晕头转向。它们含义到底是什么,又有什么异同呢?
首先,Vue 是什么? po 主的理解是 Vue 就是一个构造函数,生成的实例是一个巨大的对象,可以包含数据、模板、挂载元素、方法、生命周期钩子等选项。
所以渲染的时候,可以使用构造 Vue 实例的方式来渲染相应的 html 页面:
new Vue({
el: '#app'
...
})
那么 export default {} 又是来干嘛的?(页面间复用)
这是在复用组件的时候用到的。假设我们写了一个单页面组件 A 文件,而在另一个文件 B 里面需要用到它,那么就要用 ES6 的 import/export 语法 ,在文件 A 中定义输出接口 export **,在文件 B 中引入 import **,然后再生成一个 Vue 实例 new Vue (**),把引入的组件用起来,这样就可以复用组件 A 去配合文件 B 生成 html 页面了。
所以在复用组件的时候,export 和 new Vue 缺一不可。
new Vue() 和 export default {}及Vue页面组件和标签组件说明与比较(非常重要)的更多相关文章
- vue中export default 在console中是this.$vm
vue中export default 在console中是this.$vm 用vue-cli搭出框架,用webstorm进行开发,参考vue2的官网进行教程学习, 在vue-cli中是用es6的exp ...
- 说明与比较:new Vue() 和 export default {}
在生成.导出.导入.使用 Vue 组件的时候,像我这种新手就会常常被位于不同文件的 new Vue() 和 export default{}.它们含义到底是什么,又有什么异同呢? 首先,Vue 是什么 ...
- Vue 中 export default 和 module.exports
export default 服从 ES6 的规范,补充:default 其实是别名 module.exports 服从CommonJS 规范 一般导出一个属性或者对象用 export default ...
- 关于 vue中 export default 和 new Vue({})
对于刚开始学习vue的人(像我),一般都不会清楚的知道两者之间该怎么区分,甚至觉得两者是一样的. 那么,经过我的查证,发现两者之间是没有任何联系的. export default ES6 Module ...
- !!误解--var vm = new vue({}) 与 export default {} 是一回事儿??
这两者完全不是同一回事.export default {} 是es6的module中的语法, 而var vm = new vue({}) 是创建一个vue实例.引起误解是因为用了webpack开发vu ...
- Vue中 export default 和 export 区别
1.export与export default均可用于导出常量.函数.文件.模块等2.在一个文件或模块中,export.import可以有多个,export default仅有一个3.通过export ...
- 【vue】饿了么项目-页面骨架开发
1.页面骨架开发 1.1组件拆分 手机浏览器是把页面放在一个虚拟的“窗口”(viewport)中,通常这个虚拟的“窗口”(viewport)比屏幕宽,这样就不用把每个网页挤到很小的窗口中(这样会破坏没 ...
- export default{} 和 new Vue()都是什么意思
在生成.导出.导入.使用 Vue 组件的时候,有些新手就会常常被位于不同文件的 new Vue() 和 export default{} 搞得晕头转向.它们含义到底是什么,又有什么异同呢? 首先,Vu ...
- Vue.js实现一个SPA登录页面的过程
技术栈 vue.js 主框架 vuex 状态管理 vue-router 路由管理 一般过程 在一般的登录过程中,一种前端方案是: 检查状态:进入页面时或者路由变化时检查是否有登录状态(保存在cooki ...
随机推荐
- Anniversary party POJ - 2342
题目链接 经典的树形dp,最大独立集,对于每个点就有2个状态,选/不选 设\(dp_{i,0}\)表示不选第i个,\(dp_{i,1}\)表示选第i个,容易得到其状态转移 \(dp_{i,0} = \ ...
- 《如何写好商业计划书》---创业学习---训练营第三课---HHR---
一,<开始上课> 1,投资人不愿意约见的原因:创始人没有把项目的投资价值和亮点呈现在商业计划书里. 2,BP的三个常见的错误:不够完整,关键内容没有呈现出来:华而不实:篇幅过长. 3,预热 ...
- vue 事件总线(bus)
1.全局引入bus Vue.prototype.$bus = new.Vue() 2.组件间传值使用(在发送事件时接收组件会实时接收到, 可以用做兄弟组件间相互传值, 但页面跳转组件间有问题 通过$e ...
- CSP-201609-3 炉石传说
问题描述 <炉石传说:魔兽英雄传>(Hearthstone: Heroes of Warcraft,简称炉石传说)是暴雪娱乐开发的一款集换式卡牌游戏(如下图所示).游戏在一个战斗棋盘上进行 ...
- webpack使用devtool :source map插件
链接 : https://www.cnblogs.com/chris-oil/p/8856020.html
- MySQL自动备份实战--xtrabackup备份
MySQL数据备份企业实战.制作shell脚本 功能1:使用xtrabackup以每周为一个备份周期做备份(数据库+二进制日志,备份至本地/data/backup).提示: 周一某个时间点做一次完全备 ...
- nyoj 24
素数距离问题 时间限制:3000 ms | 内存限制:65535 KB 难度:2 描述 现在给出你一些数,要求你写出一个程序,输出这些整数相邻最近的素数,并输出其相距长度.如果左右有等距离长度 ...
- [运维] 如何访问虚拟机上的 Tomcat ?
环境: 虚拟机: VMware 15 pro 操作系统 Linux CentOS 7 64 物理机: Windows 7 事先准备: 1: 下载 Tomcat 的压缩包 apache-t ...
- Go语言学习笔记(三)
一.浮点数 1.概述 浮点类型用于存储带有小数点的数字 一个整数数值可以赋值给浮点类型但是一个整型变量不可以赋值给浮点类型 浮点数进行运算的结果是浮点数 Go语言中浮点类型有两个 float32 fl ...
- 操作系统OS,Python - 多进程(multiprocessing)、多线程(multithreading)
多进程(multiprocessing) 参考: https://docs.python.org/3.6/library/multiprocessing.html 1. 多进程概念 multiproc ...