有些比较简单的
一、vue 事件
1.获取event
可以不带参数获取$event，同时vue也支持传入$event获取
https://www.jianshu.com/p/3f2c664e43d8
<div id="app">
<button @click="handleClick">直接写函数名称</button>
<button @click="handleClick($event)">函数传入参数</button>
</div>
<script>
var vm = new Vue({
el:"#app",
methods:{
handleClick:function(e){
console.log(e);
}
}
})
</script>2.事件修饰符
- .stop - 调用 event.stopPropagation()。停止冒泡
- .prevent - 调用 event.preventDefault()。 阻止默认行为
- .capture - 添加事件侦听器时使用 capture 模式。事件捕获，从外到内
- .self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。点击本身才有效
- .{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。
- .native - 监听组件根元素的原生事件。
- .once - 只触发一次回调。
- .left - (2.2.0) 只当点击鼠标左键时触发。
- .right - (2.2.0) 只当点击鼠标右键时触发。
- .middle - (2.2.0) 只当点击鼠标中键时触发。
- .passive - (2.3.0) 以 { passive: true } 模式添加侦听器
二、表单绑定
表单修饰符
<div id="app">
<input type="text" v-model="value">
<!-- lazy 让v-model偷懒，失去焦点的时候才同步 -->
<input type="text" v-model.lazy="value">
<!-- 如果数据是数字，就会把value转换成number类型 -->
<input type="text" v-model.number="value">
<!-- 去除前面和后面的空格 -->
<input type="text" v-model.trim="value">
{{value}}
</div>
<script>
var vm = new Vue({
el:"#app",
data() {
return {
value:''
}
},
watch: {
value:function(){
console.log(typeof this.value )
}
}
})
</script>三、父子组件传值
1.简单的示例
<div id="app">
<!-- 可以通过ref获取dom节点 -->
<div ref="hello" @click="handleClick">hello world </div>
<!-- 父组件向子组件传值是通过属性的方式 -->
<counter ref="one" :count="one" @change="handleChange"></counter>
<counter ref="two" :count="two" @change="handleChange"></counter>
<div>{{total}}</div>
</div>
<script>
Vue.component("counter", {
template: "<div @click='hanleClick'>{{number}}</div>",
props: {
count: Number
},
data() {
return {
// vue 是单向数据流，不能直接修改props里面的值
number: this.count
}
},
methods: {
hanleClick: function () {
this.number = this.number + 2;
//子组件向父组件传值是通过事件触发this.$emit("事件名称",参数1,参数2...)
this.$emit("change", 2);
}
},
})
var vm = new Vue({
el: "#app",
data() {
return {
one: 2,
two: 3,
total: 5
}
},
methods: {
handleClick: function () {
console.log(this.$refs.hello);
},
handleChange: function (e) {
console.log(e);
this.total = this.$refs.one.number + this.$refs.two.number
}
},
})
</script>2.props效验
Vue.component("child", {
template: "<div @click='hanleClick'>{{content}}</div>",
props: {
content:{
//支持对象
type:String,
required:true,
default:"默认值",
validator:function(value){
//校验器
return (value.length)>5
}
}
}
})3.父组件触发子组件原生事件
方法一
有时候我们会在子组件上写点击事件，但是其实是不会被触发的,需要在子组件加this.$emit('click')向外触发click事件给父组件
<div id="app">
<child @click="handleClick"></child>
</div>
<script>
Vue.component("child", {
template: "<div @click='hanleChildClick'>子组件</div>",
methods:{
hanleChildClick:function(){
alert("child click")
// 需要这里加this.$emit('click');向外触发给父组件
this.$emit('click');
}
}
})
var vm = new Vue({
el: "#app",
data() {
return{
}
},
methods: {
handleClick: function () {
alert("click")
}
},
})
</script>方法二
直接在父组件中加native即可
<child @click.native="handleClick"></child> 4.非父子组件传值
<div id="app">
<child content="one"></child>
<child content="two"></child>
</div>
<script>
// 非父子组件传值(Bus/总线/发布订阅模式/观察者模式)
Vue.prototype.bus = new Vue()
Vue.component("child", {
template: "<div @click='hanleChildClick'>{{selfContent}}</div>",
data() {
return {
selfContent: this.content
}
},
props: {
content: String
},
methods: {
hanleChildClick: function () {
//这里使用bus触发
this.bus.$emit("change", this.selfContent);
}
},
mounted() {
const _this = this
//这里使用bus监听一下事件
this.bus.$on("change", function (val) {
_this.selfContent = val
console.log(val);
});
},
})
var vm = new Vue({
el: "#app"
})
</script>四、插槽
1.普通插槽和具名插槽
插槽比较简单也很重要，要注意的是可以使用slot="slotname"来指定具名插槽，然后子组件需要<slot name="slotname">默认内容</slot>来申明一下
<div id="app">
<child>普通插槽</child>
<child2>
<h2>具名插槽</h2>
<div slot="header">头部</div>
<div slot="center">身体</div>
<div slot="footer">尾巴</div>
</child2>
</div>
<script>
Vue.component("child", {
template: `<div>
<slot></slot>
</div>`,
})
Vue.component("child2", {
template: `<div>
<slot name="header">默认头部</slot>
<slot name="center">默认身体</slot>
<slot name="footer">默认尾巴</slot>
</div>`,
})
var vm = new Vue({
el: "#app"
})
</script>2.作用域插槽
其实就是如果你想在子组件循环，然后循环的样式并不是子组件决定而是父组件去写样式，就需要使用作用域插槽，然后给一个属性为：slot-scope="scope"，其中scope的值为
<!--打印出：scope的值为 { "item": 1, "keys": 0 } -->
<div id="app">
<child>
<template slot-scope="scope">
<h2>
{{scope}}
</h2>
</template>
</child>
</div>
<script>
Vue.component("child", {
data() {
return {
list:[1,2,3,4],
keys:0
}
},
template: `<div>
<ul>
<slot
v-for="(item,keys) of list"
:item="item" :keys="keys"
>
</slot>
</ul>
<slot></slot>
</div>`,
})
var vm = new Vue({
el: "#app"
})
</script>
