點(diǎn)擊下載
本文文檔

當(dāng)前位置：首頁(yè) - 科技 - 知識(shí)百科 - 正文

vue的基本用法與常見指令

來(lái)源：懂視網(wǎng) 責(zé)編：小采時(shí)間：2020-11-27 22:32:42

vue的基本用法與常見指令

vue的基本用法與常見指令:什么是vue? Vue.js是JavaScript MVVM（Model-View-ViewModel）庫(kù)，十分簡(jiǎn)潔，Vue核心只關(guān)注視圖層，相對(duì)AngularJS提供更加簡(jiǎn)潔、易于理解的API。Vue盡可能通過(guò)簡(jiǎn)單的API實(shí)現(xiàn)響應(yīng)的數(shù)據(jù)綁定和組合的視圖組件。 vue是由尤雨溪開發(fā)的一款基于MVVM的

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

導(dǎo)讀vue的基本用法與常見指令:什么是vue? Vue.js是JavaScript MVVM（Model-View-ViewModel）庫(kù)，十分簡(jiǎn)潔，Vue核心只關(guān)注視圖層，相對(duì)AngularJS提供更加簡(jiǎn)潔、易于理解的API。Vue盡可能通過(guò)簡(jiǎn)單的API實(shí)現(xiàn)響應(yīng)的數(shù)據(jù)綁定和組合的視圖組件。 vue是由尤雨溪開發(fā)的一款基于MVVM的

什么是vue?

Vue.js是JavaScript MVVM（Model-View-ViewModel）庫(kù)，十分簡(jiǎn)潔，Vue核心只關(guān)注視圖層，相對(duì)AngularJS提供更加簡(jiǎn)潔、易于理解的API。Vue盡可能通過(guò)簡(jiǎn)單的API實(shí)現(xiàn)響應(yīng)的數(shù)據(jù)綁定和組合的視圖組件。

vue是由尤雨溪開發(fā)的一款基于MVVM的框架，M->模型，V->視圖，也就是說(shuō)模型數(shù)據(jù)改變了，視圖也跟著改變，視圖內(nèi)容改變，模型內(nèi)容也跟著改變，業(yè)界稱之為雙向綁定，或者說(shuō)雙向數(shù)據(jù)驅(qū)動(dòng)，基于此特點(diǎn)，學(xué)習(xí)這個(gè)框架，跟jquery完全不同，不要用DOM的思想來(lái)學(xué)習(xí)vue, 在vue里面幾乎不需要用到DOM操作，一切都是基于數(shù)據(jù)驅(qū)動(dòng).

如何使用vue?

現(xiàn)在vue已經(jīng)發(fā)布了2版本，為什么學(xué)1版本，如果想要深入的學(xué)習(xí)vue，了解和掌握個(gè)版本的異同是很有必要的。要想使用vue,首先必須引入vue，在客戶端(瀏覽器)可以通過(guò)script標(biāo)簽引入，如果是服務(wù)端，通過(guò)import引入

一個(gè)基本的vue程序有哪些部分組成？

就像初學(xué)者學(xué)習(xí)jquery一樣，一個(gè)基本的jquery程序，有 domReady, 選擇器，this綁定，事件綁定，屬性和樣式修改組成的，而vue的基本結(jié)構(gòu)如下：

window.onload = function () {
 var c = new Vue({
 el: '#box', //相當(dāng)于選擇器
 data: {
 content: 'ghostwu tell you how to learn vue',
 msg : 'vue中的數(shù)據(jù)1',
 msg2 : 'vue中的數(shù)據(jù)2'
 }
 });
}

這段簡(jiǎn)單的代碼，可以實(shí)現(xiàn)最基本的數(shù)據(jù)讀取和顯示功能.

1，使用vue，先要實(shí)例化一個(gè)vue

2,構(gòu)造函數(shù)中，傳入字面量對(duì)象， data后面也是一個(gè)字面量對(duì)象，里面的數(shù)據(jù)可以自定義，按照json的格式

3,el: 表示要把data中的數(shù)據(jù)顯示在 el 后面跟的元素下面，比如上面的例子，就是把data中, content, msg, msg2的數(shù)據(jù)顯示在id 為 box的元素下面

具體怎么讀取呢？

<div id="box">
 {{content}}
 <br>
 {{msg}}
 <br>
 {{msg2}}
</div>

{{data中定義的鍵}}，如{{content}} 讀取的就是vue實(shí)例 data里面的 content定義的值，所以{{content}}輸出 ghostwu tell you how to learn vue，同理{{msg}}輸出vue中的數(shù)據(jù)1 ,

{{msg2}}輸出 vue中的數(shù)據(jù)2

如果我們需要讓數(shù)據(jù)顯示在不同的元素下面，可以定義多個(gè)vue實(shí)例

window.onload = function () {
 var c = new Vue({
 el: '#box', //相當(dāng)于選擇器
 data: {
 content: 'ghostwu tell you how to learn vue',
 msg : 'vue中的數(shù)據(jù)1',
 msg2 : 'vue中的數(shù)據(jù)2'
 }
 });
 var c2 = new Vue({
 el: '#box2',
 data: {
 msg: 'this is a paragraphy'
 }
 });
 var c3 = new Vue({
 el: '#box3',
 data: {
 msg2: 'this is box3'
 }
 });
 }
<p id="box2">{{msg}}</p>
<div id="box">
 {{content}}
 <br>
 {{msg}}
 <br>
 {{msg2}}
</div>
 <div id="box3">{{msg2}}</div>

指令：v-model 作用：實(shí)現(xiàn)數(shù)據(jù)的雙向驅(qū)動(dòng)

window.onload = function () {
 var c = new Vue({
 el: "body",
 data: {
 msg: 'welcome to study vue!!!'
 }
 });
 }
<input type="text" v-model="msg" id="txt" />
 <input type="text" v-model="msg" id="txt2"/>
 <br/>
 {{msg}}
 <div class="box">
 {{msg}}
 </div>
 <div class="box">
 {{msg}}
 </div>
 <div class="box">
 {{msg}}
 </div>
 <div class="box">
 {{msg}}
 </div>

上例，如果修改data中msg的值，那么輸入框中v-model綁定的msg, 以及4個(gè)div中輸出的msg的值都會(huì)隨著data中msg的值的變化而變化，這個(gè)就叫做M->V，模型M(data中的數(shù)據(jù)),

視圖V(html代碼). 模型改變，視圖V也跟著改變，同樣的上面兩個(gè)input輸入框中的值任何一個(gè)改變了，data中的msg也會(huì)改變，4個(gè)div中的msg也跟著改變，這個(gè)就叫做V->M，視圖改變，模型數(shù)據(jù)也跟著改變.

data中可以定義哪些數(shù)據(jù)？

常見的字符串，整形數(shù)字，數(shù)組，布爾，對(duì)象類型都可以

window.onload = function () {
 var c = new Vue({
 el: 'body',
 data: {
 msg: 'this is a msg',
 msg2 : 'hello world!',
 arr : [ 100, 200, 300 ],
 flag : true,
 json : {
 key1 : '八戒',
 key2 : '悟空',
 key3 : '沙僧'
 },
 num : 100,
 }
 });
 }
{{msg}} <br/>
 {{msg2}} <br/>
 {{arr}} <br/>
 {{flag}} <br/>
 {{json}}<br/>
 {{num}}<br/>

輸出結(jié)果：

this is a msg 
hello world! 
100,200,300 
true 
[object Object]
100

對(duì)于json數(shù)據(jù)，默認(rèn)情況輸出的是object Object，實(shí)際使用中，我們肯定是不希望輸出這玩意，所以，vue中提供了一個(gè)指令v-for

指令：v-for. 作用：循環(huán)數(shù)組與對(duì)象

window.onload = function () {
 var c = new Vue({
 el: '#box',
 data: {
 persons: {
 name1: '八戒',
 name2: '沙增',
 name3: '悟空'
 }
 }
 });
 }
<div id="box">
 <ul>
 <li v-for="value in persons">{{value}}</li>
 </ul>
 <ul>
 <li v-for="a in persons">{{a}}</li>
 </ul>
</div>

輸出結(jié)果:

八戒
沙增
悟空
八戒
沙增
悟空

v-for指令中， in前面的變量，就是當(dāng)前需要輸出persons的每一項(xiàng)的值，他的名稱可以自定義.

v-for也可以循環(huán)數(shù)組

window.onload = function () {
 var c = new Vue({
 el : '#box',
 data : {
 arr : [ '張三', 100, '李四', 200 ]
 }
 });
 }

<ul id="box">
 <li v-for="value in arr">{{value}}</li>
 </ul>

輸出結(jié)果：

張三
100
李四
200

如果需要獲取當(dāng)前數(shù)組項(xiàng)的索引，可以用{{$index}}

<ul id="box">
 <li v-for="value in arr">{{value}}----{{$index}}</li>
</ul>

輸出結(jié)果：

張三----0
100----1
李四----2
200----3

v-for還有另外幾種形式，輸出數(shù)組:

window.onload = function () {
 var c = new Vue({
 el : '#box',
 data : {
 persons : {
 name1 : "八戒",
 name2 : "悟空",
 name3 : "唐僧"
 }
 }
 });
 }
<ul id="box">
 <li v-for="value in persons">{{value}}---{{$index}}----{{$key}}</li>
 <hr/>
 <li v-for="value in persons">{{value}}---{{$index}}----{{$key}}</li>
 <hr/>
 <li v-for="(k,v) in persons">{{k}}----{{v}}---{{$index}}---{{$key}}</li>
</ul>

輸出結(jié)果：

八戒---0----name1
悟空---1----name2
唐僧---2----name3
八戒---0----name1
悟空---1----name2
唐僧---2----name3
name1----八戒---0---name1
name2----悟空---1---name2
name3----唐僧---2---name3

總結(jié)

以上所述是小編給大家介紹的vue的基本用法與常見指令，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

vue的基本用法與常見指令

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

標(biāo)簽：使用 VUE 的主要

熱門焦點(diǎn)

vue的基本用法與常見指令

vue的基本用法與常見指令

vue的基本用法與常見指令

最新推薦

猜你喜歡

熱門推薦