這篇文章給大家分享的是有關Vue.js中基礎指令的示例分析的內容。小編覺得挺實用的,因此分享給大家做個參考,一起跟隨小編過來看看吧。
成都創(chuàng)新互聯(lián)公司成立于2013年,我們提供高端網站建設、重慶網站制作、成都網站設計、網站定制、網絡營銷推廣、小程序設計、微信公眾號開發(fā)、網站推廣服務,提供專業(yè)營銷思路、內容策劃、視覺設計、程序開發(fā)來完成項目落地,為地磅秤企業(yè)提供源源不斷的流量和訂單咨詢。
Vue.js 是一套構建用戶界面的漸進式框架。他自身不是一個全能框架——只聚焦于視圖層。因此它非常容易學習,非常容易與其它庫或已有項目整合。在與相關工具和支持庫一起使用時,Vue.js 也能完美地驅動復雜的單頁應用。他是基于AnjularJs 編寫的,所以和前者的語法特別相似,卻又使用簡潔了很多。
那今天,我就給大家詳細的說道說道這個 Vue.js ,以下是我們這次詳解的目錄,朋友們可以根據自己的情況選擇性閱讀,所有操作均附有代碼實現(xiàn)。
1. Vue.js 如何綁定到頁面中,使用他的功能。
2. Vue 實例化對象的生命周期。
3. Vue 的 所有 數(shù)據綁定指令
1. Vue.js 如何綁定到頁面中,使用他的功能。
先看下面的一段代碼:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <button id="app1" onclick="app1.func()">我是app1,點我</button> </body> <script type="text/javascript" src="js/jquery-3.1.1.min.js" ></script> <script type="text/javascript" src="js/vue.js" ></script> <script type="text/javascript"> //通過Vue.js的構造函數(shù) 實例化出一個根實例 var app1= new Vue({ el:"#app1", data:{ message:"我在app1中顯示出來了嗎?", func:function(){ alert(this.message); } } }); console.log(app1.$data.message); //這個要知道哈,app1就是一個變量,一個對象類型的變量,鏈式語法直接用即可 </script> </html>
效果如下:
上述代碼就是點擊按鈕有彈窗,下面解析一下這段代碼。
var app1= new Vue({ el:"#app1", data:{ message:"我在app1中顯示出來了嗎?", func:function(){ alert(this.message); } } }); console.log(app1.$data.message);
通過Vue.js的構造函數(shù)實例化出一個根實例 app1 ,說白了,這就是我們面向對象的對象的實例化,直接 new 一個對象。
el:"#app1", 這是在 掛載我們實例化對象的元素節(jié)點,就是這個app1 對象作用域是那一個標簽里面的。這里可以是 id、class、tagname。但是主要還是用id,因為他的唯一性。
data:{} 是定義 這個對象的變量和方法,注意所有在和 app1 有關聯(lián)的變量、方法都必須在data中聲明。
注意:
(1)作用域。js5 只有函數(shù)作用域,所以 data 中的函數(shù)如果想調用變量,就必須通過 this. 調用,或者直接通過對象名調用。
(2)外部調用。app1.$data.message; 在js中直接調用 vue 對象的屬性、方法時,需要鏈式語法,一層層點出來,這里用 $data ,主要還是和js的變量作區(qū)別
(3)與HTML代碼的綁定。 這里我是通過 js 的onclick直接綁定的,當然 vue 有自己的事件綁定,這里暫且不講,如果用 js 的行內綁定,注意需要帶對象名。這就是純 OOP思想了。相信大家對面向對象也不陌生,如果真的不知道是啥玩意的,趕緊百度學去。
以上就是最最最最最最.....基礎的使用 vue 的方法了。
2. Vue 實例化對象的生命周期。
接下來,我們說一下,一個實例化出來的對象,他的生命周期是啥樣的,要經歷那些階段。請看下面一段代碼:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="container">我的聲明周期,大家看吧!</div> </body> <script type="text/javascript" src="js/jquery-3.1.1.min.js" ></script> <script type="text/javascript" src="js/vue.js" ></script> <script type="text/javascript"> //以下代碼時顯示vm整個生命周期的流程 var vm = new Vue({ el: "#container", data: { test : 'hello world' }, beforeCreate: function(){ console.log(this); showData('創(chuàng)建vue實例前',this); }, created: function(){ showData('創(chuàng)建vue實例后',this); }, beforeMount:function(){ showData('掛載到dom前',this); }, mounted: function(){ showData('掛載到dom后',this); }, beforeUpdate:function(){ showData('數(shù)據變化更新前',this); }, updated:function(){ showData('數(shù)據變化更新后',this); }, beforeDestroy:function(){ vm.test ="3333"; showData('vue實例銷毀前',this); }, destroyed:function(){ showData('vue實例銷毀后',this); } }); function realDom(){ console.log('真實dom結構:' + document.getElementById('container').innerHTML); } function showData(process,obj){ console.log(process); console.log('data 數(shù)據:' + obj.test) console.log('掛載的對象:') console.log(obj.$el) realDom(); console.log('------------------') console.log('------------------') } </script> </html>
那接下來看看效果圖:
通過控制臺的打印效果可以看出來,實例化 vue 對象大致分為 創(chuàng)建vue實例、掛載到dom、數(shù)據變化更新、vue實例銷毀 4個階段,,注意每個階段都有對應的鉤子,我們可以通過對這些鉤子進行操作,達成一些功能。雖然初學者用不太上,但是提前了解一下還是好的,到時候碰到實際功能要能想得到生命周期的鉤子。
3. Vue 的 所有 數(shù)據綁定指令
那現(xiàn)在我們就總結一下 vue 的最大亮點,各種靈活的數(shù)據綁定方法。這里主要列舉實例詳解 {{}} 、 v-once 、 v-html 、 v-bind 和 v-model 。
(1)首先是 {{}} 、 v-once 、 v-html 的用法,請看下面的代碼:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>數(shù)據綁定篇</title> </head> <body> <!-- 數(shù)據綁定篇 --> <div id="app1"> <!--1. {{}} v-once v-html--> <!--Mustache 標簽,也就是雙大括號,刷新頁面時會顯示出雙大括號--> <button onclick="app1.func()">點我,改變變量message的值</button> <br /><br /> <!--即時綁定,div的內容隨變量變化而變化的,綁定內容作純文本處理--> <!--雙大括號里邊也可以寫表達式,和AngularJs一樣的--> <div>{{message}}</div><br /> <!--只綁定一次,整個div的所有綁定數(shù)據,都只會加載一次,再更新就不會變了--> <div v-once>{{message}}</div><br /> <!--雙大括號只能當純文本顯示,v-html 可以直接綁定HTML標簽的--> <div v-html="h2"></div><br /> </div> </body> <script type="text/javascript" src="js/jquery-3.1.1.min.js" ></script> <script type="text/javascript" src="js/vue.js" ></script> <script type="text/javascript"> //通過Vue.js的構造函數(shù) 實例化出一個根實例 var app1= new Vue({ el:"#app1", //我們實例化的 app1 的掛載的 元素節(jié)點,一般用 id,class,或者tagname也可以,但是多了會沖突 data:{ message:"我是變量message的內容!", h2:"<h2 style='color: fuchsia;'>我是h2標簽</h2>", //注意單引號 //message改變函數(shù) func:function(){ if (this.message == "我是變量message的內容!") { this.message = "message的內容改變了!"; }else{ this.message = "我是變量message的內容!"; } } </script> </html>
然后看一下效果:
還是分析一下這個小demo。
<div>{{message}}</div> Mustache 標簽,也就是雙大括號,他和 AnjularJs 的雙大括號完全相同,就是直接將數(shù)據動態(tài)綁定到標簽中,當變量發(fā)生變化的時候,標簽內容也是改變,上大括號里面也是可以寫表達式的。上述代碼是做了一個 在button中點擊改變變量message的值,然后通過數(shù)據綁定使div的text即時變化。
<div v-once>{{message}}</div>他也是數(shù)據綁定,但是只綁定一次。要注意 v-once是加載div上的,所以整個div的所有綁定數(shù)據,都只會加載一次,再更新就不會變了,所以點擊 button時,第二個div的數(shù)據并沒有發(fā)生改變。
<div v-html="h2"></div>是綁定HTML標簽,注意 他可以直接綁定 HTML模板,但是這一堆HTML標簽不能是多層嵌套的。什么意思呢,就是你之間綁定一段標簽可以,綁定一個模板也可以,但是如果綁定一個模板,那這個模板內部不能再嵌套模板了。否則無法渲染的。上述代碼就是直接導入了一個加了行內樣式的h2標簽,功能十分強大,比直接操作dom節(jié)點強太多了,效率是幾何倍的增長。
(2) 其次是 v-bind
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>數(shù)據綁定篇</title> <style type="text/css"> .aaa{ margin: 10px; width: 100px; height: 100px; background-color: red; } .bbb{ margin: 10px; width: 50px; height: 50px; background-color: blue; } </style> </head> <body> <!-- 數(shù)據綁定篇 --> <div id="app1"> <!--2. v-bind--> <!--v-bind 他是專門用來綁定屬性的 ,主要用來操作元素的 class 列表和它的內聯(lián)樣式--> <!--這個和用 js 直接操作dom節(jié)點功能一樣,不過簡單特別多--> <div v-bind:style = "{backgroundColor:myColor,width: myWidth+'px',height: myHeight+'px'}" onclick="app1.func1()"></div> <!--還可以直接綁定更改 class--> <div v-bind:class="myClass" onclick="app1.func2()"></div> ------------------------------------------------------------------------------------- <div class="img" > <img v-bind:src="mySrc" onclick="app1.func3()"/> </div> </div> </body> <script type="text/javascript" src="js/jquery-3.1.1.min.js" ></script> <script type="text/javascript" src="js/vue.js" ></script> <script type="text/javascript"> //通過Vue.js的構造函數(shù) 實例化出一個根實例 var app1= new Vue({ el:"#app1", data:{ myColor:"blue", myWidth:100, myHeight:100, myClass:"aaa", mySrc:"img/2.png", func1:function(){ if (this.myColor == "blue") { this.myColor = "red"; this.myWidth = 50, this.myHeight = 50 }else{ this.myColor = "blue"; this.myWidth = 100, this.myHeight = 100 } }, func2:function(){ if (this.myClass == "aaa") { this.myClass = "bbb"; }else{ this.myClass = "aaa"; } }, func3:function(){ if (this.mySrc == "img/2.png") { this.mySrc = "img/u=1622626696,1630096734&fm=23&gp=0.jpg"; }else{ this.mySrc = "img/2.png"; } } } }); </script> </html>
然后看一下效果:
那我們解析一下上面的代碼。
v-bind 他是專門用來綁定屬性的 ,主要用來操作元素的 class 列表和它的內聯(lián)樣式。這一點和AnjularJs的 ng-bind 是完全不同的,要注意?。。?/p>
<div v-bind:style = "{backgroundColor:myColor,width: myWidth+'px',height: myHeight+'px'}" onclick="app1.func1()"></div> 這是在直接綁定行內樣式style。然后通過綁定點擊函數(shù),為各個比那兩賦值,達到點擊更改div樣式的目的。
<div v-bind:class="myClass" onclick="app1.func2()"></div> 這個是直接綁定修改 class類名,在頁內樣式表中有我定義的 .aaa 和 .bbb 兩個類名,通過動態(tài)修改class名修改樣式,這也比 JQuery 直接操作dom節(jié)點快捷不少。
<img v-bind:src="mySrc" onclick="app1.func3()"/> 這是直接綁定屬性,動態(tài)修改 img 的src 屬性。達到點擊圖像顯示不同的圖像的效果。
這里要特別強調一下,v-bind 直接綁定的是屬性,而不是樣式 ,對于 img ,他的src是屬性,但是對于 div ,width 啥的是樣式,不是屬性,所以 v-bind:width="100+'px'" 不好使.
至于 v-bind 屬性綁定,也就常用用法也就這么多了。
(3) v-model
用 v-model 指令在表單控件元素上創(chuàng)建雙向數(shù)據綁定。它會根據控件類型自動選取正確的方法來更新元素。它負責監(jiān)聽用戶的輸入事件以更新數(shù)據,并特別處理一些極端的例子。v-model 并不關心表單控件初始化所生成的值。因為它會選擇 Vue 實例數(shù)據來作為具體的值。在默認情況下, v-model 在 input 事件中同步輸入框的值與數(shù)據,但你可以添加一個修飾符 lazy ,從而轉變?yōu)樵?change 事件中同步
下面我們看一段代碼:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>數(shù)據綁定篇</title> <style type="text/css"> .aaa{ margin: 10px; width: 100px; height: 100px; background-color: red; } .bbb{ margin: 10px; width: 50px; height: 50px; background-color: blue; } </style> </head> <body> <!-- 數(shù)據綁定篇 --> <div id="app1"> <!--3. v-model--> <input type="text" v-model="myText" placeholder="請輸入:"/> <div >{{ myText }}</div><br /><br /> ------------------------------------------------------------------------------------- <!--綁定單選按鈕--> <input type="radio" id="one" name="aa" value="男" v-model="picked"> <label for="one">男</label> <br> <input type="radio" id="two" name="aa" value="女" v-model="picked"> <label for="two">女</label> <br> <span>您選擇了: {{ picked }}</span> <br><br> ------------------------------------------------------------------------------------- <!--綁定復選按鈕--> <div onclick="app1.funcCheckedNames()"> <input type="checkbox" id="jack" value="好帥!" v-model="checkedNames"> <label for="jack">好帥!</label> <input type="checkbox" id="john" value="你是我的男神!" v-model="checkedNames"> <label for="john">你是我的男神!</label> <input type="checkbox" id="mike" value="我愛你,飛哥!" v-model="checkedNames"> <label for="mike">我愛你,飛哥!</label> </div> <br> <span>您對飛哥的評價: {{ names }}</span><br><br> -------------------------------------------------------------------------- <!--綁定單選列表--><br> <select v-model="selected1"> <option>親飛哥</option> <option>向飛哥表白</option> <option>請飛哥吃飯</option> </select><br> <span>真心話大冒險: {{ selected1 }}</span><br><br> ------------------------------------------------------------------------------ <div onclick="app1.funcselected22()"> <select v-model="selected2" multiple> <option>親親</option> <option>抱抱</option> <option>舉高高</option> </select> </div><br> <span>你想和飛哥偷偷干些啥: {{ selected22 }}</span><br> </div> </body> <script type="text/javascript" src="js/jquery-3.1.1.min.js" ></script> <script type="text/javascript" src="js/vue.js" ></script> <script type="text/javascript"> //通過Vue.js的構造函數(shù) 實例化出一個根實例 var app1= new Vue({ el:"#app1", data:{ myText:"", picked:"", selected1:"", //這是復選列表的變量,函數(shù) selected2:[], selected22:"", funcselected22:function(){ this.selected22 = this.selected2.join(" "); }, //復選框的函數(shù),及其相關變量 checkedNames:[], names:"", funcCheckedNames:function(){ this.names = this.checkedNames.join(" "); } </script> </html>
然后看一下效果:
然后解析一下這段代碼。這里就不一一詳細解釋代碼了,挑幾個典型的詳解,其他的便很簡單了。
我們就以 多選按鈕為例:
<div onclick="app1.funcCheckedNames()"> <input type="checkbox" id="jack" value="好帥!" v-model="checkedNames"> <label for="jack">好帥!</label> <input type="checkbox" id="john" value="你是我的男神!" v-model="checkedNames"> <label for="john">你是我的男神!</label> <input type="checkbox" id="mike" value="我愛你,飛哥!" v-model="checkedNames"> <label for="mike">我愛你,飛哥!</label> </div>
//這是復選列表的變量,函數(shù) selected2:[], selected22:"", funcselected22:function(){ this.selected22 = this.selected2.join(" "); },
這里要強調一下,v-model 動態(tài)綁定這種多選框之類的,會以數(shù)組的形式存取,所以,我們用 selected2:[], 變量接收 選擇框 的數(shù)據,但是我們又不能直接用雙大括號顯示數(shù)據,朋友們可以試驗一下,雙大括號是純文本顯示,他會把整個數(shù)組的中括號,引號,逗號都顯示出來,太丑了。所以這里,我用了JQuery的數(shù)組分割為字符串的函數(shù) join(" "),把選中的數(shù)據分割成字符串,再用一個字符串類型的變量接收數(shù)據,這樣打印出來就好多了。注意,這里 join(" ") 我用的分隔符是 空白字符,它占一個漢字的空間,但是不會顯示出來。
感謝各位的閱讀!關于“Vue.js中基礎指令的示例分析”這篇文章就分享到這里了,希望以上內容可以對大家有一定的幫助,讓大家可以學到更多知識,如果覺得文章不錯,可以把它分享出去讓更多的人看到吧!
名稱欄目:Vue.js中基礎指令的示例分析
網站網址:http://muchs.cn/article34/pdggpe.html
成都網站建設公司_創(chuàng)新互聯(lián),為您提供外貿網站建設、小程序開發(fā)、ChatGPT、網站維護、服務器托管、虛擬主機
聲明:本網站發(fā)布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經允許不得轉載,或轉載時需注明來源: 創(chuàng)新互聯(lián)