java大师博客网站

vue教程

  • vue模拟el-table演示插槽用法 最近开发了一套图书管理系统,有兴趣的同学可以看下:图书管理系统演示 很多人知道插槽分为三种,但是实际到elementui当中为什么这么用,就一脸懵逼,接下来就跟大家聊一聊插槽在elementui中的应用,...
  • 通过封装el-table的方式,创建我们自己的Mytable组件 做了一个图书管理系统,有兴趣的朋友可以看下:图书管理系统演示 1、好处: 通过封装 el-table 组件,创建我们自己的 Mytable 组件,可以带来以下好处: 复用代码...
  • Login.vue <template> <div class="login-container"> <el-card class="login-card"> <h3 class="login-title...
  • vue3整合axios 3.1导入依赖 npm install axios 3.2新建util文件夹,创建api.js import axios from 'axios' import {ElLoading,ElMessage} from 'e...
  • vue3 hook函数返回多个对象 如果你想导出一个使用ref包装的对象,你可以使用toRef函数将对象的属性转换为响应式引用。这样,当属性的值发生变化时,它将自动触发重新渲染。 以下是一个示例代码: import { ref, toRef ...
  • vue通用的增删改查按钮组件 代码复用:这个组件可以在多个页面或组件中使用,避免了重复编写相同的按钮代码。 灵活性:通过showButtons属性,可以根据需要显示不同的按钮。默认情况下,它会显示添加、修改和删除按钮,但你也可以根据具体情况传递...
  • vue动态路由页面刷新后路由消失处理 原因:页面刷新后,页面会重新实例化路由数据,因为是动态路由,所以页面刷新后会将router置为router/index.js配置的原始路由数据,所以匹配路由地址的时候会报错。因为只需要在用户会话期间保持动态路...
  • 在ES6中,我们可以使用几种方式来遍历对象。下面是其中的几种方式,并附带详细的示例: for...in循环: 使用for...in循环可以遍历对象的可枚举属性。它会遍历对象自身的属性以及继承的属性(如果属性是可枚举的)。 const obj ...
  • 要使用自己的directives指令,需要按照以下步骤进行: 在Vue实例中注册指令 在Vue实例的创建函数中,可以使用Vue.directive方法来注册自定义指令。例如: // 创建Vue实例 var app = new Vue({ e...
  • Vue2和ElementUI编写的无限级菜单路由 文章转载自:www.javaman.cn <template> <div> <el-menu :default-active="$route.path" clas...
vue入门教程之-组件 - java大师  java大师博客网站

vue入门教程之-组件

欢迎关注博主公众号「java大师」, 专注于分享Java领域干货文章, 关注回复「资源」, 免费领取全网最热的Java架构师学习PDF, 转载请注明出处 https://www.javaman.cn/vue/vue-component

上一节我们讲了vue的属性、事件和双向绑定,今天我们来讲一下vue的组件component

1、为什么要用组件?

将一个页面的业务处理逻辑放在一起,处理和维护起来就会很复杂,不利于后续管理和扩展,这个时候就需要使用组件化来分门别类的管理逻辑·

img

2、全局组件

全局组件顾名思义,一次定义注册后Vue实例的作用范围内均可使用该组件

(1) html代码

 <div id="app">
     <com1></com1>
 </div>
 <div id="app2">
     <com1></com1>
 </div>
 
 
     //定义一个com1组件,该组件的定义必须要在vm实例的上面定义,如果放在最下面则会报错!!!
     //该组件在app和app2实例范围内均有效
     Vue.component('com1',{
         template:'<p>我是组件</p>'
     })
 
     var vm = new Vue({
         el:"#app"
     });
     var vm2 = new Vue({
         el:"#app2"
     })
 

(2)运行结果如下图:

vue全局组件运行结果

3、局部组件

局部组件顾名思义,只可在定义的Vue实例的作用范围内均可使用该组件

(1) html代码

 <div id="app">
     <com2></com2>
 </div>
 <!-- app2内不存在com2,此结果不会打印 -->
 <div id="app2">
     <com2</com2>
 </div>
 
 
     定义在vm实例内的components组件com2,作用域只在app内
     var vm = new Vue({
         el:"#app",
         components:{
             'com2':{
                 template:'<p>我是局部组件</p>'
             }
         }
     });
 

(2)运行结果如下图:

vue局部组件运行结果

4、通过Prop向子组件传递数据

组件增加props属性,组件新增属性传递给component的props达到传值的效果

(1) html代码

 <div id="app">
         <h3>所学的课程:</h3>
         <!-- v-bind绑定course和index属性,传递给study-course的props属性传入template模板中 -->
         <study-course v-for="(item,index) in courses" v-bind:course="item" v-bind:index="index"></study-course>
 </div>
 
 
     Vue.component('study-course',{
         props:['index','course'],
         template:'<li>{{index+1}}-----{{course}}</li>'
     })
 
     var vm = new Vue({
         el:"#app",
         data:{
             //通过v-for传递给study-course在模板中进行解析
             courses:['语文','数学','外语']
         }
     });
 

(2)运行结果如下图:

vue属性运行结果

5、新建template模板

在idea中添加vue的component组件,单独将组件定义在一个文件中,在复用界面进行调用

(1) idea中添加vue的插件

添加vue-js插件

(2) 创建一个vue-component

创建vue-component

(2) html代码,新建zujian.vue文件,就创建了一个my-temp的模板并注册

 <template id="my-temp">
     <p>我是单独的组件模板</p>
 </template>
 
 
     Vue.component('zujian',{
         template:'#my-temp'
     })
 
 
 <style scoped>
 
 </style>

(2).vue文件需要通过npm运行,后面我们在单独讲运行方式


全部评论: 0

    我有话说: