精华内容
参与话题
问答
  • <!... <... <head>...meta charset="UTF-8">...meta name="viewport" content="width=device-width, initial-scale=1.0">...定义组件的方式</title> <script src="https://cdn.jsdelivr.net
    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>定义组件的方式</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    
    <body>
        <div id="app">
            <hello></hello>
            <my-world></my-world>
            <!-- <myWorld></myWorld> -->
        </div>
        <script>
            // 方式1:先创建组件构造器,然后由组件构造器创建组件
            // 1. Vue.extend创建组件构造器
            var mycom = Vue.extend({
                template: '<h2>hello word</h2>'
            });
            // 2. Vue.component(组件名,组件构造器)
            Vue.component('hello', mycom);
    
            // 方式2:直接创建组件 (推荐)
            Vue.component('my-world', {
                template: '<h2>世界, 你好</h2>'
            });
    
            var vm = new Vue({ //这里的vm也是一个组件,称为根组件Root
                el: '#app',
                data: {
                    msg: '啦啦啦'
                }
            });
        </script>
    </body>
    
    </html>
    
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>组件的分类  全局组件、局部组件</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
        <div id="itapp">
            <my-hello></my-hello>
            <my-world></my-world>
        </div>
    
        <div id="app">
            {{name}}
            <my-hello></my-hello>
            <!-- <my-world></my-world> -->
        </div>
        <script>
            //  全局组件 可以在所有的vue实例中使用
            Vue.component('my-hello',{
                template:'<h2>我是全局组件</h2>',
                data(){   //在组件中存储数据时,必须以函数形式,函数返回一个对象
                    return {
                        name:'laney'
                    }
                }
            });
    
            /**
    		 * 局部组件,只能在当前vue实例中使用
    		 */
    
            var vm=new Vue({ //这里的vm也是一个组件,称为根组件Root
    			el:'#itapp',
    			data:{
    				msg:'软谋'
    			},
                components:{
                    'my-world':{
                        template:'<h2>世界, 你好 {{age}}</h2>',
                        data(){  
                            return {
                                age:'20'
                            }
                        }
                    }
                }
    		});	
    
            new Vue({ //这里的vm也是一个组件,称为根组件Root
    			el:'#app',
    			data:{
    				name:'tom'
    			}
            })
    
        </script>
    </body>
    </html>
    
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>动态组件</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <button @click="flag='my-hello'">显示hello组件</button>
            <button @click="flag='my-world'">显示world组件</button>
            
             <!-- 默认每次都会销毁非活动组件并重新创建
             缓存,避免重新渲染, -->
            <keep-alive>
                <component :is="flag"></component>
            </keep-alive>
            <!-- <my-world></my-world> -->
        </div>
    
        <template id="wbs">
            <div>
                <h3>{{msg}}</h3>
                {{time}}
                <ul>
                    <li v-for="(item,index) in arr" :key="index">{{item}}</li>
                </ul>
            </div>
        </template>
        <script>
    
            var vm=new Vue({ //这里的vm也是一个组件,称为根组件Root
    			el:'#app',
    			data:{
    				msg:'软谋',
                    flag:'my-hello'
    			},
                components:{
                    'my-world':{
                        name:'wbsx',
                        template:'#wbs',
                        data(){  
                            return {
                                age:'20',
                                msg:'world',
                                arr:['tom','jack','laney'],
                                time:Math.random()
                            }
                        }
                    },
                    'my-hello':{
                        template:'<h2>我是my hello {{time}}</h2>',
                        data(){
                            return {
                                time:Math.random()
                            }
                        }
                    }
                }
    		});	
    
        </script>
    </body>
    </html>
    
    
    展开全文
  • Vue组件基础--简单了解vue组件

    千次阅读 多人点赞 2020-09-03 08:45:34
    Vue组件基础–简单了解vue组件 Vue组件是什么? 组件就像是提前做好的模具,使用时拿出来就行,可以重复调用,它跟普通的Vue有一样的属性: data (数据存放) computed(计算属性) watch(监听属性) methods...

    Vue组件基础–简单了解vue组件

    Vue组件是什么?

    组件就像是提前做好的模具,使用时拿出来就行,可以重复调用,它跟普通的Vue有一样的属性:

    1. data (数据存放)
    2. computed(计算属性)
    3. watch(监听属性)
    4. methods(方法存放)
    熟悉的人应该看出来了,组件并没有el属性,组件没有根节点相关的属性。

    组件的data必须是一个函数,这样多个组件才不会相互影响。

    data: function () {
      return {
        count: 0
      }
    }
    

    组件可以通过Prop 对子组件进行传值,可以使用v-bind动态传递prop的数据

    <div id="app">
    	<my-p v-for="item in list" 
    	:title="item.title"><!-- 使用v-bind(:)动态传递prop -->
    	</my-p>
    </div>
    
    Vue.component('my-p',{
    	props:['title'],  //props向子组件传递数据
    	template:'<p>{{title}}</p>'
    })
    new Vue({
    	el:"#app",
    	data:{
    		list:[
    			{ id: 1, title: 'My journey with Vue' },
    			{ id: 2, title: 'Blogging with Vue' },
    			{ id: 3, title: 'Why Vue is so fun' }
    		]
    	}
    })
    

    组件的监听子组件事件

    主要通过子组件的 $emit 方法并传入事件名触发事件
    emit使emit可以使用第二个参数向上抛值,监听的父组件通过event获取

    <div id="app">
    	<div :style="{fontSize:size + 'px'}"> <!-- 字体大小通过size动态获取 -->
    		<my-p v-for="item in list"
    		:title="item.title" 
    		@addsize="size += $event"> <!-- $event获取子组件通过$emit抛的值 -->
    		</my-p>
    	</div>
    </div>
    
    Vue.component('my-p',{
    	props:['title'],  //props向子组件传递数据
    	template:`<div>
    				<p>{{title}}</p>
    				<button @click="$emit('addsize',10)">点击放大</button>
    			</div>`
    			//子组件通过 $emit  方法并传入事件名触发事件
    			//$emit可以使用第二个参数向上抛值,监听的父组件通过$event获取
    })
    new Vue({
    	el:"#app",
    	data:{
    		list:[
    			{ id: 1, title: '这是第一个' },
    			{ id: 2, title: '这是第二个' },
    			{ id: 3, title: '这是第三个' }
    		],
    		size:14
    	}
    })
    

    组件中v-model的实现

    当input事件触发时,通过$emit对数据进行抛出

    <div id="app">
    	<!-- 组件中v-model的使用 -->
    	<my-input v-model="myText"></my-input>
    	<p>{{myText}}</p>
    </div>
    
    Vue.component('my-input', {
     props: ['value'],//通过props动态数据传递
     template: `
        <input
          :value="value"
          @input="$emit('input', $event.target.value)"
        >
      `
      // input事件触发时,通过$emit对数据进行抛出
    })
    new Vue({
    	el:"#app",
    	data:{
    		myText:''
    	}
    })
    

    动态组件

    通过:is实现tab切换效果

    <div id="app">
    	<button
    	v-for="item in list"
    	@click="currList = item">{{item}}</button>
    	 <!-- 通过点击的item给currList赋值 -->
    	<component :is="curr"></component> 
    	<!-- 通过:is="curr"的curr值进行组件的切换 -->
    </div>
    
    Vue.component("my-div", {
    	template: "<div>Home component</div>"
    });
    Vue.component("my-div2", {
    	template: "<div>Posts component</div>"
    });
    new Vue({
    	el:"#app",
    	data:{
    		list:['div','div2'],
    		currList:'div'
    	},
    	computed:{
    		curr: function() {
    			return "my-" + this.currList;  
    			//修改组件的curr值改变组件的显示
    		}
    	}
    })
    

    推荐阅读置顶文章

    展开全文
  • vue函数组件

    千次阅读 2018-11-12 10:09:24
    vue函数组件 有时候我们需要在非vue文件使用组件,这时候我们可以通过vue插件的方式使用 一、js加载文件 import Vue from 'vue'; import toast from'./index.vue'; const ToastConstructor = Vue.extend(toast); let...

    vue函数组件

    有时候我们需要在非vue文件使用组件,这时候我们可以通过vue插件的方式使用

    一、js加载文件

    import Vue from 'vue';
    import toast from'./index.vue';
    const ToastConstructor = Vue.extend(toast);
    let toastPool = [];
    let instance;
    let installed = false;
    //安装组件
    const install = function (Vue, config = {}) {
      if (installed) return;
      console.log(installed);
      Vue.component(toast.name, toast);
      installed = true;
    };
    install(Vue);
    let getAnInstance = () => {
      if (toastPool.length > 0) {
      let instance = toastPool[0];
      toastPool.splice(0, 1);
      return instance;
      }
      return new ToastConstructor({
      el: document.createElement('div')
     });
    };
    
    let Toast = (options = {}) => {
      console.log('Toast', options);
      let duration = options.duration || 3000;
      let instance = getAnInstance();
      instance.closed = false;
      clearTimeout(instance.timer);
      instance.message = typeof options === 'string' ? options : options.message;
      instance.position = options.position || 'middle';
      instance.className = options.className || '';
      instance.type = options.type || '';
      instance.iconClass = options.iconClass || '';
      instance.duration = duration / 1000;
      document.body.appendChild(instance.$el);
      Vue.nextTick(function () {
      instance.visible = true;
      setTimeout(() => {
      instance.visible = false;
      if (options.close) {
      options.close();
      }
     }, duration);
      });
    
      return instance;
    };
    export default Toast;
    

    二、vue件

    <template>
    <div class="toast " :class="position " v-if="visible" :style="style()">
     <span class="toast-msg" :class="type">{{message}}span>
    div>
    template>
    
    <style>
    @keyframes toastKF {
      0% {
      opacity: 0;
    }
      25% {
      opacity: 1;
      z-index: 9999
    }
      50% {
      opacity: 1;
      z-index: 9999
    }
      75% {
      opacity: 1;
      z-index: 9999
    }
      100% {
      opacity: 0;
      z-index: 0
    }
    }
    style>
    
    <style scoped lang="less">
    .toast {
      opacity: 0;
      position: fixed;
      color: #fff;
      width: 100%;
      text-align: center;
    
    &.top {
      top: 5%;
      }
    
    &.bottom {
      bottom: 5%;
      }
    &.middle {
      top: 50%;
      }
    .toast-msg {
      background-color: rgba(0, 0, 0, 0.7);
      padding: 8px 15px;
      border-radius: 4px;
      max-width: 80%;
      display: inline-block;
      margin: auto;
      font-size: 15px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    
     &.danger {
      background: red;
      color: #fff;
      }
    
      &.success {
      background: #70ca63;
      color: #fff;
      }
    
      &.primary {
      background: #3bafda;
      color: #fff;
      }
      &.warning {
      background: #f6bb42;
      color: #fff;
      }
     }&.toastAnimate {
      animation: toastKF 3s;
      }
    
    }
    style>
    
    <script type="text/babel">
    export default {
      name: 'toast',
      props: {
      duration: {
      type: Number,
      default: 2
      },
      type: {
      type: String,
      default: 'primary'
      },
      message: {
      type: String,
      default: ''
      },
    
      position: {
      type: String,
      default: 'middle'
      }
    
     },
      mounted(){
      console.log('mounted');
      },
      watch: {
      duration(){
      this.toastAnimate = `animation: toastKF ${this.duration}s;`;
      }
     },
      data() {
      return {
      el: this.$el,
      visible: false,
      toastAnimate: `animation: toastKF ${this.duration}s;`
      };
      },
      methods: {
      style(){
      if (this.visible) {
      return this.toastAnimate;
      }
     } },
    
      computed: {}
    };
    script>
    

    三、使用

    import Toast from '../../../../components/toast/index.js';
    Toast({
      message: msg,
      type: 'warning'
    });
    
    展开全文
  • 一、vue组件的概念: 组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装可重用的代码。在较高层面上,组件是自定义标签,所有的 Vue 组件同时也都是 Vue 的实例(对象)。commonJS,AMD...

    一、vue组件的概念:

           组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装可重用的代码。在较高层面上,组件是自定义标签,所有的 Vue 组件同时也都是 Vue 的实例(对象)。

    commonJS,AMD,CMD是把JS逻辑进行模块化

    vue组件是把页面(html代码,CSS代码)进行模块化

    如下图所示,一个页面分四个部分,每个部分是个vue组件,而页面成了vue组件的容器。

     

    二、  使用组件

           vue.js中创建组件有三个步骤:创建组件构造器,注册组件以及使用组件

    1、 定义组件(创建组件构造器)(三种)

    2、 注册(声明)组件(两种)

    3、 使用组件


    示例:

    代码示意图:


    源代码:

    <div id="app1">		
    	<!--在app1里可以使用全局注册的组件my-p -->
    	<my-p></my-p>
    </div>
    <div id="app2">			
    	<!--在app2里也可以使用全局注册的组件my-p -->
    	<my-p></my-p>
    </div>
    
    <script type="text/javascript">
    //1、定义组件构造器:
    let myCom = Vue.extend({
    	template:"<p>我是p</p>"
    });
    //2、注册全局组件(相当于自定义标签)
    Vue.component("my-p",myCom);
    //3、创建两个vue实例,都可以使用全局组件 my-p,具体使用的代码在HTML中。
    let v1 = new Vue({
    	el:"#app1"
    });
    let v2 = new Vue({
    	el:"#app2"
    });
    </script>
    




    展开全文
  • Vue 组件扩展

    千次阅读 2018-06-18 22:34:30
    最近,新项目架构搭建在扩展组件的场景中:图表使用了extends方式,而公共业务server和view之间使用了... 下述,简单阐述Vue中涉及到组件扩展的相关API及自定义合并策略等相关内容 示例:定义公共基础的组件配置模...
  • vue组件引入本地静态图片

    万次阅读 2015-11-24 19:50:17
    vue2组件引入本地图片的的两种方式: 1,使用@引入: 这是在组件内直接引用和普通的html方法一样,代码如下: <img src="@/assets/test.png" alt="test.png"> 2,使用vue的方法引入: 这是典型的vue...
  • vue 组件 Vue.component 用法

    万次阅读 多人点赞 2018-10-02 23:04:10
    可以在一个通过 new Vue 创建的 Vue 根实例中,把这个组件作为自定义元素来使用 1. 定义一个新组件。命名为 counter 格式: 1.组件名为"conter"; 2.data 数据属性:写函数; 3.template 模板:写...
  • <!... <... <head> ...meta charset="UTF-8">...meta name="viewport" content="width=device-width, initial-scale=1.0">...父子组件传参组件</title> <script src="https://cdn.jsdelivr.net
  • 单个vue组件引入无错误,同时引入两个vue组件就会报错。错误为图1 图1 错误文件代码:为图2 测试: 我测试单个引入一个组件。两个组件单独引入都为成功。 解决结果: 在两组件加一层div,让他们属于第二级别。这样...
  • Vue 组件之间传值

    万次阅读 2019-05-29 09:49:10
    Vue 组件之间传值 在父组件中改变子组件里的数据 <!--在父组件中引用子组件,添加ref标识--> <son ref="son"></son> //父组件点击事件 clickFunc(){ //若更新子组件里a的值 this.$refs.son...
  • 详解vue组件三大核心概念

    万次阅读 多人点赞 2019-05-30 13:12:04
    本文主要介绍属性、事件和插槽这三个vue基础概念、使用方法及其容易被忽略的一些重要细节。如果你阅读别人写的组件,也可以从这三个部分展开,它们可以帮助你快速了解一个组件的所有功能。 本文的代码请猛戳github...
  • vue组件 组件的继承extend

    千次阅读 2019-07-29 10:17:12
    vue组件 组件的继承 import Vue from 'vue' const component = { data () { return { text: 111 } }, props: { propOne: String }, mounted () { console.log('component1 mounted') },...
  • vue 组件介绍

    万次阅读 多人点赞 2017-01-18 16:26:54
    组件系统是Vue.js其中一个重要的概念,它提供了一种抽象,让我们可以使用独立可复用的小组件来构建大型应用,任意类型的应用界面都可以抽象为一个组件树: 那么什么是组件呢? 组件可以扩展HTML元素,封装可...
  • 今天遇到了一个问题,当我用不同的路由值路由到同一个Vue组件时,Vue组件不会重新渲染。Vue组件的具体代码如下: <template> <iframe name="myiframe1" id="iframe1" allow="fullscreen" :src="IP+'...
  • 【vue】vue组件传值的三种方式

    万次阅读 多人点赞 2018-10-22 14:09:02
    前言 vue的组件传值分为三种方式:父传子、子传父、非父子组件传值 ...下面我们就开始用代码(一言不合就上代码)详细的介绍vue组件传值的三种方式 1、父传子 子组件的代码: &lt;template&gt; ...
  • VUE组件汇总

    千次阅读 2018-05-09 18:44:53
    内容UI组件开发框架实用库服务端辅助工具应用实例Demo示例UI组件element ★13489 - 饿了么出品的Vue2的web UI工具套件Vux ★8133 - 基于Vue和WeUI的组件库iview ★6634 - 基于 Vuejs 的开源 UI 组件库mint-ui ★6253...
  • Vue 组件传值

    千次阅读 2018-05-28 16:47:15
    回想一下用Vue开发也有一年多...今天主要总结一下Vue组件传值的几种常用方法:1、通过路由带参数传值 ① A组件通过query把id传给B组件 this.$router.push({path:'/B',query:{id:1}}) ② B组件接收this.$route.que...
  • vue组件重载

    千次阅读 2019-06-21 10:29:43
    Vue的组建重载 项目开发中遇到需要重载组件的需求,根据我自己的理解有3种方法 一、重新加载路由 相当于按F5 整个页面重载 location.reload();//js的方法 //重新替换当前路由 replace this.$router.replace({ path...
  • vue组件删除

    千次阅读 2019-09-27 16:24:50
    vue里面 要实现子组件与父组件之间的通信 要通过一个发布订阅模式来做这件事情 在做这件事之前 我的子组件还需要– 当前子组件的下标 当子组件被点击的时候,需要通过父组件把我的数据删除掉 ...
  • vue 组件大全

    千次阅读 2018-06-15 11:06:37
    UI组件element - 饿了么出品的Vue2的web UI工具套件Vux - 基于Vue和WeUI的组件库mint-ui - Vue 2的移动UI元素iview - 基于 Vuejs 的开源 UI 组件库Keen-UI - 轻量级的基本UI组件合集vue-material - 通过Vue ...
  • vue 组件命名

    千次阅读 2018-12-11 23:29:07
    组件命名约定 当注册组件 (或者 prop) 时,可以使用 kebab-case (短横线分隔命名)、camelCase (驼峰式命名) 或 PascalCase (单词首字母大写命名)。 在 HTML 模板中,请使用 kebab-case: // 在组件定义中 components...
  • Vue组件理解

    千次阅读 2016-12-08 15:35:26
    关于组件组件可以扩展HTML元素,封装可重用的代码。 注册全局组件Vue.component(tagName,options)的形式。...组件注册需要在初始化根实例之前进行,即先注册组件,再初始化Vue实例。对组件进行注册之后,就
  • vue组件嵌套

    千次阅读 2019-07-09 20:39:32
    背景 我们知道创建脚手架项目后,index.html是入口地址,调用App....1.在component创建自己的组件,这里创建User.vue <template> <div class="users"> <ul> <li v-for="name in names"&...
  • Vue 组件命名

    千次阅读 2017-12-04 18:46:06
    全面详解的 vue 中的命名机制,包括组件、变量、props、slot。 分享学习一下
  • Vue 组件封装之 Tab 切换

    千次阅读 2019-07-25 17:22:27
    实战 Vue 第5天:封装一个tab切换组件前言使用现存组件面临的问题封装 tab 组件的思路封装 tab 组件代码总结 前言 以上 tab 切换功能在前端开发中司空见惯。各种现存的组件也随手拈来。在 Vue 中,有配套的 element-...

空空如也

1 2 3 4 5 ... 20
收藏数 98,145
精华内容 39,258
关键字:

vue 组件

vue 订阅