溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
什么是vue?
Vue.js是JavaScript MVVM（Model-View-ViewModel）庫，十分簡潔，Vue核心只關注視圖層，相對AngularJS提供更加簡潔、易于理解的API。Vue盡可能通過簡單的API實現響應的數據綁定和組合的視圖組件。
vue是由尤雨溪開發的一款基于MVVM的框架，M->模型，V->視圖， 也就是說模型數據改變了，視圖也跟著改變， 視圖內容改變，模型內容也跟著改變， 業界稱之為雙向綁定，或者說雙向數據驅動，基于此特點，學習這個框架，跟jquery完全不同， 不要用DOM的思想來學習vue, 在vue里面幾乎不需要用到DOM操作，一切都是基于數據驅動.
如何使用vue?
現在vue已經發布了2版本，為什么學1版本，如果想要深入的學習vue，了解和掌握個版本的異同是很有必要的。要想使用vue,首先必須引入vue，在客戶端(瀏覽器)可以通過script標簽引入，如果是服務端，通過import引入
一個基本的vue程序有哪些部分組成？
就像初學者學習jquery一樣，一個基本的jquery程序， 有 domReady, 選擇器，this綁定，事件綁定，屬性和樣式修改組成的，而vue的基本結構如下：
window.onload = function () {
var c = new Vue({
el: '#box', //相當于選擇器
data: {
content: 'ghostwu tell you how to learn vue',
msg : 'vue中的數據1',
msg2 : 'vue中的數據2'
}
});
}
這段簡單的代碼，可以實現最基本的數據讀取和顯示功能.
1，使用vue，先要實例化一個vue
2,構造函數中，傳入字面量對象， data后面也是一個字面量對象，里面的數據可以自定義，按照json的格式
3,el: 表示要把data中的數據顯示在 el 后面跟的元素下面， 比如上面的例子， 就是把data中, content, msg, msg2的數據顯示在id 為 box的元素下面
具體怎么讀取呢？
<div id="box">
{{content}}
<br>
{{msg}}
<br>
{{msg2}}
</div>
{{data中定義的鍵}}， 如{{content}} 讀取的就是vue實例 data里面的 content定義的值，所以{{content}}輸出 ghostwu tell you how to learn vue， 同理{{msg}}輸出vue中的數據1 ,
{{msg2}}輸出 vue中的數據2
如果我們需要讓數據顯示在不同的元素下面，可以定義多個vue實例
window.onload = function () {
var c = new Vue({
el: '#box', //相當于選擇器
data: {
content: 'ghostwu tell you how to learn vue',
msg : 'vue中的數據1',
msg2 : 'vue中的數據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 作用：實現數據的雙向驅動
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個div中輸出的msg的值 都會隨著data中msg的值的變化而變化，這個就叫做M->V，模型M(data中的數據),
視圖V(html代碼). 模型改變，視圖V也跟著改變， 同樣的上面兩個input輸入框中的值任何一個改變了，data中的msg也會改變，4個div中的msg也跟著改變，這個就叫做V->M，視圖改變，模型數據也跟著改變.
data中可以定義哪些數據？
常見的字符串，整形數字，數組，布爾，對象類型都可以
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/>
輸出結果：
this is a msg hello world! 100,200,300 true [object Object] 100
對于json數據，默認情況輸出的是object Object，實際使用中，我們肯定是不希望輸出這玩意， 所以，vue中提供了一個指令v-for
指令：v-for. 作用：循環數組與對象
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>
輸出結果:
八戒
沙增
悟空
八戒
沙增
悟空
v-for指令中， in前面的變量，就是當前需要輸出persons的每一項的值，他的名稱可以自定義.
v-for也可以循環數組
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>
輸出結果：
張三
100
李四
200
如果需要獲取當前數組項的索引，可以用{{$index}}
<ul id="box">
<li v-for="value in arr">{{value}}----{{$index}}</li>
</ul>
輸出結果：
張三----0
100----1
李四----2
200----3
v-for還有另外幾種形式，輸出數組:
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>
輸出結果：
八戒---0----name1 悟空---1----name2 唐僧---2----name3 八戒---0----name1 悟空---1----name2 唐僧---2----name3 name1----八戒---0---name1 name2----悟空---1---name2 name3----唐僧---2---name3
總結
以上所述是小編給大家介紹的vue的基本用法與常見指令，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
