Methods are written in methods
v-on:click="run()"
@click="run()"
Method to obtain data in data through this.
Method setting data in data is set by this.data=''
For example, by =[1,2,3], set the value of list to make the page loop list
The value can be passed to the method through @click="run('123')".
You can pass the event object to the method through @click="run($event)", and then click the attributes of the tag according to the settings of the event object, or you can obtain custom attributes
<template>
<div >
{{msg}}
<button @click="run()">@clickEvent trigger</button>
<button v-on:click="runvon()">v-on:clickEvent trigger</button>
<button @click="getMsg()">Get</button>
<button v-on:click="setMsg()">set up</button>
<ul>
<li v-for="item in list">{{item}}</li>
</ul>
<button @click="setList()">set upListValue of</button>
<button @click="sendData('123')">Method pass value</button>
<button v-on:click="sendEvent($event)">Passing event objects</button>
<button @click="sendEventSet($event)">Passing event objects，并set up背景色</button>
<button data-a="La La La" @click="sendEventData($event)">Passing event objects，并Get自定义属性</button>
</div>
</template>
<script>
export default {
name: 'app',
data () {
return {
msg: '123',
list:[]
}
},
methods:{
run(){
alert("@click event triggered")
},
runvon(){
alert("v-on:click event triggered")
},
getMsg(){
alert("I got msg"+);
},
setMsg(){
="I'm the value after setting"
},
setList(){
for(var i = 0 ; i < 10 ; i++){
(i)
}
},
sendData(a){
alert("The value that comes through is:"+a)
},
sendEvent(e){
(e);
},
sendEventSet(e){
="red";
},
sendEventData(e){
alert()
}
}
}
</script>
<style lang="scss">
</style>
Supplementary knowledge:Vue brother components deliver data through event broadcast
Non-parent-child component passes value
Implement non-parent-child component transmission value through event broadcast
1. Create new js, introduce and instantiate Vue
import Vue from 'vue' var VueEvent = new Vue(); export default VueEvent;
2. Introduce VueEvent in child component A and broadcast events
import VueEvent from '../model/'
VueEvent.$emit('to-news',);
3. Introduce VueEvent in child component B and listen for events
import VueEvent from '../model/'
VueEvent.$on('to-news',data=>{(data);});
Sample code
import Vue from 'vue' var VueEvent = new Vue(); export default VueEvent;
<template>
<div >
<button @click="sendMsg()">I'll trigger the event</button>
</div>
</template>
<script>
import VueEvent from "../models/";
export default {
data() {
return {
msg: "I'm Home's msg"
};
},
methods: {
sendMsg() {
VueEvent.$emit("tonews", );
}
}
};
</script>
<style>
</style>
<template>
<div >
I'll accept the incident--{{msg}}
</div>
</template>
<script>
import VueEvent from "../models/";
export default {
data() {
return {
msg: "I'm the msg of News"
};
},
mounted() {
VueEvent.$on("tonews", res => {
= res;
});
}
};
</script>
<style>
</style>
<template>
<div >
<v-home></v-home>
<hr />
<v-news></v-news>
</div>
</template>
<script>
import Home from "./components/";
import News from "./components/";
export default {
name: "app",
data() {
return {
msg: "Welcome to Your App"
};
},
components: {
"v-home": Home,
"v-news": News
}
};
</script>
<style lang="scss">
</style>
The above Vue execution method, method to obtain data value, set data value, and method to pass value is all the content I share with you. I hope you can give you a reference and I hope you can support me more.