Vue.js组件的使用
一.组件
组件是可复用的vue实例，可分为局部组件和全局组件。
二.组件入门小案例
要求定义一个组件”one“，并重复使用它。
2.1.代码实例
- 1 <html lang="en">
- 2 <head>
- 3 <meta charset="UTF-8">
- 4 <title>vue局部组件和全局组件</title>
- 5 <script src="./js/vue.min.js"></script>
- 6 </head>
- 7 <body>
- 8 <div id="app">
- 9 <one></one>
- 10 <one></one>
- 11 <one></one>
- 12 <one></one>
- 13 </div>
- 14 </body>
- 15 </html>
- 16 <script>
- 17 //创建vue实例对象
- 18 var vm = new Vue({
- 19 //挂载点
- 20 el:"#app",
- 21 //局部组件需要注册
- 22 components:{
- 23 //注册局部组件
- 24 one:{
- 25 //局部组件模板
- 26 template:"<ul><li>吃饭</li><li>睡觉</li><li>打豆豆</li></ul>"
- 27 }
- 28 }
- 29 })
- 30 </script>
2.2.执行效果
三.将组件的模板写在<body>标签内
3.1.实例代码
- 1 <html lang="en">
- 2 <head>
- 3 <meta charset="UTF-8">
- 4 <title>vue局部组件和全局组件</title>
- 5 <script src="./js/vue.min.js"></script>
- 6 </head>
- 7 <body>
- 8 <div id="app">
- 9 <one></one>
- 10 <comtwo></comtwo>
- 11 </div>
- 12 <template id="two">
- 13 <div>
- 14 <p>
- 15 <ul>
- 16 <li>吃饭2</li>
- 17 <li>睡觉2</li>
- 18 <li>打豆豆2</li>
- 19 </ul>
- 20 </p>
- 21 </div>
- 22 </template>
- 23 </body>
- 24 </html>
- 25 <script>
- 26 //创建vue实例对象
- 27 var vm = new Vue({
- 28 //挂载点
- 29 el:"#app",
- 30 //局部组件需要注册
- 31 components:{
- 32 //注册局部组件
- 33 one:{
- 34 //局部组件模板
- 35 template:"<ul><li>吃饭</li><li>睡觉</li><li>打豆豆</li></ul>"
- 36 },
- 37 comtwo:{
- 38 template:"#two"
- 39 }
- 40 }
- 41 })
- 42 </script>
3.2.效果图
四.局部组件数据的使用
各个局部组件的数据是相互独立的；实现点击某个组件，相应的该组件内容数字+1的功能
4.1.实例代码
- 1 <html lang="en">
- 2 <head>
- 3 <meta charset="UTF-8">
- 4 <title>vue局部组件和全局组件</title>
- 5 <script src="./js/vue.min.js"></script>
- 6 <style>
- 7 *{
- 8 margin: 0px;
- 9 padding: 0px;
- 10 }
- 11 .myp{
- 12 width: 100px;
- 13 height: 100px;
- 14 background-color: greenyellow;
- 15 float:left;
- 16 margin-left:12px;
- 17 }
- 18 </style>
- 19 </head>
- 20 <body>
- 21 <div id="app">
- 22 <one></one>
- 23 <two></two>
- 24 <three></three>
- 25 <three></three>
- 26 <three></three>
- 27 </div>
- 28 <template id="two">
- 29 <div>
- 30 <p>
- 31 <ul>
- 32 <li>吃饭2</li>
- 33 <li>睡觉2</li>
- 34 <li>打豆豆2</li>
- 35 </ul>
- 36 </p>
- 37 </div>
- 38 </template>
- 39 <template id="three">
- 40 <p class="myp" @click="add">{{msg}}</p>
- 41 </template>
- 42 </body>
- 43 </html>
- 44 <script>
- 45 //创建vue实例对象
- 46 var vm = new Vue({
- 47 //挂载点
- 48 el:"#app",
- 49 //局部组件需要注册
- 50 components:{
- 51 //注册局部组件
- 52 one:{
- 53 //局部组件模板
- 54 template:"<ul><li>吃饭</li><li>睡觉</li><li>打豆豆</li></ul>"
- 55 },
- 56 two:{
- 57 template:"#two"
- 58 },
- 59 //局部组件三
- 60 three:{
- 61 template:"#three",
- 62 //组件数据
- 63 data(){
- 64 return{
- 65 msg:1
- 66 }
- 67 },
- 68 methods:{
- 69 add(){
- 70 this.msg++;
- 71 }
- 72 }
- 73 }
- 74 }
- 75 })
- 76 </script>
4.2.效果图
5.全局组件
可以在任何地方使用的组件；全局组件需要通过vue的属性component去创建；
5.1.实例代码
- 1 <html lang="en">
- 2 <head>
- 3 <meta charset="UTF-8">
- 4 <title>vue局部组件和全局组件</title>
- 5 <script src="./js/vue.min.js"></script>
- 6 <style>
- 7 *{
- 8 margin: 0px;
- 9 padding: 0px;
- 10 }
- 11 .myp{
- 12 width: 100px;
- 13 height: 100px;
- 14 background-color: greenyellow;
- 15 float:left;
- 16 margin-left:12px;
- 17 }
- 18 </style>
- 19 </head>
- 20 <body>
- 21 <div id="app">
- 22 <one></one>
- 23 <two></two>
- 24 <three></three>
- 25 <three></three>
- 26 <three></three>
- 27 <four></four>
- 28 </div>
- 29 <template id="two">
- 30 <div>
- 31 <p>
- 32 <ul>
- 33 <li>吃饭2</li>
- 34 <li>睡觉2</li>
- 35 <li>打豆豆2</li>
- 36 </ul>
- 37 <four></four>
- 38 </p>
- 39 </div>
- 40 </template>
- 41 <template id="three">
- 42 <p class="myp" @click="add">{{msg}}</p>
- 43 </template>
- 44 <template id="four">
- 45 <p>么么哒~~~</p>
- 46 </template>
- 47 </body>
- 48 </html>
- 49 <script>
- 50 //vue的全局组件
- 51 //全局组件可以在任意地方使用，需要使用vue实例的component属性创建
- 52 Vue.component("four",{
- 53 template:"#four"
- 54 });
- 55 //创建vue实例对象
- 56 var vm = new Vue({
- 57 //挂载点
- 58 el:"#app",
- 59 //局部组件需要注册
- 60 components:{
- 61 //注册局部组件
- 62 one:{
- 63 //局部组件模板
- 64 template:"<ul><li>吃饭</li><li>睡觉</li><li>打豆豆</li></ul>"
- 65 },
- 66 two:{
- 67 template:"#two"
- 68 },
- 69 //局部组件三
- 70 three:{
- 71 template:"#three",
- 72 //组件数据
- 73 data(){
- 74 return{
- 75 msg:1
- 76 }
- 77 },
- 78 methods:{
- 79 add(){
- 80 this.msg++;
- 81 }
- 82 }
- 83 }
- 84 }
- 85 })
- 86 </script>
5.2.效果图
经验首页