1、環境配置
安裝VsCode安裝包管理工具：直接下載 NodeJS 進行安裝即可，NodeJS自帶 Npm 包管理工具，下載地址：https://nodejs.org/en/download/安裝完成後在命令列執行以下命令檢視npm包管理器版本npm -vnpm中文文件：https://www.npmjs.cn/
配置淘寶映象
npm install cnpm -g --registry=https://registry.npm.taobao.org然後執行 cnpm -v 檢視版本資訊
E:\影片\VUE>cnpm [email protected] (C:\Users\Administrator\AppData\Roaming\npm\node_modules\cnpm\lib\parse_argv.js)[email protected] (C:\Users\Administrator\AppData\Roaming\npm\node_modules\cnpm\node_modules\npm\lib\npm.js)[email protected] (D:\Program Files\nodejs\node.exe)[email protected] (C:\Users\Administrator\AppData\Roaming\npm\node_modules\cnpm\node_modules\npminstall\lib\index.js)prefix=C:\Users\Administrator\AppData\Roaming\npmwin32 x64 6.1.7601registry=https://registry.npm.taobao.org下載vue.js(包含完整的警告和除錯模式)與vue.min.js(刪除了警告，30.96KB min+gzip)
安裝 live-server 作為伺服器用npm進行全域性安裝（-g引數）
cnpm install -g live-server然後在任何一個Html頁面檔案路徑下執行 live-server 就會開啟
然後執行 cnpm init 進行初始化
E:\影片\VUE>cnpm initThis utility will walk you through creating a package.json file.It only covers the most common items, and tries to guess sensible defaults.See `npm help json` for definitive documentation on these fieldsand exactly what they do.Use `npm install <pkg>` afterwards to install a package andsave it as a dependency in the package.json file.Press ^C at any time to quit.package name: (vue) vueversion: (1.0.0) 1.0.0description: Vue Demoentry point: (index.js)test command:git repository:keywords:author:license: (ISC)About to write to E:\影片\VUE\package.json:{ "name": "vue", "version": "1.0.0", "description": "Vue Demo", "main": "index.js", "directories": { "example": "example" }, "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC"}Is this OK? (yes) yes會在主資料夾下生成 package.json 檔案來儲存初始化資訊配置
package.json：
{ "name": "vue", "version": "1.0.0", "description": "Vue Demo", "main": "index.js", "directories": { "example": "example" }, "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC"}2、VUE內部指令
2.1 helloworld
編寫第一個HelloWorld程式碼：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Helloworld</title> <script type="text/javascript" src="../assets/js/vue.js"></script></head><body> <h1>Hello World</h1> <hr> <div id="app"> {{message}} </div> <script type="text/javascript"> var app = new Vue({ el: '#app', data: { message: "hello Vue!!!!" } }) </script></body></html>2.2 v-if v-else v-show 指令
v-if的使用
v-if:是vue 的一個內部指令，指令用在我們的html中。v-if用來判斷是否載入html的DOM，比如我們模擬一個使用者登入狀態，在使用者登入後顯示使用者名稱稱。關鍵程式碼：
<div v-if="isLogin">你好</div>v-show的使用調整css中display屬性，DOM已經載入，只是CSS控制沒有顯示出來。
<div v-show="isLogin">你好</div>完整html程式碼：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>v-if&v-else&v-show</title> <script type="text/javascript" src="../assets/js/vue.js"></script></head><body> <h1>v-if&v-else&v-show</h1> <hr> <div id="app"> <div v-if="isLogin">你好v-if</div> <div v-else>你好v-else</div> <div v-show="isLogin">你好v-show</div> </div> <script type="text/javascript"> var app = new Vue({ el: '#app', data: { isLogin:false } }) </script></body></html>v-if 和v-show的區別：
v-if： 判斷是否載入，可以減輕伺服器的壓力，在需要時載入。v-show：調整css dispaly屬性，可以使客戶端操作更加流暢。2.3、v-for指令 ：解決模板迴圈問題
模板寫法
<li v-for="item in items"> {{item}}</li>js寫法
var app=new Vue({ el:'#app', data:{ items:[20,23,18,65,32,19,54,56,41] }})完整程式碼：
<!DOCTYPE html><html lang="en"><head> <title>v-for</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <script type="text/javascript" src="../assets/js/vue.js"></script></head><body> <h1>v-for 例項</h1> <hr> <div id="app"> <ul> <li v-for="item in sortItems">{{item}}</li> </ul> <ul> <li v-for="(student,index) in srotStudents"> {{index+1}}:{{student.name}}-{{student.age}} </li> </ul> </div> <script type="text/javascript"> var app = new Vue({ el: '#app', data: { items: [20, 23, 18, 7, 32, 19, 54, 56, 41], students: [{ name: "JS", age: 33 }, { name: "Panda", age: 28 }, { name: "Panpan", age: 23 }, { name: "King", age: 14 }, ] }, computed: { sortItems: function () { return this.items.sort(SortNumber); }, srotStudents: function () { return sortByKey(this.students,'age') } }, }) function SortNumber(a, b) { return a - b; } //陣列物件方法排序: function sortByKey(array, key) { return array.sort(function (a, b) { var x = a[key]; var y = b[key]; return ((x < y) ? -1 : ((x > y) ? 1 : 0)); }); } </script></body></html>2.4、v-text & v-html
我們已經會在html中輸出data中的值了，我們已經用的是{{xxx}},這種情況是有弊端的，就是當我們網速很慢或者javascript出錯時，會暴露我們的{{xxx}}。Vue給我們提供的 v-text ,就是解決這個問題的。我們來看程式碼：
<span>{{ message }}</span>=<span v-text="message"></span><br/>如果在javascript中寫有html標籤，用v-text是輸出不出來的，這時候我們就需要用 v-html 標籤了。
<span v-html="msgHtml"></span>雙大括號會將資料解釋為純文字，而非HTML。為了輸出真正的HTML，你就需要使用v-html 指令。 需要注意的是：在生產環境中動態渲染HTML是非常危險的，因為容易導致XSS攻擊。所以只能在可信的內容上使用v-html，永遠不要在使用者提交和可操作的網頁上使用。 完整程式碼：
<!DOCTYPE html><html lang="en"><head> <title>v-text & v-html 例項</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <script type="text/javascript" src="../assets/js/vue.js"></script></head><body> <h1>v-text & v-html 例項</h1> <hr> <div id="app"> <span>{{message}}</span> <span v-text="message"></span> <br> <span>{{dodo}}</span> <span v-html="dodo"></span> </div> <script type="text/javascript"> var app = new Vue({ el: '#app', data: { message: "hello Vue!", dodo:"<h2>hello Vue!</h2>" } }) </script></body></html>2.5、v-on：繫結事件監聽器
使用繫結事件監聽器，編寫一個加分減分的程式。
程式程式碼：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>v-on 例項</title> <script type="text/javascript" src="../assets/js/vue.js"></script></head><body> <h1>v-on 例項</h1> <hr> <div id="app"> 本廠比賽得分:{{score}} <p> <button v-on:click="scoreIncrease">加分</button> <button @click="scoreDecrease">減分</button> <br /> <input type="text" v-on:keyup.enter="onEnter" v-model="score2"> </p> </div> <script type="text/javascript"> var app = new Vue({ el: '#app', data: { score: 0, score2: 1 }, methods: { scoreIncrease: function () { this.score++; }, scoreDecrease: function () { if (this.score > 0) { this.score--; } }, onEnter: function () { this.score +=parseInt(this.score2); } } }) </script></body></html>我們的v-on 還有一種簡單的寫法，就是用@代替。
<button @click="jianfen">減分</button>我們除了繫結click之外，我們還可以繫結其它事件，比如鍵盤迴車事件v-on:keyup.enter,現在我們增加一個輸入框，然後繫結回車事件，回車後把文字框裡的值加到我們的count上。 繫結事件寫法：
<input type="text" v-on:keyup.enter="onEnter" v-model="secondCount">javascript程式碼：
onEnter:function(){ this.count=this.count+parseInt(this.secondCount);}因為文字框的數字會預設轉變成字串，所以我們需要用 parseInt() 函式進行整數轉換。
你也可以根據鍵值表來定義鍵盤事件：
2.6、v-model指令
v-model指令，我理解為繫結資料來源。就是把資料繫結在特定的表單元素上，可以很容易地實現雙向資料繫結。
我們來看一個最簡單的雙向資料繫結程式碼
html檔案：
<div id="app"> <p>原始文字資訊：{{message}}</p> <h3>文字框</h3> <p>v-model:<input type="text" v-model="message"></p></div>javascript程式碼：
var app=new Vue({ el:'#app', data:{ message:'hello Vue!' } })修飾符
.lazy：取代 imput 監聽 change 事件。.number：輸入字串轉為數字。.trim：輸入去掉首尾空格。文字區域加入資料繫結
<h3>多選按鈕繫結一個值</h3><input type="checkbox" id="isTrue" v-model="isTrue"><label for='isTrue'>{{isTrue}}</label>多選繫結一個數組
<h3>多選繫結一個數組</h3><p> <input type="checkbox" id="JS" value="JS" v-model="web_Names"> <label for="JS">JS</label><br /> <input type="checkbox" id="Panda" value="Panda" v-model="web_Names"> <label for="Panda">Panda</label><br /> <input type="checkbox" id="PanPan" value="PanPan" v-model="web_Names"> <label for="PanPan">PanPan</label> <p>{{web_Names}}</p></p>單選按鈕繫結
<h3>單選按鈕繫結</h3><input type="radio" id="one" value="男" v-model="sex"><label for="one">男</label><input type="radio" id="two" value="女" v-model="sex"><label for="two">女</label><p>{{sex}}</p>完整程式碼：
<!DOCTYPE html><html lang="en"><head> <title>v-model 例項</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <script type="text/javascript" src="../assets/js/vue.js"></script></head><body> <h1>v-model 例項</h1> <hr> <div id="app"> <p>原始文字資訊：{{message}}</p> <h3>文字框</h3> <p>v-model：<input type="text" v-model="message"></p> <p>v-model.lazy：<input type="text" v-model.lazy="message"></p> <p>v-model.number：<input type="text" v-model.number="message"></p> <p>v-model.trim<input type="text" v-model.trim="message"></p> <hr> <h3>文字域</h3> <textarea cols="30" rows="10" v-model="message"></textarea> <hr> <h3>多選按鈕繫結一個值</h3> <input type="checkbox" id="isTrue" v-model="isTrue"> <label for='isTrue'>{{isTrue}}</label> <hr> <h3>多選繫結一個數組</h3> <p> <input type="checkbox" id="JS" value="JS" v-model="web_Names"> <label for="JS">JS</label><br /> <input type="checkbox" id="Panda" value="Panda" v-model="web_Names"> <label for="Panda">Panda</label><br /> <input type="checkbox" id="PanPan" value="PanPan" v-model="web_Names"> <label for="PanPan">PanPan</label> <p>{{web_Names}}</p> </p> <hr> <h3>單選按鈕繫結</h3> <input type="radio" id="one" value="男" v-model="sex"> <label for="one">男</label> <input type="radio" id="two" value="女" v-model="sex"> <label for="two">女</label> <p>{{sex}}</p> </div> <script type="text/javascript"> var app = new Vue({ el: '#app', data: { message: "hello Vue!!!!", isTrue: true, web_Names: [], sex:"男" } }) </script></body></html>2.7、v-bind 指令
v-bind是處理HTML中的標籤屬性的，例如
就是一個標籤，也是一個標籤，我們繫結上的src進行動態賦值。
html檔案：
<div id="app"> <img v-bind:src="imgSrc" width="200px"></div>在html中我們用v-bind:src=”imgSrc”的動態綁定了src的值，這個值是在vue構造器裡的data屬性中找到的。
js檔案：
var app = new Vue({ el: '#app', data: { imgSrc: "https://www.baidu.com/img/baidu_jgylogo3.gif", }})我們在data物件中增加了imgSrc屬性來供html呼叫
v-bind 縮寫
在工作中我們經常使用v-bind來繫結css樣式：
在繫結CSS樣式時，繫結的值必須在vue中的data屬性中進行宣告。
直接繫結class樣式<div :class="className">1、繫結classA</div>繫結classA並進行判斷，在isOK為true時顯示樣式，在isOk為false時不顯示樣式。<div :class="{classA:isOk}">2、繫結class中的判斷</div>繫結class中的陣列<div :class="[classA,classB]">3、繫結class中的陣列</div>繫結class中使用三元表示式判斷<div :class="isOk?classA:classB">4、繫結class中的三元表示式判斷</div>繫結style<div :style="{color:red,fontSize:font}">5、繫結style</div>用物件繫結style樣式<div :style="styleObject">6、用物件繫結style樣式</div>var app=new Vue({ el:'#app', data:{ styleObject:{ fontSize:'24px', color:'green' } }})2.8、其他內部指令(v-pre & v-cloak & v-once)
v-pre指令
在模板中跳過vue的編譯，直接輸出原始值。就是在標籤中加入v-pre就不會輸出vue中的data值了。
<div v-pre>{{message}}</div>這時並不會輸出我們的message值，而是直接在網頁中顯示{{message}}
v-cloak指令
在vue渲染完指定的整個DOM後才進行顯示。它必須和CSS樣式一起使用，
[v-cloak] { display: none;}<div v-cloak> {{ message }}</div>v-once指令
在第一次DOM時進行渲染，渲染完成後視為靜態內容，跳出以後的渲染過程。
<div v-once>第一次繫結的值：{{message}}</div><div><input type="text" v-model="message"></div>
最新評論