Vue入門知識
1. Vue—前端框架
1.1前端發展史
(1) html——超文本標記語言（靜態網頁）javascript
css+javascriptphp
(2) 動態網頁：比較典型的有jsp / php / aspcss
(3) ajax階段——局部刷新技術html
(4) html5——網頁前端
(5) nodejs（服務器）—>前端的後臺的寫法（java(tomcat) / npm(maven)）vue
(6) vue (elementui) react ...html5
1.2 MVVM結構
MVC：Model（模型） View（視圖） Controller（控制器）java
MVVM：node
Model（模型），包括數據和一些基本操做react
View（視圖），頁面渲染結果
View-Model：模型與視圖間的雙向操做（無須開發人員干涉）
在MVVM以前，開發人員從後端獲取須要的數據模型，而後要經過DOM操做Model渲染到View中。然後當用戶操做視圖，咱們還須要經過DOM獲取View中的數據，而後同步到Model中。而MVVM中的VM要作的事情就是把DOM操做徹底封裝起來，開發人員不用
再關心Model和View之間是如何互相影響的：
- 只要咱們Model發生了改變，View上天然就會表現出來。
- 當用戶修改了View，Model中的數據也會跟着改變。
把開發人員從繁瑣的DOM操做中解放出來，把關注點放在如何操做Model上。
2. Vue的使用
1. 先要安裝一個環境nodejs（傻瓜式安裝）
安裝完成Node應該自帶了NPM了，在控制檯輸入npm -v查看
2. 在idea支持nodejs，須要安裝插件
3. 建立一個static web項目
4. npm init -y 初始化一個項目（至關於建了一個maven工程）
5. 安裝Vue
npm install -g vue 全局安裝（全部項目都能用）
npm -g root 查看安裝的路徑
npm install/i vue 局部安裝（當前項目使用，建議使用該方式安裝）
npm uninstall vue 卸載模塊
npm update vue 更新模塊
npm list vue 查看某個模塊
npm run dev/test/online 運行工程（配置腳手架使用）
npm run build 編譯工程
3. ECMAScript6(ES6)
(1) let相較於var是塊級的，只做用於當前的代碼塊裏面，而var是全局的
1 //let 它是塊級(平時推薦使用),而var是全局的 2 for (var i = 0; i < 5; i++) { 3 console.debug(i); 4 } 5 console.debug(i); 6 for (let j = 0; j <5; j++) { 7 console.debug(j); 8 } 9 console.debug(j);
(2) const常量，一旦有值就不能被修改了
const a = 1;
(3) 解構表達式
1 //解構表達式 2 //數組解構 -- 和名稱沒有關係 3 let arr = [1,2,3]; 4 let [a1,a2,a3] = arr; 5 console.log(a1); 6 console.log(a2); 7 console.log(a3); 8 //對象解構 -- 和名稱必須同樣,根據這個名稱解構 9 let obj = {"name":"小每天","age":18}; 10 let {name,age} = obj; 11 console.log(name); 12 console.log(age);
(4) 箭頭表達式
1 //箭頭表達式 2 var obj = { 3 name:"王天霸", 4 age:18, 5 say:function(food) { 6 console.log("李：" + food); 7 }, 8 say1:(food)=>{ 9 console.log("每天：" + food); 10 }, 11 say2(food){ 12 console.log("寧次：" + food); 13 } 14 } 15 obj.say("鍋盔"); 16 obj.say1("涼麪"); 17 obj.say2("炒粉"); 18 19 //箭頭函數 和參數至關因而解構表達式 20 //語法:函數名 = (參數)=>{內容} ES6 21 let hi = ({name})=>{ 22 console.log(name); 23 }; 24 let hi1 = ({name})=>console.log(name); 25 let hi2 = function (user) { 26 console.log(user.name); 27 } 28 hi2({"name":"小櫻"});
(5) promise異步編程（瞭解）
promise是異步編程的一種解決方案，比傳統的解決方案（回調函數+事件）更加合理和強大。
1 //promise 能夠完成異步編程 --瞭解 2 const p = new Promise((resolve,reject)=>{ 3 setTimeout(()=>{ 4 const num = Math.random(); 5 if (num < 0.5) { 6 resolve("OK " + num); 7 } else { 8 resolve("GG " + num); 9 } 10 }) 11 }).then(function (msg) { 12 console.log(msg); 13 }).catch(function (msg) { 14 console.log(msg); 15 });
4. Vue
4.1 Vue是什麼
Vue (讀音 /vjuː/，相似於 view) 是一套用於構建用戶界面的漸進式框架。與其它大型框架不一樣的是，Vue 被設計爲能夠自底向上逐層應用。Vue 的核心庫只關注視圖層，不只易於上手，還便於與第三方庫或既有項目整合。另外一方面，當與現代化的工具鏈以及各類支持類庫結合使用時，Vue 也徹底可以爲複雜的單頁應用提供驅動。
Vue漸進式的理解:http://www.bslxx.com/a/vue/2017/1205/1490.html
Vue只關注視圖層。
Vue經過新的屬性（自定義）和{{表達式}}擴展了 HTML。
Vue的目標是經過儘量簡單的 API 實現響應的數據綁定和組合的視圖組件。
4.2 Vue特性
- 輕量：Vue.js庫的體積很是小的，而且不依賴其餘基礎庫。
- 數據綁定：對於一些富交互、狀態機相似的前端UI界面，數據綁定很是簡單、方便。
- 指令：內置指令統一爲(v-*)，也能夠自定義指令，經過對應表達值的變化就能夠修改對應的DOM。
- 插件化：Vue.js核心不包含Router、AJAX、表單驗證等功能，可是能夠很是方便地根據須要加載對應插件。
- 組件化：組件能夠擴展 HTML 元素，封裝可重用的代碼。容許咱們使用小型、自包含和一般可複用的組件構建大型應用
4.3 Vue的歷史
Vue是比較新的技術，版本 1.0 是在 2014 年發佈的, Vue做者是前Google 的員工尤雨溪, 在2016年9月宣佈以技術顧問的身份加盟阿里巴巴。
Vue對比其餘框架:https://cn.vuejs.org/v2/guide/comparison.html#ad
4.4 Vue的第一個程序
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <script src="node_modules/vue/dist/vue.js"></script> 7 </head> 8 <body> 9 <div id="app"> 10 {{message}}<br/> 11 {{user.name}}今年{{user.age}}歲了.<br/> 12 {{say("中文")}} 13 {{eat("漢堡包")}} 14 </div> 15 <hr> 16 <div id="app1"> 17 {{message}} 18 </div> 19 20 <script> 21 /** 22 * new Vue({});建立一個vue對象 23 * el:掛載 根據一個id進行掛載 也能夠根據class進行掛載 24 * data:數據 25 * message存在data裏面數據,經過{{message}} 能夠取值 26 * {{ message }} 27 */ 28 var app = new Vue({ 29 el:"#app", 30 data:{ 31 message:"hello Vue!", 32 user:{ 33 name:"每天", 34 age:16 35 } 36 }, 37 methods:{ 38 say(language){ 39 console.log(this.user.name + "說" + language); 40 }, 41 eat(food){ 42 console.log(this.user.name + "喜歡吃" + food); 43 } 44 }, 45 created(){ 46 console.log("==================出生啦======================"); 47 }, 48 mounted(){ 49 console.log("==================掛載啦======================"); 50 } 51 }); 52 app.user.name="寧次"; 53 app.say("英語"); 54 console.log("-----------------------"); 55 56 var app2 = new Vue({ 57 el:"#app1", 58 data:{ 59 message:"測試測試..." 60 } 61 }); 62 </script> 63 </body> 64 </html>
4.5 生命週期鉤子
4.5.1 生命週期
每一個Vue實例在被建立的時候都要經歷一系列的初始化狀態：建立實例，裝載模板，渲染模板等等。Vue爲生命週期中的每一個狀態都設置了鉤子函數（監聽函數）。每當Vue實例處於不一樣的生命週期，對應的函數就會被觸發調用。
4.5.2 鉤子函數
(1) {{調用方法}}-->不用
建立對象new Vue --> created（初始化完以後的鉤子）--> 調用方法1 --> mounted（鉤子）-->調用方法2
<div id="app"> {{hello}} </div>
(2) js 調用方法1次
建立對象new Vue --> created（初始化以後的鉤子）--> mounted（鉤子）-->調用方法
1 var vm = new Vue({ 2 el:"#app", 3 data:{ 4 hello: '' // hello初始化爲空 5 }, 6 created(){ 7 this.hello = "hello, world！ 我出生了！"; 8 } 9 })
created 初始化完執行鉤子
mounted 掛載的鉤子方法
5. Vue的指令
(1) v-text --> 相似於innerText
v-html --> 相似於innerHTML
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <script src="node_modules/vue/dist/vue.js"></script> 7 </head> 8 <body> 9 <div id="app"> 10 <span v-text="message"></span> 11 <span v-html="user.username"></span> 12 </div> 13 <script> 14 var app = new Vue({ 15 el: '#app', 16 data: { 17 message:"學無止境!", 18 user:{ 19 username:"<font color='#ff7f50'>姜子牙</font>" 20 } 21 } 22 }); 23 </script> 24 </body> 25 </html>
(2) v-for 循環
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <script src="node_modules/vue/dist/vue.js"></script> 7 </head> 8 <body> 9 <div id="app"> 10 <ul> 11 <li v-for="value in user">{{value}}</li> 12 </ul> 13 <hr> 14 <ul> 15 <li v-for="hobby in hobbys">{{hobby}}</li> 16 </ul> 17 <hr> 18 <table> 19 <tr> 20 <th>序號</th> 21 <th>姓名</th> 22 <th>年齡</th> 23 <th>性別</th> 24 </tr> 25 <tr v-for="stu in students"> 26 <td>{{stu.id}}</td> 27 <td>{{stu.name}}</td> 28 <td>{{stu.age}}</td> 29 <td>{{stu.sex}}</td> 30 </tr> 31 </table> 32 </div> 33 <script> 34 var app = new Vue({ 35 el: '#app', 36 data: { 37 message:"學無止境!", 38 user:{ 39 username:"圖圖", 40 age:3, 41 sex:"男" 42 }, 43 hobbys:["吃飯","睡覺","打豆豆"], 44 students:[ 45 {id:1,name: "劉備", age: 29, sex: "男"}, 46 {id:2,name: "貂蟬", age: 30, sex: "女"}, 47 {id:3,name: "呂布", age: 31, sex: "男"} 48 ] 49 } 50 }); 51 </script> 52 </body> 53 </html>
(3) v-bind --> 綁定標籤裏面的屬性，如v-bind:src=""
1 <!DOCTYPE html> 2 <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <script src="node_modules/vue/dist/vue.js"></script> 7 </head> 8 <body> 9 <div id="app"> 10 <img v-bind:src="imgsrc" v-bind:title="title"/> 11 <img :src="imgsrc" :title="title"/> 12 <input :bind="props"/> 13 </div> 14 <script> 15 var app = new Vue({ 16 el: '#app', 17 data: { 18 imgsrc:"img/1.png", 19 title:"Jerry", 20 props:{ 21 type:"text", 22 name:"username" 23 } 24 } 25 }); 26 </script> 27 </body> 28 </html>
(4) v-model --> 綁定標籤裏面的value值，雙向綁定效果
1 <!DOCTYPE html> 2 <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <script src="node_modules/vue/dist/vue.js"></script> 7 </head> 8 <body> 9 <div id="app"> 10 <input type="text" v-model="message"/>{{message}} 11 <hr> 12 <h1>綁定到type=checkbox的input表單元素</h1> 13 basketball:<input type="checkbox" v-model="checkboxValue" value="basketball"/><br/> 14 soccer:<input type="checkbox" v-model="checkboxValue" value="soccer"/><br/> 15 data中的值:{{checkboxValue}}<br/> 16 <hr> 17 籃球：<input type="radio" v-model="radioValue" value="籃球"><br/> 18 足球：<input type="radio" v-model="radioValue" value="足球"><br/> 19 data中的值:{{radioValue}}<br/> 20 <hr> 21 武功祕籍：<textarea v-model="textareaValue"></textarea><br/> 22 data中的值:{{textareaValue}}<br/> 23 <hr> 24 愛好：<select v-model="skills"> 25 <option value="java">java</option> 26 <option value="c">c</option> 27 <option value="c++">c++</option> 28 </select><br/> 29 data中的值:{{skills}} 30 </div> 31 <script> 32 var app = new Vue({ 33 el: '#app', 34 data: { 35 message:"please...", 36 checkboxValue:["basketball"], 37 radioValue:"籃球", 38 textareaValue:"天下無敵，惟快不破！", 39 skills:'java' 40 } 41 }); 42 </script> 43 </body> 44 </html>
(5) v-show --> 控制display屬性
1 <!DOCTYPE html> 2 <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <script src="node_modules/vue/dist/vue.js"></script> 7 </head> 8 <body> 9 <div id="app"> 10 <div v-show="show">show不show？</div> 11 <div v-show="hidden">你猜我隱藏沒？</div> 12 <div v-show="score>60">及格了，老弟！</div> 13 </div> 14 <script> 15 var app = new Vue({ 16 el: '#app', 17 data: { 18 show:true, 19 hidden:true, 20 score:59 21 } 22 }); 23 </script> 24 </body> 25 </html>
(6) v-if / v-else-if / v-else 判斷
1 <!DOCTYPE html> 2 <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <script src="node_modules/vue/dist/vue.js"></script> 7 </head> 8 <body> 9 <div id="app"> 10 <div v-if="show">show不show？</div> 11 <div v-if="hidden">你猜我隱藏沒？</div> 12 <div v-if="score>60">及格了，老弟！</div> 13 <hr> 14 <div v-if="score<60">該努把力了！</div> 15 <div v-else-if="score>=60 && score<90">過關了！</div> 16 <div v-else-if="score>=90 && score<=100">夠優秀了！</div> 17 <div v-else="score>100">膩害！</div> 18 </div> 19 <script> 20 var app = new Vue({ 21 el: '#app', 22 data: { 23 show:true, 24 hidden:true, 25 score:101 26 } 27 }); 28 </script> 29 </body> 30 </html>
- 1. Vue入門知識（1）
- 2. Vue入門基礎知識
- 3. Vue筆記——npm入門知識
- 4. vue 入門知識點總結
- 5. Vue筆記——node.js入門知識
- 6. HTML5前端知識分享：Vue入門
- 7. 入門知識
- 8. 入門知識——Linux入門
- 9. Java入門知識
- 10. 入門知識———Vim
- 更多相關文章...
- • Memcached入門教程 - NoSQL教程
- • Neo4j數據庫入門教程 - NoSQL教程
- • YAML 入門教程
- • Java Agent入門實戰（一）-Instrumentation介紹與使用
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. Vue入門知識（1）
- 2. Vue入門基礎知識
- 3. Vue筆記——npm入門知識
- 4. vue 入門知識點總結
- 5. Vue筆記——node.js入門知識
- 6. HTML5前端知識分享：Vue入門
- 7. 入門知識
- 8. 入門知識——Linux入門
- 9. Java入門知識
- 10. 入門知識———Vim