Vue.js第四天学习笔记（组件）

2024-12-22 17:35:48

在这篇文章之前小颖分享过小颖自己写的组件:Vue.js组件tabs实现选项卡切换效果和Tree升级版(实现省市多级联动)

先给大家看下小颖写了一个简单的组件示例:

组件:

<template>
<div class='content' v-if='showFlag'>
<input type="text" v-bind:style='{ width:compwidth+"px"}' v-model='compvalue' @keyup='myFun' v-el:getvalue>
<label class='example-label'>观察参数"compvalue"的变化:</label>{{compvalue}}
<button class='btn btn-danger' @click='compfun'>确定</button>
</div>
</template>
<script>
export default {
 // 从父组件接收收据
 props:{
 compvalue:{
  type:String,//类型(原生构造器：String, Number, Boolean, Function, Object, Array),如果绑定类型不对将抛出一条警告
  required: true, //是否是必须项
  twoWay:true,//指定这个 prop 为双向绑定,如果没有 'sync' 将抛出一条警告
  default:'',//默认值
 },
 compwidth:{
  coerce: function (val) {
  return val + '' // 将值转换为字符串
  }
 },
 compfun:{
  type:Function,
  required:true
 }
 },
 ready: function() {},
 computed:{},//计算属性
 methods: {//组件自身的方法
 myFun:function(){
  alert( this.$els.getvalue.value);
 }
 },
 data() {//绑定数据
 return {
  showFlag:true,
 }
 }
}
</script>

调用组件:

<template>
<div class='example-content'>
<compexample :compvalue.sync='values' :compfun='compFun'></compexample>
</div>
</template>
<script>
import compexample from './componentExample.vue'//引入组件
export default {
 components: {
 compexample
 },
 ready: function() {
 },
 methods: {
 compFun:function(){
  alert('喵嘞个咪');
 }
 },
 data() {
 return {
  values:'hello'
 }
 }
}
</script>

在小颖写的组件中,小颖把创建组件时,组件的大部分属性都加了相应注释,大家看了要是还有什么疑问,可以留言哦.

下面看写调用组件后的效果图吧:

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

关于vue.js弹窗组件的知识点总结

首先在开发时需要考虑以下三点: 1.进入和弹出的动画效果. 2.z-index 的控制 3.overlay 遮盖层关于动画 vue 对于动画的处理相对简单,给组件加入css transition 动画即可 <template> <div class="modal" transition="modal-scale">  </div> </template> <script&g
Vue.js每天必学之组件与组件间的通信

什么是组件? 组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能.在有些情况下,组件也可以是原生 HTML 元素的形式,以 is 特性扩展. 使用组件注册之前说过,我们可以用 Vue.extend() 创建一个组件构造器: var MyComponent = Vue.extend({ // 选项... }) 要把这个构造器用作组件,需要用 `Vue.compone
webpack+vue.js实现组件化详解

简介在vue中实现组件化用到了vue特有的文件格式.vue,在每一个.vue文件就是一个组件,在组件中我们将html,css,js全部写入,然后在webpack中配置vue-loader就可以了. 建立vue组件在src目录下建立components文件夹,并在其中建立app.vue文件,这样我们项目的目录结构如下: |--dist //webpack打包后生成的文件夹 | |--build.js |--node_modules //项目的依赖所在的文件夹 |--src //文件入口 | |
vue.js表格组件开发的实例详解

前言组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能.在有些情况下,组件也可以是原生 HTML 元素的形式,以 is 特性扩展. 组件开发的基础组件可以扩展 HTML 元素,封装可重用的代码.我理解为功能模块的模板吧. 对于vue来说,组件是这个样子的,我们在html里面写 <div id="example"> <my-compone
基于Vue.js的表格分页组件

一.Vue.js简介 1.Vue的主要特点: (1) 简洁 (2) 轻量 (3)快速 (4) 数据驱动 (5) 模块友好 (6) 组件化 (1) 简洁下面看一段Angular的实现双向绑定的代码 // html <body ng-app="myApp"> <div ng-controller="myCtrl"> <p>{{ note }}</p> <input type="text" ng-
使用vue.js制作分页组件

学习了vue.js一段时间,拿它来做2个小组件,练习一下. 我这边是用webpack进行打包,也算熟悉一下它的运用. 源码放在文末的 github 地址上. 首先是index.html <!DOCTYPE html> <html> <head> <title>Page</title> <style type="text/css"> * { margin: 0; padding: 0; font-family: 'O
深入探讨Vue.js组件和组件通信

基本是按照官网的 Guide 全部梳理了一遍:http://vuejs.org/guide/index.html 这里我们以一个 Todo List 应用为例来把相关的只是都串起来,这篇里面的全部代码都在github上 https://github.com/lihongxun945/vue-todolist Vue 实例一个 Vue 应用是由一个 root vue instance 引导启动的,而 Vue instance 是这么创建的: var vm = new Vue({ // opti
Vue.js 父子组件通讯开发实例

vue.js,是一个构建数据驱动的 web 界面的库.Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件.(这是官方的一个解释!) 小编没使用过angularjs,也没使用过react.js,不能详细的说明三者的区别,想了解的话,在官方有一个分析,请点这里查看小编从业前端开发也有了一年多的时间,刚开始的时候,前端开发展现的技术太多,小编有心无力,兼顾不过来,经过了解之后,还是选择了学原生js基础兼并jquery的学习上路.小编使用vue.js,也是因为业务的需求
强大Vue.js组件浅析

什么是组件:组件是Vue.js最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码.在较高层面上,组件是自定义的元素,Vue.js的编译器为它添加特殊功能.在有些情况下,组件也可以是原生HTML元素的形式,以is特性扩展. 如何注册组件? 需要使用Vue.extend方法创建一个组件,然后使用Vue.component方法注册组件.Vue.extend方法格式如下: var MyComponent = Vue.extend({ // 选项...后面再介绍 }) 如果想要其他地方使用这个创
Vue.js动态组件解析

本篇资料来于官方文档:http://cn.vuejs.org/guide/components.html#u52A8_u6001_u7EC4_u4EF6 本文是在官方文档的基础上,更加细致的说明,代码更多更全. 简单来说,更适合新手阅读 ①简单来说: 就是几个组件放在一个挂载点下,然后根据父组件的某个变量来决定显示哪个,或者都不显示. ②动态切换: 在挂载点使用component标签,然后使用v-bind:is="组件名",会自动去找匹配的组件名,如果没有,则不显示: 改变挂载的组件,

Vue.js第四天学习笔记（组件）

相关推荐

随机推荐