大白话讲解Vue前端框架
首先介紹一個(gè)很不錯(cuò)的網(wǎng)站：http://www.runoob.com/vue2/vue-tutorial.html
我們?cè)诓恢酪恍┱Z法的時(shí)候，可以過來查詢。
Vue.js（讀音 /vju?/, 類似于 view） 是一套構(gòu)建用戶界面的漸進(jìn)式框架。
Vue 只關(guān)注視圖層， 采用自底向上增量開發(fā)的設(shè)計(jì)。
Vue 的目標(biāo)是通過盡可能簡單的 API 實(shí)現(xiàn)響應(yīng)的數(shù)據(jù)綁定和組合的視圖組件。
簡而言之就是別人開發(fā)好的一個(gè)框架，我們?cè)谇叭说幕A(chǔ)上使用這個(gè)框架能夠很快開發(fā)出比較炫酷的網(wǎng)頁。
1，首先說一下Vue的安裝。兩種方式：
A：我們可以在官網(wǎng)https://cn.vuejs.org直接下載Vue.min.js文件，并用?<script>?標(biāo)簽在HTML中引入。地址如下：Vue.js下載
B：使用CDN的方法（設(shè)置多個(gè)節(jié)點(diǎn)服務(wù)器，分布在不同區(qū)域中，便于用戶進(jìn)行數(shù)據(jù)傳遞和訪問。當(dāng)某一個(gè)節(jié)點(diǎn)出現(xiàn)問題時(shí)，通過其他節(jié)點(diǎn)仍然可以完成數(shù)據(jù)傳輸工作，可以提高用戶訪問網(wǎng)站的響應(yīng)速度。 ）
以下推薦國外比較穩(wěn)定的兩個(gè) CDN，國內(nèi)還沒發(fā)現(xiàn)哪一家比較好，目前還是建議下載到本地。
-
Staticfile CDN（國內(nèi)）?:?https://cdn.staticfile.org/vue/2.2.2/vue.min.js
-
unpkg：https://unpkg.com/vue/dist/vue.js, 會(huì)保持和 npm 發(fā)布的最新的版本一致。
-
cdnjs?:?https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js
2，Vue.js的模板
每個(gè)Vue應(yīng)用都是通過實(shí)例化Vue來實(shí)現(xiàn)的，模板如下：
<!DOCTYPE html> <html> <head><meta charset="utf-8"><title>Vue 測(cè)試實(shí)例 - 菜鳥教程(runoob.com)</title><script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script> </head> <body><div id="vue_det"><h1>site : {{site}}</h1><h1>url : {{url}}</h1><h1>{{details()}}</h1></div><script type="text/javascript">var vm = new Vue({el: '#vue_det',data: {site: "菜鳥教程",url: "www.runoob.com",alexa: "10000"},methods: {details: function() {return this.site + " - 學(xué)的不僅是技術(shù)，更是夢(mèng)想！";}}})</script> </body> </html>3，使用步驟
1. 下載js文件, 或者引入cdn的js文件<script src="js/vue.js"></script>或<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>2. 開始使用vue<div id="x">{{msg}}</div><script>var v = new Vue({el:"#x",data:{msg:"一二三四五, 上山打老虎",msg2:"哈哈哈"}});</script>實(shí)例: 指的是創(chuàng)建出的Vue對(duì)象 v
掛載點(diǎn): 任何一個(gè)被Vue對(duì)象綁定的 具備id屬性的 元素!
模版: 指的是掛載點(diǎn)中顯示的內(nèi)容 , 可以在標(biāo)簽內(nèi)部 使用插值表達(dá)式({{key}}),也可以通過Vue實(shí)例的template屬性實(shí)現(xiàn) (template ? ? ? ? ? ?屬性中內(nèi)容必須被html標(biāo)簽包含)
4，內(nèi)容的簡單介紹
插值表達(dá)式：
語法格式:{{data中的數(shù)據(jù)key}}
用于在掛載點(diǎn)中, 加入數(shù)據(jù)顯示效果 , ?通過在掛載點(diǎn)中, 編寫{{data中的數(shù)據(jù)key}} , 可以將data中的某數(shù)據(jù) 與 掛載點(diǎn)中顯示效果進(jìn)行關(guān)聯(lián)
Vue對(duì)象中 data中的數(shù)據(jù)
包含多個(gè)鍵值對(duì) , 在Vue中使用data數(shù)據(jù)時(shí), 數(shù)據(jù)是響應(yīng)式的 , 當(dāng)數(shù)據(jù)更改時(shí), 對(duì)應(yīng)的視覺效果 也會(huì)一起更改 !
當(dāng)我們需要顯示 data 數(shù)據(jù)時(shí), 如何操作:
1. 使用插值表達(dá)式 2. v-text屬性="data中的數(shù)據(jù)key"3. v-html屬性="data中的數(shù)據(jù)key"案例:<div id="x"><div>{{msg1}}</div><div v-text="msg2"></div><div v-html="msg3"></div></div><script>var v= new Vue({el:"#x",data:{msg1:"<h3>一二三四五<h3>",msg2:"<h3>上山打老虎</h3>",msg3:"<h3>哈哈哈哈哈</h3>"}});</script>v-text與v-html區(qū)別:v-text : 不會(huì)解析HTML內(nèi)容, 而是直接顯示data中的數(shù)據(jù),會(huì)顯示特殊的<>符號(hào)v-html : 會(huì)將data中的數(shù)據(jù), 先進(jìn)行html標(biāo)簽解析, 再顯示效果模板指令: 事件指令
格式1.步驟1. 在dom元素中, 添加屬性:v-on:事件名="函數(shù)名稱"步驟2. 在Vue對(duì)象中, 添加屬性methods, methods是JSON對(duì)象,包含一個(gè)個(gè)的鍵值對(duì), 值為function 格式2.屬于格式1的簡寫方式:將格式1中的步驟1修改為: 在dom元素中, 添加屬性:@事件名="函數(shù)名稱" 即可 !案例1:<div id="x"><button v-on:click="x1">{{msg}}</button><button v-on:click="x2">{{msg}}</button></div><script>new Vue({el:"#x",data:{msg:0},methods:{x1:function(){this.msg++;},x2:function(){this.msg--;}}});</script>案例2:<div id="x" @click="x1" v-html="msg"></div><script>new Vue({el:"#x",data:{msg:'<img src="images/20.jpg" style="width:200px">'},methods:{x1:function(){this.msg = '<img src="images/20.jpg" style="width:700px">';}}});</script>模板指令 - 屬性綁定
語法格式1:使用 v-bind:屬性名稱="data中的key"語法格式2: 語法1的簡寫, 使用 :屬性名稱="data中的key" 案例:<div id="x"><img v-bind:src="img" @click="x1"></div><script>new Vue({el:"#x",data:{img:"images/21.jpg"},methods:{x1:function(){this.img="images/22.jpg"}}});</script>模板屬性 : 數(shù)據(jù)屬性雙向綁定 ( 僅用于input標(biāo)簽 )
具體語法實(shí)現(xiàn), 與普通屬性綁定基本一致:v-model="data中的數(shù)據(jù)key"案例:<div id="x"><input v-model="msg"><div>{{msg}}</div></div><script>var v = new Vue({el:"#x",data:{msg:"一二三四五"}});</script>Vue的計(jì)算屬性
表示一個(gè)屬性, 是通過其他多個(gè)屬性計(jì)算得到的 !格式:computed:{計(jì)算屬性名1:function(){//運(yùn)算邏輯return 屬性值;},計(jì)算屬性名2:function(){//運(yùn)算邏輯return 屬性值;}...}特點(diǎn):如果參與計(jì)算的多個(gè)屬性 沒有發(fā)生改變, 則每次使用的計(jì)算結(jié)果 都為 緩存結(jié)果 !如果參與計(jì)算的屬性 發(fā)生了改變, 則每次使用 都會(huì)重新運(yùn)算 !案例:<div id="x"><input v-model="firstName" placeholder="請(qǐng)輸入姓"><input v-model="lastName" placeholder="請(qǐng)輸入名"><h3>{{fullName1}}</h3><h3>{{fullName2}}</h3></div><script>var v=new Vue({el:"#x",data:{firstName:"",lastName:""},computed:{fullName1:function (){return this.firstName+this.lastName;},fullName2:function (){return this.firstName+" "+this.lastName;}}});</script>偵聽器
用于偵聽data中屬性, 或 計(jì)算屬性的變化. 偵聽器表示一個(gè)個(gè)等待執(zhí)行的代碼塊, 當(dāng)被偵聽的屬性發(fā)生改變時(shí), 則代碼塊自動(dòng)執(zhí)行 !格式:在vue實(shí)例中 添加屬性: watch:{偵聽的屬性名1:function(){},偵聽的屬性名2:function(){},...}案例:<div id="x"><input v-model="firstName" placeholder="請(qǐng)輸入姓"><input v-model="lastName" placeholder="請(qǐng)輸入名"><h3>{{fullName1}}</h3><h3>{{fullName2}}</h3><h3>姓被改變{{count1}}次 ,名被改變{{count2}}次, 全名1被改變{{count3}}次, 全名2被改變{{count4}}次</h3></div><script>var v=new Vue({el:"#x",data:{firstName:"",lastName:"",count1:0,count2:0,count3:0,count4:0},computed:{fullName1:function (){return this.firstName+this.lastName;},fullName2:function (){return this.firstName+" "+this.lastName;}},watch:{firstName:function(){count1++;},lastName:function(){count2++;},fullName1:function(){count3++;},fullName2:function(){count4++;}}});</script>模板指令 v-if
作用: 用于判斷是否加載元素 , 如果結(jié)果為true , 則加載此元素 , 如果結(jié)果為false 則不加載此元素常用在網(wǎng)頁權(quán)限管理頁面: 語法格式:給元素添加屬性: v-if="條件表達(dá)式|data中的key" (可以直接編寫true或false , 不過沒有意義 !)案例:<div id="x"><img src="images/24.jpg" v-if="flag"><button @click="x1">顯示</button> <button @click="x2">隱藏</button></div><script>var v=new Vue({el:"#x",data:{flag:true},methods:{x1:function(){this.flag=true;},x2:function(){this.flag=false;}}});</script>模板指令 v-show
?
作用: 用于判斷是否顯示元素 , 如果結(jié)果為true , 則顯示此元素 , 如果結(jié)果為false 則不隱藏此元素常用在網(wǎng)頁權(quán)限管理頁面: 語法格式:給元素添加屬性: v-show="條件表達(dá)式|data中的key" (可以直接編寫true或false , 不過沒有意義 !) 案例:<div id="x"><img src="images/24.jpg" v-show="flag"><button @click="x1">顯示</button> <button @click="x2">隱藏</button></div><script>var v=new Vue({el:"#x",data:{flag:true},methods:{x1:function(){this.flag=true;},x2:function(){this.flag=false;}}});</script>v-if 與 v-show的區(qū)別:
v-if ? ?: ? 控制的是元素是否加載 ?, 當(dāng)為false時(shí), 直接從網(wǎng)頁中移除元素 !
v-show ?: ? 控制的是元素是否顯示 ?, 無論true或false,元素都會(huì)加載, 只是false時(shí),元素display:none!
?
模板指令 v-for
作用:用于在網(wǎng)頁中,循環(huán)展示數(shù)組數(shù)據(jù) !語法格式1:給元素添加屬性: v-for="item of 數(shù)組名" , 注意數(shù)組名為 data中的數(shù)據(jù)key , 值為數(shù)組語法格式2:給元素添加屬性: v-for="(item,index) of 數(shù)組名" , 注意數(shù)組名為 data中的數(shù)據(jù)key , 值為數(shù)組在上述的兩種語法格式中, item : 表示每次循環(huán)時(shí)得到的數(shù)據(jù) ,在標(biāo)簽中 可以通過插值表達(dá)式 顯示 {{item}}index : 表示每次循環(huán)時(shí)數(shù)據(jù)的索引 ,在標(biāo)簽中 可以通過插值表達(dá)式 顯示 {{index}}案例:<div id="x"><ul><li v-for="item of list">{{item}}</li></ul></div><script>var arr = ["床前明月光","玻璃好上霜","床上及時(shí)擦","整不好得臟","哈哈哈哈哈","嘿嘿嘿嘿嘿"];var v=new Vue({el:"#x",data:{list:arr}});</script>?
總結(jié)
以上是生活随笔為你收集整理的大白话讲解Vue前端框架的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 联想R7000 ubuntu 18.04
- 下一篇： SpringCloud笔记（二）使用Di