vue於jquery的區別
jquery主要時操作dom
vue 主要是操作數據 是一個漸進式前端框架，vue中渲染dom用到了diff算法，渲染dom要比原生js快
vue參數
Vue是一個構造函數，需要傳入options
el
掛載根元素
template
模板字符串,有template直接渲染這里的內容，如果沒有就找el元素中的內容進行渲染和掛載
data
為了各個實例直接互不影響，data需要是一個函數，返回一個對象
computed
監聽多個數據，默認只有getter
watch
監聽單個數據，watch監聽單個屬性，基本數據類型 簡單監視
復雜數據類型 深度監聽deep:true
props components methods
生命周期鈎子
beforeCreate
組件創建之前，可以添加頁面加載loading
created
組件創建之后，使用該組件，就會調用created方法，可以操作后端的數據，數據響應視圖
應用 發送ajax請求
beforeMount
掛載數據到DOM之前會調用
mounted
掛載數據到DOM之后會調用，Vue作用之后的DOM
beforeUpdated
在更新dom之前 調用此鈎子函數 應用 獲取原始dom
updated
在更新dom之后調用， 應用 可以獲取最新的dom
beforeDestory
例如 v-if 每次切換時false就會調用beforeDestory和destroyed
當為true時，組件會被重新渲染一次
destroyed
應用 清除定時器
為了防止上述情況，可以使用keep-alive實現組件的緩存；
keep-alive：vue的內置組件，能在組件的切換過程中將組件的狀態保留在內存中，防止重復渲染dom
activated
組件被激活時調用 引用 路由
deactivated
組件被停用了
把v-if的dom放在keep-alive中就可以實現組件的緩存，在切換的過程中，就不會觸發
beforeDestory destoryed鈎子，指揮觸發activated deactivated鈎子
filters
ditrctivies
插值語法{{表達式}}
字符串 布爾值 三元表達式 對象 {{ {name:'zhangsan'} }}
MVVM model view view model
vue中內置指令
vue中的指令都是v-開頭的，對於頁面+數據的更為方便的輸出
v-text innerText
v-html innerHTML
v-if 判斷是否插入這個元素，相當於對元素進行創建和銷毀
是懶惰的，true才會渲染 有更高的切換開銷
v-else v-else-if
v-show 不管初始條件是啥都會渲染 有更高的初始渲染
v-for 優先級是最高的
data中的數據渲染在dom中，v-bind可以通過事件修改data，達到頁面數據更新的目的，單項數據流，數據改變，視圖跟着一起改變
雙向數據流 v-model v-bind:value="msg" @input='msg=e.target.value'實現雙向數據綁定
單向數據流 v-bind
v-model只適用用表單元素
可以自定義v-model組件
v-slot
v-model
v-on @
v-bind ：
v-pre
v-once
v-cloak
內置組件
component
keep-alive
slot
transition
transition-group
內置屬性
is
key
ref
不能重名，如果重名只會獲取最后一個dom元素，前面的dom會被覆蓋
在原生dom上獲取原生dom元素，如果在組件上獲取的時組件對象，
盡量少用，vue中虛擬dom,使用diff算法渲染dom，速度比較快，如果使用ref操作dom就與原生js沒什么區別了
$nextTick(function(){})當DOM更新循環結束之后執行延遲回調，在修改數據之后使用，可以在回調函數中獲取到
更新后的DOM
slot
組件
聲明 掛載 使用
在組件上直接綁定事件，是不能直接觸發的，因為組件上默認為自定義事件，例如
<child @click="handleClick"></child>不會被系統識別為我們理解中的點擊事件
必須通過$emit方法綁定它才行。
<body> <div id="root"> <child @click="handleClick"></child> </div> <script> Vue.component('child',{ template:'<div @click="handleChildClick">Child</div>', methods:{ handleChildClick:function(){ alert('child click') this.$emit('click') } } }) var vm = new Vue({ el: '#root', methods: { handleClick:function(){ alert('click') } } }) </script> </body>
如果想直接在組件上使用原生事件，需要在事件加上后綴.native就可以了
<child @click.native="handleClick"></child>
過濾器filters
使用過濾器:
數據屬性 | 過濾器名稱