Vue的使用总结（1）

//在没有默认行为的元素里看不出区别
<div @click.prevent.self="show('aaa')">点击</div> //点击后将输出aaa//在有默认行为的元素里就能看出区别
//点击百度，先是判断是否自身行为，结果不是，所以不会触发click事件，也不会执行后面的阻止默认行为，所以 a 标签会跳转
//输出：3、1、然后跳转
<div @click="show(1)">
<a href="http://www.baidu.com" @click.self.prevent="show(2)">
<div @click="show(3)">百度</div>
</a>
</div>
//点击百度，先阻止了默认行为，所以 a 标签不会跳转。然后判断是否自身行为，结果不是，所以不会输出 2
//输出：3、1，不跳转
<div @click="show(1)">
<a href="http://www.baidu.com" @click.prevent.self="show(2)">
<div @click="show(3)">百度</div>
</a>
</div>show: function(str){
console.log(str);
}

//父组件代码
<testComponent :title.sync="title"></testComponent>
//等价于
<testComponent :title="title" @update:title="updateTitle"></testComponent>//子组件代码
<template>
<div>
{{dateMsg}}
<button @click="updateTitle">修改title</button>
</div>
</template>
props: {
title: {
type: Date
}
},
data() {
return {
dateMsg: this.title
}
},
methods: {
updateTitle() {
let newVal = new Date();
this.dateMsg = newVal;
this.$emit('update:title',newVal); //当数据更新时传递给父组件，实现数据同步
}
},

2、在 created() 生命周期进行 DOM 操作

//父组件代码
import TodoItem from './components/TodoItem.vue'
data(){
return {
modelMsg: 'v-model信息'
}
}<todo-item v-model="modelMsg"></todo-item>
//上面的代码相当于：
<todo-item v-bind:value="modelMsg" v-on:input="modelMsg = arguments[0]"></todo-item>//子组件代码
//不一定要绑定在表单元素上，传过来的value就是一个普通的 props 属性值，可以任意使用
<input type="text" v-model="modelMsg2" @input="handleInput($event)">data () {
return {
//将value赋值给modelMsg，否则修改value时会报错
modelMsg2: this.value
}
}
props: {
//接受value属性
value: {
type: String
}
}
methods: {
//当 modelMsg 发生改变时，将值传给父组件
handleInput(e) {
this.$emit('input',e.target.value)
}
}

<button @click="a">事件尝试</button>methods: {
a (e) {
console.log(e); //输出原生事件 MouseEvent {isTrusted: true, screenX: 427, screenY: 491, clientX: 388, clientY: 362, …}
}
}

<button @click="a()">事件尝试</button>methods: {
a (e) {
console.log(e); //输出 undefined
}
} <button @click="a('aaa')">事件尝试</button>methods: {
a (e) {
console.log(e); //输出 aaa
}
}

<button @click="a('aaa','bbb',$event)">事件尝试</button>methods: {
a (a,b,event) {
console.log(a,b,event); //输出 aaa bbb MouseEvent {isTrusted: true, screenX: 425, screenY: 507, clientX: 386, clientY: 376, …}
}
}

/*** 子组件只传递一个参数的情况： ***/
//子组件 触发父组件的事件
this.$emit('childBtnClick','hahahaha')//父组件
<child @childBtnClick="childClick"></child>childClick (msg) {
console.log(msg); //输出 'hahahaha'
}/*** 子组件传递多个参数的情况： ***/
//子组件 触发父组件的事件
this.$emit('childBtnClick', 'hahahaha', '2222')//父组件
<child @childBtnClick="childClick"></child>childClick (msg, msg2) {
console.log(msg, msg2); //输出 'hahahaha' '2222'
}

/*** 子组件只传递一个参数的情况： ***/
//子组件 触发父组件的事件
this.$emit('childBtnClick', 'hahahaha')//父组件
<child @childBtnClick="childClick($event, 'aaa')"></child>childClick (e, msg) {
console.log(e, msg); //输出 'hahahaha' 'aaa'
}/*** 子组件传递多个参数的情况： ***/
//子组件 触发父组件的事件
this.$emit('childBtnClick', 'hahahaha', 'haha2222')//父组件
<child @childBtnClick="childClick(arguments, 'aaa')"></child>childClick (arr, msg) {
console.log(arr, arr[0], arr[1], msg); //输出 Arguments(2)["hahahaha", "haha222", callee: (...), Symbol(Symbol.iterator): ƒ] "hahahaha" "haha222" "aaa"
}