前端學習筆記（未整理）
Vue
ViewModel是vue的一個例項。
View -> Dom listener 檢測頁面上dom元素的變化；如有變化 則更改Model中的資料。
Model –> Model中的資料被更新時 Data bindings工具會幫我們更新呢頁面中的Dom元素。
<body>
<!--這是我們的View-->
<div id="app">
{{ message }}
</div>
</body>
<script>
// 這是我們的Model
var exampleData = {
message: 'Hello World!'
}
// 建立一個 Vue 例項或 "ViewModel"
// 它連線 View 與 Model
new Vue({
el: '#app',//掛載到div id=app這個元素
data: exampleData
})
</script>
在建立Vue例項的時候，需要傳入一個“選項物件”。（選項物件可以包含資料、掛載元素、方法、模生命週期鉤子等等。）
el屬性——指向view
data屬性——指向model
【MVVM模式】
“當任何外部事件發生時，永遠只操作 ViewModel 中的資料”
設定viewModel與view的對映關係。
Vue.js可以使用v-model指令在表單元素上建立雙向資料繫結。
<!--這是我們的View-->
<div id="app">
<p>{{ message }}</p>
<input type="text" v-model="message"/>
</div>
將message
<p>{{ message }}</p> 中的內容也會被更新。
每個vue例項都會代理其選項物件裡的data屬性。所以可以直接訪問。
指令
Vue.js的指令以v-開頭 作用於HTML元素。
指令提供一些特殊的特性，將指令繫結在元素上，指令會為繫結的元素新增一些特殊的行為。
常用的內建指令有：v-if、v-show、v-else、v-for、v-bind、v-on（也可以開發一些自定義的指令。）
1、v-if=”expression”(expression 返回一個bool值)條件渲染 根據表示式的真假來刪除和插入元素。
2、v-show也是條件渲染 但是使用v-show指令的元素始終會被渲染到HTML 它只是簡單地為元素設定css的style屬性（display設定為none）
3、v-else 用來為v-if or v-show新增一個else塊
如果v-if為true則v-else不會渲染HTML;但如果前面是v-show為true 則v-else依舊會被渲染。
4、v-for=”item in items”基於一個數組渲染一個列表
5、v-bind可以在其名稱後帶一個引數 中間用冒號（：）隔開 這個引數通常是HTML元素的屬性。
6、v-on指令用於監聽DOM事件
v-bind縮寫為：
v-on縮寫為@
<div id="app-2"> <span v-bind:title="message"> 滑鼠懸停幾秒鐘檢視此處動態繫結的提示資訊！ </span> </div>
var app2 = new Vue({ el: '#app-2', data: { message: '頁面加載於 ' + new Date().toLocaleString() } })
“將這個元素節點的 title 特性和 Vue 例項的 message 屬性保持一致”。
一個元件本質上是一個擁有預定義選項的一個vue例項。
在vue中註冊元件://定義名為todo-item的新元件
Vue.component('todo-item', { template: '<li>這是個待辦項</li>' })
只有當例項被建立後，data中存在的屬性才是響應式的。
【例外】當使用objec.freeze(obj)時，會阻止修改現有屬性，響應式系統無法追蹤變化。
除了資料屬性，vue例項還暴露了一些有用的例項屬性和方法，都有 $ 字首。
每個vue例項在被建立時都要經過一系列的初始化過程——同時在這個過程中會執行一些生命週期鉤子（函式）。
如created、mounted、updated、destroyed
生命週期鉤子的this 指向呼叫他的vue例項。
｛｛ msg ｝｝資料繫結（mustache語法）
【v-once進行一次性插值 當資料改變時 不會發生變化】
雙大括號會把資料解釋為普通文字 而不是HTML程式碼；如果想要輸出真正的html 需要使用v-html指令
Mustache語法不能作用在HTML特性上。
只能包含單個表示式。
對於複雜的邏輯，應該使用”計算屬性“。
var vm = new Vue({
el: '#example',
data: {
message: 'Hello'
},
computed: {
// 計算屬性的 getter
reversedMessage: function () {
// `this` 指向 vm 例項
return this.message.split('').reverse().join('')
}
}
})
計算屬性是基於它們的依賴進行快取的。計算屬性只有在它的相關屬性發生改變時，才會重新求值。（message改變時它才重新開始求值。）而呼叫方法時，則每次重新渲染的時候，都會再次執行函式。
偵聽屬性（觀察和響應vue例項上的資料變動）：
操作元素的class列表和內聯樣式是資料繫結的一個常見需求。
我們可以傳給 v-bind:class 一個物件，以動態地切換 class：
<div v-bind:class="{ active: isActive }"></div> |
上面的語法表示 active 這個 class 存在與否將取決於資料屬性 isActive 的。
你可以在物件中傳入更多屬性來動態切換多個 class。此外，v-bind:class 指令也可以與普通的 class 屬性共存。當有如下模板:
<div class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }"> </div> |
和如下 data：
data: { isActive: true, hasError: false } |
結果渲染為：
<div class="static active"></div> |
元件基礎：
通過prop向子元件傳遞資料。
Prop可以在元件上註冊的一些自定義特性。
一個 Vue 應用由一個通過 new Vue 建立的根 Vue 例項，以及可選的巢狀的、可複用的元件樹組成。舉個例子，一個 todo 應用的元件樹可以是這樣的：
|
根例項 所有的vue元件都是vue例項，並且接受相同的選項物件。 |
選項物件包括:data、methods、computed、watch等方法。
自定義元件的時候：data選項必須是一個函式。因此每個例項可以維護一份被返回物件的獨立的拷貝。
data:function(){
return {
count:0
}
}
為了能在模板中使用，元件必須先註冊以便vue能夠識別。
全域性註冊和區域性註冊。
1全域性註冊：Vue.component(可被用在其被註冊之後的任何（通過new Vue）先建立的例項。
Vue.component(‘my-component-name’,{
//…option…
})
通過prop向子元件傳遞資料。
Prop是在元件上註冊的一些自定義特性。
當一個值傳遞給一個Prop 特性的時候，它就變成了那個元件例項的一個屬性。（props屬性）。
如Vue.component(‘blog-post’,{
Props: [‘title’],
Template: ‘<h3>{{title}}</h3>’
})
<blog-post title=”my journey with vue”></blog-post>
也可能有一個數組：
new Vue({
el:'#blog-post-demo',
data:{
posts: [{
id:1, title:"this is my first"
} ,{
id:2, title:"my vue journry"
}
]
}
})
<blog-post v-for="post in posts"
v-bind:key="post.id"
v-bind:title="post.title"
></blog-post>
v-bind用來動態傳遞prop。
【template模板將會替代掛載內容】
每個元件只能有一個根元素：可以將模板的內容包裹在一個父元素內。
<div class=”blog-post”>
<h3>{{ title }}</h3>
<div v-html=”content”></div>
</div>
當元件變得越來越複雜的時候，為每個相關資訊定義一個prop會變得很麻煩。
如：
<blog-post
v-for=”post in posts”
v-bind:key=”post.id”
v-bind:title=”post.title”
v-bind:content=”post.content”
v-bind:comments=”post.comments”
></blog-post>
重構<blog-post>,讓他變成接受一個單獨的post prop.
<blog-post v-for=”post in posts”
v-bind:key=“post.id”
v-bnd:post=”post”
></blog-post>
Vue.component(‘blog-post’,{
props:[‘post’],
template:
<div class=”blog-post”>
<h3> {{post.title}}</h3>
<div v-html=”post.content”></div>
…………
</div>
}
)
通過事件向父級元件傳送訊息：
<div id="blog-posts-events-demo">
<div :style="{fontSize:poseFontSize + 'em'}">
<blog-post v-for="post in posts"
v-bind:key="post.id"
v-bind:post="post"></blog-post>
</div>
</div>
Vue.componet('blog-post',{
props:['post'],
template:'
<div class="blog-post">
<h3> {{post.title}} </h3>
<button>
enlarge button
</button>
<div v-html="post.contet"></div>
</div>
'
})
呼叫內建的$emit 方法並傳入事件的名字，來向父級元件觸發一個事件。
<button @click=”$emit(‘enlarge-text’)”>
Enlarge button
</button>
然後用v-on 監聽這個事件：
<blog-post
…
v-on:enlarge-text=”postFontSize += 0.1”></blog-post>
使用事件丟擲一個值：（比如決定一個文字要放大多少）<>
<button @click=”$emit(‘enlarge-text’,0.1)”>
Enlarge button
</button>
然後用$event 可以訪問到這個值：
<blog-post v-on:enlarge-text=”postFontSize += $event”></blog-post>
也可以傳入一個方法。
在元件上使用v-model：
<input v-model=”searchText”>
<=>
<input
v-bind:value=”searchText”
v-on:input=”searchText = $event.target.value”>
元件上：
<custom-input
v-bind:value=”searchText”
v-on:input=”searchText = $event”></custom-input>
【將其value特性繫結到一個名叫value的prop上】
【在其input事件被觸發後，將新的值通過自定義的input事件丟擲】
Vue.component(‘custom-input’,{
props: [‘value’],
template:’
<input v-bind:value=”value”
v-on:input=”$emit(‘input’,$event.target.value)”>
’
})
通過插槽分發內容：
如：<alert-box>
Sth bad happened
</alert-box>
可能會渲染成ERROR!sth bad happened
Vue自定義的<slot>可以實現。
Vue.component(‘alert-box’,{
Template:’
<div class=”demo-alert-box”>
<strong>ERROR!</strong>
<slot></slot>//在需要的地方加入插槽就行了！
’
})
動態元件：is
---------------------------------分割線------------------------------
元件命名：小寫字母——用橫槓分隔開；
所有的 prop 都使得其父子 prop 之間形成了一個單向下行繫結：父級 prop 的更新會向下流動到子元件中，但是反過來則不行。——單向資料流
將原生事件繫結到元件。
在一個元件的根元素上直接監聽一個原生事件。V-on 的.native修飾符。
is的用法:
有些元素內部不能使用自定義的標籤或者自定義標籤內不能放某些特殊的標籤，這時候就要用is代替，讓HTML語法符合規則驗證。
如<table>
<my-row>…</my-row>
</table>
自定義元件<my-row>會被當作無效內容，因此應該改寫成：
<table>
<tr is=”my-row”></tr>
</table>
is只能用於繫結元件。
:is 是用來動態切換元件的。
區別如下：
is – 要在components 中註冊這個元件，才能用is 引用這個元件。
:is – 要在vue例項中註冊後才能用 :is 在模板#app中呼叫；並且先要定義一個變數。
當在一個自定義元件上使用 class 屬性時，這些類將被新增到該元件的根元素上面。這個元素上已經存在的類不會被覆蓋。
例如，如果你聲明瞭這個元件：
|
Vue.component('my-component', { |
然後在使用它的時候新增一些 class：
|
<my-component class="baz boo"></my-component> |
【template 最外層只能有一個div 不能有兩個並列的div】
【定義元件的模板】
Slot – 插槽是元件的一塊HTML模板 這塊模板顯不顯示 以及怎樣顯示 由父元件來決定。
由於插槽是一塊模板，所以，對於任何一個元件，從模板種類的角度來分，可以分為非插槽模板和插槽模板兩類。
非插槽模板指的是HTML模板，’div span ul table’這些。它的顯示與隱藏以及如何顯示由它自己決定；插槽模板，’slot’。它是一個空殼子，因為它的顯示與隱藏以及如何顯示由父元件控制。但是插槽顯示的位置由自身決定。Slot寫在元件template 的哪塊，父元件傳過來的模板就顯示在哪塊。
作用域插槽：父元件只管樣式，資料由子元件來提供。