琪露诺学习Vue.js的第四天

最新推荐文章于 2022-06-14 17:57:36 发布

全贞教天下第一

最新推荐文章于 2022-06-14 17:57:36 发布

阅读量126

点赞数

本文链接：https://blog.csdn.net/wmw119/article/details/101145923

版权

定义Vue组件

什么是组件：组件的出现，就是为了拆分Vue实例的代码量的，能够让我们以不同的组件，来划分不同的功能模块，将来我们需要什么样的功能，就可以去调用对应的组件即可；组件化和模块化的不同：

模块化：是从代码逻辑的角度进行划分的；方便代码分层开发，保证每个功能模块的职能单一；
组件化：是从UI界面的角度进行划分的；前端的组件化，方便UI组件的重用；

创建Vue组件搭方式

1、使用Vue.extend配合Vue.component方法

（1）使用 Vue.extend 来创建全局的Vue组件

var com1 = Vue.extend({
      template: '<h3>这是使用 Vue.extend 创建的组件</h3>' 
      // 通过 template 属性，指定了组件要展示的HTML结构
})

（2）使用 Vue.component('组件的名称', 创建出来的组件模板对象)

Vue.component('myCom1', com1)

如果使用 Vue.component 定义全局组件的时候，组件名称使用了驼峰命名，则在引用组件的时候，需要把大写的驼峰改为小写的字母，同时，两个单词之前，使用 - 链接；
如果不使用驼峰,则直接拿名称来使用即可;

1.1、也可以合并Vue.extend使用Vue.component方法创建

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

Vue.component 第一个参数:组件的名称,将来在引用组件的时候,就是一个标签形式来引入
Vue.component 第二个参数: Vue.extend 创建的组件 ,其中 template 就是组件将来要展示的HTML内容

2、直接使用Vue.component方法创建

Vue.component('mycom2', {
      template: '<div><h3>这是直接使用 Vue.component 创建出来的组件</h3><span>123</span></div>'
})

不论是哪种方式创建出来的组件,组件的 template 属性指向的模板内容,必须有且只能有唯一的一个根元素，否则会报错
缺点：没有代码提示和高亮

3、通过外部结构来定义的组件

外部结构

<template id="tmpl">
    <div>
      <h1>这是通过 template 元素,在外部定义的组件结构</h1>
    </div>
</template>

创建组件

Vue.component('mycom3', {
      template: '#tmpl'
})

优点：有代码提示和高亮

组件和template的区别

components:代表组件。
template：代表模板。模板将会替换挂载的元素。挂载元素的内容都将被忽略

组件的使用

如果要使用组件，直接，把组件的名称，以 HTML 标签的形式，引入到页面中，即可

<div id="app">
    <mycom1></mycom1>
</div>

定义实例内部私有组件

var vm2 = new Vue({
      el: '#app2',
      components: { 
        login: {
            //login为组件名
            template: '#tmpl2'
        }
 })

组件中的data和methods

 Vue.component('mycom1', {
      template: '<h1>这是全局组件 --- {{msg}}</h1>',
      data: function () {
        return {
          msg: 'data数据'
        }
      }
})

组件可以有自己的 data 数据
组件的 data 和实例的 data 有点不一样,实例中的 data 可以为一个对象,但是组件中的 data 必须是一个方法
组件中的 data 除了必须为一个方法之外,这个方法内部,还必须返回一个对象才行;
组件中的data 数据,使用方式,和实例中的 data 使用方式完全一样

组件切换的方式

1、利用v-if和v-else进行切换

<div id="app">
    <a href="" @click.prevent="flag=true">登录</a>
    <a href="" @click.prevent="flag=false">注册</a>

    <login v-if="flag"></login>
    <register v-else="flag"></register>

</div>

<script>
    Vue.component('login', {
      template: '<h3>登录组件</h3>'
    })

    Vue.component('register', {
      template: '<h3>注册组件</h3>'
    })


    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        flag: false
      },
      methods: {}
    });
</script>

缺点：只能用于两个组件的切换

2、使用component ,来展示对应名称的组件

Vue提供了 component ,来展示对应名称的组件
component 是一个占位符, :is 属性,可以用来指定要展示的组件的名称

<div id="app">
    <a href="" @click.prevent="comName='login'">登录</a>
    <a href="" @click.prevent="comName='register'">注册</a>

    <component :is="comName"></component>

</div>

通过更改comName来切换

Vue.component('login', {
      template: '<h3>登录组件</h3>'
})

Vue.component('register', {
      template: '<h3>注册组件</h3>'
})

组件切换的动画

设置style

<style>
    .v-enter,
    .v-leave-to {
      opacity: 0;
      transform: translateX(150px);
    }

    .v-enter-active,
    .v-leave-active {
      transition: all 0.5s ease;
    }
</style>

通过 mode 属性,设置组件切换时候的模式

<transition mode="out-in">
      <component :is="comName"></component>
</transition>

Vue切换案例

创建一个vm对象，带有三个子组件，在其视图中添加一个按钮，要求实现点击按钮三组件轮流切换效果



<body>
  <div id="app">
    <a href=""  @click.prevent="comName='index'+i" @click="change">切换</a>
    <component :is="comName"></component>
  </div>

  <script>
    // 组件名称是 字符串
    Vue.component('index1', {
      template: '<h3>组件1</h3>'
    })

    Vue.component('index2', {
      template: '<h3>组件2</h3>'
    })

    Vue.component('index3', {
      template: '<h3>组件3</h3>'
    })

    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        i:1,
        comName: 'index1'
      },
      methods:{
        change(){
            // alert(1234);
            if(this.i<3) this.i=this.i+1;
            else this.i=1;
        }
      }
    });
  </script>
</body>

全贞教天下第一

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
琪露诺学习Vue.js的第四天

定义Vue组件什么是组件：组件的出现，就是为了拆分Vue实例的代码量的，能够让我们以不同的组件，来划分不同的功能模块，将来我们需要什么样的功能，就可以去调用对应的组件即可；组件化和模块化的不同：模块化：是从代码逻辑的角度进行划分的；方便代码分层开发，保证每个功能模块的职能单一；组件化：是从UI界面的角度进行划分的；前端的组件化，方便UI组件的重用；创建Vue组件搭方式1...
复制链接

扫一扫