vue组件初学习（一）---初学者文档

HmyBmny 发布于2019-08-21 17:37 / 886人阅读

摘要：在有时候，组建也可以是原生的元素。简单的说，就是组件是有结构的有样式的，有交互效果，有行为，信号量可以存数据。组件可以通过属性开设置。

一、什么是组件？

组件是vue.js最强大的功能之一，它可以扩展HTML元素，封装可以重用的代码.
当然，在更高的层面上，组件是自定义元素，vue.js的编译器为它添加了特殊功能。
在有时候，组建也可以是原生的HTML元素。
简单的说，就是组件是有结构的HTML、有样式的CSS，有交互效果，有行为，信号量可以存数据。
组件可以通过属性开设置。

二、组件的种类：

  ①实现基本功能的基础的组件（最小的元素，即基础组件，如input）
  ②可复用的逻辑组件（业务组件）
  ③页面组件

三、组件的使用

注意：在组件中，有且只能有一个根元素（标签/父元素）
3.1 全局注册，示例代码如下：
//新建一个vue实例对象

    
  
  //引入vue.js文件，路径根据自己文件所在位置而定
  
  
这样我们就建好了一个简单的父级和子级组件

3.2 局部注册，代码如下：

    
  
  //引入vue.js文件，路径根据自己文件所在位置而定

四、组件的嵌套：

五、在组件中，data必须为函数，否则报错


    
    
    



在上述这个实例中，，因为三个共享了counter，无论哪个改变三个都改变，所以，我们需要返回一个全新的数据对象来避免这个问题。

六、props

6.1props声明


    
     
  
  
  


6.2 props作为组件的内部的初始状态的方法：
  
    
  
  
  
  
6.3props接受后用计算属性转换的方法：

七、props的验证：

当传入的数据不符合要求时，在开发版本的控制台会报错，对初级开发组件的人很有用，
验证的类型：String Number Boolean Function Object Array Symbol，需要注意的是 prop 会
在组件实例创建之前进行校验，所以在 default 或 validator 函数里，诸如 data、computed 或
 methods 等实例属性还无法使用。

从这些简单的例子我们可以看出来。vue之所以这么火不是没有道理的，把原本复杂的前端页面变得简单了许多，这样，在开发过程中就可以少走很多弯路，但是呢，由于本人初学，暂时就学了这么多，以后会继续学习

GPU云服务器云服务器 vue组件 vue组件开发 vue父子组件通讯 vue轮播组件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/89756.html

Vue.js 初接触

摘要：二还有一点也是思想不容易转过弯的一点，就是我在学习前端时，接触的思想都是需要我们将者分开，方便维护。但是在学习了接触了单文件组件之后，世界又变了，又让我们将同一个组件的放到一个文件中，这样又便于维护和复用，这一脸的懵那啥。 Vue.js 介绍官方介绍： Vue.js是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图...

bladefury 2019-08-21 15:52 评论0 收藏0
【呆萌の体验】vue.js初次体验

摘要：官方默认项目是存放了一个为的打开文件夹有一个，还有一个名为组件的文件夹，里面放了一个文件。部分我们会发现这几排字就是显示在页面的几排文字部分这其中的这个文件引入了，还有上述的。结合查询其他说法，就是说它会把是的元素以形式替换。前言我很早就想来学习学习vue.js啦，终于有了那么一些空闲的时间可以拿来学习，于是从前天开始我就每天抽一个多小时来体验vue.js。当然啦，因为是小白入门，...

wdzgege 2019-08-21 17:21 评论0 收藏0
vue组件学习-数据传递-路由（初学者文档二）

摘要：接上次的验证开始，组件中的作用域都是独立的，子组件的模板不能直接引用父组件的数据，要用特殊方法才能实现数据的传递。，环境的安装第一步新建一个文件夹并初始化第二步安装一级路由这个比较简单，大多应用于单页面应用，不必引入整个路由库。接上次的props验证开始，组件中的作用域都是独立的，子组件的模板不能直接引用父组件的数据，要用特殊方法才能实现数据的传递。一、父子组件之间的通信 ...

Cristic 2019-08-21 17:38 评论0 收藏0
Ionic4+Vue+Capacitor 初体验

摘要：最新的已经提供了其他框架的支持，，等等，甚至不使用框架。接下来我将使用和开发一个最简单的。也可以直接使用启动，运行使用模拟器运行项目完美，那么本次的初体验就到此结束了，的插件使用可以参考官方文档哦。注：本文的目的在于记录自己基于最新的Ionic4构建一个App，也为同样需求的小伙伴提供参考。第一次写文章，文笔笨拙，还请见谅，不对之处，还请指出。最新的Ionic4已经提供了其他 j...

cuieney 2019-08-23 17:53 评论0 收藏0