Vue 官網(wǎng)：https://cn.vuejs.org/
關(guān)于 Vue 的基礎(chǔ)大家可以在官網(wǎng)的【起步】去學(xué)習(xí)，本系列文章主要針對(duì)實(shí)例項(xiàng)目應(yīng)用
1.在線引用：
<!-- 直接引用 --><script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script>2.下載 js 文件（推薦）：
(1)在瀏覽器中打開(kāi)下面鏈接：
https://cdn.jsdelivr.net/npm/vue/dist/vue.js
(2)全選，拷貝，新建 js 文件，粘貼，然后倒入本地的 js 文件即可
3.使用 npm 安裝（待補(bǔ)鏈接）
1.開(kāi)發(fā)工具使用的是 HBuilder，先創(chuàng)建一個(gè) web 項(xiàng)目：
2.在 js 下創(chuàng)建 app.js，在 css 下創(chuàng)建 style.css，截圖：
注意介紹都寫在注釋里了
3.index.html 文件代碼：
<!DOCTYPE html><html> <head> <meta charset='utf-8' /> <title>VueLearn-cnblogs/xpwi</title> <!--引入自定義的樣式--> <link rel='stylesheet' href='css/style.css' /> <!--引入 vue 核心 js--> <script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script> </head> <body> <!--vue-app 是根容器，定義一個(gè) id，然后在 js 里操作--> <div id='vue-app'> <!--name 具體的值是在 js 中定義的，{{}}不會(huì)顯示在頁(yè)面上 --> <h2>{{name}}</h2> </div> <!--引入自己的 js，注意必須寫在 body 標(biāo)簽里最后，因?yàn)楸仨毾燃虞d你的整個(gè) HTML DOM，才回去執(zhí)行 vue 實(shí)例--> <script type='text/javascript' src='js/app.js' ></script> </body></html>4.寫 app.js 代碼：
//實(shí)例化 vue 對(duì)象new Vue({ //注意代碼格式 //el：element 需要獲取的元素，一定是 html 中的根容器元素 el:'#vue-app', data:{ name:'肖朋偉' }});5.截圖：
1.app.js 文件：
//實(shí)例化 vue 對(duì)象new Vue({ //注意代碼格式 //el：element 需要獲取的元素，一定是 html 中的根容器元素 el:'#vue-app', data:{ name:'肖朋偉' }, //存儲(chǔ)自己的方法 methods:{ welcome: function(){ alert(' welcome to learn with me!'); }, good: function(time){ alert('Good ' + time + ' ' + this.name + '!' ) } }});2.html 文件：
<!DOCTYPE html><html> <head> <meta charset='utf-8' /> <title>VueLearn-cnblogs/xpwi</title> <!--引入自定義的樣式--> <link rel='stylesheet' href='css/style.css' /> <!--引入 vue 核心 js--> <script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script> </head> <body> <!--vue-app 是根容器，定義一個(gè) id，然后在 js 里操作--> <div id='vue-app'> <!--welcome 具體的值是在 js 中定義的--> {{welcome()}} <!--方法傳參數(shù)--> {{good('afternoon')}} </div> <!--引入自己的 js，注意必須寫在 body 標(biāo)簽里最后，因?yàn)楸仨毾燃虞d你的整個(gè) HTML DOM，才回去執(zhí)行 vue 實(shí)例--> <script type='text/javascript' src='js/app.js' ></script> </body></html>1.app.js 文件：
//實(shí)例化 vue 對(duì)象new Vue({ //注意代碼格式 //el：element 需要獲取的元素，一定是 html 中的根容器元素 el:'#vue-app', data:{ name:'肖朋偉', blogUrl:'https://www.cnblogs.com/xpwi', csdnUrl:'https://blog.csdn.net/qq_40147863', /*定義 html 代碼塊，在 html標(biāo)簽中綁定獲取 【特別注意】：?jiǎn)我?hào)和雙引號(hào)交替使用，不然都不知道怎么蹦的 */ csdnHtml:'<a href='https://blog.csdn.net/qq_40147863'>CSDN 地址</a>', }, //存儲(chǔ)自己的方法 methods:{ welcome: function(){ alert(' welcome to learn with me!'); }, good: function(time){ alert('Good ' + time + ' ' + this.name + '!' ) } }});2.html 文件：
<!DOCTYPE html><html> <head> <meta charset='utf-8' /> <title>VueLearn-cnblogs/xpwi</title> <!--引入自定義的樣式--> <link rel='stylesheet' href='css/style.css' /> <!--引入 vue 核心 js--> <script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script> </head> <body> <!--vue-app 是根容器，定義一個(gè) id，然后在 js 里操作--> <div id='vue-app'> <!-- v-bind 是 vue 中給標(biāo)簽屬性綁定 js 中定義的值 --> <a v-bind:href='blogUrl'>博客園地址</a> <br /> <input type='text' v-bind:value='name' /> <br /> <!--v-html 是拿 js 中的數(shù)據(jù)然后將字符串轉(zhuǎn)換成 html 代碼--> <p v-html='csdnHtml'></p> </div> <!--引入自己的 js，注意必須寫在 body 標(biāo)簽里最后，因?yàn)楸仨毾燃虞d你的整個(gè) HTML DOM，才回去執(zhí)行 vue 實(shí)例--> <script type='text/javascript' src='js/app.js' ></script> </body></html>
3.截圖：
聯(lián)系客服
