欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue中為何方法要寫在methods的里面

 更新時(shí)間：2022年10月18日 10:11:21   作者：山竹回家了  
這篇文章主要介紹了vue中為何方法要寫在methods的里面，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

vue中為何方法要寫在methods里面

1.methods是什么？

首先先來(lái)段代碼，我們?cè)趖emplate中設(shè)定一個(gè)按鈕,在點(diǎn)擊按鈕的時(shí)候打印

.<template>
  <div>
    <button @click="buttry">測(cè)試</button>
  </div>
</template>
<script>
export default {
  methods: {
    buttry() {
      console.log(this);
    },
  },
};
</script>
<style>
</style>

打印出來(lái)的結(jié)果表明：這個(gè)this是當(dāng)前的單文件的組件實(shí)例，并可以拿到組件定義的成員，可以進(jìn)行相關(guān)業(yè)務(wù)操作。

2.如果把方法寫在data中會(huì)怎么樣？

.<template>
  <div>
    <button @click="buttry">測(cè)試</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      buttry() {
        console.log(this);
      },
    };
  },
  //   methods: {
  //       buttry() {
  //         console.log(this);
  //       },
  //   },
};
</script>
<style>
</style>

得到的結(jié)果是null，是空值，代表無(wú)法取值，無(wú)法進(jìn)行任何業(yè)務(wù)處理

總結(jié)：

1.不同調(diào)用模式this指向不一樣

2.methods、data等就類似家里的柜子，不用的柜子盛放不同的物品，就代表每個(gè)柜子的功能不一樣，但地位相同

  • data：變量
  • methods：自定義變量
  • computed：計(jì)算屬性
  • watch：監(jiān)聽(tīng)器
  • directives:指令
  • filters:過(guò)濾器

3.只有methods里面才可以拿到組件,才可以進(jìn)行業(yè)務(wù)處理

Vue選項(xiàng) Vue中methods選項(xiàng)

構(gòu)造器里的methods選項(xiàng)在不同情況下有不一樣的調(diào)用方式，有下面三種情況： 

1.在Vue構(gòu)造器內(nèi)部調(diào)用方法—methods選項(xiàng)

點(diǎn)擊按鈕，實(shí)現(xiàn)數(shù)值相加的功能

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Vue中的methods選項(xiàng)</title>
		<script type="text/javascript" src="../assets/js/vue.js"></script>
	</head>
	<body>
		<h1>Vue-在內(nèi)部構(gòu)造器中調(diào)用方法</h1>
		<div id="app">
			<p>數(shù)字相加結(jié)果：{{number}}</p>
			<button @click="addNumber(2)">Add</button>
		</div>
		<script type="text/javascript">
			var butn={
				template:`<button>{{messages}}</button>`,
				data:function(){
					return{
						messages:'自定義標(biāo)簽ADD'
					}
				}
			}
			var demo =new Vue({
				el:'#app',
				data:{
					number:0
				},
				components:{
					"btnn":butn
				},
				methods:{
					addNumber:function(num){
						this.number=this.number+num
					}
				}
			})
		</script>
	</body>
</html>

運(yùn)行結(jié)果：

附加：

methods傳遞參數(shù)：

  • 1.在methods聲明方法
  • 2.調(diào)用方法時(shí)直接傳遞值

2.在自定義標(biāo)簽的情況下，Vue構(gòu)造器內(nèi)部調(diào)用方法—methods選項(xiàng)

自定義一個(gè)標(biāo)簽，并在構(gòu)造器內(nèi)部對(duì)其進(jìn)行掛載，使用自定義標(biāo)簽時(shí)，需要調(diào)用native修飾器，它的作用是綁定構(gòu)造器的原生事件。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Vue中的methods選項(xiàng)</title>
		<script type="text/javascript" src="../assets/js/vue.js"></script>
	</head>
	<body>
		<h1>Vue-在內(nèi)部構(gòu)造器中調(diào)用方法</h1>
		<div id="app">
			<p>數(shù)字相加結(jié)果：{{number}}</p>
			<button @click="addNumber(2)">Add</button>
			<p><btnn @click.native="addNumber(3)"></btnn></p>
		</div>
		<!--<button onclick="demo.addNumber(3)">在構(gòu)造器外部調(diào)用方法</button>-->
		<script type="text/javascript">
			var butn={
				template:`<button>{{messages}}</button>`,
				data:function(){
					return{
						messages:'自定義標(biāo)簽ADD'
					}
				}
			}
			var demo =new Vue({
				el:'#app',
				data:{
					number:0
				},
				components:{
					"btnn":butn
				},
				methods:{
					addNumber:function(num){
						this.number=this.number+num
					}
				}
			})
		</script>
	</body>
</html>

運(yùn)行結(jié)果：

聲明對(duì)象：

           var butn={
				template:`<button>{{messages}}</button>`,
				data:function(){
					return{
						messages:'自定義標(biāo)簽ADD'
					}
				}
			}

在構(gòu)造器里面聲明：

components:{"btnn":butn },

用.native修飾器來(lái)調(diào)用構(gòu)造器里的addNumber方法

<p><btnn @click.native="addNumber(3)"></btnn></p>

3.在Vue構(gòu)造器外部調(diào)用方法—methods選項(xiàng)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Vue中的methods選項(xiàng)</title>
		<script type="text/javascript" src="../assets/js/vue.js"></script>
	</head>
	<body>
		<h1>Vue-在內(nèi)部構(gòu)造器中調(diào)用方法</h1>
		<div id="app">
			<p>數(shù)字相加結(jié)果：{{number}}</p>
			<button @click="addNumber(2)">Add</button>
			<p><btnn @click.native="addNumber(3)"></btnn></p>
		</div>
		<button onclick="demo.addNumber(3)">在構(gòu)造器外部調(diào)用方法</button>
		<script type="text/javascript">
			var butn={
				template:`<button>{{messages}}</button>`,
				data:function(){
					return{
						messages:'自定義標(biāo)簽ADD'
					}
				}
			}
			var demo =new Vue({
				el:'#app',
				data:{
					number:0
				},
				components:{
					"btnn":butn
				},
				methods:{
					addNumber:function(num){
						this.number=this.number+num
					}
				}
			})
		</script>
	</body>
</html>

附加：

在作用域外調(diào)用構(gòu)造器里面的方法時(shí)，可以用對(duì)象.方法進(jìn)行調(diào)用

<button onclick="demo.addNumber(3)">在構(gòu)造器外部調(diào)用方法</button>

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論