大白话讲解Vue前端框架
生活随笔
收集整理的這篇文章主要介紹了
大白话讲解Vue前端框架
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
首先介紹一個很不錯的網站：http://www.runoob.com/vue2/vue-tutorial.html
我們在不知道一些語法的時候，可以過來查詢。
Vue.js（讀音 /vju?/, 類似于 view） 是一套構建用戶界面的漸進式框架。
Vue 只關注視圖層， 采用自底向上增量開發的設計。
Vue 的目標是通過盡可能簡單的 API 實現響應的數據綁定和組合的視圖組件。
簡而言之就是別人開發好的一個框架，我們在前人的基礎上使用這個框架能夠很快開發出比較炫酷的網頁。
1，首先說一下Vue的安裝。兩種方式：
A：我們可以在官網https://cn.vuejs.org直接下載Vue.min.js文件，并用?<script>?標簽在HTML中引入。地址如下：Vue.js下載
B：使用CDN的方法（設置多個節點服務器，分布在不同區域中，便于用戶進行數據傳遞和訪問。當某一個節點出現問題時，通過其他節點仍然可以完成數據傳輸工作，可以提高用戶訪問網站的響應速度。 ）
以下推薦國外比較穩定的兩個 CDN，國內還沒發現哪一家比較好，目前還是建議下載到本地。
-
Staticfile CDN（國內）?:?https://cdn.staticfile.org/vue/2.2.2/vue.min.js
-
unpkg：https://unpkg.com/vue/dist/vue.js, 會保持和 npm 發布的最新的版本一致。
-
cdnjs?:?https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js
2，Vue.js的模板
每個Vue應用都是通過實例化Vue來實現的，模板如下：
<!DOCTYPE html> <html> <head><meta charset="utf-8"><title>Vue 測試實例 - 菜鳥教程(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 + " - 學的不僅是技術，更是夢想！";}}})</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>實例: 指的是創建出的Vue對象 v
掛載點: 任何一個被Vue對象綁定的 具備id屬性的 元素!
模版: 指的是掛載點中顯示的內容 , 可以在標簽內部 使用插值表達式({{key}}),也可以通過Vue實例的template屬性實現 (template ? ? ? ? ? ?屬性中內容必須被html標簽包含)
4，內容的簡單介紹
插值表達式：
語法格式:{{data中的數據key}}
用于在掛載點中, 加入數據顯示效果 , ?通過在掛載點中, 編寫{{data中的數據key}} , 可以將data中的某數據 與 掛載點中顯示效果進行關聯
Vue對象中 data中的數據
包含多個鍵值對 , 在Vue中使用data數據時, 數據是響應式的 , 當數據更改時, 對應的視覺效果 也會一起更改 !
當我們需要顯示 data 數據時, 如何操作:
1. 使用插值表達式 2. v-text屬性="data中的數據key"3. v-html屬性="data中的數據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區別:v-text : 不會解析HTML內容, 而是直接顯示data中的數據,會顯示特殊的<>符號v-html : 會將data中的數據, 先進行html標簽解析, 再顯示效果模板指令: 事件指令
格式1.步驟1. 在dom元素中, 添加屬性:v-on:事件名="函數名稱"步驟2. 在Vue對象中, 添加屬性methods, methods是JSON對象,包含一個個的鍵值對, 值為function 格式2.屬于格式1的簡寫方式:將格式1中的步驟1修改為: 在dom元素中, 添加屬性:@事件名="函數名稱" 即可 !案例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>模板屬性 : 數據屬性雙向綁定 ( 僅用于input標簽 )
具體語法實現, 與普通屬性綁定基本一致:v-model="data中的數據key"案例:<div id="x"><input v-model="msg"><div>{{msg}}</div></div><script>var v = new Vue({el:"#x",data:{msg:"一二三四五"}});</script>Vue的計算屬性
表示一個屬性, 是通過其他多個屬性計算得到的 !格式:computed:{計算屬性名1:function(){//運算邏輯return 屬性值;},計算屬性名2:function(){//運算邏輯return 屬性值;}...}特點:如果參與計算的多個屬性 沒有發生改變, 則每次使用的計算結果 都為 緩存結果 !如果參與計算的屬性 發生了改變, 則每次使用 都會重新運算 !案例:<div id="x"><input v-model="firstName" placeholder="請輸入姓"><input v-model="lastName" placeholder="請輸入名"><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中屬性, 或 計算屬性的變化. 偵聽器表示一個個等待執行的代碼塊, 當被偵聽的屬性發生改變時, 則代碼塊自動執行 !格式:在vue實例中 添加屬性: watch:{偵聽的屬性名1:function(){},偵聽的屬性名2:function(){},...}案例:<div id="x"><input v-model="firstName" placeholder="請輸入姓"><input v-model="lastName" placeholder="請輸入名"><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
作用: 用于判斷是否加載元素 , 如果結果為true , 則加載此元素 , 如果結果為false 則不加載此元素常用在網頁權限管理頁面: 語法格式:給元素添加屬性: v-if="條件表達式|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
?
作用: 用于判斷是否顯示元素 , 如果結果為true , 則顯示此元素 , 如果結果為false 則不隱藏此元素常用在網頁權限管理頁面: 語法格式:給元素添加屬性: v-show="條件表達式|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的區別:
v-if ? ?: ? 控制的是元素是否加載 ?, 當為false時, 直接從網頁中移除元素 !
v-show ?: ? 控制的是元素是否顯示 ?, 無論true或false,元素都會加載, 只是false時,元素display:none!
?
模板指令 v-for
作用:用于在網頁中,循環展示數組數據 !語法格式1:給元素添加屬性: v-for="item of 數組名" , 注意數組名為 data中的數據key , 值為數組語法格式2:給元素添加屬性: v-for="(item,index) of 數組名" , 注意數組名為 data中的數據key , 值為數組在上述的兩種語法格式中, item : 表示每次循環時得到的數據 ,在標簽中 可以通過插值表達式 顯示 {{item}}index : 表示每次循環時數據的索引 ,在標簽中 可以通過插值表達式 顯示 {{index}}案例:<div id="x"><ul><li v-for="item of list">{{item}}</li></ul></div><script>var arr = ["床前明月光","玻璃好上霜","床上及時擦","整不好得臟","哈哈哈哈哈","嘿嘿嘿嘿嘿"];var v=new Vue({el:"#x",data:{list:arr}});</script>?
總結
以上是生活随笔為你收集整理的大白话讲解Vue前端框架的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 联想R7000 ubuntu 18.04
- 下一篇： SpringCloud笔记（二）使用Di