Vue组件是什么?Vue组件如何使用?(代码示例)

如果下载的源码需要作者授权,请更换源码。本站免费分享资源不会增加授权

本篇文章给大家带来的内容是介绍Vue组件是什么?Vue组件如何使用?(代码示例)。有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。

组件的介绍

  1. 组件系统是将一个大型的界面切分成一个一个更小的可控单元。

  2. 组件是可复用的,可维护的。

  3. 组件具有强大的封装性,易于使用。

  4. 大型应用中,组件与组件之间交互是可以解耦操作的。

Vue组件的使用

  • 全局组件的使用

<!DOCTYPE html> <html>  <head>     <meta charset="utf-8" />     <meta http-equiv="X-UA-Compatible" content="IE=edge">     <title>Page Title</title>     <meta name="viewport" content="width=device-width, initial-scale=1">     <link rel="stylesheet" type="text/css" media="screen" href="main.css" />     <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script> </head>  <body>     <div id="app">         <my-header></my-header>     </div>       <script>         //全局组建的定义         Vue.component("my-header", {             template: '<h1>全局组件</h1>'         });         var app = new Vue({             el: '#app',         });     </script>  </body>  </html>
  • 局部组件的使用

<!DOCTYPE html> <html>  <head>     <meta charset="utf-8" />     <meta http-equiv="X-UA-Compatible" content="IE=edge">     <title>Page Title</title>     <meta name="viewport" content="width=device-width, initial-scale=1">     <link rel="stylesheet" type="text/css" media="screen" href="main.css" />     <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script> </head>  <body>     <div id="app">         <my-header></my-header>     </div>       <script>         //局部组件定义         var app = new Vue({             el: '#app',             components: {                 'my-header': {                     template: '<h1>局部组件</h1>'                 }             }         });     </script>  </body>  </html>
  • 组件数据的特点

<!DOCTYPE html> <html>  <head>     <meta charset="utf-8" />     <meta http-equiv="X-UA-Compatible" content="IE=edge">     <title>Page Title</title>     <meta name="viewport" content="width=device-width, initial-scale=1">     <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script> </head>  <body>     <div id="app">         <my-header></my-header>         <my-header></my-header>         <br>         <my-header1></my-header1>         <my-header1></my-header1>     </div>      <script>         //组件数据之间不共享,Vue实例中的数据也不能共享给组件,并且组件中的data只能使用函数         //组件的数据data使用函数的特点是每次点击或操作组件函数会重新执行,这样就不会影响其它组件,通过下面两个例子可以看出         var data = {             count: 0         };         var app = new Vue({             el: '#app',             data: {                 message: "Hello Vue!!!"             },             components: {                 'my-header': {                     template: '<h1 v-on:click="changeCount">{{count}}</h1>',                     data: function() {                         return data;                     },                     methods: {                         changeCount: function() {                             this.count++;                         }                     }                 },                 'my-header1': {                     template: '<div v-on:click="changeCount1">{{count}}</div>',                     data: function() {                         return {                             count: 0                         };                     },                     methods: {                         changeCount1: function() {                             this.count++;                         }                     }                 }             }         });     </script>  </body>  </html>
  • Vue实例与组件之间的关系

Vue组件其实是一个可扩展的Vue实例。

<!DOCTYPE html> <html>  <head>     <meta charset="utf-8" />     <meta http-equiv="X-UA-Compatible" content="IE=edge">     <title>Page Title</title>     <meta name="viewport" content="width=device-width, initial-scale=1">     <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script> </head>  <body>     <div id="app">         {{message}}     </div>      <script>         //Vue组件其实是一个可扩展的Vue实例,Vue实例也可以看成是一个组件         // var app = new Vue({         //     el: '#app',         //     template: '<h1>app应用</h1>'         // });         //使用继承实现Vue组件         var myComponent = Vue.extend({             data: function() {                 return {                     message: "Hello Vue@@@"                 }             }         });         var vm = new myComponent({             el: '#app'         });     </script>  </body>  </html>
  • Vue组件的模版方式

  1. `

  2. <template id=”xxx”></template>

  3. <script type=”text/x-template”></script>

  4. .vue 单文件

<!DOCTYPE html> <html>  <head>     <meta charset="utf-8" />     <meta http-equiv="X-UA-Compatible" content="IE=edge">     <title>Page Title</title>     <meta name="viewport" content="width=device-width, initial-scale=1">     <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script> </head>  <body>     <div id="app">         <my-header></my-header>         <my-header-1></my-header-1>         <my-header-2></my-header-2>         <my-header-3></my-header-3>     </div>       <template id="temp">             <div>                 <p>                     <ul>                             <li>1</li>                             <li>2</li>                             <li>3</li>                         </ul>                     </p>                 </div>     </template>     <script type="text/x-template" id="temp1">         <div>             <p>                 <ul>                     <li>1</li>                     <li>2</li>                     <li>3</li>                 </ul>             </p>         </div>     </script>     <script>         //Vue模版添加方式         var app = new Vue({             el: '#app',             components: {                 'my-header': {                     template: '<div>                                     <p>                                         <ul>                                             <li>1</li>                                             <li>2</li>                                             <li>3</li>                                         </ul>                                     </p>                                 </div>',                     data: function() {                         return {                             message: "第一项"                         }                     }                 },                 'my-header-1': {                     template: `<div>                                     <p>                                         <ul>                                             <li>1</li>                                             <li>2</li>                                             <li>3</li>                                         </ul>                                     </p>                                 </div>`,                 },                 'my-header-2': {                     template: '#temp'                 },                 'my-header-3': {                     template: '#temp1'                 }              }         });     </script>  </body>  </html>
  • Vue父组件向子组件通信(props)

<!DOCTYPE html> <html>  <head>     <meta charset="utf-8" />     <meta http-equiv="X-UA-Compatible" content="IE=edge">     <title>Page Title</title>     <meta name="viewport" content="width=device-width, initial-scale=1">     <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script> </head>  <body>     <div id="app">         <!-- 数据在组件中 -->         <my-header></my-header>         <!-- 父组件向子组件传递数据 -->         <my-header-1 :list="temp_2_list"></my-header-1>         <!-- 父组件向子组件传递数据不给值 -->         <my-header-1></my-header-1>      </div>     <!-- 数据在组件中的模版 -->     <template id="temp-1">              <div>                     <h1>{{message}}</h1>                     <ul>                         <li v-for="item in list">{{item}}</li>                     </ul>                 </div>     </template>     <!-- 父组件向子组件传递数据的模版 -->     <template id="temp-2">             <div>                     <h1>{{message}}</h1>                     <ul>                         <li v-for="item in list">{{item}}</li>                     </ul>                     <my-nav :itemlist = "list"></my-nav>                 </div>     </template>     <!-- 子组件向子组件传递数据的模版 -->     <template id="temp-3">             <div>                     <h1>{{message}}</h1>                     <ul>                         <li v-for="item in itemlist">{{item}}</li>                     </ul>                 </div>     </template>     <script>         var vm = new Vue({             el: '#app',             data: {                 temp_2_list: ["1", "2", "3"]             },             components: {                 //数据在自己组件中的实例                 'my-header': {                     template: '#temp-1',                     data: function() {                         return {                             list: ["1", "2", "3"],                             message: "组件中的数据"                         };                     }                 },                 //父组件向子组件传递数据                 'my-header-1': {                     //props: ["list"],                     template: '#temp-2',                     data: function() {                         return {                             message: "父组件向子组件传递数据"                         };                     },                     //属性的验证与默认值                     props: {                         list: {                             type: Array,                             default: ["4", "5", "6"]                         }                     },                     //子组件的子组件                     components: {                         'my-nav': {                             template: '#temp-3',                             data: function() {                                 return {                                     message: "子组件中的子组件"                                 };                             },                             props: ["itemlist"]                         }                     }                 }             }         });     </script>  </body>  </html>
  • 子组件向父组件通信(EmitEvents)

<!DOCTYPE html> <html>  <head>     <meta charset="utf-8" />     <meta http-equiv="X-UA-Compatible" content="IE=edge">     <title>Page Title</title>     <meta name="viewport" content="width=device-width, initial-scale=1">     <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script> </head>  <body>     <div id="app">         <my-header-1 :list="temp_2_list"></my-header-1>      </div>     <!-- 父组件向子组件传递数据的模版 -->     <template id="temp-2">         <div>                 <h1>{{message}}</h1>                 <ul>                     <li v-for="item in list">{{item}}</li>                 </ul>                 <my-nav :itemlist = "list" v-on:change-events="getChildContent"></my-nav>             </div> </template>     <!-- 子组件向子组件传递数据的模版 -->     <template id="temp-3">         <div>                 <h1>{{message}}</h1>                 <ul>                     <li v-for="item in itemlist" v-on:click="getContent">{{item}}</li>                 </ul>             </div> </template>      <script>         //子组件向父组件传递数据,是发布订阅模式         var vm = new Vue({             el: '#app',             data: {                 temp_2_list: ["1", "2", "3"]             },             components: {                 //父组件向子组件传递数据                 'my-header-1': {                     //props: ["list"],                     template: '#temp-2',                     data: function() {                         return {                             message: "父组件向子组件传递数据"                         };                     },                     //属性的验证与默认值                     props: {                         list: {                             type: Array,                             default: ["4", "5", "6"]                         }                     },                     methods: {                         getChildContent: function(str) {                             debugger                             alert(str);                         }                     },                     //子组件的子组件                     components: {                         'my-nav': {                             template: '#temp-3',                             data: function() {                                 return {                                     message: "子组件中的子组件"                                 };                             },                             props: ["itemlist"],                             methods: {                                 getContent: function(ev) {                                     // console.log(this);                                     // console.log(ev.target.innerHTML);                                     this.$emit("change-events", ev.target.innerHTML);                                 }                             }                         }                     }                 }             }         });     </script>  </body>  </html>
  • Vue非父子组件的通信

  1. 空实例与自定义事件

    1. $emit

    2. $on

  2. Vuex状态管理

    1. state

    2. mutation

    3. commit

空实例与自定义事件的使用(适用于小型项目)

<!DOCTYPE html> <html>  <head>     <meta charset="utf-8" />     <meta http-equiv="X-UA-Compatible" content="IE=edge">     <title>Page Title</title>     <meta name="viewport" content="width=device-width, initial-scale=1">     <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>     <style>         ul {             list-style-type: none;         }     </style> </head>  <body>     <div id="app">         <my-header-1></my-header-1>         <my-header-2></my-header-2>      </div>      <script>         //非父子组件通信          //1.0 使用空实例进行非父子组件通信         //定义空实例         //创建步骤是:         //1、首先定义一个空实例          //2、需要给被传递数据的A组件使用$emit绑定自定义事件,并将A组件的数据发布给B组件          //3、使用$on订阅A组件发布过来的数据,从而获取数据         var busVm = new Vue();         var vm = new Vue({             el: '#app',             components: {                 //组件B                 'my-header-1': {                     template: `<h1>{{message}}</h1>`,                     data: function() {                         return {                             message: "非父子组件通信"                         };                     },                     mounted() {                         //使用bind(this)修正this                         busVm.$on("changeEnvents", function(param) {                             this.message = param;                         }.bind(this));                     },                 },                 //组件A                 'my-header-2': {                     template: `<ul><li @click="getContent" v-for="item in list">{{item}}</li></ul>`,                     data: function() {                         return {                             list: ["第一项", "第二项", "第三项"]                         };                     },                     methods: {                         getContent: function(ev) {                             busVm.$emit("changeEnvents", ev.target.innerHTML);                         }                     }                 }             }         });     </script>  </body>  </html>

Vuex状态管理 

  • Vue组件内容分发

    • 单<slot>标签使用

<!DOCTYPE html> <html>  <head>     <meta charset="utf-8" />     <meta http-equiv="X-UA-Compatible" content="IE=edge">     <title>Page Title</title>     <meta name="viewport" content="width=device-width, initial-scale=1">     <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>     <style>         ul {             list-style-type: none;         }     </style> </head>  <body>     <div id="app">         <my-header-1>             <h1>我是标题</h1>         </my-header-1>          <my-header-1>             <my-header-2></my-header-2>         </my-header-1>      </div>      <script>         //单插槽<slot></slot>         var vm = new Vue({             el: '#app',             components: {                 'my-header-1': {                     template: `<div>我是头部:<slot></slot></div>`,                  },                 'my-header-2': {                     template: `<h1>我是标题</h1>`,                 }             }         });     </script>  </body>  </html>
    • 多<slot>标签使用

<!DOCTYPE html> <html>  <head>     <meta charset="utf-8" />     <meta http-equiv="X-UA-Compatible" content="IE=edge">     <title>Page Title</title>     <meta name="viewport" content="width=device-width, initial-scale=1">     <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>     <style>         ul {             list-style-type: none;         }     </style> </head>  <body>     <div id="app">                 <my-header-1>             <button slot="left">←</button>             <button slot="right">→</button>         </my-header-1>      </div>      <script>           //多插槽的使用,则使用name属性来指定要插入的位置         var vm = new Vue({             el: '#app',             components: {                 'my-header-1': {                     template: `<div><slot name="left"></slot> 我是头部:<slot name="right"></slot></div>`,                 },                 'my-header-2': {                     template: `<h1>我是标题</h1>`,                 }             }         });     </script>  </body>  </html>
  • <slot>默认值

<!DOCTYPE html> <html>  <head>     <meta charset="utf-8" />     <meta http-equiv="X-UA-Compatible" content="IE=edge">     <title>Page Title</title>     <meta name="viewport" content="width=device-width, initial-scale=1">     <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>     <style>         ul {             list-style-type: none;         }     </style> </head>  <body>     <div id="app">          <my-header-1>             <button slot="left">←</button>             <button slot="right">→</button>         </my-header-1>      </div>      <script>         //多插槽的使用,则使用name属性来指定要插入的位置         var vm = new Vue({             el: '#app',             components: {                 'my-header-1': {                     template: `<div><slot name="left"></slot> 我是头部:<slot name="right"><button slot="right">+</button></slot></div>`,                 },                 'my-header-2': {                     template: `<h1>我是标题</h1>`,                 }             }         });     </script>  </body>  </html>
  • Vue组件开发流程

    1. 编写基础HTML和CSS

    2. 提取组件

    3. 数据传输

    4. 内容分发

    5. 添加事件和方法

  • Vue中DOM操作(使用$refs)

    <!DOCTYPE html> <html>  <head>     <meta charset="utf-8" />     <meta http-equiv="X-UA-Compatible" content="IE=edge">     <title>Page Title</title>     <meta name="viewport" content="width=device-width, initial-scale=1">     <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script> </head>  <body>     <div id="app">         <my-header-1 :list="temp_2_list"></my-header-1>      </div>     <!-- 父组件向子组件传递数据的模版,ref特性用于DOM操作,使用this.$refs.row获取添加特性的DOM元素 -->     <template id="temp-2">         <div>                 <h1>{{message}}</h1>                 <ul >                     <li  v-for="item in list" v-on:click="updateStyle" style="color:blue" ref="row">{{item}}</li>                 </ul>                              </div>       </template>      <script>         //子组件向父组件传递数据,是发布订阅模式         var vm = new Vue({             el: '#app',             data: {                 temp_2_list: ["1", "2", "3"]             },             components: {                 //父组件向子组件传递数据                 'my-header-1': {                     //props: ["list"],                     template: '#temp-2',                     data: function() {                         return {                             message: "父组件向子组件传递数据"                         };                     },                     //属性的验证与默认值                     props: {                         list: {                             type: Array,                             default: ["4", "5", "6"]                         }                     },                     methods: {                         updateStyle: function(ev) {                             ev.target.style.color = 'red';                             // this.$refs.row.style.color = 'red';                             console.log(this.$refs.row);                             this.$refs.row.forEach(element => {                                 console.log(element);                                 element.style.color = 'red';                             });                         }                     }                 }             }         });     </script> </body> </html>
    本文由(壳先生)整理自网络,如转载请注明出处:https://www.mrshell.com;
    本站发布的内容若侵犯到您的权益,请邮件联系 i@mrshell.com 删除,我们将及时处理!
    ===========================================================================

    1. 本站大部分下载资源收集于网络,不保证其完整性以及安全性,请下载后自行测试。
    2. 本站资源仅供学习和交流使用,版权归资源原作者所有,请在下载后24小时之内自觉删除。
    3. 不得使用于非法商业用途,商用请支持正版!不得违反国家法律,否则后果自负!
    4. 若作商业用途,请购买正版,由于未及时购买和付费发生的侵权行为,与本站无关。
    5. 如有链接无法下载、失效或广告,请联系管理员处理!
    6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!

    =================================================================

    壳先生 » Vue组件是什么?Vue组件如何使用?(代码示例)

    发表评论

    提供最优质的资源集合

    立即查看 了解详情