Vue.js組件中的data與methods
例如：
Vue.component('mycom',{
template:"#temp",
data(){
retrun{
msg:'組件中的data數據定義'
}
}
})
組件中的data如果像Vue實例那樣傳人一個對象，由於JavaSeript中的對象類 型變量實際上保存的是對象的引用，所以當存在多個這樣的組件時會共享數據，導致一個組件中
數據的改變會引起其他組件數據的改變。
而使用一個返回對象的函數，每次使用組件都會創建一個新的對象， 這樣就不會出現共享數據的問題。
(2) Vue.js提供<component組件，在該組件中使用v-bind指令搭配is屬性來展示對應名稱的 組件，即component是一 個 占位符，“：is" 屬性可以指定要展示組件的名稱，其
切換代碼如下所示:
<component v-bind:is="切換組件的名稱"></component>
簡寫形式如下:
component :is=" 切換組件的名稱"></component>
組件之間傳值
Vue, is的組件傳值有兩種方式:父組件傳數據給子組件，子組件傳數據給父組件。一般父組件通過props屬性給子組件下發數據，子組件通過事件給父組件發送消息。
1.父組件傳數據給子組件
當子組件在父組件中當作標簽使用的時候，給子組件定義一個自定義屬性，屬性值為想要 傳遞的數據。在子組件中通過props屬性進行接收。特別強調的是，props是專門 ]用來接收外部數據的，該屬性有兩種接收方式，分別是數組和對象，其中對象可以限制數據的類型。
父組件向子組件傳遞數據的時候，子組件不允許更改父組件的數據，因為父組件會向多個子組件傳值，如果某個子組件對父組件的數據進行修改，很有可能導致其他的組件發生錯誤，而且很難對數據的錯誤進行捕捉。
在子組件中默認無法訪問到父組件中的數據和methods方法，但可以在引用子組件時，通 過屬性綁定( v-bind: )形式把需要傳遞給子組件的數據進行下發，以供子組件使用。在子組件中把父組件傳遞過來的data數據在props數組中進行定義，然后才能使用這個數據。需要特別說明的是，組件中所有props的數據都是通過父組件傳遞給子組件的，所以props的數據都是只讀的，無法重新賦值。
2.子組件傳數據給父組件
如果子組件需要給父組件傳遞數據，需要在子組件中定義一一個自定義事件， 事件名稱不需要加括號。在子組件中通過this.$emit觸發自定義事件，將需要傳遞的參數通過emit的第二個參數傳遞。
自定義指令
語法格式：Vue.directive('自定義指令名',{})
全局自定義指令：
<script>
Vue.directive('focus',{
inserted:function(el){
el.focus()
el.value="獲取焦點"
}
})
new Vue({
el:"#app"
})
</script>
局部自定義
<script>
new Vue({
el:"#app",
directives:{
focus:{
inserted:function(el){
el.focus()
el.value="獲取焦點"
}
}
}
})
鈎子函數bind的引用
Vue.directive('runoob',{
bind:function(el,binding,vnode){
var s=JSON.stringify
el.innerHTML='鈎子函數bind中各個參數的取值：<br/>'+
'<b>name:</b>' +s(binding.name)+'<br/>'+
'<b>value:</b>' +s(binding.value)+'<br/>'+
'<b>expression:</b>' +s(binding.expression)+'<br/>'+
'<b>argument:</b>' +s(binding.arg)+'<br/>'+
'<b>modifiers:</b>' +s(binding.modifiers)+'<br/>'+
'<b>vnode keys:</b>' +Object.keys(vnode).join(',')
}
})
實操制作高校網站首頁
了解網站創建流程
網站的制作步驟
1、網站策划
2、網站素材收集
3、網站規划
4、網站目錄設計
5、網站制作
遇到一個問題，制作模態框時，點擊按鈕模態框彈出，彈出后因為遮罩添加的父節點是body，把div覆蓋了。導致遮罩擋在了最前面，無法進行操作。
解決辦法是
添加一個data-backdrop="false" 取消自動添加遮罩。
使用js代碼實現如下
$('.modal-open').find('.modal-backdrop').remove();
因為遮擋主要是modal-backdrop類導致的問題。