vue.component 全域性元件，定義全域性元件

Vue.component('' , {

　　　　template:

　　　　props:

　　　　methods:

　　　　})

區域性元件是一個物件，需要在vue例項中註冊

　　component：{

　　　　　　物件名字　　}

全域性元件和區域性元件的例子

<divid="app">
<!--<hello-a></hello-a>
<world></world>-->
<mycom></mycom>
<input-item:name="car.name":items="list"></input-item>
<ul>
 
<liv-for="(item,index)inlist"@click="deleteItem(index)">{{index}}----{{item.name}}</li>
</ul>
</div>
<script>
//全域性定義元件
//Vue.component('hello-a',{
//template:"<div><span>hello11</span><span>hello22</span></div>"
//})
//Vue.component('world',{
//template:"<div><span>world11</span><span>world22</span></div>"
 

//})
//定義全域性元件時，前面的名稱可以在掛載的塊上當做標籤用，可以在其中繫結事件
Vue.component('input-item',{
//template這裡面在拼接字串時，需要用一個大的標籤包住需要寫下的東西。
template:`
<div>
<inputtype="text"v-model="name"><button@click="add">新增</button>
</div>
`,
//props這個後面的陣列是取到vue例項中的data繫結的資料，可以取到這些個資料並進行方法呼叫
props:['name','items'],
methods:{
add(){
 
this.items.push({
id:Math.floor(Math.random()*100),
name:this.name
})
this.name=''
}
}
})

//建立一個區域性元件
//區域性元件需要在newvue的例項中註冊元件，註冊時的關鍵字為components：{}在裡面放入自己定義的元件
varmycom={
template:`<div>
我是區域性元件
<span@click="dianji">{{title}}</span>
</div>`,
//data中寫的資料需要寫在return中，才能返回出來並引用
data(){
return{
title:'我是區域性元件的標題'
}
},
methods:{
dianji(){
alert(111)
}
}
}
newVue({
el:'#app',
data:{
car:{
name:''
},
list:[
{id:1,name:'賓士'},
{id:2,name:'寶馬'},
{id:3,name:'紅旗'}
]
},
methods:{

deleteItem(index){
this.list.splice(index,1)
}
},
//註冊元件
components:{
mycom
}
})

自定義元件，可以在所有掛載的vue上使用自定義的元件：

例如：

<divid="app">
<hello></hello>
<mycom></mycom>
</div>
<divid="app1">
<hello></hello>
</div>
<script>
//自定義一個全域性元件
Vue.component('hello',{
data(){
return{
title:'hello的title'
}
},
template:`
<div>
<h3>{{title}}</h3>
<span@click="dianji">helloworld</span>
</div>
`,
methods:{
dianji(){
alert(111)
}
}
})
//注意：元件必須只有一個根元素標籤
//區域性元件寫成一個物件
varmycom={
template:`
<div>
<span>mycom</span>
</div>
`
}
vara=newVue({
el:'#app',
data:{
},
components:{
mycom
}
})
varb=newVue({
el:'#app1',
data:{
},
components:{
mycom
}
})
</script>

事件修飾符：

　　.stop 　　　　　 　阻止事件冒泡

　　.prevent 　　　　阻止預設事件

　　.capture 　　　　 事件捕獲從外到內依次執行然後再按自然順序執行觸發的事件。

　　.self 　　　　　　 將事件繫結到自身，只有自身才能觸發

　　.once 　　　　　　只觸發一次

　　.passive 　　　　 用於對DOM的預設事件進行效能優化

　　使用修飾符時，順序很重要；相應的程式碼會以同樣的順序產生。因此，用v-on:click.prevent.self會阻止所有的點選，而v-on:click.self.prevent只會阻止對元素自身的點選。

Vue 中 .stop 和 .self 的區別:

.self 只會阻止自己身上冒泡行為的觸發；並不會阻止真正的冒泡行為；.self 不能代替.stop；

定義全域性元件時，用的是父傳子的資料。

下面是子傳父的過程：

1.在子元件上繫結一個點選事件，

    <button@click="changeparent">點選修改父親的標題</button>

2.在子元件中使用方法

       changeparent() {

          // 子元件傳參給父元件需要$emit('通知父親的名字')

          // 第二個引數可以是字串，也可以是物件

          this.$emit('changetitle', '我是兒子傳過來的標題')

        }

this.$emit('通知父親的名字'，第二個引數可以是字串或者物件)

3.父元件中繫結事件，事件名為通知父親的名字，等於的是父親處理的事件名。

<el-input :value="value" :lists="list" @changetitle="changeparenttitle"></el-input>

4.此時，在父元件中寫方法，用處理事件名

  methods: {
        changeparenttitle(payload){
          this.title = payload

        }
      }

其中payload是形參，接收的是$emit傳過來的第二個引數，然後觸發點選事件時，賦值給data裡的title

Vue過濾器 filter

全域性過濾器：Vue.filter('過濾器名'，function（）{})

區域性過濾器：filters：{過濾器名（）{　　}}

過濾器可以進行連用。每個過濾器連用時需要通過 | 來連結。而函式中接收的實參是通過第一個 | 之前的得到的引數

下面是過濾器的例項

divid="app">
<divclass="container">
<divclass="row">
<tableclass="tabletable-borderedtable-hover">
<thead>
<tr>
<th>序號</th>
<th>名字</th>
<th>時間</th>
</tr>
</thead>
<tbody>
<trv-for="(item,index)inlist">
<td>{{index+1}}</td>
<td>{{item.name}}</td>
<td>{{item.ctime|dataF('yyyy-mm-dd')|test}}</td>
</tr>
</tbody>
</table>

</div>
</div>
</div>
<script>
//全域性過濾器
//第二個引數是一個函式,函式的第一個引數是|前面的
//之前定義元件的時候Vue.component('元件名'，{})
//定義過濾器的時候Vue.filter('過濾器'，function(opt){})
//Vue.filter('dataFormat',function(str,pattern='yy-m-d'){
//vartime=newDate(str)
//vary=time.getFullYear()
//varm=time.getMonth()+1
//vard=time.getDate()
//varh=time.getHours()
//varmin=time.getMinutes()
//vars=time.getSeconds()
//if(pattern=='yyyy-mm-dd'){
//return`${y}-${m}-${d}${h}:${min}:${s}`
//}
//})
//Vue.filter('test',function(str){
//returnstr+'--------------------'
//})
newVue({
el:'#app',
data:{
list:[
{id:1,name:'賓士',ctime:newDate()},
{id:2,name:'寶馬',ctime:newDate()},
{id:3,name:'大眾',ctime:newDate()}
]
},
filters:{
dataF(str,pattern='yy-m-d'){
vartime=newDate(str)
vary=time.getFullYear()
varm=time.getMonth()+1
vard=time.getDate()
varh=time.getHours()
varmin=time.getMinutes()
vars=time.getSeconds()
if(pattern=='yyyy-mm-dd'){
return`${y}-${m}-${d}${h}:${min}:${s}`
}
},
test(str){
returnstr+'--------------------'
}
},
components:{}
})
</script>

　　其中，在有 | 時，不論是全域性過濾器還是區域性過濾器都能連續運用，只需知道連續傳入的引數，是前一次過濾之後的結果。而且也可以全域性加區域性一起運用。

自定義指令：

全域性指令：Vue.directive('指令名'，{ })

私有指令：在vue例項中 directives：{

　　　　　　　　　　　　'指令名' ：{

　　　　　　　　　　　　　　　　　　　　　　　　　　鉤子函式

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　}

　　　　　　　　　　　　　　　　　　　　　　　　}

　　在自定義指令的時候，第一個引數直接寫指令名，不需要寫成v-xxx

　　在使用自定義指令時，需要繫結到需要繫結的元素上，寫法v-指令名

鉤子函式：

　　bind（el）{} ：　　　　　　為了初始化資料，不論是哪個鉤子，第一個引數都是繫結DOM

　　Inserted(el){ }：　　　　　 只要保證父節點存在，不管父節點渲染沒有

　　updata(){}:　　　　　　　　所在元件的VNode更新時呼叫，但是可能發生在其子VNode更新之前。

　　componentUpdated：　　　指令所在元件的VNode及其子VNode全部更新後呼叫

　　unbind：　　　　　　　　　只調用一次，指令與元素解綁時呼叫。

　　el:指令繫結的元素，可以用來直接操作DOM

　　binding：一個物件，包含很多東西，其中有value屬性，是指令繫結的值。