需求
在歷史問題的情況下,存在需要往jquery項目中引入vue.js框架的情況,這種情況下,因爲前期並沒有使用webpack
進行打包壓縮,所以考慮直接使用原生的js
拆分vue.js
的組件,不依賴與wabpack
等打包軟件。
思路
因爲沒有使用webpack以及babel等高級語法編譯工具,只有jquery支持,所以我採用將組件按照該html以及js進行文件夾封裝,然後採用jquery
的load
方法來導入組件。
示例
1. 首先編寫基礎文檔結構
2.組件login的編寫
login.html
<template id="register-tpl">
<div>
<h1 class="register-h1">註冊組件</h1>
</div>
</template>
<style>
.register-h1{
color: cyan;
font-family: "Microsoft YaHei UI";
}
</style>
login.js
var login = {
template: "#login-tpl",
data() {
return {
msg: '123',
};
}
};
3.組件register的編寫
register.html
<template id="register-tpl">
<div>
<h1 class="register-h1">註冊組件</h1>
</div>
</template>
<style>
.register-h1{
color: cyan;
font-family: "Microsoft YaHei UI";
}
</style>
register.js
// 創建註冊組件
var register = {
template: '#register-tpl'
};
4.編寫index.html頁面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 導入jqeury -->
<script src="lib/jquery/jquery-3.4.1.min.js"></script>
<!-- 導入vue.js庫 -->
<script src="lib/vue.js"></script>
</head>
<body>
<div id="app">
<a href="" @click.prevent=" comName='login' ">登陸</a>
<a href="" @click.prevent=" comName='register' ">註冊</a>
<!-- Vue提供了 component ,來展示對應名稱的組件 -->
<!-- component 是一個佔位符, :is 屬性,可以用來指定要展示的組件的名稱 -->
<component :is="comName"></component>
</div>
<!-- 導入組件的import.js -->
<script src="import.js"></script>
<!-- 導入main.js -->
<script src="main.js"></script>
</body>
</html>
在這裏要注意:jquery的load方法是不能用在 vue 的 app 容器內的,但是外部就可以直接調用。
所以在下面的使用import.js
引入所有組件的內容,然後用 main.js
來編寫 vm
實例。
5. 編寫import.js
// 導入login組件
$('<login></login>').insertAfter("#app"); // 在app後面加入login標籤
$('login').load('./components/login/login.html'); // 導入login.html
document.write('<script src="components/login/login.js"></script>');
// 導入register組件
$('<register></register>').insertAfter("#app");
$('register').load('./components/register/register.html');
document.write('<script src="components/register/register.js"></script>');
6.編寫main.js
// 創建Vue的實例
var vm = new Vue({
el: '#app',
data: {
comName: '', // 設置默認的組件顯示登陸
},
components: {
login, // 註冊login組件
register, // 註冊register組件
}
});
7.在瀏覽器打開index.html查看效果
好了,到這裏基本的組件拆分已經實現。
更多精彩原創Devops文章,快來關注我的公衆號:【Devops社羣】 吧: