昨日内容回顾

  1. 1. Vue使用
  2.     1. 生成Vue实例和DOM中元素绑定
  3.     2. app.$el     --> 取出该vue实例绑定的DOM标签
  4.     3. app.$data   --> 取出该vue实例绑定的data属性
  5. 2. 模板语法
  6.     1. {{name}}     --> 在标签中间引用data属性中的变量
  7.     2. v-html='msg' --> 在页面上显示我定义的标签元素
  9.     3. v-if='ok'    --> 控制标签在不在DOM中
  10.     4. v-show='!ok' --> 控制标签的display属性的值（是否显示）
  12.     5. v-bind:href='url'  --> 将标签的属性和vue实例的data属性绑定起来
  13.     6. v-on:click='dianwo'--> 给标签绑定一个点击事件，方法需要在vue实例的methods中定义
  15.     7. v-model='article'  --> 用在input标签和textarea标签中，将用户输入和vue实例中的数据属性建立双向绑定
  17. 3. 计算属性和侦听器
  18.     1. 计算属性
  19.         （字符串翻转的例子）
  20.         1. 计算属性需要定义在vue实例的 computed 中
  21.         2. 多用于对变量做一些自定义的操作
  22.         3. 我们在页面上像使用普通data属性一样使用计算属性
  23.     2. 侦听器
  24.         多用于一些复杂的运算或者异步操作
  25.         侦听器需要放在 vue实例的 watch 中
  26. 4. class和style属性
  27.     1. 基于对象的绑定
  28.     2. 基于数组的绑定
  29. 5. 条件渲染
  30.     v-if
  31.         如果想控制多个标签的显示与否，可以使用 template 标签把它们包起来
  32.     v-if/v-else
  33.     v-if/v-else if /v-else
  35. 6. 列表渲染
  36.     v-for循环
  37. 7. 事件处理
  38.     详见2.模板语法
  39. 8. 表单绑定
  40.     详见2.模板语法
  42. 二. 小清单
  43. 1. 对象的深拷贝
  44. 2. 根据索引删除数组中的元素
  45.     splice(索引,删除个数,插入的元素)

一、Vue组件

组件基础

组件的组织

通常一个应用会以一棵嵌套的组件树的形式来组织：

Day90 Vue组件,前端开发工具包 - 图1

将上图理解为一个网页

Day90 Vue组件,前端开发工具包 - 图2

例如，你可能会有页头、侧边栏、内容区等组件，每个组件又包含了其它的像导航链接、博文之类的组件。

为了能在模板中使用，这些组件必须先注册以便 Vue 能够识别。这里有两种组件的注册类型：全局注册和局部注册。至此，我们的组件都只是通过 Vue.component 全局注册的：

  1. Vue.component('my-component-name', {
  2.   // ... options ...
  3. })

全局注册的组件可以用在其被注册之后的任何 (通过 new Vue) 新创建的 Vue 根实例，也包括其组件树中的所有子组件的模板中。

到目前为止，关于组件注册你需要了解的就这些了，如果你阅读完本页内容并掌握了它的内容，我们会推荐你再回来把组件注册读完。

组件注册

组件名

在注册一个组件的时候，我们始终需要给它一个名字。比如在全局注册时：

  1. Vue.component('my-component-name', { /* ... */ })

该组件名就是 <font style="color:#FF0000;">Vue.component</font> 的第一个参数。

你给予组件的名字可能依赖于你打算拿它来做什么。当直接在 DOM 中使用一个组件 (而不是在字符串模板或单文件组件) 的时候，我们强烈推荐遵循 W3C 规范中的自定义组件名 (字母全小写且必须包含一个连字符)。这会帮助你避免和当前以及未来的 HTML 元素相冲突。

你可以在风格指南中查阅到关于组件名的其它建议。

组件名大小写

定义组件名的方式有两种：

使用 kebab-case

  1. Vue.component('my-component-name', { /* ... */ })

当使用 kebab-case (短横线分隔命名) 定义一个组件时，你也必须在引用这个自定义元素时使用 kebab-case，例如 <my-component-name>。

使用 PascalCase

  1. Vue.component('MyComponentName', { /* ... */ })

当使用 PascalCase (驼峰式命名) 定义一个组件时，你在引用这个自定义元素时两种命名法都可以使用。也就是说 <my-component-name> 和 <MyComponentName>都是可接受的。注意，尽管如此，直接在 DOM (即非字符串的模板) 中使用时只有 kebab-case 是有效的。

全局注册

到目前为止，我们只用过 Vue.component 来创建组件：

  1. Vue.component('my-component-name', {
  2.   // ... 选项 ...
  3. })

这些组件是全局注册的。也就是说它们在注册之后可以用在任何新创建的 Vue 根实例 (new Vue) 的模板中。比如：

js代码：

  1. Vue.component('component-a', { /* ... */ })
  2. Vue.component('component-b', { /* ... */ })
  3. Vue.component('component-c', { /* ... */ })
  5. new Vue({ el: '#app' })

html代码：

  1. <div id="app">
  2.   <component-a></component-a>
  3.   <component-b></component-b>
  4.   <component-c></component-c>
  5. </div>

在所有子组件中也是如此，也就是说这三个组件在各自内部也都可以相互使用。

常规举例：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <!-- 开发环境版本，包含了有帮助的命令行警告 -->
  7.     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  8. </head>
  9. <body>
  10. <div id="app">
  11.     <!--监听点击事件-->
  12.     <button v-on:click="ttt">弹弹弹</button>
  13. </div>
  14. <script>
  15.     var app = new Vue({
  16.         el:"#app",
  17.         data:{},
  18.         methods:{
  19.             // 自定义方法
  20.             ttt:function () {
  21.                 alert('弹走鱼尾纹');
  22.             }
  23.         }
  24.     })
  25. </script>
  26. </body>
  27. </html>

访问网页，点击按钮，效果如下：

Day90 Vue组件,前端开发工具包 - 图3

如果页面其他地方，也需要弹框效果呢？代码复制一遍？

这不符合编程习惯，需要使用组件

组件是可复用的 Vue 实例，且带有一个名字

组件举例：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <!-- 开发环境版本，包含了有帮助的命令行警告 -->
  7.     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  8. </head>
  9. <body>
  10. <div id="app">
  11.     <!--使用自定义组件tankuang-->
  12.     <tankuang></tankuang>
  13. </div>
  14. <script>
  15.     //注册自定义组件,组件名为tankuang
  16.     Vue.component('tankuang',{
  17.         template:`<button v-on:click="ttt">弹弹弹</button>`,
  18.         methods:{
  19.             ttt:function(){
  20.                 alert('弹走鱼尾纹');
  21.             }
  22.         }
  23.     })
  24.     var app = new Vue({
  25.         el:"#app",
  26.         data:{},
  27.     })
  28. </script>
  29. </body>
  30. </html>

刷新网页，效果同上！

在这个例子中是 <tankuang>，就是一个自定义组件。它作为一个自定义元素来使用！

因为组件是可复用的 Vue 实例，所以它们与 new Vue 接收相同的选项，例如 data、computed、watch、methods 以及生命周期钩子等。仅有的例外是像 el 这样根实例特有的选项。

组件的复用

你可以将组件进行任意次数的复用：

  1. <div id="app">
  2.     <!--使用自定义组件tankuang-->
  3.     <tankuang></tankuang>
  4.     <tankuang></tankuang>
  5.     <tankuang></tankuang>
  6. </div>

注意当点击按钮时，每个组件都会各自独立维护它的 count。因为你每用一次组件，就会有一个它的新实例被创建。

刷新网页，效果如下：

Day90 Vue组件,前端开发工具包 - 图4

data 必须是一个函数

当我们定义这个 <tankuang> 组件时，你可能会发现它的 data 并不是像这样直接提供一个对象：

  1. data: {
  2.   count: 0
  3. }

取而代之的是，一个组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝：

  1. data: function () {
  2.   return {
  3.     count: 0
  4.   }
  5. }

如果 Vue 没有这条规则，点击一个按钮就可能会影响到其它所有实例：

举例：点击按钮，数字加1

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <!-- 开发环境版本，包含了有帮助的命令行警告 -->
  7.     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  8. </head>
  9. <body>
  10. <div id="app">
  11.     <!--使用自定义组件tankuang-->
  12.     <tankuang></tankuang>
  13.     <tankuang></tankuang>
  14.     <tankuang></tankuang>
  15. </div>
  16. <script>
  17.     //注册自定义组件,组件名为tankuang
  18.     Vue.component('tankuang',{
  19.         //监听点击事件,引用count变量
  20.         template:`<button v-on:click="ttt">弹弹弹{{count}}</button>`,
  21.         data:function(){
  22.             return {
  23.                 //默认值为0
  24.                 count: 0
  25.             }
  26.         },
  27.         methods:{
  28.             ttt:function(){
  29.                 //自增
  30.                 this.count +=1
  31.             }
  32.         }
  33.     })
  34.     var app = new Vue({
  35.         el:"#app",
  36.         data:{},
  37.     })
  38. </script>
  39. </body>
  40. </html>

刷新网页，效果如下：

Day90 Vue组件,前端开发工具包 - 图5

局部注册

全局注册往往是不够理想的。比如，如果你使用一个像 webpack 这样的构建系统，全局注册所有的组件意味着即便你已经不再使用一个组件了，它仍然会被包含在你最终的构建结果中。这造成了用户下载的 JavaScript 的无谓的增加。

在这些情况下，你可以通过一个普通的 JavaScript 对象来定义组件：

js代码

  1. var ComponentA = { /* ... */ }
  2. var ComponentB = { /* ... */ }
  3. var ComponentC = { /* ... */ }

然后在 components 选项中定义你想要使用的组件：

  1. new Vue({
  2.   el: '#app'
  3.   components: {
  4.     'component-a': ComponentA,
  5.     'component-b': ComponentB
  6.   }
  7. })

对于 components 对象中的每个属性来说，其属性名就是自定义元素的名字，其属性值就是这个组件的选项对象。

注意局部注册的组件在其子组件中不可用。例如，如果你希望 ComponentA 在 ComponentB 中可用，则你需要这样写：

  1. var ComponentA = { /* ... */ }
  3. var ComponentB = {
  4.   components: {
  5.     'component-a': ComponentA
  6.   },
  7.   // ...
  8. }

举例：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <!-- 开发环境版本，包含了有帮助的命令行警告 -->
  7.     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  8. </head>
  9. <body>
  10. <div id="app">
  11.     <!--使用自定义组件tankuang-->
  12.     <tankuang></tankuang>
  13.     <tankuang></tankuang>
  14.     <tankuang></tankuang>
  15. </div>
  16. <script>
  17.     //定义常量tankuangComponent
  18.     const tankuangComponent = {
  19.         template:`<button v-on:click="ttt">弹弹弹{{count}}</button>`,
  20.         data:function(){
  21.             return {
  22.                 count: 0
  23.             }
  24.         },
  25.         methods:{
  26.             ttt:function(){
  27.                 //自增
  28.                 this.count +=1
  29.             }
  30.         }
  31.     }
  32.     //注册自定义的局部组件
  33.     var app = new Vue({
  34.         el:"#app",
  35.         data:{},
  36.         //components表示组件
  37.         components:{
  38.             tankuang:tankuangComponent
  39.         },
  40.     });
  41. </script>
  42. </body>
  43. </html>

刷新网页，效果同上！

总结：

  1. 注意事项：
  2.     组件中的data属性必须设置成一个函数！！！
  3. 1. 注册全局组件
  4.     Vue.component(组件名,{
  5.         template: ``,
  6.         data: function(){
  7.             return {}
  8.         },
  9.         methods: {...}
  10.     })
  11. 2. 注册局部组件（当前vue实例才能使用的组件）
  12.     new Vue({
  13.         el: '#app',
  14.         components: {
  15.             alert: {
  16.                 template: ``,
  17.                 data: function(){
  18.                     return {}
  19.                 },
  20.                 methods: {...}
  21.             }
  22.         }
  23.     })

通过 Prop 向子组件传递数据

早些时候，我们提到了创建一个博文组件的事情。问题是如果你不能向这个组件传递某一篇博文的标题或内容之类的我们想展示的数据的话，它是没有办法使用的。这也正是 prop 的由来。

Prop 是你可以在组件上注册的一些自定义特性。当一个值传递给一个 prop 特性的时候，它就变成了那个组件实例的一个属性。为了给博文组件传递一个标题，我们可以用一个 <font style="color:#FF0000;">props</font> 选项将其包含在该组件可接受的 prop 列表中：

js代码：

  1. Vue.component('blog-post', {
  2.   props: ['title'],
  3.   template: '<h3>{{ title }}</h3>'
  4. })

一个组件默认可以拥有任意数量的 prop，任何值都可以传递给任何 prop。在上述模板中，你会发现我们能够在组件实例中访问这个值，就像访问 <font style="color:#FF0000;">data</font> 中的值一样。

一个 prop 被注册之后，你就可以像这样把数据作为一个自定义特性传递进来：

html代码：

  1. <blog-post title="My journey with Vue"></blog-post>
  2. <blog-post title="Blogging with Vue"></blog-post>
  3. <blog-post title="Why Vue is so fun"></blog-post>

效果图

Day90 Vue组件,前端开发工具包 - 图6

然而在一个典型的应用中，你可能在 <font style="color:#FF0000;">data</font> 里有一个博文的数组：

js代码：

  1. new Vue({
  2.   el: '#blog-post-demo',
  3.   data: {
  4.     posts: [
  5.       { id: 1, title: 'My journey with Vue' },
  6.       { id: 2, title: 'Blogging with Vue' },
  7.       { id: 3, title: 'Why Vue is so fun' }
  8.     ]
  9.   }
  10. })

并想要为每篇博文渲染一个组件：

html代码：

  1. <blog-post
  2.   v-for="post in posts"
  3.   v-bind:key="post.id"
  4.   v-bind:title="post.title"
  5. ></blog-post>

如上所示，你会发现我们可以使用 <font style="color:#FF0000;">v-bind</font> 来动态传递 prop。这在你一开始不清楚要渲染的具体内容，比如从一个 API 获取博文列表的时候，是非常有用的。

到目前为止，关于 prop 你需要了解的大概就这些了，如果你阅读完本页内容并掌握了它的内容，我们会推荐你再回来把 prop 读完。

举例：公司客服，每点击一次，表示接待了一个客户

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <!-- 开发环境版本，包含了有帮助的命令行警告 -->
  7.     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  8. </head>
  9. <body>
  10. <div id="app">
  11.     <!--使用自定义组件tankuang-->
  12.     <!--item是每一次for循环的元素，将值赋值给name-->
  13.     <!--动态赋值使用v-bind，赋值给子组件-->
  14.     <tankuang v-for="item in list" v-bind:name="item"></tankuang>
  15. </div>
  16. <script>
  17.     //定义常量tankuangComponent
  18.     const tankuangComponent = {
  19.         //默认渲染，使用{{name}}{{count}}
  20.         template:`<button v-on:click="ttt">{{name}}{{count}}</button>`,
  21.         //使用props声明 我这个组件需要外边给我传一个字符串格式的name变量
  22.         //父子传值，使用props
  23.         props:{
  24.             //声明变量name，类型必须是String
  25.             //name:String做了一次校验,通过之后，才会给上面的{{name}}
  26.             name:String
  27.         },
  28.         data:function(){
  29.             return {
  30.                 count: 0
  31.             }
  32.         },
  33.         methods:{
  34.             ttt:function(){
  35.                 //自增
  36.                 this.count +=1
  37.             }
  38.         }
  39.     }
  40.     //注册自定义的局部组件
  41.     var app = new Vue({
  42.         el:"#app",
  43.         data:{
  44.             //客服列表
  45.             list:[
  46.                 '1號-林志玲',
  47.                 '2号-柳岩',
  48.                 '3호-宋慧乔',
  49.             ]
  50.         },
  51.         //components表示组件
  52.         components:{
  53.             tankuang:tankuangComponent
  54.         },
  55.     });
  56. </script>
  57. </body>
  58. </html>

刷新网页，效果如下：

Day90 Vue组件,前端开发工具包 - 图7

父子传值，一定要使用props。这里说的父，指的是网页整体。子，指的是tankuang局部组件。

网页点击之后，需要将值传给button按钮，最终展示数据！

关键步骤如下：

Day90 Vue组件,前端开发工具包 - 图8

1.定义了一个列表list，使用for循环遍历每一个元素

2.将值赋给item

3.item动态赋值给name

4.name传给props里面的name，name必须是字符串。

5.通过校验后，将值传给{{name}}，前端来渲染。

子组件向父组件传值

需要统计每一个客服，一共接待了多少客户。每增加一个客户，总数加1。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <!-- 开发环境版本，包含了有帮助的命令行警告 -->
  7.     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  8. </head>
  9. <body>
  10. <div id="app">
  11.     <p>本月接待客户数:{{totalCount}}</p>
  12.     <!--使用自定义组件tankuang-->
  13.     <!--item是每一次for循环的元素，将值赋值给name-->
  14.     <!--动态赋值使用v-bind，赋值给子组件-->
  15.     <tankuang v-for="item in list" v-bind:name="item"></tankuang>
  16. </div>
  17. <script>
  18.     //定义常量tankuangComponent
  19.     const tankuangComponent = {
  20.         //默认渲染，使用{{name}}{{count}}
  21.         template:`<button v-on:click="ttt">{{name}}{{count}}</button>`,
  22.         //使用props声明 我这个组件需要外边给我传一个字符串格式的name变量
  23.         //父子传值，使用props
  24.         props:{
  25.             //声明变量name，类型必须是String
  26.             //name:String做了一次校验,通过之后，才会给上面的{{name}}
  27.             name:String
  28.         },
  29.         data:function(){
  30.             return {
  31.                 //每一个客服自己的
  32.                 count: 0
  33.             }
  34.         },
  35.         methods:{
  36.             ttt:function(){
  37.                 //自增
  38.                 this.count +=1
  39.             }
  40.         }
  41.     }
  42.     //注册自定义的局部组件
  43.     var app = new Vue({
  44.         el:"#app",
  45.         data:{
  46.             totalCount: 0,  //总数
  47.             //客服列表
  48.             list:[
  49.                 '1號-林志玲',
  50.                 '2号-柳岩',
  51.                 '3호-宋慧乔',
  52.             ]
  53.         },
  54.         //components表示组件
  55.         components:{
  56.             tankuang:tankuangComponent
  57.         },
  58.     });
  59. </script>
  60. </body>
  61. </html>

刷新网页，效果如下：

Day90 Vue组件,前端开发工具包 - 图9

发现一个问题，总数没有变动？为什么呢？

因为这一段代码

  1. methods:{
  2.             ttt:function(){
  3.                 //自增
  4.                 this.count +=1
  5.             }
  6.         }

改变时，没有把外面的总数加1。那么如何改变父层的元素呢？需要使用自定义事件

自定义事件

事件名

跟组件和 prop 不同，事件名不存在任何自动化的大小写转换。而是触发的事件名需要完全匹配监听这个事件所用的名称。举个例子，如果触发一个 camelCase 名字的事件：

js代码：

  1. this.$emit('myEvent')

则监听这个名字的 kebab-case 版本是不会有任何效果的：

html代码：

  1. <my-component v-on:my-event="doSomething"></my-component>

跟组件和 prop 不同，事件名不会被用作一个 JavaScript 变量名或属性名，所以就没有理由使用 camelCase 或 PascalCase 了。并且 <font style="color:#FF0000;">v-on</font> 事件监听器在 DOM 模板中会被自动转换为全小写 (因为 HTML 是大小写不敏感的)，所以 <font style="color:#FF0000;">v-on:myEvent</font> 将会变成 <font style="color:#FF0000;">v-on:myevent</font>——导致 <font style="color:#FF0000;">myEvent</font> 不可能被监听到。

因此，我们推荐你始终使用 kebab-case 的事件名**。**

举例：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <!-- 开发环境版本，包含了有帮助的命令行警告 -->
  7.     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  8. </head>
  9. <body>
  10. <div id="app">
  11.     <p>本月接待客户数:{{totalCount}}</p>
  12.     <!--使用自定义组件tankuang-->
  13.     <!--item是每一次for循环的元素，将值赋值给name-->
  14.     <!--动态赋值使用v-bind，赋值给子组件-->
  15.     <!--自定义事件jiedai，执行方法add-->
  16.     <tankuang v-for="item in list" v-bind:name="item" v-on:jiedai="add"></tankuang>
  17. </div>
  18. <script>
  19.     //定义常量tankuangComponent
  20.     const tankuangComponent = {
  21.         //默认渲染，使用{{name}}{{count}}
  22.         template:`<button v-on:click="ttt">{{name}}{{count}}</button>`,
  23.         //使用props声明 我这个组件需要外边给我传一个字符串格式的name变量
  24.         //父子传值，使用props
  25.         props:{
  26.             //声明变量name，类型必须是String
  27.             //name:String做了一次校验,通过之后，才会给上面的{{name}}
  28.             name:String
  29.         },
  30.         data:function(){
  31.             return {
  32.                 //每一个客服自己的
  33.                 count: 0
  34.             }
  35.         },
  36.         methods:{
  37.             ttt:function(){
  38.                 //自增
  39.                 this.count +=1
  40.                 //告诉外层，总数加1,执行方法jiedai。$emit是关键字,表示自定义事件
  41.                 this.$emit('jiedai')
  42.             }
  43.         }
  44.     }
  45.     //注册自定义的局部组件
  46.     var app = new Vue({
  47.         el:"#app",
  48.         data:{
  49.             totalCount: 0,  //总数
  50.             //客服列表
  51.             list:[
  52.                 '1號-林志玲',
  53.                 '2号-柳岩',
  54.                 '3호-宋慧乔',
  55.             ]
  56.         },
  57.         //components表示组件
  58.         components:{
  59.             tankuang:tankuangComponent
  60.         },
  61.         //方法
  62.         methods:{
  63.             //增加总数
  64.             add:function () {
  65.                 //总数自增
  66.                 this.totalCount +=1
  67.             }
  68.         }
  69.     });
  70. </script>
  71. </body>
  72. </html>

刷新网页，效果如下：

Day90 Vue组件,前端开发工具包 - 图10

这样设计的好处是，子组件只能修改自己的。如果需要修改父组件，必须通过自定义事件来完成！

插槽

插槽内容

Vue 实现了一套内容分发的 API，这套 API 基于当前的 Web Components 规范草案，将 <font style="color:#FF0000;"><slot></font> 元素作为承载分发内容的出口。

它允许你像这样合成组件：

html代码：

  1. <navigation-link url="/profile">
  2.   Your Profile
  3. </navigation-link>

然后你在 <font style="color:#FF0000;"><navigation-link></font> 的模板中可能会写为：

html代码：

  1. <a
  2.   v-bind:href="url"
  3.   class="nav-link"
  4. >
  5.   <slot></slot>
  6. </a>

当组件渲染的时候，这个 <font style="color:#FF0000;"><slot></font> 元素将会被替换为”Your Profile”。插槽内可以包含任何模板代码，包括 HTML：

  1. <navigation-link url="/profile">
  2.   <!-- 添加一个 Font Awesome 图标 -->
  3.   <span class="fa fa-user"></span>
  4.   Your Profile
  5. </navigation-link>

甚至其它的组件：

html代码：

  1. <navigation-link url="/profile">
  2.   <!-- 添加一个图标的组件 -->
  3.   <font-awesome-icon name="user"></font-awesome-icon>
  4.   Your Profile
  5. </navigation-link>

如果 <font style="color:#FF0000;"><navigation-link></font> 没有包含一个 <font style="color:#FF0000;"><slot></font> 元素，则任何传入它的内容都会被抛弃。

举例：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <!-- 开发环境版本，包含了有帮助的命令行警告 -->
  7.     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  8. </head>
  9. <body>
  10. <div id="app">
  11.     <p>本月接待客户数:{{totalCount}}</p>
  12.     <!--使用自定义组件tankuang-->
  13.     <!--item是每一次for循环的元素，将值赋值给name-->
  14.     <!--动态赋值使用v-bind，赋值给子组件-->
  15.     <!--自定义事件jiedai，执行方法add-->
  16.     <tankuang v-for="item in list" v-bind:name="item" v-on:jiedai="add">
  17.         <span>上班了!</span>
  18.     </tankuang>
  19. </div>
  20. <script>
  21.     //定义常量tankuangComponent
  22.     const tankuangComponent = {
  23.         //默认渲染，使用{{name}}{{count}}
  24.         //必须使用闭合标签，比如div,p...等等
  25.         template: `<div><button v-on:click="ttt">{{name}}{{count}}</button>
  26.                     <slot></slot>
  27.         </div>`,
  28.         //使用props声明 我这个组件需要外边给我传一个字符串格式的name变量
  29.         //父子传值，使用props
  30.         props: {
  31.             //声明变量name，类型必须是String
  32.             //name:String做了一次校验,通过之后，才会给上面的{{name}}
  33.             name: String
  34.         },
  35.         data: function () {
  36.             return {
  37.                 //每一个客服自己的
  38.                 count: 0
  39.             }
  40.         },
  41.         methods: {
  42.             ttt: function () {
  43.                 //自增
  44.                 this.count += 1
  45.                 //告诉外层，总数加1,执行方法jiedai。$emit是关键字,表示自定义事件
  46.                 this.$emit('jiedai')
  47.             }
  48.         }
  49.     }
  50.     //注册自定义的局部组件
  51.     var app = new Vue({
  52.         el: "#app",
  53.         data: {
  54.             totalCount: 0,  //总数
  55.             //客服列表
  56.             list: [
  57.                 '1號-林志玲',
  58.                 '2号-柳岩',
  59.                 '3호-宋慧乔',
  60.             ]
  61.         },
  62.         //components表示组件
  63.         components: {
  64.             tankuang: tankuangComponent
  65.         },
  66.         //方法
  67.         methods: {
  68.             //增加总数
  69.             add: function () {
  70.                 //总数自增
  71.                 this.totalCount += 1
  72.             }
  73.         }
  74.     });
  75. </script>
  76. </body>
  77. </html>

刷新网页，效果如下：

Day90 Vue组件,前端开发工具包 - 图11

注意：template必须包含一个<slot> 元素，否则中的内容会被丢弃掉，网页不展示！

网页无法展示。template必须使用闭合标签，否则报错！

具名插槽

有些时候我们需要多个插槽。例如，一个假设的 <font style="color:#FF0000;"><base-layout></font> 组件多模板如下：

html代码：

  1. <div class="container">
  2.   <header>
  3.     <!-- 我们希望把页头放这里 -->
  4.   </header>
  5.   <main>
  6.     <!-- 我们希望把主要内容放这里 -->
  7.   </main>
  8.   <footer>
  9.     <!-- 我们希望把页脚放这里 -->
  10.   </footer>
  11. </div>

对于这样的情况，<font style="color:#FF0000;"><slot></font> 元素有一个特殊的特性：<font style="color:#FF0000;">name</font>。这个特性可以用来定义额外的插槽：

  1. <div class="container">
  2.   <header>
  3.     <slot name="header"></slot>
  4.   </header>
  5.   <main>
  6.     <slot></slot>
  7.   </main>
  8.   <footer>
  9.     <slot name="footer"></slot>
  10.   </footer>
  11. </div>

在向具名插槽提供内容的时候，我们可以在一个父组件的 <font style="color:#FF0000;"><template></font> 元素上使用 <font style="color:#FF0000;">slot</font> 特性：

  1. <base-layout>
  2.   <template slot="header">
  3.     <h1>Here might be a page title</h1>
  4.   </template>
  6.   <p>A paragraph for the main content.</p>
  7.   <p>And another one.</p>
  9.   <template slot="footer">
  10.     <p>Here's some contact info</p>
  11.   </template>
  12. </base-layout>

另一种 <font style="color:#FF0000;">slot</font> 特性的用法是直接用在一个普通的元素上：

  1. <base-layout>
  2.   <h1 slot="header">Here might be a page title</h1>
  4.   <p>A paragraph for the main content.</p>
  5.   <p>And another one.</p>
  7.   <p slot="footer">Here's some contact info</p>
  8. </base-layout>

我们还是可以保留一个未命名插槽，这个插槽是默认插槽，也就是说它会作为所有未匹配到插槽的内容的统一出口。上述两个示例渲染出来的 HTML 都将会是：

  1. <div class="container">
  2.   <header>
  3.     <h1>Here might be a page title</h1>
  4.   </header>
  5.   <main>
  6.     <p>A paragraph for the main content.</p>
  7.     <p>And another one.</p>
  8.   </main>
  9.   <footer>
  10.     <p>Here's some contact info</p>
  11.   </footer>
  12. </div>

举例：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <!-- 开发环境版本，包含了有帮助的命令行警告 -->
  7.     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  8. </head>
  9. <body>
  10. <div id="app">
  11.     <p>本月接待客户数:{{totalCount}}</p>
  12.     <!--使用自定义组件tankuang-->
  13.     <!--item是每一次for循环的元素，将值赋值给name-->
  14.     <!--动态赋值使用v-bind，赋值给子组件-->
  15.     <!--自定义事件jiedai，执行方法add-->
  16.     <tankuang v-for="item in list" v-bind:name="item" v-on:jiedai="add">
  17.         <!--多个元素使用template包裹-->
  18.         <template slot="he">
  19.             <span>上班了!</span>
  20.             <span>打卡!</span>
  21.         </template>
  22.         <!--使用具名插槽-->
  23.         <span slot="heng">哼哼!</span>
  24.     </tankuang>
  25. </div>
  26. <script>
  27.     //定义常量tankuangComponent
  28.     const tankuangComponent = {
  29.         //默认渲染，使用{{name}}{{count}}
  30.         //必须使用闭合标签，比如div,p...等等
  31.         //slot定义name属性，表示具名插槽
  32.         template: `<div><button v-on:click="ttt">{{name}}{{count}}</button>
  33.                     <slot name="he"></slot>
  34.                     <slot name="heng"></slot>
  35.         </div>`,
  36.         //使用props声明 我这个组件需要外边给我传一个字符串格式的name变量
  37.         //父子传值，使用props
  38.         props: {
  39.             //声明变量name，类型必须是String
  40.             //name:String做了一次校验,通过之后，才会给上面的{{name}}
  41.             name: String
  42.         },
  43.         data: function () {
  44.             return {
  45.                 //每一个客服自己的
  46.                 count: 0
  47.             }
  48.         },
  49.         methods: {
  50.             ttt: function () {
  51.                 //自增
  52.                 this.count += 1
  53.                 //告诉外层，总数加1,执行方法jiedai。$emit是关键字,表示自定义事件
  54.                 this.$emit('jiedai')
  55.             }
  56.         }
  57.     }
  58.     //注册自定义的局部组件
  59.     var app = new Vue({
  60.         el: "#app",
  61.         data: {
  62.             totalCount: 0,  //总数
  63.             //客服列表
  64.             list: [
  65.                 '1號-林志玲',
  66.                 '2号-柳岩',
  67.                 '3호-宋慧乔',
  68.             ]
  69.         },
  70.         //components表示组件
  71.         components: {
  72.             tankuang: tankuangComponent
  73.         },
  74.         //方法
  75.         methods: {
  76.             //增加总数
  77.             add: function () {
  78.                 //总数自增
  79.                 this.totalCount += 1
  80.             }
  81.         }
  82.     });
  83. </script>
  84. </body>
  85. </html>

刷新网页，效果如下：

Day90 Vue组件,前端开发工具包 - 图12

总结：

  1. 1. 父组件 -传值-> 子组件
  2.     v-bind:变量='值'
  3.     注意事项：
  4.         子组件接收值需要在props里面声明
  6. 2. 子组件  -传值-> 父组件 
  7.     触发自定义事件的方式，为了确保父组件的值不会被子组件直接修改
  8.     子组件触发事件：
  9.         this.$emit('事件名')
  10.     父组件监听事件：
  11.         v-on:事件名='处理的方法'
  13. 3. 插槽和带名字的插槽
  14.     引用子组件的时候，我可以传递一些额外的标签元素

二、前端开发工具包

node.js

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。

Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型，使其轻量又高效。

Node.js 的包管理器 npm，是全球最大的开源库生态系统。

官网：

https://nodejs.org/en/

下载最新版本

Day90 Vue组件,前端开发工具包 - 图13

安装，疯狂点击下一步，就可以了！

安装完成后，打开cmd控制台，输入命令node -v 查看版本：

  1. C:\Users\xiao>node -v
  2. v10.7.0

本质上还是JS，跑在V8引擎上的，让JS能够和操作系统进行交互

和Python\php类似的脚本语言

npm

npm 是 JavaScript 世界的包管理工具,并且是 Node.js 平台的默认包管理工具。通过 npm 可以安装、共享、分发代码,管理项目依赖关系。

NPM是随同NodeJS一起安装的包管理工具，能解决NodeJS代码部署上的很多问题

打开cmd控制台，输入命令npm -v 查看版本：

  1. C:\Users\xiao>npm -v
  2. 6.1.0

类似于Python中的pip，帮助我们解决包和包之间版本的依赖关系

webpack

webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。

Day90 Vue组件,前端开发工具包 - 图14

安装webpack，使用一下命令：

  1. npm install webpack -g
  2. npm install webpack-cli -g

关闭cmd窗口，再次打开，查看版本

  1. C:\Users\xiao>webpack -v
  2. 4.16.2

准备文件

新建a.js

  1. (function(){
  2.     //定义全局变量
  3.     //这种方式经常被用到一个匿名函数执行后将一些函数公开到全局
  4.     window.ryf = 'ruanyifeng';
  5. })();

一般定义需要被导入的变量或者方法，使用function定义。

如果直接使用var 声明，那么html导入js之后，就直接有了全局变量，可能会影响当前html的全局变量，会被覆盖！

推荐使用方法，调用时，才使用变量

新建test.html，引入a.js

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6. </head>
  7. <body>
  8. <!--导入a.js-->
  9. <script src="a.js"></script>
  10. <script>
  11.     console.log(ryf);  //打印ryf变量
  12. </script>
  13. </body>
  14. </html>

访问网页，效果如下：

Day90 Vue组件,前端开发工具包 - 图15

发现Console打印出变量了

Nodejs 编写模块相当的自由，开发者只需要关注 require,exports,module 等几个变量就足够，而为了保持模块的可读性，很推荐把不同功能的代码块都写成独立模块，减少各模块耦合。

module.exports

用来导出代码,初始值为一个空对象 {}

修改a.js

  1. (function(){
  2.     //定义全局变量
  3.     //这种方式经常被用到一个匿名函数执行后将一些函数公开到全局
  4.     window.ryf = 'ruanyifeng';
  5. })();
  7. //当前这个包 向外提供一个变量：ryf
  8. //module.exports 则用来导出代码,初始值为一个空对象 {}
  9. module.exports = {
  10.     ryf: ryf
  11. }

require

webpack中可以写commonjs格式的require同步语法

经典的commonjs同步语法

新建b.js

  1. var obj = require('./a.js');

此时webpack会将a.js打包进引用它的文件中，这是最普遍的情形！

正式使用Webpack

  1. webpack可以在终端中使用，在基本的使用方法如下：
  2. # {extry file}出填写入口文件的路径，本文中就是上述main.js的路径，
  3. # {destination for bundled file}处填写打包文件的存放路径
  4. # 填写路径的时候不用添加{}
  5. webpack {entry file} {destination for bundled file}

指定入口文件后，webpack将自动识别项目所依赖的其它文件，不过需要注意的是如果你的webpack不是全局安装的，那么当你在终端中使用此命令时，需要额外指定其在node_modules中的地址。

在终端中输入如下命令：

必须先进入到b.js文件的目录 
  1. C:\Users\xiao>e:
  2. C:\Users\xiao>cd E:\python_script\Vue

再执行命令

webpack b.js

效果如下：

Day90 Vue组件,前端开发工具包 - 图16

由于没有指定打包文件的存放路径，执行完成之后，会在当前目录生成dist目录，里面有一个文件main.js

查看main.js

  1. !function(e){var r={};function t(n){if(r[n])return r[n].exports;var o=r[n]={i:n,l:!1,exports:{}};return e[n].call(o.exports,o,o.exports,t),o.l=!0,o.exports}t.m=e,t.c=r,t.d=function(e,r,n){t.o(e,r)||Object.defineProperty(e,r,{enumerable:!0,get:n})},t.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},t.t=function(e,r){if(1&r&&(e=t(e)),8&r)return e;if(4&r&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(t.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&r&&"string"!=typeof e)for(var o in e)t.d(n,o,function(r){return e[r]}.bind(null,o));return n},t.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(r,"a",r),r},t.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},t.p="",t(t.s=0)}([function(e,r,t){t(1)},function(e,r){window.ryf="ruanyifeng",e.exports={ryf:ryf}}]);

发现代码被压缩成一行了，代码被打乱了，看不懂的

修改test.html，改为导入mian.js

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6. </head>
  7. <body>
  8. <!--导入main.js-->
  9. <script src="dist/main.js"></script>
  10. <script>
  11.     console.log(ryf);  //打印ryf变量
  12. </script>
  13. </body>
  14. </html>

刷新网页，效果如下：

Day90 Vue组件,前端开发工具包 - 图17

发现变量依然有效！