Vue快速入門
vue.js是目前前端web開發最流行的工具庫，由尤雨溪在2014年2月發佈的。css
另外幾個常見的工具庫：react.js /angular.jshtml
官方網站：前端
中文：https://cn.vuejs.org/vue
英文：https://vuejs.org/python
官方文檔：https://cn.vuejs.org/v2/guide/react
vue.js目前有1.x、2.x和3.x 版本，咱們學習2.x版本的。web
下載步驟：json
1. 進入中文官網：https://cn.vuejs.org/ 點擊起步。數組
2. 進入起步頁面，點擊安裝。瀏覽器
3. 進入安裝頁面，咱們學習建議使用開發版本。
4. 選擇路徑進行保存，會有一個vue.js的文件（下載完畢，放在對應的文件目錄下，一引入就可使用了）。
二. vue.js庫的基本使用
vue的引入相似於jQuery，開發中可使用開發版本vue.js，產品上線要換成vue.min.js。
咱們快速新建一個HTML文件，感覺一下吧！
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue的快速使用</title> <script src="js/vue.js"></script> </head> <body> <!--要想正常顯示vue提供的數據，必需要放在vue對象控制標籤裏--> <h2>{{title}}</h2> <div id="app"> <h2>{{title}}</h2> {{ message }} <p>{{num}}</p> <input type="text" v-model="num"> </div> <script> // vue.js的代碼開始於一個Vue對象。因此每次操做數據都要聲明Vue對象開始。 var vm = new Vue({ el: "#app", // 設置vue對象控制的標籤範圍 data: { // vue要操做的數據 "message": "hello world!", "title": "vue的快速使用", "num": 100, } }) </script> </body> </html>
代碼執行的效果：
總結：
1. vue的使用要從建立Vue對象開始 var vm = new Vue(); 2. 建立vue對象的時候，須要傳遞參數，是json對象，json對象對象必須至少有兩個屬性成員 var vm = new Vue({ el:"#app", data: { 數據變量:"變量值", 數據變量:"變量值", 數據變量:"變量值", }, }); el:設置vue能夠操做的html內容範圍，值通常就是css的id選擇器。 data: 保存vue.js中要顯示到html頁面的數據。 3. vue.js要控制器的內容外圍，必須先經過id來設置。 <div id="app"> <h2>{{title}}</h2> {{message}} </div>
三. vue.js的M-V-VM思想
M-V-VM 是Model-View-ViewModel 的縮寫，它是一種基於前端開發的架構模式。
Model 指代的就是vue對象的data屬性裏面的數據。這裏的數據要顯示到頁面中。
View 指代的就是vue中數據要顯示的HTML頁面，在vue中，也稱之爲「視圖模板」 。
在瀏覽器中能夠在 console.log經過 vm對象能夠直接訪問el和data屬性,甚至能夠訪問data裏面的數據。
console.log(vm.$el) # #app vm對象能夠控制的範圍
console.log(vm.$data); # vm對象要顯示到頁面中的數據
console.log(vm.$data.message); # 訪問data裏面的數據
console.log(vm.message);# 這個 message就是data裏面聲明的數據,也可使用 vm.變量名顯示其餘數據,message只是舉例.
總結：
1. 若是要輸出data裏面的數據做爲普通標籤的內容，須要使用{{ }} 用法： vue對象的data屬性： data:{ name:"小明", } 標籤元素： <h1>{{ name }}</h1> 2. 若是要輸出data裏面的數據做爲表單元素的值，須要使用vue.js提供的元素屬性v-model 用法： vue對象的data屬性： data:{ name:"小明", } 表單元素： <input v-model="name"> 使用v-model把data裏面的數據顯示到表單元素之後，一旦用戶修改表單元素的值，則data裏面對應數據的值也會隨之發生改變，甚至，頁面中凡是使用了這個數據都會發生變化。
四. 顯示數據
也可使用v-html顯示雙標籤的內容，{{ }} 是簡寫，推薦簡寫
2. 在表單輸入框中顯示數據要使用v-model來完成數據顯示
3. 雙花括號僅用輸出文本內容,若是要輸出html代碼,則不能使用這個.要使用v-html來輸出。v-html必須在html標籤裏面做爲屬性寫出來。
v-model或者v-html等vue提供的屬性，或者 {{}} 都支持js代碼。
<h1>{{str1.split("").reverse().join("")}}</h1> <!-- 3.2 支持js的運算符--> <h1>{{num1+3}}</h1> <!-- 3.3 js還有一種運算符,三元運算符,相似於python裏面的三元表達式 三元運算符的語法: 判斷條件 ? 條件爲true的結果 : 條件爲false的結果 python 三元表達式[三元運算符]的語法: a if 條件 else b --> <h1>num1和num2之間進行比較,最大值:{{ num2>num1?num2:num1 }}</h1>
示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <script src="js/vue.js"></script> </head> <body> <div id="app"> <p>{{url}}</p> <div>{{text}}</div> <div v-html="text"></div> <input type="text" v-model="url"> <div>num是{{num%2==0?'偶數':'奇數'}}</div> <div>num的下一個數字：{{num-0+1}}</div> <input type="text" v-model="num"> <div>{{message.split("").reverse().join("")}}</div> <input type="text" v-model="message.split('').reverse().join('')"> </div> <script> var vm = new Vue({ el: "#app", data: { url: "http://www.luffycity.com", text: "<h2>我是h2標籤</h2>", num: 100, message: "abcdef", } }) </script> </body> </html>
效果：
五. 經常使用指令
指令 (Directives) 是帶有「v-」前綴的特殊屬性。每個指令在vue中都有固定的做用。
在vue中，提供了不少指令，經常使用的有：v-if、v-model、v-for等等。
指令會在vm對象的data屬性的數據發生變化時，會同時改變元素中的其控制的內容或屬性。
vue1.x寫法 vue2.x的寫法
v-html ----> {{ 普通文本 }} # vue2.x 也支持v-html，輸出html代碼的內容
v-bind:屬性名 ----> :屬性
v-on:事件名 ----> @事件名
1. 操做屬性
格式：
<標籤名 :標籤屬性="data屬性"></標籤名>
示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>操做屬性</title> <script src="js/vue.js"></script> </head> <body> <div id="app"> <a v-bind:href="link">{{text}}</a> <!--推薦這種寫法--> <a :href="link">{{text}}</a> <img :src="img_url" alt="" height="200"> </div> <script> var vm = new Vue({ el: "#app", data: { text: "首頁", link: "http://www.luffycity.com", img_url: "images/詠春.jpg", } }) </script> </body> </html>
效果：
2. 綁定事件
有兩種事件操做的寫法，@事件名 和 v-on:事件名
<button v-on:click="num+=1">贊</button> <!-- v-on 是vue1.x版本的寫法 --> <button @click="num-=1">踩</button>
示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>綁定事件</title> <script src="js/vue.js"></script> </head> <body> <div id="app"> 點贊數：{{num}} <!-- vue提供的事件操做中能夠直接操做data屬性，不須要經過vm來調用，也不能使用vm來調用. --> <button v-on:click="num+=1">贊</button> <button @click="num-=1">踩</button> </div> <script> var vm = new Vue({ el: "#app", data: { num: 0 } }) </script> </body> </html>
效果：
總結：
1. 使用@事件名來進行事件的綁定 語法： <button @click="num--">踩</button> 2. 綁定的事件的事件名，所有都是js的事件名： @submit ---> onsubmit @focus ---> onfocus ....
操做購物車商品的數量案例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>操做購物車商品的數量</title> <script src="js/vue.js"></script> </head> <body> <div id="app"> <!--簡單版本，存在一個bug，數量會存在負數--> <!--<span @click="num--">-</span>--> <!--<input type="text" size="1" v-model="num">--> <!--<span @click="num++">+</span>--> <span @click="sub">-</span> <input type="text" size="1" v-model="num"> <span @click="add">+</span> <!--也能夠不加括號，有參數時，須要加括號--> <!--<span @click="add()">+</span>--> {{text}} </div> <script> var text = "測試"; var vm = new Vue({ el: "#app", data: { num: 0, text: text, // 這裏能夠簡寫成 test // text, }, // 定義操做data數據的方法 methods: { add: function () { this.num++; // this 指代vm對象 let _this = this; setTimeout(function () { // 由於setTimeOut不是vm提供的，因此這裏的this指代的不是vm對象， // 所以咱們要在這裏使用vm對象，須要在外面把vm對象（this）賦值給一個變量，咱們在這裏引用變量便可。 alert(_this.num) }, 1000) }, // 在新版本的js代碼中，給對象添加方法，能夠進行簡寫 // sub: function () { // this.num--; // if(this.num <=0){ // this.num=0; // } // } sub(){ // 省略了 : function this.num--; if(this.num <=0){ this.num=0; } } } }) </script> </body> </html>
效果：
3. 操做樣式
3.1 控制標籤class類名
格式：
<h1 :class="值">元素</h1> 值能夠是字符串、對象、對象名、數組
示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>操做樣式-class</title> <script src="js/vue.js"></script> <style> .p1{ color: #ff6700; background: green; } .p2{ border: 2px solid black; } </style> </head> <body> <div id="app"> <!-- class的值是一個字符串，字符串就是class類名 --> <p :class="className">第一種使用方式</p> <p :class="is_add?className:''">第一種使用方式</p> <button @click="is_add=!is_add">點擊添加/移除樣式</button> <!--class的值是一個對象， 經過對象裏面的屬性來輸出一個或多個class類名--> <p :class="{p1:bool, p2:bool2}">第二種使用方式</p> <button @click="bool=!bool">點擊添加/移除樣式</button> <!-- class的值是一個對象的變量名，這是上面第二種寫法的調用 --> <p :class="cls_name">第三種用法</p> <button @click="cls_name.p2=!cls_name.p2">點擊添加/移除邊框樣式</button> <!-- class的值是一個數組，能夠經過給元素增長多個不一樣的class類名 --> <p :class="['p1','p2']">第四種使用方式</p> <p :class="[cls1,cls2]">第四種使用方式</p> <p :class="arr">第四種使用方式</p> </div> <script> var vm = new Vue({ el: "#app", data: { // 第一種用法的相關屬性 is_add: true, className: 'p1', // 第二種用法的相關屬性 bool: true, bool2: true, // 第三種用法的相關屬性 cls_name: { p1: true, p2: false, }, // 第四種用法的相關屬性 cls1: "p1", cls2: "p2", arr:["p1","p2"] }, }) </script> </body> </html>
效果：
總結：
給元素綁定class類名，最經常使用的就是第二種。 vue對象的data數據： data:{ myObj:{ complete:true, uncomplete:false, } } html元素： <div class="box" :class="myObj">2222</div> 最終瀏覽器效果： <div class="box complete">2222</div>
3.2 控制標籤style樣式
示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>操做樣式-style</title> <script src="js/vue.js"></script> </head> <body> <div id="app"> <!-- 用法1：style的值是一個json對象，對象格式： {樣式屬性名： 樣式值/變量, 樣式屬性名： 樣式值/變量 } 樣式屬性名，必須是css樣式屬性的駝峯式寫法 color ----》 color background-color -----》 backgroundColor --> <p :style="{color: '#00f'}">第一種用法</p> <p :style="{color: text_color,backgroundColor: bgcolor,borderRadius: radius}">第一種用法</p> <!--用法2：值是對象變量名，對象在data中進行聲明--> <p :style="mystyle">第二種用法</p> <!--用法3：值是數組--> <p :style="[sty1,sty2]">第三種用法</p> </div> <script> var vm = new Vue({ el: "#app", data: { // 第一種用法 text_color:"#00f", bgcolor: "orange", radius: '30px', // 第二種用法 mystyle:{ color: '#ffffff', backgroundColor: 'red', borderRadius: '5px' }, // 第三種用法 sty1:{ color: '#fff', // borderRadius: "5px", 'border-radius': '5px', // 若是不喜歡駝峯式，能夠屬性名改爲字符串寫法，就能夠寫原生的css屬性名 }, sty2:{ background: 'blue', } }, }) </script> </body> </html>
效果：
3.3 實例vue版選項卡
代碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>選項卡模板</title> <script src="js/vue.js"></script> <style> .option_card{ width: 400px; height: 300px; background: #eeeeee; } .title_box{ height: 50px; background: #ff6700; } .active{ background: #eeeeee; } span{ line-height: 50px; text-align: center; display: inline-block; width: 80px; } .item{ height: 250px; border-bottom: 1px solid black; display: none; } .current{ display: block; } </style> </head> <body> <div class="option_card"> <div class="title_box"> <span :class="index==0?'active':''" @click="index=0">歐美專區</span> <span :class="index==1?'active':''" @click="index=1">日韓專區</span> <span :class="index==2?'active':''" @click="index=2">大陸專區</span> <span :class="index==3?'active':''" @click="index=3">圖片專區</span> </div> <div class="content_box"> <div class="item" :class="index==0?'current':''">歐美專區的內容</div> <div class="item" :class="index==1?'current':''">日韓專區的內容</div> <div class="item" :class="index==2?'current':''">大陸專區的內容</div> <div class="item" :class="index==3?'current':''">圖片專區的內容</div> </div> </div> <script> // 選項卡 // 在用戶點擊不一樣的位置的選項卡標題，一樣位置的選項卡內容要顯示出來 var vm = new Vue({ el: ".option_card", data: { index: 0, } }) </script> </body> </html>
效果：
4. 條件渲染指令
vue中提供了兩個指令能夠用於判斷是否要顯示元素，分別是v-if和v-show。
4.1 v-if
標籤元素： <!-- vue對象最終會把條件的結果變成布爾值 --> <h1 v-if="ok">Yes</h1> data數據： data:{ ok:false // true則是顯示，false是隱藏 }
4.2 v-else
v-else指令來表示 v-if 的「else 塊」，v-else 元素必須緊跟在帶 v-if 或者 v-else-if 的元素的後面，不然它將不會被識別。
標籤元素： <h1 v-if="ok">Yes</h1> <h1 v-else>No</h1> data數據： data:{ ok:false // true則是顯示，false是隱藏 }
4.3 v-else-if
能夠出現多個v-else-if語句，可是v-else-if以前必須有一個v-if開頭。後面能夠跟着v-else，也能夠沒有。
標籤元素： <h1 v-if="num==1">num的值爲1</h1> <h1 v-else-if="num==2">num的值爲2</h1> <h1 v-else>num的值是{{num}}</h1> data數據： data:{ num:2 }
4.4 v-show
用法和v-if大體同樣，區別在於2點：
1. v-if條件結果爲false時，元素根本沒有vue渲染出來，因此標籤是沒有。.v-show條件結果爲false，元素仍是會被vue渲染出來，是經過了display: none;隱藏起來了；
2. v-if後面能夠根據v-else-if或者v-else，而v-show不能，它只能單獨使用。
4.6 綜合示例
代碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>條件指令</title> <script src="js/vue.js"></script> </head> <body> <div id="app"> <!--v-if指令和v-else指令--> <span v-if="token==false"> <a href="">登陸</a> | <a href="">註冊</a> </span> <span v-else>你好，歡迎回到路飛學城！</span> </div> <script> var vm = new Vue({ el: "#app", data: { token: false, } }) </script> <hr> <!--v-if指令、v-else-if指令 和 v-else指令--> <div id="app2"> <span v-if="age<18">猜小了</span> <span v-else-if="age>18">猜大了</span> <span v-else>猜對了</span> </div> <script> var vm2 = new Vue({ el: "#app2", data: { age: 22, } }) </script> <hr> <!--v-if指令能夠嵌套使用--> <div id="app3"> <span v-if="week==1">週一 <span v-if="timer=='上午'">早餐餐單</span> <span v-if="timer=='中午'">午飯餐單</span> <span v-if="timer=='下午'">晚餐餐單</span> </span> <span v-if="week==2">週二 <span v-if="timer=='上午'">早餐餐單</span> <span v-if="timer=='中午'">午飯餐單</span> <span v-if="timer=='下午'">晚餐餐單</span> </span> <span v-if="week==3">週三 <span v-if="timer=='上午'">早餐餐單</span> <span v-if="timer=='中午'">午飯餐單</span> <span v-if="timer=='下午'">晚餐餐單</span> </span> </div> <script> var vm3 = new Vue({ el: "#app3", data: { week: 2, timer: "中午" } }) </script> <hr> <div id="app4"> <!--v-show指令的使用--> <span v-show="token==false"> <a href="">登陸</a> | <a href="">註冊</a> </span> <span v-show="token==true">你好，歡迎回到路飛學城！</span> </div> <script> var vm4 = new Vue({ el: "#app4", data: { token: false, } }) </script> </body> </html>
效果：
5. 列表渲染指令
在vue中，能夠經過v-for指令能夠將一組數據渲染到頁面中，數據能夠是數組或者對象。
示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>列表渲染指令</title> <script src="js/vue.js"></script> <style> table{ border-collapse: collapse; border: 1px solid red; text-align: center; } table td,th{ width: 130px; height: 30px; } </style> </head> <body> <div id="app"> <h3>圖書列表</h3> <table border="1"> <tr> <th>序號(正序)</th> <th>序號(倒序)</th> <th>ID</th> <th>書名</th> <th>價格</th> </tr> <tr v-for="item, key in book_list"> <td>{{key+1}}</td> <td>{{book_list.length-key}}</td> <td>{{item.id}}</td> <td>{{item.title}}</td> <td>{{item.price}}</td> </tr> </table> </div> <script> var vm = new Vue({ el: "#app", data:{ book_list: [ {"id":11,"title":"西遊記","price":79.8}, {"id":12,"title":"西廂記","price":79.8}, {"id":18,"title":"東遊記","price":89.8}, {"id":20,"title":"紅樓夢","price":79.5}, {"id":21,"title":"水滸傳","price":79.5}, {"id":30,"title":"三國演義","price":79.5}, {"id":31,"title":"道德經","price":79.5}, {"id":40,"title":"易經","price":74.5}, {"id":61,"title":"論語","price":79.5}, ] } }) </script> </body> </html>
效果：
練習：
goods:[
{"name":"python入門","price":150},
{"name":"python進階","price":100},
{"name":"python高級","price":75},
{"name":"python研究","price":60},
{"name":"python放棄","price":110},
]
# 把上面的數據採用table表格輸出到頁面，價格大於60的數據須要添加背景色橙色[orange]
相關文章
- 1. Vue 快速入門
- 2. Vue快速入門
- 3. vue-router 快速入門
- 4. vue 快速入門 系列
- 5. vue-router快速入門
- 6. Vue快速入門（一）
- 7. Vue的快速入門
- 8. Vue框架快速入門
- 9. Vue入門指南(快速上手vue)
- 10. Vue學習~1：Vue快速入門
- 更多相關文章...
- • SQL 快速參考 - SQL 教程
- • Eclipse 快速修復 - Eclipse 教程
- • YAML 入門教程
- • Java Agent入門實戰（一）-Instrumentation介紹與使用
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. Vue 快速入門
- 2. Vue快速入門
- 3. vue-router 快速入門
- 4. vue 快速入門 系列
- 5. vue-router快速入門
- 6. Vue快速入門（一）
- 7. Vue的快速入門
- 8. Vue框架快速入門
- 9. Vue入門指南(快速上手vue)
- 10. Vue學習~1：Vue快速入門