vue的一些知識點

NO IMAGE

一、vue的核心思想

vue的核心思想:數據驅動、組件化

組件化

組件化的目的是擴展HTML元素,封裝可重用的代碼

組件:獨立的,可複用性的,整體化的。

組件設計原則

1、頁面上每個獨立的可視,可交互的區域視為一個組件,比如頁面的頭部,尾部,還有一些可以複用的區塊,都可以抽象成一個組件。

2、每個組件對應一個工程目錄,組件所需要的各種資源在這個目錄下就近維護

3、頁面不過是組件的容器,組件可以嵌套自由組合形成完整的頁面。開發過程中,會將頁面拆分成一個個組件,進行開發維護。

二、vue中的插槽

slot標籤顯示的內容就是父組件向子組件插入進來的內容。

通過插槽可以更方便的向子組件傳遞dom元素,同時子組件只需要通過slot來使用就可以了。

<div id="root">
<child>
<p>Dell</p>     //這種語法看起來非常像,用子組件,我向裡插入內容
</child>
</div>
Vue.component('child', {
props: {
content:String
},
template: `<div>
<p>hello</p>
<slot></slot>       //slot 標籤顯示的內容就是父組件向子組件插入進來的內容
</div>`,
})
let vm = new Vue({
el: '#root'
})

具名插槽

slot標籤name屬性對應的是組件中slot屬性,通過這種寫法,可以在調用子組件時,一次性傳遞多個區域的dom結構,在子組件裡通過具名插槽來分別使用不同部分的dom結構。

<div id="root">
<body-content>
<div class="header" slot="header">header</div>
<div class="footer" slot="footer">footer</div>
</body-content>
</div>
Vue.component('body-content', {
props: {
content:String
},
template: `<div>
<slot name="header"></slot>
<div class="content">content</p>
<slot name="footer"></slot>
</div>`,
})
let vm = new Vue({
el: '#root'
})

三、模塊化與組件化的區別

(1)組件化更多關注的是UI部分,頁面的每個部分,比如頭部,內容區,彈出框甚至確認按鈕都可以成為一個組件,每個組件有獨立的html、css、js代碼。

          可以根據需要把它放在頁面的任意部位,也可以和其他組件一起形成新的組件。一個頁面是各個組件的結合,可以根據需要進行組裝。

(2)模塊化更側重於功能的封裝,主要是針對Javascript代碼,隔離、組織複製的JavaScript代碼,將它封裝成一個個具有特定功能的模塊。

          模塊可以通過傳遞參數的不同修改這個功能的相關配置,每個模塊都有一個單獨的作用域,根據需要調用。

          一個模塊的實現可以依賴其它模塊。

四、vue的自定義指令

1、使用Vue.directive()定義全局的指令

(1)參數1是指令的名稱;

注:在定義的時候,指令的名稱前面,不需要加v-前綴了,在調用的時候,必須在指令名稱前面加上v-前綴來進行調用。

(2)參數2是一個對象,在這個對象上,有一些指令相關的函數,這些函數可以在特定的階段,執行相關的操作。

一個指定定義對象可以提供如下幾個鉤子函數:

bind:只調用一次,指定第一次綁定到元素時調用。在這裡可以進行一次性的初始化設置。

inserted:被綁定元素插入父節點時調用(僅保證父節點存在,但不一定已被插入文檔中)。

update:所在組件的VNode更新時調用,但是可能發生在其子VNode更新之前。指令的值可能發生個改變,也可能沒有。但是你可以通過比較更新前後的值來忽略不必要的模板更新。

componentUpdated:指令所在組件的VNode及其子VNode全部更新後調用。

unbind:只調用一次,指令與元素解綁時調用。

<input type="text" v-model="keywords" v-focus class="form-control">
Vue.directive('focus',{
bind:function(el){//每當指令綁定到元素上的時候,會立即執行這個 bind 函數,只執行一次
//注意:在每個函數中第一個參數,永遠是el,表示被綁定了指令的那個元素,這個 el 參數,是一個原生的JS對象
//在元素剛綁定了指令的時候,還沒有插入到DOM中去,這時調用  focus 方法麼有作用
//因為,一個元素,只有插入DOM之後,才能獲取焦點
//el.focus()
},
inserted:function(el){//元素插入到DOM中的時候,會執行inserted函數[觸發一次]
el.focus()
},
updated:function(){// 當VNode 更新的時候,會執行 updated,可能會觸發多次。
}
})
var vm = new Vue({
el:'#app',
data:{
},
methods:{
},
});

2、定義調用時可傳參的指令

使用鉤子函數的第二個binding參數拿到傳遞的值。

定義:

 Vue.directive('color',{    bind:function(el,binding){      el.style.color = binding.value;    },  })

使用:

<h3 v-color="'orange'">~~{{msg}}</h3>

##  binding對象包含以下屬性:

name:指令名,不包括v-前綴。

value:指令的綁定值,例如:v-my-directive=”1+1″,varlue的值是2。

oldValue:指令綁定的前一個值,僅在update和componentUpdated鉤子中使用。無論值是否改變都可用。

expression:綁定值的字符串形式。例如:v-my-directive=”1+1″,expression的值是”1+1″。

arg:傳給指令的參數。例如:v-my-directive:foo,arg的值是“foo”。

3、自定義私有指令

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="../css/bootstrap.css">
</head>
<body>
<div id='app'>
<h3 v-fontweight="'900'" v-fontsize="'40px'">~~{{msg}}</h3>
</div>
</body>
<script src="../lib/vue.js"></script>
<script>
var vm = new Vue({
el:'#app',
data:{
msg:"歡迎學習Vue"
},
methods:{
},
//自定義私有指令
directives:{
'fontweight':{
bind:function(el,binding){
el.style.fontWeight = binding.value
}
},
//指令函數的簡寫形式。
//注意,這個 function 等同於把代碼寫到了 bind和 update中
'fontsize':function(el,binding){
el.style.fontSize = parseInt(binding.value)+'px'
}
}
});
</script>
</html>

相關文章

前端性能優化的方法

原型鏈

js中的事件委託(事件代理)

js繼承的幾種方式