“Vue2.0”跟俺一起全面入坑 01
補(bǔ)充一個(gè)關(guān)于console知識(shí)點(diǎn)
console.dir()可以現(xiàn)實(shí)一個(gè)對象所有的屬性和方法
例如console.dir(document);就可以查看(document樹)下所有的東西。測試一段代碼執(zhí)行時(shí)間：
console.time('test');
/* 這里運(yùn)行待測代碼 */
console.timeEnd('test');
前言：Vue主要是“面向數(shù)據(jù)”編程。當(dāng)數(shù)據(jù)發(fā)生改變時(shí)造成，使用虛擬DOM來改變某一DOM節(jié)點(diǎn)，避免將整個(gè)頁面渲染
一瓮孙、第一個(gè)Vue（讀音：view）
首先在在Vue官網(wǎng)下載vue.js文件。
/*html 代碼層 view層选脊，模版*/
<div id="app">
{{message}}
</div>
/* 引入相關(guān)文件杭抠，然創(chuàng)建實(shí)例，在實(shí)例中寫各種方法就ok了 */
<script src="vue_2.2.0.js"></script>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded',function()){
let data={
messgae:'hello vue'
}
//vm實(shí)例
var vm=new Vue({
el:'#app',///掛在元素
data:data
});
},false);
</script>
Vue特殊= 數(shù)據(jù)雙向綁定 ：數(shù)據(jù)模型(model)與視圖(view)組件的自動(dòng)同步
涉及到的知識(shí)點(diǎn)：指令v-model=""
<div id="app">
<input type="text" placeholder="請輸入" v-model="message"/> /* 將message綁定到當(dāng)前元素并監(jiān)聽其變化 */
<br>
<p>數(shù)據(jù)：{{message}}</p>
</div>
<script src="vue_2.2.0.js"></script>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded',function () {
var vm = new Vue({
el: '#app',
data: {
message: 'hello,Datura!!!'
}
});
},false);
</script>
二恳啥、Vue實(shí)例
Vue實(shí)例偏灿，每個(gè)應(yīng)用都是通過Vue這個(gè)構(gòu)造函數(shù)創(chuàng)建根實(shí)例(root instance) 啟動(dòng)new Vue(選項(xiàng)對象)。需要傳入選項(xiàng)對象钝的，對象包含掛載元素翁垂，數(shù)據(jù)铆遭，模版，方法等沿猜。
| Code | Name | Type | Applied |
|---|---|---|---|
| el: | 掛在元素選擇器 | String | HtmlElement |
| data: | 代理數(shù)據(jù) | Object | Function |
| methods: | 定義方法 | Object |
Vue代理data數(shù)據(jù)枚荣，每個(gè)Vue實(shí)例都會(huì)代理其data對象里所有的屬性，這些被代理的屬性是響應(yīng)的啼肩。新添加的屬性不具備響應(yīng)功能橄妆，改變后不會(huì)更新視圖。
Vue實(shí)例自身屬性和方法祈坠，暴露自身的屬性和方法害碾，以$開頭的，例如$el \ $data
var vm =new Vue({
el:'#app',
data:{
message:'hello Renny!!!'
},
methods:{
test(){
alert(1);
},
compontents:{
//這里存放組件
}
}
})赦拘；
/*vm就是new出來的實(shí)例*/
console.log(vm.$data);//也就是數(shù)據(jù)data慌随，后面還有很多掛載在vm（new出來的）實(shí)例上的屬性
三、聲明式渲染
- 聲明式
只要聲明在哪里(where)做什么(what),而無需關(guān)心如何實(shí)現(xiàn)(how)
- 命令式
需要具體代碼表達(dá)在哪里（where）做什么(what)躺同，如何實(shí)現(xiàn)(how)
例子：求數(shù)組中每一項(xiàng)的倍數(shù)
命令式：使用for循環(huán)拿出每一項(xiàng)阁猜，然后計(jì)算完成后，再放到另一個(gè)數(shù)中
//定義一個(gè)新的空數(shù)組蹋艺，然后利用for循環(huán)剃袍，每一步每一步的放入其中
var arrNew=[];
for(var i=0;i<arr.length;i++)
{
arrNew.push(arr[i]*2);
}
聲明式：使用es6的map方法，關(guān)注如何取值
//將原數(shù)組(arr)中利用map函數(shù)车海，傳入每一項(xiàng)
var arrNew=arr.map(function(item){
return item*2
})
- 聲明式渲染
初始化根實(shí)例，Vue自動(dòng)將數(shù)據(jù)綁定在DOM模版上
所以可以看出數(shù)據(jù)在Vue實(shí)例中定義隘击，再利用"{{xxxx}}"模版中展示侍芝。具體怎么過去的我們不關(guān)注
四、Vue指令
什么是指令：
是一種特殊的自定義行間屬性(也就是在html標(biāo)簽內(nèi)寫)埋同；指令的職責(zé)就是當(dāng)其表達(dá)式的值改變時(shí)相應(yīng)的將某些行為應(yīng)用到DOM上州叠，在VUE中，指令以v-開頭
Vue中的內(nèi)置指令： 點(diǎn)擊查看更多
v-on:
| Name | Comment |
|---|---|
| v-bind: | 動(dòng)態(tài)綁定數(shù)據(jù)凶赁。簡寫為":"咧栗。=>以后的:class="{red:boolean}" |
| v-on: | 綁定時(shí)間監(jiān)聽器。簡寫為“@”虱肄，例：@click="xxx"致板； |
| v-text: | 更新數(shù)據(jù)，會(huì)覆蓋已有結(jié)構(gòu)咏窿。類似{{msg}}斟或； |
| v-show: | 根據(jù)值的真假，切換元素的display屬性集嵌； |
| v-if: | 根據(jù)值的真假萝挤，切換元素會(huì)被銷毀御毅、重建；=>在DOM中已經(jīng)消失 |
| v-else-if: | 多條件判斷怜珍，為真則渲染端蛆； |
| v-else: | 條件都不符合時(shí)渲染； |
| v-for: | 基于元數(shù)據(jù)多次渲染元素或模塊酥泛； |
| v-model: | 在表單空間元素(input等)上創(chuàng)建雙向數(shù)據(jù)綁定(元數(shù)據(jù))今豆； |
| v-pre: | 跳過元素和子元素的編譯過程； |
| v-once: | 只渲染一次揭璃，隨后數(shù)據(jù)更新也不重新渲染晚凿； |
| v-cloak: | 隱藏未編譯的Mustache語法，在css中設(shè)置[v-cloak]{display:none;} |
五瘦馍、Vue模版
- html模版
HTML模版：基于DOM的模版歼秽，模版都是可解析的有效的html
插值
文本：使用“Mustache”語法（大括號(hào)）{{value}};
作用：替換實(shí)例上的屬性值，當(dāng)值改變時(shí)情组，插值內(nèi)容會(huì)被自動(dòng)更新燥筷。也可以使用 v-text="value"代替
<p>{{value}}</p>等價(jià)于<p v-text="value"></p>
