首页 > 其他分享 >Vue简单整理

Vue简单整理

时间:2022-11-14 11:34:41浏览次数:36  
标签:vue 标识 标签 App 组件 Vue 简单 整理 节点

一、组件

vue中的.vue文件可以简单理解为组件,放在components文件夹下,根组件就是App.vue:

 

 二、使用components文件夹下自定义的组件步骤:

1、创建模板,组件一般模板为以下形式:

 

 二、导出标识:

在 <script> 标签中编写  export default {} 来标识当前组件可以被外部组件引入

三、导出标识组件名称:

 

 在 export default { } 中编写name 属性来标识当前组件名称。

 

四、引入创建的组件:

 

 在App.vue 根组件或其它组件的 script 标签中进行 import 引入

五、挂载组件,表示组件可使用:

 

 在App.vue 的 export default {} 中编写components 属性,将引入组件的 标签名加入其中进行挂载。

六、使用挂载的组件(以标签的形式):

 

 仅需 <ComponentForOne /> 就行了,后面的属性是组件间参数的传递。

 三、组件的理解:

组件可以理解为单独的个体,既相互独立又能互相引用。就像树形结构,一个节点下可以有多个节点,根节点可以比作 App.vue 根组件,引入组件即是创建子节点。

 

标签:vue,标识,标签,App,组件,Vue,简单,整理,节点
From: https://www.cnblogs.com/0099-ymsml/p/16888448.html

相关文章

  • Day11:增强for循环的简单了解
    增强for循环这一节简单了解对增强for循环在数组里面的应用,且通过for循环和增强for循环的对比来更好的了解增强forpublicclassForCirculate03{publicstaticvoid......
  • vuecli动画
    <template><divclass="school"><button@click="isShow=!isShow">显示/隐藏</button><transition:appear="true"><h2v-show="isShow">你好......
  • 战神传奇手游引擎关闭摆摊的最简单方法
    战神引擎搭建的传奇手游私服可谓是BUG成出不穷,就单单刷装备,刷元宝这些致命的BUG就多如牛毛,例如:1.最早的圆满充值平台导致刷元宝(换最新充值源码即可解决)。2.摆摊刷元宝(服务端......
  • vue3区域滚动
    vue3区域滚动从HTML属性区域内进行滚动属性属性说明clientWidth获取元素可视部分的宽度,即CSS的width和padding属性值之和,元素边框和滚动条不包括在内,也......
  • 说说你对Vue的keep-alive的理解
    什么是keep-alive在平常开发中,有部分组件没有必要多次初始化,这时,我们需要将组件进行持久化,使组件的状态维持不变,在下一次展示时,也不会进行重新初始化组件。也就是说,keep......
  • 中高级前端开发需要掌握的vue知识点
    keep-alive使用场景和原理keep-alive是Vue内置的一个组件,可以实现组件缓存,当组件切换时不会对当前组件进行卸载。常用的两个属性include/exclude,允许组件有条件的......
  • 一个简单的java awt程序
    现在安卓手机可以java编程了,之前测试了控制台编程是OK的,想测试下gui编程,然后想找个简单的示例测试下都半天找不到,后来自己删删改改弄了一个最简单的,记录一下好以后用:impor......
  • 说说Vue响应式系统中的Watcher和Dep的关系-面试进阶
    引言在这里我先提出两个问题(文章末尾会进行解答):在Vue的数据响应系统中,Dep和Watcher各自分担什么任务?Vue的数据响应系统的核心是Object.defineproperty一定是最好的吗?有......
  • Vuex管理dialog、toast等常见全局性组件状态时唯一性的问题
    前言工作中经常会用到类似于dialog、toast、popover等一些状态提示组件。对于这种全局性的组件,通常会用到vuex来管理组件的信息。这样的好处是代码维护起来更加友好,但......
  • Vue面试题48:你觉得Vuex有什么缺点?(总结自B站up主‘前端杨村长’视频,仅供自用学习)
    体验使用模块:用起来比较繁琐,使用模式也不统一,基本上得不到类型系统的任何支持:conststore=createStore({ modules:{a:moduleA}})store.state.a......