vue——入門
阿新 • • 發佈：2020-12-15
一、
1 html5,css3,js(es5,es6):寫一個一個的頁面---》給後端（php，python，go，java）--》後端嵌入模板語法--》後端渲染完---》返回給前端---》在瀏覽器中看 2 ajax出現--》後臺發非同步請求，render+ajax混合（bbs專案） 3 單用ajax（載入資料，dom渲染頁面）：前後端分離的雛形 4 agular：js框架，前端工程化，前端也是一個工程，一個專案 5 react，vue：當下最火的兩個前端框架（vue國人用，react外國人用） 6 移動開發（安卓，ios）+web（web，微信小程式，支付寶小程式）+桌面開發（windows桌面）：前端---》大前端7 一套程式碼在各個平臺執行（前端）：谷歌flutter（Dart：跟java很像）：ios，安卓，桌面 8 在vue框架的基礎上 nui-app ：https://uniapp.dcloud.io/ 一套程式碼編到10個平臺，這不是夢想 9 在不久的將來，前端框架可能一統天下
二、
1 漸進式JavaScript:javascript的框架（jq），寫簡單的可以使用vue，寫複雜的專案也可以使用 2 MVVM：Model-View-ViewModel -model：資料（後端給的，js接收到） -ViewModel：中轉 （雙向資料繫結：js中變數變了，html中資料也跟著變）-view：檢視（html+css） 3 元件化開發，單頁面開發 4 版本：1.x 2.x（用的最多） 3.x（beta版本） 5 下載：（可以使用cdn） -開發版本：vue.js :https://vuejs.org/js/vue.js -生產版本：vue.min.js :https://vuejs.org/js/vue.min.js 6 前端開發：webstorm，sublinetext，vscode（python，java，go，前端，免費），pycharm（咱們講課） 7 快速使用 8 補充：解釋型語言，需要直譯器，js直譯器整合到瀏覽器中了，console就等同於你在cmd小敲python3進的互動式命令列是一樣的9 nodejs:把chorm的v8引擎（直譯器），安裝到作業系統之上
三、模板語法
1 插值語法 {{ js變數或js語法}}
2 程式碼演示
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="./js/vue.js"></script> <title>Title</title> </head> <body> <div id="box"> <p>{{name}}</p> <p>{{age}}</p> <p>{{ll}}</p> <p>{{obj}}</p> {{10+20+90}} {{10<20?'是':'否'}} </div> </body> <script> var vm = new Vue({ el: '#box', //在box這個div中可以寫vue的語法 data: { name: 'hello world', age: 19, ll: [1, 2, 3], obj: {name: 'lili', age: 19}, s: '<a href="http://www.baidu.com">點我看美女</a>', }, }) </script> </html>
四、指令
1 標籤屬性為 v-xx的形式，是vue的指令 2 常用指令 v-html：讓html渲染成頁面 v-text:標籤內容顯示js變數對應的值 v-show:放一個布林值，為真，標籤就顯示，為假標籤就不顯示 v-if：放一個布林值，為真，標籤就顯示，為假標籤就不顯示 3 v-show 和v-if 區別：v-show標籤還在，不顯示了，v-if之間操作的dom把標籤刪除和加入
4 程式碼演示
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="./js/vue.js"></script> <title>Title</title> </head> <body> <div id="box"> <p v-html="s"></p> <h1>v-text</h1> <span v-text="name">我是span標籤</span> <span>{{name}}</span> <hr> <h1>v-show</h1> <div v-show="isShow">我是div</div> <hr> <h1>小案例，控制元件通過按鈕控制顯示和消失</h1> <button @click="handleClick()">點我</button> <div v-show="isShow">我是div</div> <hr> <h1>v-if</h1> <div v-if="isShow">我是divdivdiv</div> </div> </body> <script> var vm = new Vue({ el: '#box', //在box這個div中可以寫vue的語法 data: { name: 'hello world', age: 19, ll: [1, 2, 3], obj: {name: 'lqz', age: 19}, s: '<a href="http://www.baidu.com">點我看美女</a>', isShow: true }, methods: { handleClick() { //this指的是當前vue物件 this.isShow = !this.isShow }, } }) </script> </html>
1 點選事件 給標籤（控制元件）繫結函式，點選執行函式
2 v-on:click 縮寫成 @click
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="./js/vue.js"></script> <title>Title</title> </head> <body> <div id="box"> <button v-on:click="handleClick">v-on:點我</button> <!--用的多--> <button @click="handleClick2">@click點我2</button> <!--如果不傳引數，沒有大的區別--> <button @click="handleClick2()">點我3帶括號</button> <!--如果要傳引數--> <button @click="handleClick3(100)">點我4帶引數</button> <!--傳入事件--> <button @click="handleClick5($event)">點我5帶事件引數</button> </div> </body> <script> new Vue({ el: '#box', //在box這個div中可以寫vue的語法 data: { }, methods: { handleClick(){ console.log('1111') }, handleClick2(){ console.log('22222') }, handleClick3(a,b){ console.log(a) console.log(b) }, handleClick5(ev){ console.log(ev) } } }) </script> </html>
4.3 屬性指令
1 給標籤屬性的value值繫結成js的變數
2 v-bind:class='js變數' 縮寫成 :class='js中變數'
3 程式碼演示
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="./js/vue.js"></script> <style> .red { background: red; } .green { background: green; } </style> <title>Title</title> </head> <body> <!--有個按鈕，有個div，點選按鈕，div變色--> <div id="box"> <!-- <img v-bind:src="url" alt="">--> <img :src="url" alt="" width="60" height="60"> <div :class="red_class">我的個divdiv快樂的div</div> <br> <button @click="handleClick">點我變色</button> <!-- <div :class="change">--> <div :class="isActive?'red':'green'"> 我是一個div </div> </div> </body> <script> new Vue({ el: '#box', //在box這個div中可以寫vue的語法 data: { url: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1608027235253&di=2198abb4a4b3d882d2c588011c108a9f&imgtype=0&src=http%3A%2F%2Fa3.att.hudong.com%2F45%2F36%2F14300000491308128107360639165.jpg', change: 'red', isActive: true, }, methods: { handleClick() { // this.change='green' this.isActive = !this.isActive } } }) </script> </html>
1 同v-bind控制sytle和class的顯示 :class='js變數、字串、js陣列' :style='js變數、字串、js陣列'
2 程式碼演示
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Style 和 Class</title> <script src="./js/vue.js"></script> <style> .red { color: rgba(255, 104, 104, 0.7); } .font-20 { font-size: 20px; } .be-bold { font-weight: bold; } </style> </head> <body> <div id="box"> <p>我是一個普通的p標籤</p> <div :class="class_obj"> <p>我是一個不普通的p標籤1</p> </div> <button @click="handleClick">點選放大字型</button> <div :style="style_obj"> <p>我是一個不普通的p標籤2</p> </div> </div> </body> <script> let vm = new Vue({ el: '#box', data: { // class_obj: 'red', // 放1個是字串 class_obj: ['red', 'font-20', 'be-bold'], // 放2個是陣列 // class_obj: { red:true, be-bold:false}, // 也可以放物件 // 陣列.push() 從尾部新增1個元素 // 陣列.pop() 刪除最後1個元素 並返回 // 物件的寫法 style_obj: { color: 'red', fontSize: '20px' } // style_obj: [{background:'red'}, {fontSize:'20px'}] }, methods: { handleClick(){ this.style_obj['fontSize']='30px' } } }) </script> </html>
終端測試命令
vm.class_obj.pop()
vm.class_obj.pop()
vm.class_obj.pop()
vm.class_obj.push('be-bold')
vm.class_obj.push('red')
vm.class_obj.push('font-20')
# 樣式 <h1>class的三種寫法</h1> <div :class="isActive?'red':'green'">class三目寫法</div> <p :class="classObj">class物件寫法</p> <p :class="classarr">class陣列寫法</p> # 資料 isActive: true, // classObj:'red', classObj: {red: true, green: false, font: true}, classarr: ['red', 'green'],
# 樣式 <h1>style的三種寫法</h1> <div style="background:red">style三目寫法</div> <div :style="'background:red'">style三目寫法</div> <div :style="'background:'+'red'">style三目寫法</div> <div :style="'background:'+(isActive?'red':'green')">style三目寫法</div> <p :style="styleobj">style物件寫法</p> <p :style="styleattr">style陣列寫法</p> # 資料 isActive: true, styleobj:{background:'yellow',fontSize:'60px'}, styleattr:[{background:'red'},]
2 程式碼演示
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="./js/vue.js"></script> <style> .red { background: red; } .green { background: green; } .font { font-size: 30px; } </style> <title>Title</title> </head> <body> <div id="box"> <h1>class的三種寫法</h1> <div :class="isActive?'red':'green'">class三目寫法</div> <p :class="classObj">class物件寫法</p> <p :class="classarr">class陣列寫法</p> <h1>style的三種寫法</h1> <div style="background:red">style三目寫法</div> <div :style="'background:red'">style三目寫法</div> <div :style="'background:'+'red'">style三目寫法</div> <div :style="'background:'+(isActive?'red':'green')">style三目寫法</div> <p :style="styleobj">style物件寫法</p> <p :style="styleattr">style陣列寫法</p> </div> </body> <script> var vm = new Vue({ el: '#box', data: { isActive: true, // classObj:'red', classObj: {red: true, green: false, font: true}, classarr: ['red', 'green'], //把原來的- 改成駝峰 styleobj:{background:'yellow',fontSize:'60px'}, styleattr:[{background:'red'},] }, }) </script> </html>