Vue 실행 방법, 방법 데이터 값 가져오기, 데이터 값 설정, 방법 전송 작업

메서드에 쓰기
v-on:click="run()"
@click="run()"
방법은this를 통해 데이터의 데이터를 가져옵니다.데이터 획득
방법은 데이터의 데이터를this를 통해 설정합니다.데이터 =''설정
예를 들면 이것을 통해.list=[1,2,3],list의 값을 설정하여 페이지가 순환하는list
@click='run('123')'을 통해 방법으로 값을 전달할 수 있습니다
@click="run($event)"을 통해 이벤트 대상을 방법에 전송한 다음 이벤트 대상의 e.srcelement에 따라 탭을 클릭하는 속성을 설정할 수 있습니다. e.srcelement를 통해서도 가능합니다.데이터set 사용자 정의 속성 가져오기

<template>
 <div id="app">
  {{msg}}
  <button @click="run()">@click </button>
  <button v-on:click="runvon()">v-on:click </button>
  <button @click="getMsg()"> data.msg</button>
  <button v-on:click="setMsg()"> data.msg</button>
  <ul>
   <li v-for="item in list">{{item}}</li>
  </ul>
  <button @click="setList()"> List </button>
  <button @click="sendData('123')"> </button>
  <button v-on:click="sendEvent($event)"> </button>
  <button @click="sendEventSet($event)"> ， </button>
  <button data-a=" " @click="sendEventData($event)"> ， </button>
 </div>
</template>

<script>
export default {
 name: 'app',
 data () {
  return {
   msg: '123',
   list:[]
  }
 },
 methods:{
  run(){
   alert("@click ")
  },
  runvon(){
   alert("v-on:click ")
  },
  getMsg(){
   alert(" msg"+this.msg);
  },
  setMsg(){
   this.msg=" "
  },
  setList(){
   for(var i = 0 ; i < 10 ; i++){
    this.list.push(i)
   }
   
  },
  sendData(a){
   alert(" ："+a)
  },
  sendEvent(e){
   console.log(e);
  },
  sendEventSet(e){
   e.srcElement.style.background="red";
  },
  sendEventData(e){
   alert(e.srcElement.dataset.a)
   
  }
 }
}
</script>
<style lang="scss">
</style>

추가 정보: 이벤트 브로드캐스트를 통한 Vue 형제 구성 요소 데이터 전달
비 부자 어셈블리 전송
이벤트 방송을 통해 비부자 구성 요소 값 전달
1. 새 js, Vue 도입 및 실례화

import Vue from 'vue'
var VueEvent = new Vue();
export default VueEvent;

2. 서브어셈블리 A에 VueEvent를 도입하고 이벤트 브로드캐스트
import VueEvent from '../model/VueEvent.js'
VueEvent.$emit('to-news',this.msg);
3. 서브어셈블리 B에 VueEvent를 도입하고 이벤트 수신
import VueEvent from '../model/VueEvent.js'
VueEvent.$on('to-news',data=>{console.log(data);});
예제 코드

import Vue from 'vue'
var VueEvent = new Vue();
export default VueEvent;

<template>
<div id="home">
  <button @click="sendMsg()"> </button>
</div>
</template>
<script>
import VueEvent from "../models/VueEvent.js";
export default {
 data() {
  return {
   msg: " Home msg"
  };
 },
 methods: {
  sendMsg() {
   VueEvent.$emit("tonews", this.msg);
  }
 }
};
</script>
<style>
</style>

<template>
<div id="news">
   --{{msg}}
</div>
</template>
<script>
import VueEvent from "../models/VueEvent.js";
export default {
 data() {
  return {
   msg: " News msg"
  };
 },
 mounted() {
  VueEvent.$on("tonews", res => {
   this.msg = res;
  });
 }
};
</script>
<style>
</style>

<template>
 <div id="app">
  <v-home></v-home>
  <hr />
  <v-news></v-news>
 </div>
</template>

<script>
import Home from "./components/Home.vue";
import News from "./components/News.vue";
export default {
 name: "app",
 data() {
  return {
   msg: "Welcome to Your Vue.js App"
  };
 },
 components: {
  "v-home": Home,
  "v-news": News
 }
};
</script>

<style lang="scss">
</style>

이상의 이 Vue 실행 방법, 방법은 데이터 값을 얻고 데이터 값을 설정합니다. 방법은 값을 전달하는 조작이 바로 편집자가 여러분에게 공유한 모든 내용입니다. 여러분에게 참고가 되고 저희를 많이 사랑해 주십시오.