大家在工作的情況中，可能會(huì)遇到之前的老項(xiàng)目采用jq書(shū)寫(xiě)，或者修改或者新增功能在jq中，原始jq的項(xiàng)目,代碼可維護(hù)性很差,一個(gè)頁(yè)面幾千行jq,可維護(hù)性很差,工作量巨大，所以這個(gè)時(shí)候大家可以引入vue.js。

第一步：引入vue.js

這里給大家提供兩種方式

cdn：

	<!-- 引入vue.js --><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

本地文件導(dǎo)入：

<script src="./vue/vue.min.js" type="text/javascript"></script>

下載地址：

阿里云地址：阿里云盤(pán)分享https://www.aliyundrive.com/s/JwJppQFQCQB提取密碼：t59b

注意：vue.js要在jq.js之前引入

第二步：創(chuàng)建一個(gè)vue實(shí)例

?在自己的js文件代碼中創(chuàng)建一個(gè)vue實(shí)例，測(cè)試一下

	    var app = new Vue();console.log(app);

打印結(jié)果：

?到這步，就說(shuō)明我的vue實(shí)例創(chuàng)建成功可以使用vue的語(yǔ)法和生命周期函數(shù)了。

?

復(fù)制代碼：

這里的el后面跟的是整個(gè)頁(yè)面最大父級(jí)的id 我這邊取名就叫app 大家寫(xiě)的時(shí)候，別忘在頁(yè)面最大的父級(jí)綁定一個(gè)id，然后el的值就是大家綁定的id。這個(gè)很重要

// 使用vue實(shí)例 可以使用vue的方法和生命函數(shù)
new Vue({el:'#app',data:{text:'這是一個(gè)vue實(shí)例',list:['1','2','3']},methods:{initData(){this.list=['我愛(ài)你','你愛(ài)我','哈哈哈哈']}},created(){this.initData()},
});

最后希望可以幫助到大家，創(chuàng)作不易，請(qǐng)點(diǎn)個(gè)贊再走！