kano个人博客web前端开发之vue组件基础(一)

kano个人技术博客 web前端开发 835 次浏览 没有评论

早期的web项目开发者通常都会写一张完整的html页面出来,到后来web项目越来越复杂,一个页面中包含了太多的html和js,阅读和修改变的困难了起来。现在的很多前端框架都支持模块化——将web页面根据功能分成一个一个的小块,然后再将它们放到一起组成一个完整的应用,而每个模块只留下一些必要的对外接口,这样功能就变的清晰了起来。vue的组件功能就是为了实现模块化开发的而存在的。

vue组件

一、起步

先来看一个例子:

Vue.component('zu', {
  data: function () {
    return {
      count: 0
    }
  },
  template: '<div>点击了{{count}}次 <button @click="count++">点击</button></div>'
});
 
let app = new Vue({
  el: '#app',
  data: {
  }
});
 
<zu></zu>

 vue组件 

这个例子创建了一个简单的组件,当点击时可以看到数字的增加:

vue组件

组件是可复用的Vue实例,所以每个组件都可以说是一个完整的Vue对象,也有data,methods,computed这样的选项,唯一的区别就是没有挂载元素的el选项。

 

组件可多次使用:

<zu></zu>
<zu></zu>
<zu></zu>

vue组件

组件“zu”使用了3次,每一个中的data互不影响

从例子中可以看到,我们使用Vue.component的方法来创建一个组件,第一个参数是组件的名称(也是使用时的名称),data为组件的数据,template则是组件的模板。这个语法很好理解,只有data的语法似乎有些不太一样——组件的data必须是一个函数,在函数中返回一个对象。

组件的名称和普通的html的命名一样,另外也可以是驼峰式命名,在使用的时候用中划线语法:

Vue.component('zuJian', {
  data: function () {
    return {
      count: 0
    }
  },
  template: '<div>点击了{{count}}次 <button @click="count++">点击</button></div>'
});
 
<zu-jian></zu-jian>
<zu-jian></zu-jian>

为了统一期间,kano建议大家还是统一用中划线的语法命名组件。

二、组件树

通常来说一个应用会是一颗组件树的形式,我们来看一下官方文章中的组件形式图:

组件树

也就是说,一般一个应用中是由很多组件组成的,而组件之间也是包含的,大的组件中包含几个小的组件。

三、通过props向组件传值

到目前为止,组件似乎就是页面分割出去一部分的一个小型html页面,如果只是如此那么组件的功能将很不灵活,我们也难以根据外部的数据改变组件的显示。所以我们有props,它可以向组件中传值——某种意义上来说组件相对于页面就好像函数相对于代码而言,而props就是向函数中传递的参数。

实际上,组件中显示的数据通常是由外部传递进去的

Vue.component('zu', {
  props: ['title'],
  template: '<h2>{{title}}</h2>'
});
 
<zu title="第一个组件"></zu>
<zu title="第二个组件"></zu>

vue组件

props是一个数组,定义组件可以接受的参数列表,在使用组件时,将参数以html属性的形式传进去就可以。

当然参数不一定就是字符串类型,传递对象类型的参数:

Vue.component('zu', {
  props: ['person'],
  template: '<div>{{person.name}} 年龄是:{{person.age}}</div>'
});

let app = new Vue({
  el: '#app',
  data: {
    person1: {
      name: '王二',
      age: 18
    },
    person2: {
      name: '二王',
      age: 80
    }
  }
});
 
<zu :person="person1"></zu>
<zu :person="person2"></zu>

vue组件

注意到绑定属性用的是“:person”,因为这次绑定的值是对象而不是简单的字符串直接量了。

在组件上使用v-for:

data: {
  person_list: [
    {
      name: '王二',
      age: 18
    },
    {
      name: '二王',
      age: 80
    }
  ]
}
 
<zu :person="person" v-for="person in person_list"></zu>

vue组件

效果相同,可以看到组件的使用和普通的html标签的使用并无太大区别。

四、单个根元素

上面的组件的模板都很简单:只包含一个div元素。你可能会想我现在要建立一个模板,让上例中的姓名和年龄都单独占一行,如:

Vue.component('zu', {
  props: ['person'],
  template:
    `<div>姓名:{{person.name}}</div>
     <div>年龄:{{person.age}}</div>`
});

但如果你这么写,Vue会一个错,显示“every component must have a single root element”(每个组件必须只有一个根元素)。

解决方法是用一个根元素将它们包起来:

Vue.component('zu', {
  props: ['person'],
  template:
    `<div>
      <div>姓名:{{person.name}}</div>
      <div>年龄:{{person.age}}</div>
    </div>`
});

注意这个根元素不能是template,它不是真正的元素。

以上就是kano个人技术博客对于vue组件基础的部分简介,下一篇kano将继续介绍vue组件

发表评论

电子邮件地址不会被公开。 必填项已用*标注

Go