生成vue的實(shí)例
var vm=new vue({
//這里是選項(xiàng)? 他可以包含數(shù)據(jù)骂维、模板、掛載元素贺纲、方法航闺、生命周期鉤子等函數(shù)
})
實(shí)例生命周期(在生命周期里this指向調(diào)用它的vue實(shí)例)
created在實(shí)例被創(chuàng)建后調(diào)用
created(){
? ? this.hello();
}
vue2.0生命周期:
beforeCreate、created猴誊、beforeMount潦刃、mounted、beforeUpdate懈叹、updated乖杠、beforeDestroy、destroyed
模板語法（不使用模板可以使用render函數(shù)使用JSX語法）
底層實(shí)現(xiàn)上Vue將模板編譯成虛擬DOM渲染函數(shù)澄成，在應(yīng)用狀態(tài)改變時胧洒，vue計(jì)算出重新渲染組件的最小代價并應(yīng)用到DOM上。
先看怎么用
插值:雙大括號!!!!!!必須的? 數(shù)據(jù)改變 大括號內(nèi)的值也跟著改變?
<span>{{msg}}</span>
v-once
如果你想插入一次接下來大括號內(nèi)的數(shù)據(jù)不改變 則添加v-once屬性
<span v-once>不改變{{msg}}</span>
v-html
<span>{{msg}}</span>效果和<span v-html="msg"></span>相同 ,但是后者是將數(shù)據(jù)轉(zhuǎn)變?yōu)榧兾谋?不是HTML 為了輸出HTML 所以使用v-html
v-bind
大括號不能在HTML屬性中使用 要使用v-bind
<span v-bind:id="msg"></span>
如果msg為false ?移除屬性
<span></span>
使用JS表達(dá)式
{{msg+1}}
{{msg==true?0:1}}
指令
帶有v-前綴
<div v-if="msg">如果msg為true則插入div標(biāo)簽</div>
<div v-bind:id="msg">如果msg為false則移除屬性墨状，否則顯示</div>
<div v-on:click="toDo">點(diǎn)擊觸發(fā)函數(shù)</div>
<input v-model="msg"/>//雙向數(shù)據(jù)綁定
.....等等 ?vue還支持自定義指令卫漫。后面說。
指令縮寫
v-bind:href? 或者 v-bind:id 可以縮寫為 :href? 和:id 就是省略前面的 v-bind
v-on:click? 縮寫為@click=""
計(jì)算屬性
computed 計(jì)算屬性會根據(jù)data 的值改變
<div>{{getNewMsg}}</div>
new Vue({
? ? ? el:'#App',
? ? ? data:{
? ? ? ? ? ? msg:'hello'
? ? ? },
? ? ? computed:{
? ? ? ? ? ? getNewMsg:function(){
? ? ? ? ? ? ? ? ? ? ? ? return this.msg.split('').reverse().join('');
? ? ? ? ? ? }?
? ? ? }
})
上邊代碼計(jì)算屬性只用到了get肾砂，沒有set列赎。所以我們可以給自己一個set
new Vue({
? ? ? el:'#App',
? ? ? data:{
? ? ? ? ? ? msg:'hello',
? ? ? ? ? ? text:'word'
? ? ? },
? ? ? computed:{
? ? ? ? ? ? all:{
? ? ? ? ? ? ? ? ? ? ? get:function(){
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? return this.msg+this.text;
? ? ? ? ? ? ? ? ? ? ? ?},
? ? ? ? ? ? ? ? ? ? ?set:function(val){
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?return val+this.msg+this.text
? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? }
})
然后vm.all="你好" 會返回 你好 hello word
函數(shù)
methods也可以實(shí)現(xiàn)剛才computed的效果。
<div>{{getNewMsg}}</div>
new Vue({
? ? ? el:'#App',
? ? ? data:{
? ? ? ? ? ? msg:'hello'
? ? ? },
? ? ? ?methods:{
? ? ? ? ? ? ?getNewMsg:function(){
? ? ? ? ? ? ? ? ? ?return this.msg.split('').reverse().join('');
? ? ? ? ? ? }
? ? ? }
})
computed和methods比較
雖然最終的結(jié)果相同通今，但是計(jì)算屬性基于緩存依賴粥谬，只有在他依賴的數(shù)據(jù)發(fā)生改變才會重新計(jì)算取值，而methods 每次都會重新計(jì)算取值辫塌。
wach方法
用于觀察VUE實(shí)例上的數(shù)據(jù)變動
<div>{{msg}}</div>
new Vue({
? ? ? el:'#App',
? ? ? data:{
? ? ? ? ? ? msg:'hello',
? ? ? ? ? ? text:'word',
? ? ? ? ? ? all:''
? ? ? },
? ? ? watch:{
? ? ? ? ? ? msg:function(){
? ? ? ? ? ? ? ? ? this.all=this.msg+this.text;
? ? ? ? ? ? }
? ? ? }
})
class與style綁定
<div class="boxStyle" ?v-bind:class="{active:isActive}"></div>
如果isActive為false 則不顯示 active 這個class漏策，否則相反。
class和v-bind:class可以共同使用臼氨。
class支持三目運(yùn)算符
<div v-bind:class="active?style01:style02"></div>
內(nèi)聯(lián)樣式
<div v-bind:style="{color:red,fontSize:fontSize+'px'}"></div>
還可以綁定到一個對象上
<div v-bind:style="obj"></div>
data(){
? ? ?return{
? ? ? ? ? ? obj:{
? ? ? ? ? ? ? ? ? ? ?color:'red',
? ? ? ? ? ? ? ? ? ? ? fontSize:'12px'
? ? ? ? ? ? }
? ? ?}
}
條件渲染
v-if 掺喻、 v-else、v-else-if
<div v-if="msg>0">大于0</div>
<div v-else-if="msg==0">等于0</div>
<div v-else>小于0</div>
還可以使用template
<template v-if="msg>0">
? ? ? ? ? <div>1111</div>
</template>
<template v-else>
? ? ? ? <div>2222</div>
</template>
上邊的代碼修改msg切換不同的div內(nèi)容，但是vue是不會重新渲染div標(biāo)簽的感耙。根據(jù)就地復(fù)用策略褂乍，只是替換div里面的內(nèi)容。如果想每次都重新渲染div標(biāo)簽即硼。需要使用key逃片，key不同則每次重新渲染。
v-if 和 v-show
v-show只是控制display只酥。
v-if有更高的切換消耗褥实，v-show有更高的初始化消耗。
列表渲染
v-for
data(){
? ? ?return{
? ? ? ? ? ? parents:"我是",
? ? ? ? ? ? msg:[
? ? ? ? ? ? ? ? ? ? {name:'foo'},
? ? ? ? ? ? ? ? ? ? {name:'bar'},
? ? ? ? ? ? ?]
? ? ? }
}
<div>
? ? ? ?<div v-for="{data,index} in msg">
? ? ? ? ? ? ? {{parents}}-{{index}}-{{data.name}}
? ? ? ?</div>
</div>
渲染結(jié)果: 我是-0-foo? 我是-1-bar
事件處理器
使用template的好處
1裂允。通過HTML模板就可以輕松定位JS對應(yīng)方法
2损离。不需要JS手動綁定事件，易于測試
3绝编。當(dāng)viewmodel銷毀 所有的事件處理器自動刪除僻澎，無需手動刪除
<div v-on:click="msg">點(diǎn)擊</div>
new Vue({
? ? ? ? ? el:'app',
? ? ? ? ? methods:{
? ? ? ? ? say:function(name,event){
? ? ? ? ? ? ? ? ? ? ?alert(name+'我是vue')
? ? ? ? ? ? ? ? ? ? if(event){event.preventDefault}
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ?}
})
如果要獲取原生DOM事件，需要傳入event
事件修飾符
.stop 組件單擊事件冒泡
.prevent ? 提交事件不在重載頁面
.capture ? 使用事件捕獲模式
.self ? ? ? ? ?只當(dāng)在本元素才發(fā)生
.once ? ? ? 新增
使用方式:
<div v-on:click.stop></div>
修飾符可以串聯(lián)
<div v-on:click.stop.prevent="todo"></div>
表單控件
v-model 實(shí)現(xiàn)雙向數(shù)據(jù)綁定
<span>{{msg}}</span>
<input v-model="msg"/>
new Vue({
? ? el:'#app',
? ?data:{
? ? ? ? ? msg:'我是默認(rèn)'
? ?}
})
無論是復(fù)選框 ?單選框 ?下拉列表 ? 基本上獲取到用戶選中的值的方式十饥，就是使用v-model到一個數(shù)組
<input type="checkbox" id="jack" value="jack" v-model="checkedName"/>
<label for="jack">jack</label>
<input type="checkbox" id="mini" value="mini" v-model="checkedName"/>
<label for="mini">mini</label>
如果用戶選中窟勃，則數(shù)組會把選中對象的value值存入數(shù)組中。
修飾符
.lazy ? 取消input事件轉(zhuǎn)為change事件同步
.number ? 將用戶輸入的值轉(zhuǎn)為number類型逗堵，如果返回NAN拳恋，則返回原值
.trim ? ? ?取消前后空格
使用方式:
<input v-model.lazy="msg"/>
組件
注冊全局組件
Vue.component('my-component',{
? ? //選項(xiàng)
? ? data:function(){
? ? ? ? ? ? ? //在組件里 data 必須是函數(shù)，并且不能使用箭頭函數(shù)
? ? }
})
注冊局部組件
通過使用組件實(shí)例選項(xiàng)注冊砸捏，可以使組件在另一個組件中使用
var child={
template:'<div>我是組件</div>'
}
new Vue({
? ? ? ? ? components:{
? ? ? ? ? ? ? ? ? ? 'my-components ':child
? ? ? ? ? ?}
})
組件通信
思想：父組件通信子組件，使用props隙赁。子組件通信父組件使用自定義事件垦藏，通過$on（'事件名稱'）監(jiān)聽事件 和 $emit('事件名稱') 觸發(fā)事件。
如果使用vuex伞访，在根組件注冊掂骏，我們在任意組件中都可以通過$store拿到store對象。如果子組件想要獲取到父組件的數(shù)據(jù)厚掷，或者說非父子組件想要拿到彼此的數(shù)據(jù)弟灼，最高效的方式是使用vuex。
但是冒黑，還是要說下基本的props用法田绑。
props
Vue.components('child',{
? ? ? ? ? props :['msg'],
? ? ? ? ? template:'<div>{{msg}}</div>'
})
<child msg="hello"></child>
注意：因?yàn)镠TML不區(qū)分大小寫，所以在傳遞props時抡爹，駝峰寫法要通過短橫線隔開
<div my-props="hello"></div>
Vue.components('child',{
? ? ? ? props:['myProps'],
? ? ? ? template:'<div>{{myProps}}</div>'
})
動態(tài)props
傳遞props使用 v-bind,這樣父組件修改子組件也得到修改
<div>
? ? ? ? <input ?v-model="msg"/>
? ? ? ? <child v-bind:msg="msg"></child>
</div>
Vue.components('child',{
? ? ? ? ? ? ? props:['msg'],
? ? ? ? ? ? ? template:'<div>{{msg}}</div>'
})
字面量語法和動態(tài)語法
字面量：<child msg="1"></child> ? ? ? ?props為 ? "1"
動態(tài)語法: <child v-bind:msg="1"></child> ? ? ?props為 ? 1
單向數(shù)據(jù)流
props是單向綁定的掩驱，父組件修改影響子組件，但是不能反過來，這是為了防止子組件修改父組件的狀態(tài)欧穴，讓數(shù)據(jù)流難以理解民逼。
可以通過Vuex管理state，這樣子就避免了繁瑣的props傳遞涮帘。后面會發(fā)布VUEX講解的文章拼苍，請關(guān)注~
props驗(yàn)證
只用于new創(chuàng)建的實(shí)例中，創(chuàng)建實(shí)例時傳遞 props调缨。主要作用是方便測試疮鲫。
支持類型：string ?number ?boolean ?function ?object ? array
props:{
? ? ?msg:Number，//只檢測類型
? ? //檢測類型+其他驗(yàn)證
? ? call:{
? ? ? ?type:Number,
? ? ? ? default:0,
? ? ? ? requiredLtrue,
? ? ? ? validator:function(val){
? ? ? ? ? ? return val>=0
? ? ? ? }
? ? ?}
}
自定義事件
使用 v-on 綁定事件
父組件在使用子組件的地方直接用v-on監(jiān)聽子組件觸發(fā)的事件同蜻， ?子組件觸發(fā)事件會觸發(fā)父組件事件
子組件中要使用this.$emit('事件',參數(shù))
父組件就可以使用 $on去監(jiān)聽
?例如 在父組件中：
<child v-on:子組件$emit的事件名稱="父組件事件名稱"></child>
非父子組件通信
使用一個空的vue實(shí)例作為中央事件總棧
var bus=new Vue()
在A組件中觸發(fā)事件
bus.$emit('a',1);
在B組件創(chuàng)建的鉤子中監(jiān)聽事件
bus.$on('a',function(id){
})
slot
在子組件中
<div>
? ? ? ? ? ?<h1>我是子組件標(biāo)題</h1>
? ? ? ? ? ?<slot>只有在沒分發(fā)的內(nèi)容才顯示</slot>
</div>
在父組件中
<div>
? ? ? <child>
? ? ? ? ? ? ?<p>這里的內(nèi)容會替換掉子組件中的slot</p>
? ? ?</child>
</div>
渲染結(jié)果為
<div>
? ? ? ? <div>
? ? ? ? ? ? ? ? <h1>我是子組件標(biāo)題</h1>
? ? ? ? ? ? ? <p>這里的內(nèi)容會替換掉子組件中的slot</p>
? ? ? ?</div>
</div>
具名slot
給slot添加name屬性
在子組件中
<div>
? ? ? ? ? ?<h1>我是子組件標(biāo)題</h1>
? ? ? ? ? ? <slot name="body">我是具名slot</slot>
</div>
在父組件中
<div>
? ? ? ? ? ?<child>
? ? ? ? ? ? ? ? ? ?<div slot="body">這里替換掉 name為body的slot</div>
? ? ? ? ? ?</child>
</div>
Render函數(shù)
不想使用template棚点，也可以用render寫JSX。例如根據(jù)判斷自動生成DOM結(jié)構(gòu)湾蔓，如果大量的判斷用template會有大量的代碼瘫析，這時候可以用render，使用createElement去創(chuàng)建標(biāo)簽默责。
這里只寫個小用法贬循。
new Vue({
? ? ? el:"#app",
? ? ?render:h=>h(App)
})
如果不使用render我們可以這樣
new Vue({
? ? ? ? ? el:'#app',
? ? ? ? ? components:{App},
? ? ? ? ? template:'<App/>'
})
總之JSX可以使用JS的完全編程能力。詳細(xì):http://cn.vuejs.org/v2/guide/render-function.html
自定義指令
有時候我們需要對DOM元素進(jìn)行底層操作桃序，所以需要自定義事件杖虾。
全局注冊
例如我們創(chuàng)建v-focus
Vue.directive('focus',{
? ? ?inserted:function(el){
? ? ? ? ? el.focus();
? ? ?}
})
局部注冊
組件接收一個選項(xiàng)
directives:{
? ? ? ? ?focus:{
? ? ? ? ? ? ? ? ? ?//指定的定義
? ? ? ? ?}
?}
使用：<div v-focus></div>
自定義指令鉤子函數(shù)
剛才我們?nèi)侄x 用到了 inserted函數(shù)，這就是鉤子函數(shù)媒熊。
bind:function(){} //只調(diào)用一次奇适，指令第一次綁定到元素時調(diào)用。
inserted:function(){} //被綁定元素插入到父節(jié)點(diǎn) 調(diào)用
update:function(){} ?//更新時調(diào)用
componentUpdated:function(){} ? //被綁定元素所在模板完成一次更新周期時調(diào)用
unbind:function(){} ?//指令與元素解綁調(diào)用
鉤子函數(shù)參數(shù)
el：指令綁定的元素對象
binding:一個obj對象芦鳍，他包括以下屬性：
? ? ? ? ? ? ? ?name:指令名稱
? ? ? ? ? ? ? ?value:綁定的值
? ? ? ? ? ? ? ?oldValue:前一個值 只能在update函數(shù)和componentUpdate函數(shù)中使用
? ? ? ? ? ? ? ?expression:綁定的值是字符串形式 例如 ?v-demo="1" ?為1
? ? ? ? ? ? ? ?arg: 傳給指令的值 ?v-demo:foo ? arg值為foo
? ? ? ? ? ? ? ?modifiers: 修飾符對象 只能在update函數(shù)和componentUpdate函數(shù)中使用
vnode:vue編譯生成的虛擬節(jié)點(diǎn)
oldVnode:上一個虛擬節(jié)點(diǎn)
混合mixin
var mixin={
? ? ? ? ? ? created:function(){
? ? ? ? ? ? ? ? ? ?this.hello();
? ? ? ? ? ? ?},
? ? ? ? ? ? methods:{
? ? ? ? ? ? ? ? ? hello:function(){
? ? ? ? ? ? ? ? ? ?console.log("Hello");
? ? ? ? ? ? ? ? ? ?}
? ? ? ? ? ?}
}
var Component=Vue.extend({
? ? ? ? mixins:[mixin]
})
如果相同的屬性嚷往，都會被調(diào)用，只是混合對象的鉤子將在組件自身鉤子之前調(diào)用
如果 例如 方法的名字相同柠衅，就取組件自身的方法
以上就是vue2.0常用的小點(diǎn)皮仁，省略了一些內(nèi)容。包括像是vue-router菲宴、vuex贷祈、編寫插件等等。
本篇只是總結(jié)基礎(chǔ)知識點(diǎn)喝峦，希望能幫到你势誊。
