vue.component 全局组件，定义全局组件
Vue.component(‘‘ , {
template:
props:
methods:
})
局部组件是一个对象，需要在vue实例中注册
component：{
对象名字 }
全局组件和局部组件的例子
<div id="app"> <!-- <hello-a></hello-a> <world></world> --> <mycom></mycom> <input-item :name="car.name" :items="list"></input-item> <ul> <li v-for="(item,index) in list" @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> <input type="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 = ‘‘ } } }) // 创建一个局部组件 //局部组件需要在new vue的实例中注册组件，注册时的关键字为components：{}在里面放入自己定义的组件 var mycom = { template: `<div> 我是局部组件 <span @click="dianji">{{ title }}</span> </div>`, //data中写的数据需要写在return中，才能返回出来并引用 data() { return { title: ‘我是局部组件的标题‘ } }, methods: { dianji() { alert(111) } } } new Vue({ 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上使用自定义的组件：
例如：
<div id="app"> <hello></hello> <mycom></mycom> </div> <div id="app1"> <hello></hello> </div> <script> // 自定义一个全局组件 Vue.component(‘hello‘, { data() { return { title: ‘hello的title‘ } }, template: ` <div> <h3>{{ title }}</h3> <span @click="dianji">hello world</span> </div> `, methods: { dianji() { alert(111) } } }) // 注意：组件必须只有一个根元素标签 // 局部组件写成一个对象 var mycom = { template: ` <div> <span>mycom</span> </div> ` } var a = new Vue({ el: ‘#app‘, data: { }, components: { mycom } }) var b = new Vue({ el: ‘#app1‘, data: { }, components: { mycom } }) </script>
事件修饰符：
.stop 阻止事件冒泡
.prevent 阻止默认事件
.capture 事件捕获从外到内依次执行然后再按自然顺序执行触发的事件。
.self 将事件绑定到自身，只有自身才能触发
.once 只触发一次
.passive 用于对DOM的默认事件进行性能优化
使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用 v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。
定义全局组件时，用的是父传子的数据。
下面是子传父的过程：
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：{过滤器名（）{ }}
过滤器可以进行连用。每个过滤器连用时需要通过 | 来链接。而函数中接收的实参是通过第一个 | 之前的得到的参数
下面是过滤器的实例
div id="app"> <div class="container"> <div class="row"> <table class="table table-bordered table-hover"> <thead> <tr> <th>序号</th> <th>名字</th> <th>时间</th> </tr> </thead> <tbody> <tr v-for="(item,index) in list"> <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‘){ // var time = new Date(str) // var y = time.getFullYear() // var m = time.getMonth() + 1 // var d = time.getDate() // var h = time.getHours() // var min = time.getMinutes() // var s = time.getSeconds() // if(pattern==‘yyyy-mm-dd‘){ // return `${y}-${m}-${d} ${h}:${min}:${s}` // } // }) // Vue.filter(‘test‘, function(str){ // return str+‘--------------------‘ // }) new Vue({ el: ‘#app‘, data: { list: [ {id:1,name:‘奔驰‘,ctime:new Date()}, {id:2,name:‘宝马‘,ctime:new Date()}, {id:3,name:‘大众‘,ctime:new Date()} ] }, filters:{ dataF(str ,pattern=‘yy-m-d‘){ var time = new Date(str) var y = time.getFullYear() var m = time.getMonth() + 1 var d = time.getDate() var h = time.getHours() var min = time.getMinutes() var s = time.getSeconds() if(pattern==‘yyyy-mm-dd‘){ return `${y}-${m}-${d} ${h}:${min}:${s}` } }, test(str){ return str+‘--------------------‘ } }, 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属性，是指令绑定的值。
原文：https://www.cnblogs.com/52580587zl/p/13368238.html