Vue组件的创建方式和切换方式实例理解

最新推荐文章于 2022-06-20 09:07:28 发布

这是我的自己

最新推荐文章于 2022-06-20 09:07:28 发布

阅读量190

点赞数

分类专栏： vue课程笔记文章标签： vue html css

本文链接：https://blog.csdn.net/weixin_41355989/article/details/105935198

版权

vue课程笔记专栏收录该内容

3 篇文章 0 订阅

订阅专栏

创建组件的三种方式

第一种：Vue.extend({}）创建，component注册

var acon=Vue.extend({
template:'<h3>这是使用组件Vue.extent创建的组件</h3>'	
})
Vue.component('myCom1',acon)

或者 

Vue.component('myCom1',Vue.extend({
	template:'<h3>这是使用组件Vue.extent创建的组件</h3>'			
	}))

第二种：

Vue.component('myCom1',{		
	template:'<div><h3>这是使用组件Vue.extent创建的组件</h3><span>123</span></div>'			 
})

第三种：使用template定义ID

Vue.component('myCom1',{					
	template:'#temp'				
})

实例：

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
  <script src="./js/vue.js" type="text/javascript" charset="utf-8"></script>
 </head>
 <body>
  <div id="app">
  <!-- 如果使用组件,直接把组件名称,以WXML标签的形式,引入到页面用即可 -->
  <my-com1></my-om1>
  
  </div>
  
  
  <!-- 第三种方式:被控制的#app外面,使用template元素定义组件的Html元素 -->
  <template id="temp">
   <div>
    <h1>这是通过template元素,在外部定义组件结构,这个方式有代码的只能提示和高亮</h1>
    <h2>enenennen</h2>
   </div>
  </template>
  
 </body>
 <script type="text/javascript">
  //第一张方式:
  //1.使用组件Vue.extent创建的组件
  // var acon=Vue.extend({
  //  //通过template属性,指定组件要展示的DOM结构
  //  template:'<h3>这是使用组件Vue.extent创建的组件</h3>'
  //  })
   
  //  //2.使用vue.component('自定义组件名称',创建出来的的组件模板对象)
  //  //如果使用Vue.component定义全局组件的时候,组件名称使用了 驼峰命名.则在引用组件的时候,需要把大写的驼峰改为小写.同时两个单词前,使用'-'连接
  //  Vue.component('myCom1',acon)
   
  
  //第一种方式也可以组合写法:Vue.component('自定义组件名称',Vue.extend({template:''}))
   // Vue.component('myCom1',Vue.extend({
   // template:'<h3>这是使用组件Vue.extent创建的组件</h3>'
   //  }))
   
   
   //第二种方式
   //注意:不论是哪种方式创建出来的组件,组件的template属性只想的模板内容,必须只能有唯一的一个根元素
   // Vue.component('myCom1',{
   //    //根元素不唯一,报错写法:template:'<h3>这是使用组件Vue.extent创建的组件</h3><span>123</span>'
   //   template:'<div><h3>这是使用组件Vue.extent创建的组件</h3><span>123</span></div>'
   // })
   
   
  //第三种方式
  Vue.component('myCom1',{
    template:'#temp'
    })
   
   //创建vue实例,得到ViewModel
  var vm=new Vue({
   el:'#app',
   data:{
    
   }
  })
 </script>
</html>

注意：
1.不论是哪种方式创建出来的组件,组件的template属性只想的模板内容,必须只能有唯一的一个根元素
2. 如果使用Vue.component定义全局组件的时候,组件名称使用了驼峰命名.则在引用组件的时候,需要把大写的驼峰改为小写.同时两个单词前,使用’-'连接

私有组件的创建

利用实例里自带的component属性进行私有组件的创建

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
  <script src="./js/vue.js" type="text/javascript" charset="utf-8"></script>
 </head>
 <body>
  <div id="app">
   <login></login>
  </div>
  
  
  <template id="temp">
   <h1>这是1111</h1>
   
  </template>
 </body>
 <script type="text/javascript">
  var vm=new Vue({
   //内部属性定义颜色:白
   el:'#app',
   data:{
   },
   methods:{},
   filters:{},
   directives:{},
   components:{//定义实例内部的私有组件
    login:{
     template:'#temp'
    }
   },
   
   
   
   //生命周期函数颜色:绿色
   beforeCreate(){},
   created() {},
   
  })
 </script>
</html>

组件的两种切换方式

1.v-if和v-else切换（缺点：只能进行两个页面的切换）
例子说明：v-if和v-else通过改变flag的true和flase来判断显示，而真假的改变由点击事件控制
实例代码：

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
  <script src="./js/vue.js" type="text/javascript" charset="utf-8"></script>
 </head>
 <body>
  <div id="app">
   <input type="button" id="" value="登录" @click.prevent="flag=true"/>
   <input type="button" id="" value="注册" @click.prevent="flag=false"/>
   <temp1 v-if="flag"></temp1>
   <temp2 v-else="flag"></temp2>
  </div>
  
 </body>
 <script type="text/javascript">
  
 Vue.component('temp1',{
  template:'<h1>登录组件</h1>'
 
 })
 
 Vue.component('temp2',{
  template:'<h1>注册组件</h1>'
 
 })
 
  var vm=new Vue({
   //内部属性定义颜色:白
   el:'#app',
   data:{
    flag:'',
   },
   methods:{}
   
  })
 </script>
</html>

2.component切换加动画（可多个组件）
例子说明：

实例中自定义一个实例的属性变量：content
组件通过来绑定content
最后通过点击事件控制content对应的组件名称

实例：

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>组件切换-component切换加动画</title>
  <script src="./js/vue.js" type="text/javascript" charset="utf-8"></script>
  <style type="text/css">
   .v-enter,
   .v-leave-to{
    opacity: 0;
    transform: translateX(150px);
   }
   .v-enter-active,
   .v-leave-active{
    transition: all 0.8s ease;
   }
  </style>
 </head>
 <body>
  <div id="app">
   <!-- temp1和temp2为字符串 -->
   <input type="button" id="" value="登录" @click.prevent="content='temp1'"/>
   <input type="button" id="" value="注册" @click.prevent="content='temp2'"/>
   <!-- Vue提供的component元素，显示指定的组件 -->
   <!-- component是一个占位符。:is 属性可以用来指定要展示的组件名称 -->
   <!-- mode：设置组件切换方式 -->
   <transition mode="out-in">
   <component :is="content"></component>
   </transition>
   
  </div>
  
 </body>
 <script type="text/javascript">
  
 Vue.component('temp1',{
  template:'<h1>登录组件</h1>'
 
 })
 
 Vue.component('temp2',{
  template:'<h1>注册组件</h1>'
 
 })
 
  var vm=new Vue({
   el:'#app',
   data:{
    content:'',//当前component中绑定的组件名称，通过点击事件绑定组件名称
   },
   methods:{}
   
  })
 </script>
</html>

这是我的自己

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue组件的创建方式和切换方式实例理解

创建组件的三种方式第一种：Vue.extend({}）创建，component注册var acon=Vue.extend({template:'<h3>这是使用组件Vue.extent创建的组件</h3>' })Vue.component('myCom1',acon)或者 Vue.component('myCom1',Vue.extend({ templ...
复制链接

扫一扫

专栏目录