1. Event handling
event modifier
Vue calls modifiers via instruction suffixes represented by dots (.), .stop, .prevent, .capture, .self, .once
.stop: Prevent events from bubbling up. When an element fires an event, and that element contains nested parent elements, using.stopmodifiers prevents the event from being passed to ancestor elements.
.prevent: Block the default event. When an event is triggered on an element, use.preventmodifiers to prevent the browser from performing the default event behavior.
.capture: Use event capture mode. By default, event listeners in Vue are handled through event bubbling mode, that is, bubbling from child elements to parent elements. But using.capturemodifiers you can bind event listeners to the capture phase, that is, capture from parent elements to child elements.
.self: Only fires when the event fires on the specified element itself. When an element contains child elements and the same event handler is bound, using.selfmodifiers ensures that the event will only execute the handler when the element itself is triggered.
.once: Only trigger the event once. When.oncethe event bound to the modifier is triggered, the listener will be automatically unbound to ensure that the handler function is only executed once.
Code demo:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<title>事件处理</title>
<style type="text/css">
.one{
background-color: red;
height: 400px;
width: 400px;
} .two{
background-color: yellow;
height: 300px;
width: 300px;
} .three{
background-color: pink;
height: 200px;
width: 200px;
} .four{
background-color: green;
height: 100px;
width: 100px;
}
</style>
</head>
<body>
<div id="app">
<div class="one" @click="fun1">
<div class="two" @click="fun2">
<div class="three" @click="fun3">
<div class="four" @click.stop="fun4"></div>
</div>
</div>
</div>
<input :value="msg"/>
<button @click="clickme">点我</button>
<form @submit.prevent="submitForm">
<button type="submit">提交</button>
</form>
<div @click.capture="parentClick">
<button @click="childClick">点击我</button>
</div>
<div @click.self="parentClick">
<button @click="childClick">点击我</button>
</div>
</div>
<script type="text/javascript">
new Vue({
el:'#app',
data(){
return {
msg:'你好'
};
},
methods:{
fun1(){
alert("fun1")
},fun2(){
alert("fun2")
},fun3(){
alert("fun3")
},fun4(){
alert("fun4")
},
clickme(){
console.log(this.msg)
},
submitForm() {
console.log("表单提交事件");
},
parentClick() {
console.log("父元素点击事件");
},
childClick() {
console.log("子元素点击事件");
}
}
})
</script>
</body>
</html>Effect:
2. Comprehensive cases of forms
Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<title>表单中和案例</title>
</head>
<body>
<div id='app'>
姓名：<input name="name" v-model="name"/><br />
密码：<input type="password" v-model="pwd"><br />
性别：<span v-for="s in sexList">
<input type="radio" name="sex" v-model="sex" :value="s.id" >{
{s.name}}
</span><br />
籍贯：<select name="myAddr" v-model="myAddr">
<option v-for="a in address" :value="a.id" >{
{a.name}}</option>
</select><br />
爱好：
<span v-for="h in hobby">
<input type="checkbox" name="myLikes" v-model="myLikes" :value="h.id" >{
{h.name}}
</span><br />
个人简介：<textarea v-model="sign" cols="10" rows="5"></textarea>
<br />
同意：<input type="checkbox" v-model="ok" /><br />
<button v-show="ok" @click="dosub">提交</button>
</div>
<script type="text/javascript">
new Vue({
el:'#app',
data(){
return {
name:'小威',
pwd:'123665',
sexList:[
{name:'男',id:1},
{name:'女',id:2},
{name:'阴阳人',id:3} ],
sex:1,
hobby:[{name:'洗浴',id:1},
{name:'保健',id:2},
{name:'按摩',id:3},
{name:'spa',id:4}
],
myLikes:[],
address:[{name:'福建',id:1},
{name:'湖南',id:2},
{name:'湖北',id:3},
{name:'台湾',id:4}
],
myAddr:null,
sign:null,
ok:false
};
},
methods:{
dosub(){
var obj={};
obj.name=this.name;
obj.pwd=this.pwd;
obj.sex=this.sex;
obj.address=this.myAddr;
obj.love=this.myLikes;
obj.sign=this.sign;
console.log(obj)
}
}
})
</script>
</body>
</html>Effect:
3. Component communication
1 Component introduction and definition
Vue components are one of the core concepts in the Vue.js framework, which allow developers to split pages into reusable, independent modules. Components can contain their own templates, styles and logic, making the code more modular, maintainable and reusable.
In addition to Vue's own instructions (v-on|v-model), Vue also allows the registration of custom instructions, which are divided into global instructions/local instructions according to their scope.
Definition of components: Components can be defined through the Vue.component() method or the components option of the Vue instance. The definition of a component includes its name, template, data, methods, etc.
local definition
<script> new Vue({ el: '#xw', components: { "my-button": { template: "<button>自定义组件</button>" } } }) </script>
global definition
Vue.component('my-button', { //用来传值的自定义属性 props:['title'], //模板,模板中写的html代码,在其中可以使用{ {}},及指令等vue元素 template: '<button @click="doClick">{ {title}}: 全局组件</button>', //注意：在自定义的组件中需要使用函数来定义data data: function() { return { xxx: 0 } })
Vue custom events are designed for communication between components. In Vue, the parent component passes data to the child component through prop. If you want to pass the data of the child component to the parent component, you can bind the custom event.
- Parent Vue instance->child Vue instance, pass data through prop
- Child Vue instance->parent Vue instance, passing data through events
Component passing parameters
Passed down from father to son
Note: props uses camel case naming when defining attributes, but when used in html, it needs to be changed to dash naming! !
!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>父传子</title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
<div id="xw">
<ul>
<li>
<!-- <h3>{
{ts}}</h3> -->
<p>vue组件</p>
<!-- 使用自定义组件my-button的时候进行传值(相当于jsp标签往助手类中传值的概念) -->
<my-button m="肖少爷"></my-button>
</li>
</ul>
</div>
</body>
<script>
var vm = new Vue({
el: "#xw",
components: {
'my-button': {
props: ['m'],
template: '<button @click="doClickMyButton">这一个自定义组件，被{
{m}}点了{
{n}}次</button>',
data() {
return {
n: 0
};
},
methods: {
doClickMyButton() {
this.n++;
}
}
}
}
});
</script>
</html>
Son's Biography Father
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>子传父</title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
<div id="xw">
<ul>
<li>
<!-- <h3>{
{ts}}</h3> -->
<p>vue组件</p>
<!-- 使用自定义组件my-button的时候进行传值(相当于jsp标签往助手类中传值的概念) -->
<my-button m="邓正伟" @three-click="getParam"></my-button>
</li>
</ul>
</div>
</body>
<script>
var vm = new Vue({
el: "#xw",
components: {
'my-button': {
props: ['m'],
template: '<button @click="doClickMyButton">这是一个黑丝姐姐，被{
{m}}点了{
{n}}次</button>',
data() {
return {
n: 0
};
},
methods: {
doClickMyButton() {
this.n++;
if (this.n % 3 == 0) {
// 触发自定义组件定义的事件，这里可以传递任意个参数
// 但是触发的事件绑定的函数要与参数个数一致
this.$emit('three-click', this.n, 'https://blog.csdn.net/Justw320', '无英韶');
}
}
}
}
},
methods: {
getParam(a, b, c) {
console.log(a, b, c);
}
}
});
</script>
</html>
