vue常用建立元件幾種方式總結
阿新 • • 發佈：2018-11-12
最近一週需要使用vue開發一個谷歌擴充套件外掛，但是又不能在vue-cli腳手架中開發，所以只能單獨引入vue.js整個包進行指令碼植入開發。引入vue.js就代表著不能用import、require之類的引入單檔案元件檔案，只能在檔案中開發，或者多個js檔案分先後順序植入開發，然後就出現了一個尷尬的問題就是，忘記了最原本的其他元件建立的方式，所以記錄回顧下：
1. 全域性註冊元件：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="app"> <my-component></my-component> </div> <template id="myComponent"> <div>This is a component!</div> </template> </body> <script src="js/vue.js"></script> <script> Vue.component('my-component',{ template: '#myComponent', data(){ return {} }, methods: { } }) new Vue({ el: '#app' }) </script> </html>
2. 區域性註冊元件
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>區域性註冊元件</title> </head> <body> <section id="app"> <my-component-a></my-component-a> <my-component-b></my-component-b> </section> <template id="a"> <h1>這是一個A元件</h1> </template> <template id="b"> <h2>這是一個B元件</h2> </template> <script type="text/javascript" src="js/vue.js"></script> <script type="text/javascript"> const componentA = { template: '#a', data(){ return { } } //... } const componentB = { template: '#b', data(){ return { } } //... } var vm = new Vue({ el: '#app', components: { // 區域性註冊，my-component-a是標籤名稱 'my-component-a': componentA, // 區域性註冊，my-component-b是標籤名稱 'my-component-b': componentB } }) </script> </body> </html>
3. 使用x-template引入模板
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>x-template註冊元件</title> </head> <body> <script type="text/javascript" src="js/vue.js"></script> <script type="text/x-template" id="checkbox-template"> <div class="checkbox-wrapper" @click="check"> <div :class="{ checkbox: true, checked: checked }"></div> <div class="title"></div> </div> </script> <script type="text/javascript"> Vue.component('my-checkbox', { template: '#checkbox-template', data() { return { checked: false, title: 'Check me' } }, methods: { check() { this.checked = !this.checked; } } }); </script> </body> </html>
4. render函式註冊元件（ 類似於虛擬DOM的實現 ）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>render註冊元件</title>
</head>
<body>
<my-checkbox></my-checkbox>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
Vue.component('my-checkbox', {
data() {
return {
checked: false,
title: 'Check me'
}
},
methods: {
check() {
this.checked = !this.checked;
}
},
render(createElement) {
return createElement('div', {
attrs: {
'class': 'checkbox-wrapper'
},
on: {
click: this.check
}
},
[
createElement('div', {
'class': {
checkbox: true,
checked: this.checked
}
}),
createElement('div', {
attrs: {
'class': 'title'
}
}, [this.title] )
]);
}
});
</script>
</body>
</html>5. jsx註冊元件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jsx註冊元件</title>
</head>
<body>
<my-checkbox></my-checkbox>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
Vue.component('my-checkbox', {
data() {
return {
checked: false,
title: 'Check me'
}
},
methods: {
check() {
this.checked = !this.checked;
}
},
render() {
return <div class = "checkbox-wrapper"onClick = { this.check}>
<div class = {
{
checkbox: true,
checked: this.checked
}
}></div>
<div class="title">{ this.title }</div>
</div> } });
</script>
</body>
</html>其他元件相關知識點總結：
1. Vue.extend
概述：Vue.extend返回的是一個“擴充套件例項構造器”，也就是預設了部分選項的Vue的例項構造器，它常常服務於Vue.component用來生成元件，可以簡單理解為當在模板中遇到該元件作為標籤的自定義元素時，會自動呼叫“擴充套件例項構造器”來生產元件例項，並掛在到自定義元素上
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue.extend使用</title>
</head>
<body>
<author></author>
<div id="author"></div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
//掛載到標籤為author自定義標籤上
var author1 = Vue.extend({
template: "<p><a :href='url'>{{author}}</a></p>",
data : function() {
return {
author : 'vamous',
url : 'http://blog.csdn.net/Dear_Mr/article/details/72614370'
}
}
});
new author1().$mount('author');
//使用propsData 掛載到id為author標籤上
var author2 = Vue.extend({
template: "<p><a :href='url'>{{author}} & {{name}}</a></p>",
data : function() {
return {
author : 'vamous',
url : 'http://blog.csdn.net/Dear_Mr/article/details/72614370'
}
},
props : ['name']
});
new author2({propsData: {name : 'dear_mr'}}).$mount('#author');
</script>
</body>
</html>2. Vue.extend 和 Vue.component的區別和聯絡
extend 是構造一個元件的語法器.
你給它引數 他給你一個元件 然後這個元件
你可以作用到Vue.component 這個全域性註冊方法裡， 也可以在任意vue模板裡使用car元件
var car = Vue.extend({
//….
})
Vue.component('car',car)你可以作用到vue例項或者某個元件中的components屬性中並在內部使用car元件
new Vue({
components:{
car:car
}
})Vue.component 你可以建立 ，也可以取元件 例如下
var car = Vue.component('car')