前端html引入vue的元件化開發

阿新 • • 發佈：2021-02-06

前端html引入vue的元件化開發

前言
demo的結構
demo.html
child.js
總結

前言

目前，前端的框架化開發是流行趨勢。在國內，vue無疑是三大框架中最流行的。然而一些老的專案並非是基於vue-cli等工具進行的框架化開發，而是使用原生js進行的，卻想引入vue進行一些新功能開發，這就需要vue適配原生js開發的專案

demo的結構

—demo
——child.js //子元件，一個elementui-table
——demo.html //頁面
——elementui.js // elementui元件庫
——elementui.css // elementui元件庫

——vue.js // vue
專案目錄

demo.html

廢話不多說，直接上程式碼程式碼：

<!doctype html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>test</title>
		<!--引入vue-->
		<script src="./vue.js"></script>
		< 
!--引入子元件-->
        <script type="text/javascript" src="child.js"></script>
        <!-- 引入elementui -->
        <link rel="stylesheet" href="./elementui.css">
        <script src="./elementui.js"></script>
	</head> 

	<body style="font-size: 30px">
		<div id="app"></div>
	<script>
		//例項化
		var app = new Vue({
			el: "#app",
			components:{child}, // 區域性註冊子元件
			template:`
				<div :style="position">
					<child 
					:tableData="tableData" // 子元件資料注入
					:columns="columns" // 子元件資料注入
					/>
				</div>
			`,
			computed:{
				position(){
					return {
						position:"absolute",
						left:0,
						top:0,
						width:"100%",
						height:"100%"
					}
				}
			},
			data() {
				return {
					tableData: [
						{
							"date": "2016-05-02",
							"name": "王小虎",
							"address": "上海市普陀區金沙江路 1518 弄"
						},
						{
							"date": "2016-05-04",
							"name": "王小虎",
							"address": "上海市普陀區金沙江路 1517 弄"
						},
						{
							"date": "2016-05-01",
							"name": "王小虎",
							"address": "上海市普陀區金沙江路 1519 弄"
						},
						{
							"date": "2016-05-03",
							"name": "王小虎",
							"address": "上海市普陀區金沙江路 1516 弄"
						},
						{
							"date": "2016-05-03",
							"name": "王小虎",
							"address": "上海市普陀區金沙江路 1516 弄"
						}
					],
					columns: [
						{
							"prop": "name",
							"label": "姓名",
							"width": "100"
						},
						{
							"prop": "date",
							"label": "日期",
							"width": "200"
						},
						{
							"prop": "address",
							"label": "地址",
							"width": "200"
						}
					]
				}
			}
		})
	</script>
	</body>

</html>

child.js

chid.js其實是一個elementui-table的元件：

var child = {
    name:"child",
    props:{
        tableData:{
            type:Array,
            required:true
        },
        columns:{
            type:Array,
            required:true
        }
    },
    template:`
        <el-table 
            style="width:100%"
            height="100%"
            :data="tableData"
            @cell-click="cellClick"
        >
            <el-table-column v-for="item in columns"
            :key="item.prop"
            :label="item.label"
            :prop="item.prop"/>
        </el-table>
    `,
    methods:{
        cellClick(row, column,cell, event){
            alert("row: " + JSON.stringify(row));
        }
    }
}