精华内容
下载资源
问答
  • Vue组件

    万次阅读 多人点赞 2021-01-25 15:43:45
    Vue组件(一)      Vue组件介绍      Vue组件使用步骤      Vue组件的使用      组件中data 和 el 选项 &...

    Vue组件

         Vue组件介绍
         Vue组件使用步骤
         Vue组件的使用
         组件中data 和 el 选项
         使用 <script><template> 标签
         组件之间的通信
         通过props向子组件传递数据
         Vue的插槽




    Vue组件

    组件系统是Vue中一个重要的概念,他提供了一种抽象,可以独立使用和可复用的小组件来构建大型应用,任意类型的应用界面都可以抽象为一个组件树。组件是可复用的Vue实例,切带有一个名字。组件可以扩展HTML元素,封装可重用的HTML代码,可以将组件看作自定义的HTML元素。




    Vue组件使用步骤

        1.Vue组件的使用有以下3个步骤:

            1. 创建组件:调用Vue.extend()方法创建组件
            2. 注册组件:调用Vue.component()方法注册组件
            3. 使用组件:使用Vue实例页面内自定义标签组件


        2.样例Demo

    在这里插入图片描述

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<script src="../js/vue.min.js"></script>
    		
    	</head>
    <body>
    	<div id="app">
    		<!--使用组件-->
    		<mycomp></mycomp>
    	</div>
    		<script>
    			//创建组件
    			var myComp=Vue.extend({
    				template:"<h2>使用Vue组件</h2>"
    			});
    			//注册组件
    			Vue.component("mycomp",myComp);
    			//实例化组件
    			var vm=new Vue({
    				el:"#app"
    			})
    		</script>
    </body>
    </html>
    

    注意:组件的命名方式有两种:

    1. kebab-case(短横线分隔命名)
    2. PasecalCase(首字母大写命名)
      因为直接在DOM中使用时只有 kebab-case(短横线分隔命名)是有效的,所有一般推荐 kebab-case(短横线分隔命名)方式命名。




    Vue组件使用

    组件注册

        1.全局注册
    <div id="app">
    		<!--使用组件-->
    		<mycomp></mycomp>
    	</div>
    		<script>
    			//创建组件
    			var myComp=Vue.extend({
    				template:"<h2>使用Vue组件</h2>"
    			});
    			//注册组件
    			Vue.component("mycomp",myComp);
    			//实例化组件
    			var vm=new Vue({
    				el:"#app"
    			})
    		</script>
    

        2.局部注册
    <div id="app">
    		<!--使用组件-->
    		<mycomp></mycomp>
    	</div>
    		<script>
    			//创建组件
    			var myComp=Vue.extend({
    				template:"<h3>使用局部Vue组件</h3>"
    			})
    			var vm=new Vue({
    				el:"#app",
    				components:{
    					"mycomp":myComp//局部注册组件
    				}
    			})
    		</script>
    

        3.组件语法糖

    - 简化全局注册

     <div id="app">
    		<!--使用组件-->
    		<my-comp></my-comp>
    	</div>
    	
    		<script>
    			//全局注册,my-comp是组件标签名
    			Vue.component("my-comp",{
    				template:"<div><h3>使用Vue组件</h3></div>"
    			})
    			var vm=new Vue({
    				el:"#app"
    			})
    			
    </script>
    

    - 简化局部注册
    <div id="app">
    		<!--使用组件-->
    		<mycomp></mycomp>
    	</div>
    		<script>
    			var vm=new Vue({
    				el:"#app",
    				//局部注册,mycomp是组件标签名
    				components:{
    						"mycomp":{
    						template:"<div><h3>使用Vue组件</h3></div>"
    					}
    				}
    			})
    			
    		</script>
    




    组件中data 和 el 选项

        一般实例化Vue的多数选项也可以用在Vue.extend)或Vue .component()中的,不过有两个特殊选项参数除外即data和el。Vue.js 规定:在定义组件的选项时,data 和el选项必须使用函数。如果data选项指向某个对象,这意味着所有的组件实例共用一个data。使用一个函数作为data选项,让这个函数返回一个新对象。


        1. 全局注册组件语法
    <script>
    //全局注册组件
    			Vue.component("组件名称"{
    						el:function(){...},
    						data:function(){
    							return{
    								属性:值
    							}
    						},
    						template:"组件模板"
    					}
    				}
    			})
    		</script>
    

        2. 局部注册组件语法
    <script>
    //局部注册组件
    			var vm=new Vue({
    				el:"#app",
    				components:{
    					"组件名称":{
    						el:function(){...}
    						data:function(){
    							return{
    								属性:值
    							}
    						},
    						template:"组件模板"
    					}
    				}
    			})
    		</script>
    

        3. 样例Demo

    在这里插入图片描述

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<script src="../js/vue.min.js"></script>
    		
    	</head>
    	<body>
    		<div id="app">
    			<h3>新奇水果</h3>
    			<fruit-list-comp></fruit-list-comp>
    		</div>
    		<template id="fruitTemplate">
    			<div>
    				<ul>
    					<li v-for="fruit in items">{{fruit}}</li>
    				</ul>
    			</div>
    		</template>
    		<script>
    			var vm=new Vue({
    				el:"#app",
    				components:{
    					"fruit-list-comp":{
    						data:function(){
    							return{
    								items:["火龙果","苹果","西瓜","草莓"]
    							}
    						},
    						template:"#fruitTemplate"
    					}
    				}
    			})
    		</script>
    	</body>
    </html>
    





    使用 <script><template> 标签

        尽管语法糖简化了组件注册,但在template 选项中拼接HTML元素比较麻烦,这也导致了HTML 和JavaScript 拼接的高耦合性。所有Vue提供了两种方式将定义在 JavaScript 中的 HTML 模板分离出来。

        1.使用 script 标签
    <div id="app">
    		<!--使用组件-->
    		<my-comp></my-comp>
    	</div>
    	
    	<script type="text/javascript" id="myComp">
    		<div>
    			<h4>使用Vue组件</h4>
    		</div>
    	</script>
    	
    		<script>
    			//全局注册,my-comp是组件标签名
    			Vue.component("my-comp",{
    				template:"#myComp"
    			});
    			var vm=new Vue({
    				el:"#app",
    				components:{
    					"my-comp":{
    						template:"#myComp"
    					}
    				}
    				
    			})
    		</script>
    
    

        template选项现在不再是HTML元素,而是一个id。Vue.js根据这个id查找对应的元素,然后将这个元素内的HTML作为模板进行编译

        2. 使用 template 标签

        如果使用 <template> ,则不需要指定type属性

    <div id="app">
    		<!--使用组件-->
    		<my-comp></my-comp>
    	</div>
    	
    	<template id="myComp">
    		<div>
    			<h4>使用Vue组件</h4>
    		</div>
    	</template>
    	
    		<script>
    			//全局注册,my-comp是组件标签名
    			
    			var vm=new Vue({
    				el:"#app",
    				components:{
    					"my-comp":{
    						template:"#myComp"
    					}
    				}
    				
    			})		
    		</script>
    




    组件之间的通信

        1.组件中通信6个步骤:

    1. var child=Vue.extend({…});/创建子组件
    2. var parent=Vue.extend({ …});//创建父组件
    3. template:"<p>这是父组件<child-compont></child-compont></p>"//在父组件内以标签的形式使用子标签
    4. components:{ “child-compont”:child//注册子组件} //将子组件注册到父组件,并将子组件的标签设置为child-compont
    5. Vue.component(“parent-compont”,parent) //全局注册父组件
    6. 在页面中使用<parent-compont></parent-compont>标签渲染父组件内容,同时子组件的内容也被渲染出来


        2.样例Demo

    在这里插入图片描述

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<script src="../js/vue.min.js"></script>
    		
    	</head>
    	<body>
    		<div id="app">
    			<parent-compont></parent-compont>
    		</div>
    		<script>
    			//创建子组件
    			var child=Vue.extend({
    				template:"<p>这是子组件</p>"
    			});
    			//创建父组件
    			var parent=Vue.extend({
    				//在父组件中使用parent-compont标签
    				template:"<p>这是父组件<child-compont></child-compont></p>",
    				components:{
    					"child-compont":child//注册子组件
    				}
    			});
    			//注册父组件
    			Vue.component("parent-compont",parent)
    			var vm=new Vue({
    				el:"#app"
    			})
    		</script>
    	</body>
    </html>
    

        3.书写错误的两种方式
    1. 以子标签的形式在父组件中使用
    <div id="app">
    	<parent-compont>
    		<child-compont></child-compont>
    	</parent-compont>
    </div>
    
    1. 在父组件标签外使用子标签
    <div id="app">
    	<parent-compont></parent-compont>
    	<child-compont></child-compont>
    </div>
    




    通过props向子组件传递数据

       组件实例的作用域是孤立的,这意味着不能并且不应该在子组件的模板内直接引用父组件的数据,可以使用props把数据传给子组件。一个组件可以默认拥有任意数量的props(属性),任何值都可以传递给任何props。在组件中,使用选项props来声明需要从父组件中接收的数据。props的值可以是两种:一种是字符串数组,另一种是对象

        1. props的值是字符串数组
    var component=Vue.extend({
    				props:["属性名",...,"属性名"],
    				template:"模板"
    })
    

        2. props的值是字符串对象
    var component=Vue.extend({
    	props:{
    				"属性名:String",
    				"属性名:Number",
    				"属性名:Boolean"
    			},
    	template:"模板"
    })
    

        3.样例Demo
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<script src="../js/vue.min.js"></script>
    		<style type="text/css">
    			.banner{
    				background-color: rgb(46,110,194);
    				color: rgb(255,255,255);
    				width: 600px;
    				height: 50px;
    				line-height: 600px;
    				text-align: center;
    				padding: 20px;
    				margin: 0 auto;
    			}
    			span{
    				font-feature-settings: 0.6em;
    			}
    		</style>
    	</head>
    	<body>
    		<div id="app">
    			<!--isShowStyle 动态绑定属性-->
                <!--message 静态绑定属性-->
    			<banner-component v-bind:is-style="isShowStyle" message="Happy一下"></banner-component>
    		</div>
    		<!--子组件-->
    		<template id="childComp">
    			<span>{{subMessage}}</span>
    		</template>
    		
    		<!--父组件-->
    		<template id="parentComp">
    			<div>
    				<!--banner:isStyle 动态绑定属性-->
    				<h2 :class="{ banner:isStyle}">
    					{{message}}
    					<!--sub-message(短横线分隔方式命名) 静态绑定属性-->
    					<child-component sub-message="不玩就out了"></child-component>
    				</h2>
    			</div>
    			
    		</template>
    
    		<script>
    			var vm=new Vue({
    				el:"#app",
    				data:{
    					isShowStyle:true
    				},
    				components:{
    					"banner-component":{
    						props:["message","isStyle"],//props字符串
    						template:"#parentComp",//注册父组件
    						components:{
    							"child-component":{
    								props:{//props对象
    									subMessage:String//驼峰式命名
    								},
    								template:"#childComp",//注册子组件
    							}
    						}
    					}
    				}
    			})
    		</script>
    	</body>
    </html>
    



    Vue的插槽

         插槽是Vue提出来的一个概念,用于将携带的内容插入到指定位置,从而从而使模块化,具有的模块化的特质和更大重要性。插槽显不显示,怎样显示是由父组件来控制,而插槽在哪里显示就有子组件来进行控制。

        1. 插槽的使用

      插槽一般在Vue的父子组件中使用,在子组件中使用标签将不同的DOM树组合在一起。 标签是组件内部的占位符,用户可以使用自己的标记来填充。通过定义一个或多个标签,可将外部标记引入到组件的虚拟DOM中进行渲染,相当于“在此处渲染用户的标记”。插槽有两种使用方式:默认插槽和具名插槽。

    1. 默认插槽
           声明组件模板中包含一个插槽标签,然后使用组件时将组件内容部分填充到插槽中。
     
     <div id="app">
    			<p-comp>需要分发的内容</p-comp>
    		</div>
    		<template id="pComp">
    			<div>
    				<h3>使用默认插槽</h3>
    				<slot></slot>
    			</div>
    		</template>
    		<script>
    			var vm=new Vue({
    				el:"#app",
    				components:{
    					"p-comp":{
    						template:"#pComp"
    					}
    				}
    			})
    		</script>
    
    1. 具名插槽
           默认插槽只能有一个,当需要多个插槽时,就需要具名插槽了。
    <div id="app">
    			<p-comp>
    				<template slot="header">
    					<div>
    				<!--
                    	作者:offline
                    	时间:2021-01-26
                    	描述:具名插槽填充内容
                    -->
    					<h3>商品管理</h3>
    				</template>
    				商品管理内容
    				<template slot="foots">
    					<h6>版权声明</h6>
    				</template>
    			</p-comp>
    		</div>
    		<template id="pComp">
    			<div>
    				<!--
                    	作者:offline
                    	时间:2021-01-26
                    	描述:具名插槽
                    -->
    				<slot name="header"></slot>
    				<!--
                    	作者:offline
                    	时间:2021-01-26
                    	描述:默认插槽
                    -->
    				<slot></slot>
    				<!--
                    	作者:offline
                    	时间:2021-01-26
                    	描述:具名插槽
                    -->
    				<slot name="foots"></slot>
    			</div>
    		</template>
    		<script>
    			var vm=new Vue({
    				el:"#app",
    				components:{
    					"p-comp":{
    						template:"#pComp"
    					}
    				}
    			})
    		</script>
    

        2. 作用域插槽的使用

         插槽可以控制HTML模板的显示与不显示。作用域插槽( slot-scope)其实就是带数据的插槽。原来父组件可以通过绑定数据传递给子组件,而作用域插槽可以通过子组件绑定数据传递给父组件。作用域插槽的使用场景:既可以复用子组件的slot,又可以使slot内容不一致。

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<script src="../js/vue.min.js" type="text/javascript" charset="utf-8"></script>
    		
    	</head>
    	<body>
    		<div id="app">
    			<book-list :books="bookList">
    				<template slot="book" slot-scope="props">
    					<li>{{props.bookname}}</li>
    				</template>
    			</book-list>
    		</div>
    		<template id="bookComp">
    			<div>
    				<ul>
    					<slot name="book" v-for="book in books" :bookname="book.name"></slot>
    				</ul>
    			</div>
    		</template>
    		<script>
    			var vm=new Vue({
    				el:"#app",
    				data:{
    					bookList:[
    					{name:"《111》"},
    					{name:"《222》"},
    					{name:"《333》"}
    					]
    				},
    				components:{
    					"book-list":{
    						props:["books"],
    						template:"#bookComp"
    					}
    				}
    			})
    		</script>
    
    	</body>
    </html>
    
    展开全文
  • <!... <... <head>...meta charset="UTF-8">... var vm = new Vue({ //这里的vm也是一个组件,称为根组件Root el: '#app', data: { msg: '啦啦啦' } }); </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组件的概念: 组件 (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 组件全屏 全屏 (vue-fullscreen) A simple Vue.js component for fullscreen. 一个用于全屏显示的简单Vue.js组件。 View demo 查看演示 Download Source 下载源 安装 (Installation) Install from GitHub ...

    vue 组件全屏

    全屏 (vue-fullscreen)

    A simple Vue.js component for fullscreen.

    一个用于全屏显示的简单Vue.js组件。

    安装 (Installation)

    Install from GitHub via NPM

    通过NPM从GitHub安装

    npm install vue-fullscreen

    用法 (Usage)

    To use vue-fullscreen, simply import it, and call Vue.use() to install.

    要使用vue-fullscreen ,只需将其导入,然后调用Vue.use()进行安装。

    <template>
      <div id="app">
        <fullscreen :fullscreen.sync="fullscreen">
          Content
        </fullscreen>
        <button type="button" @click="toggle" >Fullscreen</button>
      </div>
    </template>
    <script>
      import fullscreen from 'vue-fullscreen'
      import Vue from 'vue'
      Vue.use(fullscreen)
      export default {
        methods: {
          toggle () {
            this.fullscreen = !this.fullscreen
          }
        },
        data() {
          return {
            fullscreen: false
          }
        }
      }
    </script>

    Caution: Because of the browser security function, you can only call these methods by a user gesture. (e.g. a click callback)

    注意:由于具有浏览器安全功能,因此只能通过用户手势来调用这些方法。 ( 例如 ,点击回调)

    用作插件 (Use as plugin)

    In your vue component, You can use this.$fullscreen to get the instance.

    在vue组件中,可以使用this.$fullscreen获取实例。

    <template>
      <div id="app">
        <div class="example">
          Content
        </div>
        <button type="button" @click="toggle" >Fullscreen</button>
      </div>
    </template>
    <script>
    import fullscreen from 'vue-fullscreen'
    import Vue from 'vue'
    Vue.use(fullscreen)
    export default {
      methods: {
        toggle () {
          this.$fullscreen.toggle(this.$el.querySelector('.example'), {
            wrap: false,
            callback: this.fullscreenChange
          })
        },
        fullscreenChange (fullscreen) {
          this.fullscreen = fullscreen
        }
      },
      data() {
        return {
          fullscreen: false
        }
      }
    }
    </script>

    方法 (Methods)

    切换([目标,选项,强制] (toggle([target, options, force]))

    Toggle the fullscreen mode.

    切换全屏模式。

    • target:

      目标

      • ElementElement
      • document.bodydocument.body
      • The element target for fullscreen.

        全屏的元素目标。
    • options (optional):

      选项 (可选):

      • ObjectObject
      • The fullscreen options.

        全屏选项。
    • force (optional):

      强制 (可选):

      • BooleanBoolean
      • undefinedundefined
      • true to force enter , true强制输入,传递false to exit fullscreen mode.false退出全屏模式。

    回车([目标,选项]) (enter([target, options]))

    enter the fullscreen mode.

    进入全屏模式。

    • target:

      目标

      • ElementElement
      • document.bodydocument.body
      • The element target for fullscreen.

        全屏的元素目标。
    • options (optional):

      选项 (可选):

      • ObjectObject
      • The fullscreen options.

        全屏选项。

    出口() (exit())

    exit the fullscreen mode.

    退出全屏模式。

    getState() (getState())

    get the fullscreen state.

    获取全屏状态。

    • Type: Boolean

      类型: Boolean

    Caution: The action is asynchronous, you can not get the expected state immediately following the calling method.

    警告:该操作是异步的,您无法在调用方法后立即获得预期状态。

    选件 (Options)

    打回来 (callback)

    • Type: Function

      类型: Function

    • Default: null

      默认值: null

    It will be called when the fullscreen mode changed.

    全屏模式更改时将调用它。

    fullscreenClass (fullscreenClass)

    • Type: String

      类型: String

    • Default: fullscreen

      默认值: fullscreen

    The class will be added to target element when fullscreen mode is on.

    全屏模式打开时,该类将添加到目标元素。

    (wrap)

    • Type: Boolean

      类型: Boolean

    • Default: true

      默认值: true

    If true, the target element will be wrapped up in a background div, and you can set the background color.

    如果为true ,则目标元素将被包裹在背景div ,并且您可以设置背景颜色。

    背景 (background)

    • Type: String

      类型: String

    • Default: #333

      默认值: #333

    The background style of wrapper, only available when fullscreen mode is on and wrap is true.

    包装器的背景样式,仅在启用全屏模式且wrap为true时可用。

    用作组件 (Use as component)

    You can simply import the component and register it locally.

    您可以简单地导入组件并在本地注册。

    <template>
      <div id="app">
        <fullscreen ref="fullscreen" :fullscreen.sync="fullscreen">
          Content
        </fullscreen>
        <button type="button" @click="toggle" >Fullscreen</button>
      </div>
    </template>
    <script>
      import Fullscreen from "vue-fullscreen/src/component.vue"
      export default {
        components: {Fullscreen},
        methods: {
          toggle () {
            this.$refs['fullscreen'].toggle()
            // this.fullscreen = !this.fullscreen
          }
        },
        data() {
          return {
            fullscreen: false
          }
        }
      }
    </script>

    方法 (Methods)

    切换([力]) (toggle([force]))

    Toggle the fullscreen mode.You can pass force to force enter or exit fullscreen mode.

    切换全屏mode.You可以通过force迫使进入或退出全屏模式。

    • force (optional):

      强制 (可选):

      • BooleanBoolean
      • undefinedundefined
      • true to force enter , true强制输入,传递false to exit fullscreen mode.false退出全屏模式。

    输入() (enter())

    enter the fullscreen mode.

    进入全屏模式。

    出口() (exit())

    exit the fullscreen mode.

    退出全屏模式。

    getState() (getState())

    get the fullscreen state.

    获取全屏状态。

    • Type: Boolean

      类型: Boolean

    Caution: The action is asynchronous, you can not get the expected state immediately following the calling method.

    警告:该操作是异步的,您无法在调用方法后立即获得预期状态。

    道具 (Props)

    全屏 (fullscreen)

    • Type: Boolean

      类型: Boolean

    • Default: false

      默认值: false

    Use .sync to synchronize the parent's value. You can change it to toggle fullscreen mode too.

    使用.sync同步父级的值。 您也可以更改它来切换全屏模式。

    Caution: Changing it may not work in Firefox and IE11, it may be that they handle async operation specially.

    注意:更改它可能无法在Firefox和IE11中使用,可能是因为它们专门处理异步操作。

    But in Firefox you can try to add babel-polyfill to the vendor in webpack like this:

    但是在Firefox中,您可以尝试向webpackvendor添加babel-polyfill webpack如下所示:

    module.exports = {
      entry: {
        app: './example/main.js',
        vendor: ['babel-polyfill', 'vue']
      },
      ...
    }

    Then it works, though I don't know why. ╮(╯▽╰)╭

    然后就可以了,尽管我不知道为什么。 ╮(╯▽╰)╭

    I have no idea how to fix it in IE11 yet.

    我还不知道如何在IE11中修复它。

    fullscreenClass (fullscreenClass)

    • Type: String

      类型: String

    • Default: fullscreen

      默认值: fullscreen

    The class will be added to the component when fullscreen mode is on.

    全屏模式打开时,该类将添加到组件中。

    背景 (background)

    • Type: String

      类型: String

    • Default: #333

      默认值: #333

    The background style of component, only available when fullscreen mode is on.

    组件的背景样式,仅在启用全屏模式时可用。

    大事记 (Events)

    更改 (change)

    • isFullscreen: The current fullscreen state.

      isFullscreen :当前的全屏状态。

    This event fires when the fullscreen mode changed.

    全屏模式更改时将触发此事件。

    没有冲突 (No conflict)

    If you need to avoid name conflict, you can import it like this:

    如果需要避免名称冲突,可以这样导入:

    <template>
      <div id="app">
        <fs ref="fullscreen" :fullscreen.sync="fullscreen">
          Content
        </fs>
        <div class="example">
          Content
        </div>
        <button type="button" @click="toggle" >Fullscreen</button>
      </div>
    </template>
    <script>
    import Fullscreen from 'vue-fullscreen'
    import Vue from 'vue'
    Vue.use(Fullscreen, {name: 'fs'})
    export default {
      methods: {
        toggle () {
          this.$refs['fullscreen'].toggle()
          this.$fs.toggle(this.$el.querySelector('.example'), {
            wrap: false,
            callback: this.fullscreenChange
          })
        },
        fullscreenChange (fullscreen) {
          this.fullscreen = fullscreen
        }
      },
      data() {
        return {
          fullscreen: false
        }
      }
    }
    </script>

    翻译自: https://vuejsexamples.com/a-simple-vue-component-for-fullscreen/

    vue 组件全屏

    展开全文
  • sign-canvas 一个基于canvas开发,封装于Vue组件的通用手写签名板(电子签名板),支持pc端和移动端; 同时支持重新签名,覆盖签名,下载,保存等 github地址:https://github.com/mose-x/vue-sign-canvas.git ...
  • vue组件发布npm

    万次阅读 热门讨论 2018-09-07 14:04:54
    最近对开发Vue组件库的流程很好奇,网上步骤一搜也是一堆,总是少点漏点的步骤,就会导致整段垮掉,下边自己弄完整理了一下。 跟着步骤走: 一,创建一个vue项目,为了简洁方便,推荐使用webpack-simple构建一个...
  • 一小时入门vue组件(建议收藏)

    千次阅读 多人点赞 2021-06-02 21:12:27
    初识vue组件应用,包括:1.实例化多个vue对象;2.全局组件与局部组件;3.父向子传值/传引用(props);4.子向父事件传值($emit);5.使用脚手架创建项目并运用组件and传值的案例。欢迎小伙伴们一起交流学习~
  • 今天遇到了一个问题,当我用不同的路由值路由到同一个Vue组件时,Vue组件不会重新渲染。Vue组件的具体代码如下: <template> <iframe name="myiframe1" id="iframe1" allow="fullscreen" :src="IP+'...
  • Vue组件封装的过程

    千次阅读 多人点赞 2020-09-09 18:02:16
    Vue组件封装的过程 vue组件的定义 组件(Component)是Vue.js最强大的功能之一 组件可以扩展HTML元素,封装可重用代码 在较高层面上,组件是自定义元素,Vue.js的编译器为他添加特殊功能 某些情况下,组件也可以...
  • 单个vue组件引入无错误,同时引入两个vue组件就会报错。错误为图1 图1 错误文件代码:为图2 测试: 我测试单个引入一个组件。两个组件单独引入都为成功。 解决结果: 在两组件加一层div,让他们属于第二级别。这样...
  • 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 组件之间传值

    万次阅读 多人点赞 2019-05-29 09:49:10
    Vue 组件之间传值 在父组件中改变子组件里的数据 <!--在父组件中引用子组件,添加ref标识--> <son ref="son"></son> //父组件点击事件 clickFunc(){ //若更新子组件里a的值 this.$refs.son...
  • VUE组件(全局组件和局部组件)

    千次阅读 2020-06-24 22:16:47
    Vue组件之全局组件与局部组件的使用详解 组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装可重用的代码。在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能。在有些情况...
  • 【vue】vue组件传值的三种方式

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

    万次阅读 多人点赞 2018-10-02 23:04:10
    可以在一个通过 new Vue 创建的 Vue 根实例中,把这个组件作为自定义元素来使用 1. 定义一个新组件。命名为 counter 格式: 1.组件名为"conter"; 2.data 数据属性:写函数; 3.template 模板:写...
  • Vue 组件化开发

    万次阅读 多人点赞 2018-12-20 15:50:21
    Vue 组件化开发 提示: 本次分享知识点基于 vue.js,需要对 vue.js 有一定的了解。 什么叫做组件vue.js 有两大法宝,一个是数据驱动,另一个就是组件化,那么问题来了,什么叫做组件化,为什么要组件化?接下来我...
  • vue页面中引入其他vue组件

    千次阅读 2018-11-18 18:04:59
    比如说有两个vue组件,app.vue,test.vue 要在app.vue中使用test.vue组件,则需要在app.vue组件中进行注册: 下面举一个简单的例子帮助理解: test.vue: &lt;templete&gt; &lt;div class="test&...
  • 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-07-26 16:07:37
    vue 组件销毁并重置 https://www.jianshu.com/p/3f51c9c752b1 (转载)
  • 在vuepress中使用vue组件和highlight

    千次阅读 2019-06-28 15:14:31
    vuepress 中使用 vue 组件        在 vuepress 中一般会直接写 md 文件,但是有时需要做一些自定义的东西,比如展示一些前端效果,点击切换样式等等,就可以结合 vue 组件来实现。 1.在.vue...
  • vue拖拽组件生成代码布局 VuePress (VuePress) Minimalistic docs ... 具有基于Vue组件的布局系统的简约文档生成器。 Minimalistic Vue-powered static site generator 简约的Vue供电的静态网站生成器 View d...
  • VUE组件深入理解组件简介组件的基本使用全局注册①注册全局组件②全局组件使用进阶③组件内容中的其他选项局部注册注册局部组件 组件简介 组件系统是Vue.js其中一个重要的概念,它提供了一种抽象,让我们可以使用...
  • vue 组件状态冲突

    千次阅读 2018-04-16 15:36:42
    在写vue组件Carousel 时,出现在同一个页面中多次使用同一个组件时的状态冲突,原因是过多的使用了JavaScript原生的DOM操作方式,修改使用vue中ref 操作DOM元素后,则此冲突消失; vue中对于ref的解释为:ref 被用来给...
  • Leaflet的Vue组件 — Vue2Leaflet

    万次阅读 热门讨论 2018-04-29 18:18:09
    原文地址:Leaflet的Vue组件 — Vue2Leaflet 这两天折腾Vue,在GitHub上发现了一个开源项目Vue2Leaflet,Vue2Leaflet是一个Vue框架的JavaScript库,封装了Leaflet,它使构建地图变得更简单。本文简单介绍了如何...
  • vue组件之间互相传值:兄弟组件通信 我们在项目中经常会遇到兄弟组件通信的情况。在大型项目中我们可以通过引入vuex轻松管理各组件之间通信问题,但在一些小型的项目中,我们就没有必要去引入vuex。有几种方法: ...
  • html页面引入vue组件

    千次阅读 2020-09-08 11:30:13
    html页面引入vue组件需要在页面引入http-vue-loader.js 注意:要查看页面引入vue组件的效果不能直接在本地打开index.html,会有跨域问题,可以在本地配置一个nginx转发,再用浏览器访问...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 137,078
精华内容 54,831
关键字:

vue组件

vue 订阅