013-Vue：前端知识结构概述、基本语法、声明周期
生活随笔
收集整理的這篇文章主要介紹了
013-Vue：前端知识结构概述、基本语法、声明周期
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
前端知識(shí)結(jié)構(gòu)概覽
1、常見的js框架
說明：js框架底層封裝的都是js。
2、常見的ui框架
概述：
- ui是用戶界面的英文簡稱，那么ui框架又是什么呢?框架又可以理解為模板，ui框架也就是ui模板。這和編程里的封裝有些類似，就是說一些ui設(shè)計(jì)的常用效果已經(jīng)被別人封裝成了ui框架，你想實(shí)現(xiàn)哪個(gè)效果只要直接調(diào)用就行，不需要太糾結(jié)于底層實(shí)現(xiàn)。
第一節(jié) Vue.js簡介
1、框架
任何編程語言在最初的時(shí)候都是沒有框架的，后來隨著在實(shí)際開發(fā)過程中不斷總結(jié)『經(jīng)驗(yàn)』，積累『最佳實(shí)踐』，慢慢的人們發(fā)現(xiàn)很多『特定場(chǎng)景』下的『特定問題』總是可以『套用固定解決方案』。
于是有人把成熟的『固定解決方案』收集起來，整合在一起，就成了『框架』。
在使用框架的過程中，我們往往只需要告訴框架『做什么（聲明）』，而不需要關(guān)心框架『怎么做（編程）』。
對(duì)于Java程序來說，我們使用框架就是導(dǎo)入那些封裝了『固定解決方案』的jar包，然后通過『配置文件』告訴框架做什么，就能夠大大簡化編碼，提高開發(fā)效率。我們使用過的junit其實(shí)就是一款單元測(cè)試框架。
而對(duì)于JavaScript程序來說，我們使用框架就是導(dǎo)入那些封裝了『固定解決方案』的『js文件』，然后在框架的基礎(chǔ)上編碼。
用洗衣服來類比框架：
典型應(yīng)用場(chǎng)景：洗衣服
輸入數(shù)據(jù)：衣服、洗衣液、水
不使用框架：手洗
使用框架：使用洗衣機(jī)，對(duì)人來說，只需要按鍵，具體操作是洗衣機(jī)完成的。人只是告訴洗衣機(jī)做什么，具體的操作是洗衣機(jī)完成的。
實(shí)際開發(fā)中使用框架時(shí)，我們也主要是告訴框架要做什么，具體操作是框架完成的。
2、Vue.js
2.1、Vue.js的作者
在為AngularJS工作之后，Vue的作者尤雨溪開發(fā)了Vue.js。他聲稱自己的思路是提取Angular中自己喜歡的部分，構(gòu)建出一款相當(dāng)輕量的框架。
Vue最早發(fā)布于2014年2月。作者在Hacker News、Echo JS與 Reddit的JavaScript版塊發(fā)布了最早的版本。一天之內(nèi)，Vue 就登上了這三個(gè)網(wǎng)站的首頁。
Vue是Github上最受歡迎的開源項(xiàng)目之一。同時(shí)，在JavaScript框架/函數(shù)庫中， Vue所獲得的星標(biāo)數(shù)已超過React，并高于Backbone.js、Angular 2、jQuery等項(xiàng)目。
2.2、Vue.js的官網(wǎng)介紹
Vue.js官網(wǎng)網(wǎng)址：https://cn.vuejs.org/
Vue (讀音 /vju?/，類似于view) 是一套用于構(gòu)建用戶界面的漸進(jìn)式框架。與其它大型框架不同的是，Vue 被設(shè)計(jì)為可以自底向上逐層應(yīng)用。Vue 的核心庫只關(guān)注視圖層，不僅易于上手，還便于與第三方庫或既有項(xiàng)目整合。另一方面，當(dāng)與現(xiàn)代化的工具鏈 以及各種支持類庫結(jié)合使用時(shí)，Vue 也完全能夠?yàn)閺?fù)雜的單頁應(yīng)用提供驅(qū)動(dòng)。
總結(jié)：
- Vue是一套前端框架，免除原生JavaScript（js）中的DOM操作，簡化書寫。
- 基于MVVM(Model-View-ViewModel)思想，實(shí)現(xiàn)數(shù)據(jù)的雙向綁定，將編程的關(guān)注點(diǎn)放在數(shù)據(jù)上。
- 單向展示：只能把模型中的數(shù)據(jù)取出來放到視圖中單向展示
- 缺點(diǎn)1：只能單方向的把數(shù)據(jù)從模型中取出放到視圖層展示
- 缺點(diǎn)2：只能實(shí)現(xiàn)展示而不是綁定（之前使用js或jquery需要先獲取Dom對(duì)象，在通過對(duì)象獲取屬性值來展示數(shù)據(jù)，一旦模型數(shù)據(jù)發(fā)生改變那么js代碼也會(huì)發(fā)生變化?，F(xiàn)在使用Vue可以實(shí)現(xiàn)綁定，將來模型數(shù)據(jù)發(fā)生變化視圖中的數(shù)據(jù)也會(huì)跟著變化，不需要修改任何代碼）
- 雙向綁定：通過View提供的一個(gè)對(duì)象(ViewModel)將View(html元素)和Model(數(shù)據(jù))實(shí)現(xiàn)雙向綁定
- 即：模型變了視圖跟著變，視圖變了模型跟著變。而且這些變化都是自動(dòng)完成的。
第二節(jié) 準(zhǔn)備Vue.js環(huán)境
1、開發(fā)中的最佳實(shí)踐
『最佳實(shí)踐』是實(shí)際開發(fā)中，針對(duì)特定問題提煉出來的最好的解決方案。把『最佳實(shí)踐』抽取出來，封裝到各自編程語言的程序包中，就是框架的基礎(chǔ)。
- Java語言的程序包：jar包
- JavaScript語言的程序包：外部js文件
對(duì)于Java程序來說，框架=jar包+配置文件。對(duì)于Vue來說，導(dǎo)入Vue的外部js文件就能夠使用Vue框架了。
2、Vue框架的js文件獲取
- 官網(wǎng)提供的下載地:1：https://cdn.jsdelivr.net/npm/vue/dist/vue.js
說明：這種方式直接打開的是vue.js里面的內(nèi)容，可以先創(chuàng)建一個(gè)vue.js文件，之后把內(nèi)容復(fù)制到這個(gè)創(chuàng)建的文件中。
- 官網(wǎng)提供的下載地址2：https://v2.cn.vuejs.org/v2/guide/installation.html
分別點(diǎn)擊下載：
3、本地創(chuàng)建vue.js文件
說明1：使用HBuilderX編寫vue.js
-
第一步：在HBuilderX中創(chuàng)建工程
-
第二步：在工程目錄下創(chuàng)建script目錄用來存放vue.js文件
-
第三步：創(chuàng)建空vue.js文件
-
第四步：將官網(wǎng)提供的vue.js文件的內(nèi)容復(fù)制粘貼到本地vue.js文件中
說明2：使用idea編寫vue.js
- 第一步：在idea中創(chuàng)建java-web工程
- 第二步：在web目錄下創(chuàng)建script目錄用來存放vue.js文件
- 第三步：將官網(wǎng)提供的vue.js文件復(fù)制粘貼到本地的script目錄中
4、創(chuàng)建HTML文檔并引入vue.js
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body> <script language="JavaScript" src="script/vue.js"></script> <script type="text/javascript"></script> </body> </html>第三節(jié) 基本語法：聲明式渲染
1、概念
1.1、聲明式
『聲明式』是相對(duì)于『編程式』而言的。
- 聲明式：告訴框架做什么，具體操作由框架完成
- 編程式：自己編寫代碼完成具體操作
1.2、渲染
上圖含義解釋：
- 藍(lán)色方框：HTML標(biāo)簽
- 紅色圓形：動(dòng)態(tài)、尚未確定的數(shù)據(jù)
- 藍(lán)色圓形：經(jīng)過程序運(yùn)算以后，計(jì)算得到的具體的，可以直接在頁面上顯示的數(shù)據(jù)、
- 渲染：程序計(jì)算動(dòng)態(tài)數(shù)據(jù)得到具體數(shù)據(jù)的過程
2、demo
2.1、定義js對(duì)象的2種方式
說明：可以看到j(luò)s有2種創(chuàng)建對(duì)象方式，寫的是js代碼不用引入vue.js文件，這是為了對(duì)比下面創(chuàng)建Vue對(duì)象的方式。
2.2、vue聲明式渲染
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><!--引入vue.js文件--><script language="JavaScript" src="script/vue.js"></script><script language="JavaScript">window.onload=function(){//文檔就緒事件函數(shù)/* new Vue({xxx}):創(chuàng)建Vue對(duì)象，里面的key加不加引號(hào)都可以。每個(gè)鍵值對(duì)使用逗號(hào)隔開，最后一個(gè)不用加逗號(hào)，里面的參數(shù)為{xxx}可以理解為一個(gè)對(duì)象el: 用于指定Vue對(duì)象要關(guān)聯(lián)的HTML元素。el就是element的縮寫通過id屬性值指定HTML元素時(shí)，語法格式是：#id (選擇器)data: 設(shè)置了Vue對(duì)象中保存的數(shù)據(jù)*/var vue = new Vue({el:"#div0","data":{msg:"hello!!!"}});}</script> </head> <body> <div id="div0"><!-- 使用{{}}格式，指定要被渲染的數(shù)據(jù) --><span>{{msg}}</span> </div> </body> </html>說明：
- 通過el屬性指定選擇器"#app"，來綁定屬性值id="app"的div標(biāo)簽。
- 通過data設(shè)置屬性message和標(biāo)簽中的{{message}}進(jìn)行綁定。
3、查看聲明式渲染的響應(yīng)式效果
運(yùn)行測(cè)試：
修改msg屬性的值：
通過驗(yàn)證Vue對(duì)象的『響應(yīng)式』效果，我們看到Vue對(duì)象和頁面上的HTML標(biāo)簽確實(shí)是始終保持著關(guān)聯(lián)的關(guān)系，同時(shí)看到Vue在背后確實(shí)是做了大量的工作。
第四節(jié) 基本語法：綁定元素屬性
1、基本語法
v-bind:HTML標(biāo)簽的原始屬性名2、demo
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><!--引入vue.js文件--><script language="JavaScript" src="script/vue.js"></script><script language="JavaScript">window.onload=function(){//文檔就緒事件函數(shù)/* new Vue({xxx}):創(chuàng)建Vue對(duì)象，里面的key加不加引號(hào)都可以。里面的參數(shù)為{xxx}可以理解為一個(gè)對(duì)象el: 用于指定Vue對(duì)象要關(guān)聯(lián)的HTML元素。el就是element的縮寫通過id屬性值指定HTML元素時(shí)，語法格式是：#id (選擇器)data: 設(shè)置了Vue對(duì)象中保存的數(shù)據(jù)*/var vue = new Vue({el:"#div0","data":{msg:"hello!!!aaaaaaaa",uname:"鳩摩智"}});}</script> </head> <body> <div id="div0"><!-- 使用{{}}格式，指定要被渲染的數(shù)據(jù) --><span>{{msg}}</span><!-- <input type="text" v-bind:value="uname"/>v-bind:value表示綁定value屬性 , v-bind可以省略，也就是 :value注意：在標(biāo)簽體內(nèi)通過{{}}告訴Vue這里需要渲染在HTML標(biāo)簽的屬性中，通過v-bind:屬性名="表達(dá)式"的方式告訴Vue這里要渲染--><input type="text" :value="uname"/> </div> </body> </html>3、小結(jié)
本質(zhì)上，v-bind:屬性名="表達(dá)式"和{{}}它們都是用Vue對(duì)象來渲染頁面。只不過：
- 文本標(biāo)簽體：使用{{}}形式
- 屬性：使用v-bind:屬性名="表達(dá)式"形式
第五節(jié) 基本語法：雙向數(shù)據(jù)綁定
1、提出問題
而使用了雙向綁定后，就可以實(shí)現(xiàn)：頁面上數(shù)據(jù)被修改后，Vue對(duì)象中的數(shù)據(jù)屬性也跟著被修改。
2、demo
2.1、頁面代碼
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><!--引入vue.js文件--><script language="JavaScript" src="script/vue.js"></script><script language="JavaScript">window.onload=function(){//文檔就緒事件函數(shù)var vue = new Vue({el:"#div0","data":{msg:"hello!!!aaaaaaaa"}});}</script> </head> <body> <div id="div0"><span>{{msg}}</span><br/><!--v-model指的是雙向綁定，也就是說之前的v-bind是通過msg這個(gè)變量的值來控制input輸入框現(xiàn)在 v-model 不僅msg來控制input輸入框，反過來，input輸入框的內(nèi)容也會(huì)改變msg的值<input type="text" v-model:value="msg"/>,:value可以省略--><input type="text" v-model="msg"/> </div> </body> </html>2.2、頁面效果
p標(biāo)簽內(nèi)的數(shù)據(jù)能夠和文本框中的數(shù)據(jù)實(shí)現(xiàn)同步修改：
- input 標(biāo)簽內(nèi)的msg綁定了Vue對(duì)象中的msg屬性，msg屬性又綁定了span標(biāo)簽內(nèi)的{{msg}}值，所以在頁面修改標(biāo)簽中的值span標(biāo)簽中的{{msg}}值也跟著變化。
3、去除前后空格
3.1、trim修飾符
實(shí)際開發(fā)中，要考慮到用戶在輸入數(shù)據(jù)時(shí)，有可能會(huì)包含前后空格。而這些前后的空格對(duì)我們程序運(yùn)行來說都是干擾因素，要去掉。在v-model后面加上.trim修飾符即可實(shí)現(xiàn)。
Vue會(huì)幫助我們?cè)谖谋究蚴ソ裹c(diǎn)時(shí)自動(dòng)去除前后空格。
沒加之前：
加了之后：
第六節(jié) 基本語法：條件渲染
根據(jù)Vue對(duì)象中，數(shù)據(jù)屬性的值來判斷是否對(duì)HTML頁面內(nèi)容進(jìn)行渲染。
1、v-if
1.1、頁面代碼
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><!--引入vue.js文件--><script language="JavaScript" src="script/vue.js"></script><script language="JavaScript">window.onload=function(){//文檔就緒事件函數(shù)var vue = new Vue({el:"#div0","data":{num:2}});}</script> </head> <body> <div id="div0"><input type="text" v-model="num"/><!-- v-if表示里面的條件成立才能夠綁定，即：如果num除以2的余數(shù)為0才成立--><div v-if="num%2==0" style="width:200px;height:200px;background-color: chartreuse;"> </div> </div> </body> </html>1.2、運(yùn)行測(cè)試
說明：由于num同時(shí)綁定了input標(biāo)簽的v-model="num"屬性和div標(biāo)簽的v-if="num%2==0"屬性，所以在文本框輸入奇數(shù)、偶數(shù)，顯示效果也跟著變化。
2、v-if和v-else
2.1、頁面代碼
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><!--引入vue.js文件--><script language="JavaScript" src="script/vue.js"></script><script language="JavaScript">window.onload=function(){//文檔就緒事件函數(shù)var vue = new Vue({el:"#div0","data":{num:2}});}</script> </head> <body> <div id="div0"><input type="text" v-model="num"/><!-- 表示如果條件成立綁定v-if中的，如果條件不成立綁定v-else中的--><!-- v-if和v-else之間不可以插入其他節(jié)點(diǎn)/標(biāo)簽 --><div v-if="num%2==0" style="width:200px;height:200px;background-color: chartreuse;"> </div><div v-else="num%2==0" style="width:200px;height:200px;background-color: coral"> </div> </div> </body> </html>2.2、運(yùn)行測(cè)試
3、v-show
3.1、頁面代碼
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><!--引入vue.js文件--><script language="JavaScript" src="script/vue.js"></script><script language="JavaScript">window.onload=function(){//文檔就緒事件函數(shù)var vue = new Vue({el:"#div0","data":{num:2}});}</script> </head> <body> <div id="div0"><input type="text" v-model="num"/><!-- 表示如果條件成立綁定v-if中的，如果條件不成立綁定v-else中的--><!-- v-if和v-else之間不可以插入其他節(jié)點(diǎn)/標(biāo)簽 --><div v-if="num%2==0" style="width:200px;height:200px;background-color: chartreuse;"> </div><div v-else="num%2==0" style="width:200px;height:200px;background-color: coral"> </div><!-- v-show --><!-- v-show是通過display屬性來控制這個(gè)div是否顯示，標(biāo)簽還在只不過不滿足時(shí)設(shè)置了屬性為display:none ，上面使用v-if屬性，如果不滿足連這個(gè)div標(biāo)簽都沒有了--><div v-show="num%2==0" style="width:200px;height:200px;background-color:blueviolet;"> </div></div> </body> </html>3.2、運(yùn)行測(cè)試
第七節(jié) 基本語法：列表渲染
1、迭代一個(gè)簡單的數(shù)組
1.1、頁面代碼
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><!--引入vue.js文件--><script language="JavaScript" src="script/vue.js"></script><script language="JavaScript">window.onload=function(){//文檔就緒事件函數(shù)var vue = new Vue({el:"#div0","data":{"fruitList": ["apple","banana","orange","grape","dragonfruit"]}});}</script> </head> <body> <div id="div0"><ul><!-- 使用v-for語法遍歷數(shù)組 --><!-- v-for的值是語法格式是：引用數(shù)組元素的變量名 in Vue對(duì)象中的數(shù)組屬性名 --><!-- 在文本標(biāo)簽體中使用{{引用數(shù)組元素的變量名}}渲染每一個(gè)數(shù)組元素 --><li v-for="fruit in fruitList">{{fruit}}</li></ul> </div> </body> </html>1.2、運(yùn)行測(cè)試
2、迭代一個(gè)對(duì)象數(shù)組
2.1、頁面代碼
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><!--引入vue.js文件--><script language="JavaScript" src="script/vue.js"></script><script language="JavaScript">window.onload=function(){//文檔就緒事件函數(shù)var vue = new Vue({el:"#div0","data":{fruitList:[ //這是一個(gè)數(shù)組，里面存的是一個(gè)個(gè)的對(duì)象{fname:"蘋果",price:5,fcount:100,remark:"蘋果很好吃"},{fname:"菠蘿",price:3,fcount:120,remark:"菠蘿很好吃"},{fname:"香蕉",price:4,fcount:50,remark:"香蕉很好吃"},{fname:"西瓜",price:6,fcount:100,remark:"西瓜很好吃"}]}});}</script> </head> <body> <div id="div0"><table border="1" width="400" cellpadding="4" cellspacing="0"><tr><th>名稱</th><th>單價(jià)</th><th>庫存</th><th>備注</th></tr><!-- v-for表示迭代：循環(huán)迭代fruitList數(shù)組，把每個(gè)值賦值給fruit--><tr align="center" v-for="fruit in fruitList"><td>{{fruit.fname}}</td><td>{{fruit.price}}</td><td>{{fruit.fcount}}</td><td>{{fruit.remark}}</td></tr></table> </div> </body> </html>2.2、運(yùn)行測(cè)試
第八節(jié) 基本語法：事件驅(qū)動(dòng)
1、demo：字符串順序反轉(zhuǎn)
1.1、頁面代碼
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><!--引入vue.js文件--><script language="JavaScript" src="script/vue.js"></script><script language="JavaScript">window.onload=function(){//文檔就緒事件函數(shù)var vue = new Vue({el:"#div0",data:{msg:"hello world!"},//在methods屬性中用來聲明事件的方法methods:{ myReverse:function(){/* this.msg：獲取到msg* .split(",")：表示按逗號(hào)分隔* .split(" ")：表示按空格分隔* .split("")：里面是一個(gè)字符串連空格都沒有，表示把每個(gè)數(shù)據(jù)都分隔開* .reverse()：反轉(zhuǎn)，取到之后每個(gè)都反轉(zhuǎn)* .join("")：連接，反轉(zhuǎn)之后在連在一起* 最后賦值給 this.msg* */this.msg = this.msg.split("").reverse().join("");}}});}</script> </head> <body> <div id="div0"><span>{{msg}}</span><br/><!-- v-on:click 表示綁定點(diǎn)擊事件，v-on:事件類型="事件響應(yīng)函數(shù)的函數(shù)名"注意這個(gè) myReverse不要寫括號(hào)()，當(dāng)點(diǎn)擊這個(gè)按鈕時(shí)會(huì)調(diào)用myReverse對(duì)應(yīng)的方法--><!-- v-on可以省略，變成 @click --><!--<input type="button" value="反轉(zhuǎn)" v-on:click="myReverse"/>--><input type="button" value="反轉(zhuǎn)" @click="myReverse"/> </div> </body> </html>1.2、運(yùn)行測(cè)試
2、demo：獲取鼠標(biāo)移動(dòng)時(shí)的坐標(biāo)信息
2.1、頁面代碼
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><!--引入vue.js文件--><script language="JavaScript" src="script/vue.js"></script><script language="JavaScript">window.onload=function(){//文檔就緒事件函數(shù)var vue = new Vue({el:"#div0",data:{"position":"暫時(shí)沒有獲取到鼠標(biāo)的位置信息"},"methods":{"recordPosition":function(event){this.position = event.clientX + " " + event.clientY;}}});}</script> </head> <body> <div id="div0"><input type="button" value="鼠標(biāo)坐標(biāo)" v-on:mousemove="recordPosition"/><p id="showPosition">{{position}}</p></div> </body> </html>2.2、運(yùn)行測(cè)試
第九節(jié) 基本語法：偵聽屬性
1、頁面代碼
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><!--引入vue.js文件--><script language="JavaScript" src="script/vue.js"></script><script language="JavaScript">window.onload=function(){//文檔就緒事件函數(shù)var vue = new Vue({el:"#div0",data:{num1:1,num2:2,num3:0},//在watch屬性中聲明對(duì)num1和num2屬性進(jìn)行『偵聽』的函數(shù)watch:{//偵聽屬性num1和num2//當(dāng)num1的值有改動(dòng)時(shí)，那么需要調(diào)用后面定義的方法 , newValue指的是num1的新值(頁面文本框輸入的值)//parseInt()解析為int類型，不用的話是字符串類型結(jié)果顯示字符串拼接num1:function(newValue){this.num3 = parseInt(newValue) + parseInt(this.num2);},num2:function(newValue){this.num3 = parseInt(this.num1) + parseInt(newValue) ;}}});}</script> </head> <body> <div id="div0"><input type="text" v-model="num1" size="2"/>+<input type="text" v-model="num2" size="2"/>=<span>{{num3}}</span> </div> </body> </html>2、運(yùn)行測(cè)試
第十節(jié) 練習(xí)
1、功能效果演示
2、任務(wù)拆解
- 第一步：顯示表格
- 第二步：顯示四個(gè)文本框
- 第三步：創(chuàng)建一個(gè)p標(biāo)簽用來顯示用戶在文本框中實(shí)時(shí)輸入的內(nèi)容
- 第四步：點(diǎn)擊添加記錄按鈕實(shí)現(xiàn)記錄的添加
3、第一步：顯示表格
3.1、HTML標(biāo)簽
<table id="appTable"><tr><th>編號(hào)</th><th>姓名</th><th>年齡</th><th>專業(yè)</th></tr><tr v-for="employee in employeeList"><td>{{employee.empId}}</td><td>{{employee.empName}}</td><td>{{employee.empAge}}</td><td>{{employee.empSubject}}</td></tr> </table>3.2、Vue代碼
var appTable = new Vue({"el": "#appTable","data": {"employeeList": [{"empId": 1,"empName": "tom","empAge": 11,"empSubject": "java"},{"empId": 2,"empName": "jerry","empAge": 22,"empSubject": "php"},{"empId": 3,"empName": "peter","empAge": 33,"empSubject": "python"}]} });4、第二步：顯示四個(gè)文本框
4.1、HTML標(biāo)簽
<!-- 四個(gè)文本框、顯示收集到的文本框數(shù)據(jù)的p標(biāo)簽、按鈕這三個(gè)部分需要共享數(shù)據(jù)，所以要放在同一個(gè)app中 --> <div id="appDiv"><!-- 第一部分：四個(gè)文本框 -->編號(hào)：<input type="text" v-model="empId" /><br/>姓名：<input type="text" v-model="empName" /><br/>年齡：<input type="text" v-model="empAge" /><br/>專業(yè)：<input type="text" v-model="empSubject" /><br/><!-- 第二部分：顯示收集到的文本框數(shù)據(jù)的p標(biāo)簽 --><!-- 第三部分：按鈕 --></div>4.2、Vue代碼
var appDiv = new Vue({"el":"#appDiv","data":{// 初始值設(shè)置空字符串即可"empId":"","empName":"","empAge":"","empSubject":""} });測(cè)試是否正確的方式是：在控制臺(tái)嘗試修改Vue對(duì)象的數(shù)據(jù)屬性值：
5、第三步：創(chuàng)建一個(gè)p標(biāo)簽
HTML標(biāo)簽：
<!-- 四個(gè)文本框、顯示收集到的文本框數(shù)據(jù)的p標(biāo)簽、按鈕這三個(gè)部分需要共享數(shù)據(jù)，所以要放在同一個(gè)app中 --> <div id="appDiv"><!-- 第一部分：四個(gè)文本框 -->編號(hào)：<input type="text" v-model="empId" placeholder="請(qǐng)輸入編號(hào)" /><br/>姓名：<input type="text" v-model="empName" placeholder="請(qǐng)輸入姓名" /><br/>年齡：<input type="text" v-model="empAge" placeholder="請(qǐng)輸入年齡" /><br/>專業(yè)：<input type="text" v-model="empSubject" placeholder="請(qǐng)輸入專業(yè)" /><br/><!-- 第二部分：顯示收集到的文本框數(shù)據(jù)的p標(biāo)簽 --><p>{{empId}} {{empName}} {{empAge}} {{empSubject}}</p><!-- 第三部分：按鈕 --></div>6、第四步：點(diǎn)擊添加記錄按鈕
6.1、第一小步：給按鈕設(shè)置事件驅(qū)動(dòng)
[1]HTML標(biāo)簽
<!-- 四個(gè)文本框、顯示收集到的文本框數(shù)據(jù)的p標(biāo)簽、按鈕這三個(gè)部分需要共享數(shù)據(jù)，所以要放在同一個(gè)app中 --> <div id="appDiv"><!-- 第一部分：四個(gè)文本框 -->編號(hào)：<input type="text" v-model="empId" placeholder="請(qǐng)輸入編號(hào)" /><br/>姓名：<input type="text" v-model="empName" placeholder="請(qǐng)輸入姓名" /><br/>年齡：<input type="text" v-model="empAge" placeholder="請(qǐng)輸入年齡" /><br/>專業(yè)：<input type="text" v-model="empSubject" placeholder="請(qǐng)輸入專業(yè)" /><br/><!-- 第二部分：顯示收集到的文本框數(shù)據(jù)的p標(biāo)簽 --><p>{{empId}} {{empName}} {{empAge}} {{empSubject}}</p><!-- 第三部分：按鈕 --><button type="button" v-on:click="addRecord">添加記錄</button></div>[2]Vue代碼
var appDiv = new Vue({"el":"#appDiv","data":{// 初始值設(shè)置空字符串即可"empId":"","empName":"","empAge":"","empSubject":""},"methods":{"addRecord":function(){console.log("我點(diǎn)擊了那個(gè)按鈕……");}} });6.2、第二小步：打印一下文本框輸入的數(shù)據(jù)
var appDiv = new Vue({"el":"#appDiv","data":{// 初始值設(shè)置空字符串即可"empId":"","empName":"","empAge":"","empSubject":""},"methods":{"addRecord":function(){console.log("我點(diǎn)擊了那個(gè)按鈕……");console.log(this.empId);console.log(this.empName);console.log(this.empAge);console.log(this.empSubject);}} });6.3、第三小步：將收集到的數(shù)據(jù)添加到表格中
"addRecord":function(){// 確認(rèn)單擊事件是否綁定成功console.log("我點(diǎn)擊了那個(gè)按鈕……");// 確認(rèn)是否能夠正確收集到文本框數(shù)據(jù)console.log(this.empId);console.log(this.empName);console.log(this.empAge);console.log(this.empSubject);// 將收集到的文本框數(shù)據(jù)封裝為一個(gè)對(duì)象var employee = {"empId":this.empId,"empName":this.empName,"empAge":this.empAge,"empSubject":this.empSubject};// 將上面的對(duì)象壓入表格數(shù)據(jù)的employeeList數(shù)組appTable.employeeList.push(employee); }第十一節(jié) Vue對(duì)象生命周期
1、概念
在我們各種語言的編程領(lǐng)域中，『生命周期』都是一個(gè)非常常見的概念。一個(gè)對(duì)象從創(chuàng)建、初始化、工作再到釋放、清理和銷毀，會(huì)經(jīng)歷很多環(huán)節(jié)的演變。比如我們?cè)贘avaSE階段學(xué)習(xí)過線程的生命周期，今天學(xué)習(xí)Vue對(duì)象的生命周期，將來還要學(xué)習(xí)Servlet、Filter等Web組件的生命周期。
2、Vue對(duì)象的生命周期
3、生命周期鉤子函數(shù)
Vue允許我們?cè)谔囟ǖ纳芷诃h(huán)節(jié)中通過鉤子函數(shù)來加入我們的代碼。
鉤子函數(shù)：鉤子函數(shù)是在一個(gè)事件觸發(fā)的時(shí)候，在系統(tǒng)級(jí)捕獲到了他，然后做一些操作。一段用以處理系統(tǒng)消息的程序。“鉤子”就是在某個(gè)階段給你一個(gè)做某些處理的機(jī)會(huì)。
特點(diǎn)：
- 是個(gè)函數(shù)，在系統(tǒng)消息觸發(fā)時(shí)被系統(tǒng)調(diào)用
- 不是用戶自己觸發(fā)的
- 使用時(shí)直接編寫函數(shù)體
- 鉤子函數(shù)的名稱是確定的，當(dāng)系統(tǒng)消息觸發(fā)，自動(dòng)會(huì)調(diào)用。
訪問測(cè)試：
第一節(jié) Ajax概述
第二節(jié) Axios基本用法
總結(jié)
以上是生活随笔為你收集整理的013-Vue：前端知识结构概述、基本语法、声明周期的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 【Python案例】Python实现垃圾
- 下一篇： ThinkPHP5验证是不是手机号方法