这里有新鲜出炉的 Vue.js 教程,程序狗速度看过来!
Vue.js 是构建 Web 界面的 JavaScript 库,提供数据驱动的组件,还有简单灵活的 API,使得 MVVM 更简单。
本篇文章主要介绍了 Vue.js 组件,组件系统是 Vue.js 其中一个重要的概念,具有一定的参考价值,有需要的可以了解一下。
组件简介
组件系统是 Vue.js 其中一个重要的概念,它提供了一种抽象,让我们可以使用独立可复用的小组件来构建大型应用,任意类型的应用界面都可以抽象为一个组件树:
那么什么是组件呢?
组件可以扩展 HTML 元素,封装可重用的 HTML 代码,我们可以将组件看作自定义的 HTML 元素。
由于组件的篇幅较大,我将会把组件的入门知识分为两篇来讲解,这样也便于各位看官们快速消化。
组件的创建和注册
基本步骤
Vue.js 的组件的使用有 3 个步骤:创建组件构造器、注册组件和使用组件。
下面的代码演示了这 3 个步骤:
- <!DOCTYPE html>
- <html>
- <body>
- <div id="app">
- <!-- 3. #app是Vue实例挂载的元素,应该在挂载元素范围内使用组件-->
- <my-component>
- </my-component>
- </div>
- </body>
- <script src="js/vue.js">
- </script>
- <script>
- // 1.创建一个组件构造器
- var myComponent = Vue.extend({
- template: '<div>This is my first component!</div>'
- })
- // 2.注册组件,并指定组件的标签,组件的HTML标签为<my-component>
- Vue.component('my-component', myComponent)
- new Vue({
- el: '#app'
- });
- </script>
- </html>
运行结果如下:
可以看到,使用组件和使用普通的 HTML 元素没什么区别。
理解组件的创建和注册
我们用以下几个步骤来理解组件的创建和注册:
1. Vue.extend() 是 Vue 构造器的扩展,调用 Vue.extend() 创建的是一个组件构造器,而不是一个具体的组件实例。
2. Vue.extend() 构造器有一个选项对象,选项对象的 template 属性用于定义组件要渲染的 HTML。
3. 使用 Vue.component() 注册组件时,需要提供 2 个参数,第 1 个参数时组件的标签,第 2 个参数是组件构造器。
4. Vue.component() 方法内部会调用组件构造器,创建一个组件实例。
5. 组件应该挂载到某个 Vue 实例下,否则它不会生效。
请注意第 5 点,以下代码在 3 个地方使用了标签,但只有 #app1 和#app2 下的标签才起到作用。
- <!DOCTYPE html>
- <html>
- <body>
- <div id="app1">
- <my-component>
- </my-component>
- </div>
- <div id="app2">
- <my-component>
- </my-component>
- </div>
- <!--该组件不会被渲染-->
- <my-component>
- </my-component>
- </body>
- <script src="js/vue.js">
- </script>
- <script>
- var myComponent = Vue.extend({
- template: '<div>This is a component!</div>'
- })
- Vue.component('my-component', myComponent)
- var app1 = new Vue({
- el: '#app1'
- });
- var app2 = new Vue({
- el: '#app2'
- })
- </script>
- </html>
全局注册和局部注册
调用 Vue.component() 注册组件时,组件的注册是全局的,这意味着该组件可以在任意 Vue 示例下使用。
如果不需要全局注册,或者是让组件使用在其它组件内,可以用选项对象的 components 属性实现局部注册。
上面的示例可以改为局部注册的方式:
- <!DOCTYPE html>
- <html>
- <body>
- <div id="app">
- <!-- 3. my-component只能在#app下使用-->
- <my-component>
- </my-component>
- </div>
- </body>
- <script src="js/vue.js">
- </script>
- <script>
- // 1.创建一个组件构造器
- var myComponent = Vue.extend({
- template: '<div>This is my first component!</div>'
- })
- new Vue({
- el: '#app',
- components: {
- // 2. 将myComponent组件注册到Vue实例下
- 'my-component': myComponent
- }
- });
- </script>
- </html>
由于 my-component 组件是注册在 #app 元素对应的 Vue 实例下的,所以它不能在其它 Vue 实例下使用。
- <div id="app2">
- <!-- 不能使用my-component组件,因为my-component是一个局部组件,它属于#app-->
- <my-component></my-component>
- </div>
- <script>
- new Vue({
- el: '#app2'
- });
- </script>
如果你这样做了,浏览器会提示一个错误:
父组件和子组件
我们可以在组件中定义并使用其他组件,这就构成了父子组件的关系。
- <!DOCTYPE html>
- <html>
- <body>
- <div id="app">
- <parent-component>
- </parent-component>
- </div>
- </body>
- <script src="js/vue.js"></script>
- <script>
- var Child = Vue.extend({
- template: '<p>This is a child component!</p>'
- })
- var Parent = Vue.extend({
- // 在Parent组件内使用<child-component>标签
- template :'<p>This is a Parent component</p><child-component></child-component>',
- components: {
- // 局部注册Child组件,该组件只能在Parent组件内使用
- 'child-component': Child
- }
- })
- // 全局注册Parent组件
- Vue.component('parent-component', Parent)
- new Vue({
- el: '#app'
- })
- </script>
- </html>
这段代码的运行结果如下:
我们分几个步骤来理解这段代码:
1.var Child = Vue.extend(...) 定义一了个 Child 组件构造器
2.var Parent = Vue.extend(...) 定义一个 Parent 组件构造器
3.components: {'child-component': Child},将 Child 组件注册到 Parent 组件,并将 Child 组件的标签设置为 child-component。
4.template :'
This is a Parent component
5.Vue.component('parent-component', Parent) 全局注册 Parent 组件
6. 在页面中使用 <parent-component> 标签渲染 Parent 组件的内容,同时 Child 组件的内容也被渲染出来
Child 组件是在 Parent 组件中注册的,它只能在 Parent 组件中使用,确切地说:子组件只能在父组件的 template 中使用。
请注意下面两种子组件的使用方式是错误的:
1. 以子标签的形式在父组件中使用
- <div id="app">
- <parent-component>
- <child-component>
- </child-component>
- </parent-component>
- </div>
为什么这种方式无效呢?因为当子组件注册到父组件时,Vue.js 会编译好父组件的模板,模板的内容已经决定了父组件将要渲染的 HTML。
<parent-component>…</parent-component> 相当于运行时,它的一些子标签只会被当作普通的 HTML 来执行,<child-component></child-component> 不是标准的 HTML 标签,会被浏览器直接忽视掉。
2. 在父组件标签外使用子组件
- <div id="app">
- <parent-component>
- </parent-component>
- <child-component>
- </child-component>
- </div>
运行这段代码,浏览器会提示以下错误
组件注册语法糖
以上组件注册的方式有些繁琐,Vue.js 为了简化这个过程,提供了注册语法糖。
使用 Vue.component() 直接创建和注册组件:
- // 全局注册,my-component1是标签名称
- Vue.component('my-component1',{
- template: '<div>This is the first component!</div>'
- })
- var vm1 = new Vue({
- el: '#app1'
- })
Vue.component() 的第 1 个参数是标签名称,第 2 个参数是一个选项对象,使用选项对象的 template 属性定义组件模板。 使用这种方式,Vue 在背后会自动地调用 Vue.extend()。
在选项对象的 components 属性中实现局部注册:
- var vm2 = new Vue({
- el: '#app2',
- components: {
- // 局部注册,my-component2是标签名称
- 'my-component2': {
- template: '<div>This is the second component!</div>'
- },
- // 局部注册,my-component3是标签名称
- 'my-component3': {
- template: '<div>This is the third component!</div>'
- }
- }
- })
使用 script 或 template 标签
尽管语法糖简化了组件注册,但在 template 选项中拼接 HTML 元素比较麻烦,这也导致了 HTML 和 JavaScript 的高耦合性。 庆幸的是,Vue.js 提供了两种方式将定义在 JavaScript 中的 HTML 模板分离出来。
使用
- <!DOCTYPE html>
- <html>
- <body>
- <div id="app">
- <my-component>
- </my-component>
- </div>
- <script type="text/x-template" id="myComponent">
- < div > This is a component ! </div>
- /
- </script>
- </body>
- <script src="js/vue.js">
- </script>
- <script>
- Vue.component('my-component', {
- template: '#myComponent'
- })
- new Vue({
- el: '#app'
- })
- </script>
- </html>
template 选项现在不再是 HTML 元素,而是一个 id,Vue.js 根据这个 id 查找对应的元素,然后将这个元素内的 HTML 作为模板进行编译。
注意:使用 <script> 标签时,type 指定为 text/x-template,意在告诉浏览器这不是一段 js 脚本,浏览器在解析 HTML 文档时会忽略 <script> 标签内定义的内容。
使用 <template> 标签
如果使用标签,则不需要指定type属性。
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <title>
- </title>
- </head>
- <body>
- <div id="app">
- <my-component>
- </my-component>
- </div>
- <template id="myComponent">
- <div>
- This is a component!
- </div>
- </template>
- </body>
- <script src="js/vue.js">
- </script>
- <script>
- Vue.component('my-component', {
- template: '#myComponent'
- })
- new Vue({
- el: '#app'
- })
- </script>
- </html>
在理解了组件的创建和注册过程后,我建议使用
这使得 HTML 代码和 JavaScript 代码是分离的,便于阅读和维护。
另外,在 Vue.js 中,可创建. vue 后缀的文件,在. vue 文件中定义组件,这个内容我会在后面的文章介绍。
组件的 el 和 data 选项
传入 Vue 构造器的多数选项也可以用在 Vue.extend() 或 Vue.component() 中,不过有两个特例: data 和 el。 Vue.js 规定:在定义组件的选项时,data 和 el 选项必须使用函数。
下面的代码在执行时,浏览器会提出一个错误
- Vue.component('my-component', {
- data: {
- a: 1
- }
- })
另外,如果 data 选项指向某个对象,这意味着所有的组件实例共用一个 data。
我们应当使用一个函数作为 data 选项,让这个函数返回一个新对象:
- Vue.component('my-component', {
- data: function() {
- return {
- a: 1
- }
- }
- })
使用 props
组件实例的作用域是孤立的。这意味着不能并且不应该在子组件的模板内直接引用父组件的数据。可以使用 props 把数据传给子组件。
props 基础示例
下面的代码定义了一个子组件 my-component,在 Vue 实例中定义了 data 选项。
- var vm = new Vue({
- el: '#app',
- data: {
- name: 'keepfool',
- age: 28
- },
- components: {
- 'my-component': {
- template: '#myComponent',
- props: ['myName', 'myAge']
- }
- }
- })
为了便于理解,你可以将这个 Vue 实例看作 my-component 的父组件。
如果我们想使父组件的数据,则必须先在子组件中定义 props 属性,也就是 props: ['myName', 'myAge'] 这行代码。
定义子组件的 HTML 模板:
- <template id="myComponent">
- <table>
- <tr>
- <th colspan="2">
- 子组件数据
- </th>
- </tr>
- <tr>
- <td>
- my name
- </td>
- <td>
- {{ myName }}
- </td>
- </tr>
- <tr>
- <td>
- my age
- </td>
- <td>
- {{ myAge }}
- </td>
- </tr>
- </table>
- </template>
将父组件数据通过已定义好的 props 属性传递给子组件:
- <div id="app">
- <my-component v-bind:my-name="name" v-bind:my-age="age">
- </my-component>
- </div>
注意:在子组件中定义 prop 时,使用了 camelCase 命名法。由于 HTML 特性不区分大小写,camelCase 的 prop 用于特性时,需要转为 kebab-case(短横线隔开)。例如,在 prop 中定义的 myName,在用作特性时需要转换为 my-name。
这段程序的运行结果如下:
父组件是如何将数据传给子组件的呢?相信看了下面这图,也许你就能很好地理解了。
在父组件中使用子组件时,通过以下语法将数据传递给子组件:
- <child-component v-bind:子组件prop="父组件数据属性">
- </child-component>
prop 的绑定类型
单向绑定
既然父组件将数据传递给了子组件,那么如果子组件修改了数据,对父组件是否会有所影响呢?
我们将子组件模板和页面 HTML 稍作更改:
- <div id="app">
- <table>
- <tr>
- <th colspan="3">
- 父组件数据
- </td>
- </tr>
- <tr>
- <td>
- name
- </td>
- <td>
- {{ name }}
- </td>
- <td>
- <input type="text" v-model="name" />
- </td>
- </tr>
- <tr>
- <td>
- age
- </td>
- <td>
- {{ age }}
- </td>
- <td>
- <input type="text" v-model="age" />
- </td>
- </tr>
- </table>
- <my-component v-bind:my-name="name" v-bind:my-age="age">
- </my-component>
- </div>
- <template id="myComponent">
- <table>
- <tr>
- <th colspan="3">
- 子组件数据
- </td>
- </tr>
- <tr>
- <td>
- my name
- </td>
- <td>
- {{ myName }}
- </td>
- <td>
- <input type="text" v-model="myName" />
- </td>
- </tr>
- <tr>
- <td>
- my age
- </td>
- <td>
- {{ myAge }}
- </td>
- <td>
- <input type="text" v-model="myAge" />
- </td>
- </tr>
- </table>
- </template>
运行这个页面,我们做两个小试验:
1. 在页面上修改子组件的数据
修改了子组件的数据,没有影响父组件的数据。
2. 在页面上修改父组件的数据
修改了父组件的数据,同时影响了子组件。
prop 默认是单向绑定:当父组件的属性变化时,将传导给子组件,但是反过来不会。这是为了防止子组件无意修改了父组件的状态
双向绑定
可以使用. sync 显式地指定双向绑定,这使得子组件的数据修改会回传给父组件。
- <my-component v-bind:my-name.sync="name" v-bind:my-age.sync="age">
- </my-component>
单次绑定
可以使用. once 显式地指定单次绑定,单次绑定在建立之后不会同步之后的变化,这意味着即使父组件修改了数据,也不会传导给子组件。
- <my-component v-bind:my-name.once="name" v-bind:my-age.once="age">
- </my-component>
示例
为了尽快消化这些知识,我们来做一个小示例吧。
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <title>
- </title>
- <link rel="stylesheet" href="styles/demo.css" />
- </head>
- <body>
- <div id="app">
- <div id="searchBar">
- Search
- <input type="text" v-model="searchQuery" />
- </div>
- <simple-grid :data="gridData" :columns="gridColumns" :filter-key="searchQuery">
- </simple-grid>
- </div>
- <template id="grid-template">
- <table>
- <thead>
- <tr>
- <th v-for="col in columns">
- {{ col | capitalize}}
- </th>
- </tr>
- </thead>
- <tbody>
- <tr v-for="entry in data | filterBy filterKey">
- <td v-for="col in columns">
- {{entry[col]}}
- </td>
- </tr>
- </tbody>
- </table>
- </template>
- </body>
- <script src="js/vue.js">
- </script>
- <script>
- Vue.component('simple-grid', {
- template: '#grid-template',
- props: {
- data: Array,
- columns: Array,
- filterKey: String
- }
- }) var demo = new Vue({
- el: '#app',
- data: {
- searchQuery: '',
- gridColumns: ['name', 'age', 'sex'],
- gridData: [{
- name: 'Jack',
- age: 30,
- sex: 'Male'
- },
- {
- name: 'Bill',
- age: 26,
- sex: 'Male'
- },
- {
- name: 'Tracy',
- age: 22,
- sex: 'Female'
- },
- {
- name: 'Chris',
- age: 36,
- sex: 'Male'
- }]
- }
- })
- </script>
- </html>
除了以上介绍的知识点,这个示例还用到了两个知识点:
1. prop 验证
- props: {
- data: Array,
- columns: Array,
- filterKey: String
- }
这段代码表示:父组件传递过来的 data 和 columns 必须是 Array 类型,filterKey 必须是字符串类型。
更多 prop 验证的介绍,请参考:官方文档 prop 验证
2. filterBy 过滤器
可以根据指定的字符串过滤数据。
总结
使用组件的前提是创建并注册组件,本篇文章详细介绍了组件从创建到使用的步骤,并介绍了几种不同的方式去创建和注册组件;然后介绍了组件的 props 选项,它用于将父组件的数据传递给子组件,最后我们用一个小的示例演示了这些知识点。
来源: http://www.phperz.com/article/17/0610/329858.html