vue升华—组件化
1 template 模板
不建议用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>vue1</title> <script src="https://unpkg.com/vue@2.5.16/dist/vue.js"></script> </head> <body> <div id="app"> </div> <script> // template 模板，可以将里面的内容渲染到绑定的div里 new Vue({ el : "#app", template : '<div>王振玲</div>', // template : '<div>{{ msg }}</div>' data :{ msg : "liuluwei" } }) </script> </body> </html>
2 创建组件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>vue1</title> <script src="https://unpkg.com/vue@2.5.16/dist/vue.js"></script> </head> <body> <div id="app"> <my-component></my-component> </div> <script> // 创建组件："my-component"自定义组件名称templete后用反引号 Vue.component("my-component",{ template : ` // 多个节点，需要用一个根节点包裹 <div> <h1>联系方式</h1> <p>联系方式：{{ msg }}</p> </div>`, // 组件化里面的data必须写成函数，然后return返回值 data:function(){ return{ msg:12344567554 } } })
new Vue({ el:"#app" }) </script> </body> </html>
3 组件中的data
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>vue1</title> <script src="https://unpkg.com/vue@2.5.16/dist/vue.js"></script> </head> <body> <div id="app"> <my-conponent></my-conponent> <my-conponent></my-conponent> </div> <script> Vue.component("my-conponent", { template: `<div> <button @click = 'clickMe'>{{ count }}</button> </div>`, //组件中data必须是一个函数 data: function() { return { count: 0 } }, methods:{ clickMe:function(){ this.count++ } } }) new Vue({ el: "#app" }) </script> </body> </html>
4 全局组件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>vue1</title> <script src="https://unpkg.com/vue@2.5.16/dist/vue.js"></script> </head> <body> <div id="app1"> <my-conponent></my-conponent> </div> <div id="app2"> <my-conponent></my-conponent> </div> <script> Vue.component("my-conponent", { template: `<div> <h1>联系方式</h1> <p>联系我：{{ msg }}</p> </div>`, data: function() { return { msg:123455688 } } }) //创建一个vue实例，控制id=app1的div new Vue({ el: "#app1" }) //创建一个vue实例，控制id=app2的div new Vue({ el: "#app2" }) </script> </body> </html>
5 全局组件的另一种写法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>vue1</title> <script src="https://unpkg.com/vue@2.5.16/dist/vue.js"></script> </head> <body> <div id="app1"> <my-conponent></my-conponent> </div> <div id="app2"> <my-conponent></my-conponent> </div> <script> var component = { template: `<div> <h1>联系方式</h1> <p>联系我：{{ msg }}</p> </div>`, data: function() { return { msg:123455688 } } } Vue.component("my-conponent", component) //创建一个vue实例，控制id=app1的div new Vue({ el: "#app1" }) //创建一个vue实例，控制id=app2的div new Vue({ el: "#app2" }) </script> </body> </html>
6 局部组件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>vue1</title> <script src="https://unpkg.com/vue@2.5.16/dist/vue.js"></script> </head> <body> <div id="app1"> <my-conponent></my-conponent> </div> <div id="app2"> <my-conponent></my-conponent> </div> <script> var component = { template: `<div> <h1>联系方式</h1> <p>联系我：{{ msg }}</p> </div>`, data: function() { return { msg:123455688 } } } //组件只在app1里面好使 new Vue({ el: "#app1", components:{ "my-conponent" :component } }) new Vue({ el: "#app2" }) </script> </body> </html>
