017_Vue组件
1. 全局組件
1.1. 全局組件注冊語法
Vue.component(組件名稱, {data: 組件數據,template: 組件模板內容,methods: {} })1.2. 組件使用, 組件可以重用
<div id="app"><組件名稱></組件名稱><組件名稱></組件名稱><組件名稱></組件名稱> </div>1.3. 代碼
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>全局組件</title></head><body><div id="app"><button-counter></button-counter><button-counter></button-counter><button-counter></button-counter></div><script type="text/javascript" src="vue.min.js"></script><script type="text/javascript">// 自定義全局組件Vue.component("button-counter", {data: function(){return {count: 0}},template: "<button @click='handle'>點擊了{{count}}次</button>",methods: {handle: function(){this.count += 1;}}});var vm = new Vue({el: "#app",data: {}});</script></body> </html>1.4. 效果圖
1.5. 組件的注意事項
1.5.1. data必須是一個函數。
1.5.2. 組件模板內容必須是單個根元素。
2. 模板字符串
2.1. 組件模板內容可以是模板字符串, 模板字符串需要瀏覽器提供支持(ES6語法), 解決模板內容較長問題。
?
2.2. 代碼?
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>組件模板字符串</title></head><body><div id="app"><button-counter></button-counter></div><script type="text/javascript" src="vue.min.js"></script><script type="text/javascript">Vue.component("button-counter", {data: function() {return {count: 0}},template: `<div><button @click="handlePlus">加加{{count}}</button><button @click="handleMinus">減減{{count}}</button></div>`,methods: {handlePlus: function(){++this.count;},handleMinus: function(){--this.count;}}});var vm = new Vue({el: "#app",data: {}});</script></body> </html>2.3. 效果圖
3. 組件命名方式
3.1. 短橫線方式
Vue.component('my-component', {})3.2. 駝峰方式(盡可能不用)
Vue.component('MyComponent', {})3.3.?如果使用駝峰式命名組件, 那么在使用組件的時候, 只能在字符串模板中用駝峰的方式使用組件, 但是在普通的標簽模板中, 必須使用短橫線的方式使用組件。
3.4.?代碼
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>組件命名</title></head><body><div id="app"><hello-world></hello-world><button-counter></button-counter></div><script type="text/javascript" src="vue.min.js"></script><script type="text/javascript">// 如果使用駝峰式命名組件, 那么在使用組件的時候, 只能在字符串模板中用駝峰的方式使用組件, 但是在普通的標簽模板中, 必須使用短橫線的方式使用組件。Vue.component("HelloWorld", {data: function() {return {msg: "HelloWorld"}},template: "<div>{{msg}}</div>"});Vue.component("button-counter", {data: function() {return {count: 0}},template: `<div><button @click="handle">點擊了{{count}}次</button><HelloWorld></HelloWorld></div>`,methods: {handle: function(){++this.count;}}});var vm = new Vue({el: "#app",data: {}});</script></body> </html>3.5.?效果圖
4. 局部組件
4.1. 局部組件使用方式
?
4.2.?代碼?
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>局部組件</title></head><body><div id="app"><hello-world></hello-world><button-counter></button-counter></div><script type="text/javascript" src="vue.min.js"></script><script type="text/javascript">var helloWorld = {data: function() {return {msg: "HelloWorld"}},template: "<div>{{msg}}</div>"};var buttonCounter = {data: function(){return {count: 0}},template: "<button @click='handle'>點擊了{{count}}次</button>",methods: {handle: function(){this.count += 1;}}}var vm = new Vue({el: "#app",components: {'hello-world': helloWorld,'button-counter': buttonCounter}});</script></body> </html>4.3.?效果圖
?
總結
- 上一篇： 016_Vue数组数据的响应式处理
- 下一篇： 019_Vue子组件向父组件传值