vue-learn
學習vue, 記錄筆記
代碼放在：vue-learn
Hello World
- 創建vue 實例
- el 表示 vue 管理的區域
- data 表示管理區域內的數據
- {{內容}} 進行綁定
TODOList
v-for
循環遍歷 data中 list 的數據
v-on
綁定事件, 放在methods 內
todoList 中在按鈕中綁定提交事件
簡寫: v-on:click => @click
v-model
數據的雙向綁定
輸入框數據發生變化, 則data中數據也發送變化. data 中定義變量發送變化則頁面數據也跟着變
v-model.lazy : 懶惰加載，當鼠標移出輸入框後才加載
v-model.number : 數字加載，只有輸入的是數字才加載，字符串不加載
v-model.trim : 去除空格
v-bind
向組件傳入綁定值，
props 組件接受那些值
簡寫: v-bind:index => :index
v-if
條件判斷語句
v-else
判斷語句, 必須緊跟 v-if, 中間不能插入其他元素
v-else-if
判斷語句, 必須緊跟 v-if, 中間不能插入其他元素
v-text
將值輸出成文本
v-html
將值輸出成html
v-show
輸出元素，不會移除dom， 經常控制界面元素顯示和影藏
v-show 會渲染到頁面，只是display: none;
不支持<template></template>屬性
v-once
將組件放到內存中，不會每次去銷燬，提高性能
MVVM 模式
傳統MVP 設計模式
主要面向DOM進行操作
View <=> Presenter <=> Model
View : 視圖 Presenter : 控制器, 大量的DOM操作
MVVM
View <=> ViewModel <=> Model
ViewModel : DOM Listeners , Data Bindings. Vue 內置的, 我們並不需要關注
主要面向數據進行操作
前端組件化
可以將頁面進行切分, 組件就是界面中的一小塊。
父組件使用v-bind 向子組件傳值，子組件使用 this.$emit 向父組件觸發事件，父組件監聽這個時間, 並接受事件的參數
Vue 實例
全局變量： app.$data.xx
以$開頭的都是這個實例的實例屬性和實例方法
app.$destroy() //將這個實例銷燬，銷燬後再修改值,頁面不會發送變化
生命週期鉤子
生命週期函數就是vue實例在某個時間點自動執行的函數
- init : 初始化事件和生命週期相關部分
- beforeCreate()
- init : 處理外部注入和 雙向綁定等
- created() //初始化完成
- has el : 是否有元素綁定，沒有執行 vm.$mount(el)
- has template : 是否有模版, 有模版就執行模版，沒有就把el的內容當成模版
- beforeMount() //模版和數據即將掛載的一瞬間, 未渲染頁面
- vm.$el replace el 模版和數據進行掛載
- mounted() //已渲染頁面
- mount 掛載
- 當 data 中數據有變化 (app.$data.seen = false)
- beforeUpdate() //渲染之前
- DOM 重新開始渲染
- updated() //渲染之後
- 當 vm.$destroy() 被調用,下面開始執行 (app.$destroy())
- beforeDestroy() //銷燬之前
- 銷燬
- destroyed() //銷燬之後
模版語法
這3個內容之中都可以寫js 表達式
-
插值表達式 : {{data}},
-
v-text
-
v-html
-
單次插入值：當 {{* data}} 使用 v-model 綁定的時候，只會初始化一次，就不會雙向綁定了。多了一個* 。
-
等同於v-html : 當使用 {{{raw_html}}} 時，解析爲html. 這時數據綁定會忽略，如果需要複用模塊片段，使用partials.
-
表達式可以添加過濾器 filter: {{message | capitalize}}, 管道預約不是js語法，不能在表達式中使用，只能添加在表達式之後。Vue內置了一些過濾器，過濾器可以串聯，可以接受參數 {{message | filterA 'arg1' arg2}}.
計算屬性， 方法， 偵聽器
- computed
- methods
- watch
樣式綁定
class
- 綁定obj:
v-bind:class - 綁定數組:
v-bind:[classA, classB]
<div class="static" v-bind:class="{class-a:isA, class-b:isB}"></div>
data : {
isA: true,
isB: false,
}
=> 結果
<div class="static class-a" ></div>
<div v-bind:class="classObject" ></div>
data : {
calssObject :{
'class-a': true,
'class-b': false,
}
}
style
- 綁定obj :
v-bind:style="xx" - 綁定數組 :
v-bind:[styleObjectA, styleObjectB]
條件渲染
給元素加 key="xx" vue就會認爲是頁面中唯一的元素，如果key不同就不會複用
<div v-if="show">
用戶名： <input>
</div>
<div v-else>
郵箱名： <input>
</div>
加key 不會複用
<div v-if="show">
用戶名： <input key="username" />
</div>
<div v-else>
郵箱名： <input key="mail" />
</div>
列表渲染
<div v-for="(item, index) of list"
:key="item.id">
{{item}} -- {{index}}
</div>
性能高： key值唯一，不是用index
我們操作數組的時候，不能使用下標的方式，
- 使用vue提供的方法。
- push 增加
- pop 刪除最後一條
- shift 刪除第一項
- unshift 第一項加內容
- splice 切割
- sort 排序
- reverse 取反
- 改變數組引用，
app.list = [{新數據}]
- set 方法
Vue.set(app.list, 1, 5)
app.$set(app.list, 1, 5)
template
模版佔位符, 包裹一些元素，並不會被渲染
<template v-for="(item, index) of list"
:key="item.id">
<div>{{item}} -- {{index}}</div>
<span>xxx</span>
</template>
對象循環
<div v-for="(item, key, index) of userInfo">
<div>{{item}} -- {{key}} -- {{index}} </div>
</div>
- 改變引用來進行渲染的改變
- set 方法進行改變
//全局方法
Vue.set(app.userInfo, "address", "beijin")
//實例方法
app.$set(app.userInfo, "address", "beijin")
vue 組件間的關係
is
使用is 解決h5中 標籤規範 的bug, 包含後頁面展現錯誤
<select>
<option is="row"></option>
</select>
Vue.component("row", {
template : "<tr><td>this is a row</td></tr>",
})
子組件定義data, 必須是一個函數，而不能是一個對象,
Vue.component("row", {
data : function () {
return {
content : "this is a row"
}
},
template : "<tr><td>{{content}}</td></tr>",
})
操作DOM
使用 ref 定義引用名稱
<div ref="hello" @click="handleClick"> hello world</div>
var app = new Vue({
el: "#app",
methods : {
handleClick : function () {
console.log( this.$refs.hello.innerHTML )
}
},
})
父組件通過屬性的方式向子組件傳值
父組件
<counter :count="0"></counter>
子組件 使用props 接受父組件傳遞的參數
var counter = {
template: '<div>{{count}}</div>',
props : ["count"],
}
單項數據流：子組件不能反過來修改父組件的值, 只能拷貝後修改自己的值
父子組件傳值
- 父組件通過屬性的方式，子組件props 接收
- 子組件使用事件觸發向上傳值，父組件監聽事件，獲得傳遞的參數
非父子組件傳值
- Vuex
- 總線機制 ： Bus/總線/發佈訂閱模式/觀察者模式
Vue中的插槽(slot)
當子組件顯示依賴父組件傳遞dom 進行展現的時候，使用插槽
CSS 動畫效果
transition
使用該標籤實現動畫效果, 過渡動畫效果。
原理：在一定時間在組件上加css
