title: script標簽引入vue方式開發如何寫組件
date: 2020-05-08
sidebarDepth: 2
tags:
- vue
- 組件
- script
- 標簽
categories: - vue
轉載自：https://www.cnblogs.com/xingxingclassroom/p/9140115.html
很多人知道.vue結構的單文件組件形式，不過這種單文件組件的結構如果要加入到現有的jquery項目中就比較麻煩了，那如果我們又想用vue來寫模板，又不想引入vue-cli管理，那該怎么來寫組件呢？
- 1.首先在正常使用cdn引入jquery的項目中，也用script標簽引入Vue.js文件。
- 2.為了方便測試我們在頁面中寫個按鈕，這個按鈕的作用就是要展示jquery和vue同時正確使用並不互相沖突。
- 3.下面進入正題，我們來定義我們的vue組件。
- 4.父頁面調用這個組件，最外層必須是vue的實例id為app的div元素包裹才行。
- 5.另一則案例
很多人知道.vue結構的單文件組件形式，不過這種單文件組件的結構如果要加入到現有的jquery項目中就比較麻煩了，那如果我們又想用vue來寫模板，又不想引入vue-cli管理，那該怎么來寫組件呢？別着急往下看！
1.首先在正常使用cdn引入jquery的項目中，也用script標簽引入Vue.js文件。
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script>
2.為了方便測試我們在頁面中寫個按鈕，這個按鈕的作用就是要展示jquery和vue同時正確使用並不互相沖突。
<input id="btn" type="button" value="jquery操作">
3.下面進入正題，我們來定義我們的vue組件。
Vue.component("card",{
props:{//這里是組件可以接受的參數，也就是相當於面向原型寫組件時的配置參數，用戶可以傳遞不同參數，自己定義組件
cardTitle:{//卡片標題
type:String,
default:'這是一個卡片'
},
list:{//列表內容
type:Array,
default:[]
}
},
template:`
<div class="modal">
<div class="modal-header">
<h4>{{cardTitle}}</h4>
</div>
<div class="modal-content">
<div>
<slot name="modal-content">可以擴展的卡片內容</slot>
<ul>
<li v-for="(item,index) in list">{{item}}</li>
</ul>
</div>
</div>
<div class="modal-footer">
<slot name="modal-footer">
<input class="btn blue" type="button" value="ok" @click="okHandle" />
<input class="btn" type="button" value="cancel" @click="cancelHandle" />
</slot>
</div>
</div>
`,
methods:{//這里定義的組件的方法，利用$emit()進行父子組件通信，子組件通過點擊事件告訴父組件觸發一個自定義事件，$emit()方法第二個參數也可以用來傳遞數據
okHandle(){
this.$emit("ok");
},
cancelHandle(){
this.$emit('cancel')
}
}
});
ps：代碼中有slot的地方是分發內容的定制模板，slot為modal-content 定制提醒信息模板，slot為modal-footer 定制底部模板。你可以在父頁面進行卡片樣式的更改和功能的增減。定義好的這個組件在父頁面中也要以script標簽的形式引入進來，當然你也可以直接定義在父頁面中，這個按照你自己的需求和邏輯來寫。
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script>
<script src="./modal.js"></script>
4.父頁面調用這個組件，最外層必須是vue的實例id為app的div元素包裹才行。
<div id="app">
<div>
<card :list="list" @ok="okMethods" @cancel="cancelMethods"></card>
</div>
</div>
ps：使用jquery點擊按鈕觸發一個dom操作的事件與vue實例對象中的組件之間並沒有任何沖突，不過這里要注意的是，jquery的代碼盡量不要寫在vue實例的方法methods中，防止出現Bug，另外在htm的書寫過程中，所有關於jquey的dom操作都最好也應該寫在id為app的vue實例區域的外面，這樣才能避免其他bug。
<script>
$('#btn').on('click',function(){
console.log('jquery操作');
})
new Vue({
el:'#app',
data:{
list:[1,2,3,4]
},
methods:{
okMethods:function (){
console.log("ok")
},
cancelMethods:function (){
console.log("cancel")
}
}
});
</script>
5.另一則案例
header.js
var headerTemplate = '<div> header HTML 代碼</div>'
Vue.component('my-header', {
template: headerTemplate,
data: xxx,
methods: {}
// ...
})
通過 script標簽引入 header.js, 然后在 header.html 內就可以使用了, 比如:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="vue.min.js"></script>
<script src="header.js"></script>
</head>
<body>
<div id="main">
<my-header></my-header>
</div>
<script>
new Vue({
el: '#main'
})
</script>
</body>
</html>