[百犬は1ダース/Vue.js]5章-イベント処理

45532 ワード
vue.js フロントエンド テキストリンク

💪 コアキー

  • アクティビティ
  • v-on

    • 🌠 概要


    前章では、v-modelを使用してページからデータをインポートする方法について学習しました.この授業では、vueでv-onを使用してイベントを処理する方法を学びます.

    [01]アクティビティとの関連付け:v-on


    v-onディレクトリは、Vueメソッドを実行するイベントハンドラです.
    ここで,イベントとはユーザのボタン,クリックなどの操作を指す.
    ユーザの操作を検出し、特定の方法を実行するのはv-onである.

    書式設定

    <태그명 v-on:"이벤트"="메소드명"></태그명>
    上記の内容をHTMLコードに記述します.
    メソッドの内容は、Vueインスタンスのdataオプションで定義できます.

    書式設定

    new Vue({
	el :"#id명",
    data : {...},
    methods : {
    	"메소드명" : function(){
        },
        "메소드명" : function(){
        }
    }
})

    💌 省略可能


    はい、私が位置決めで学んだv-bindのように、v-onも省略できます.よく使うので省略バージョンも開発されていますよね?
    <a v-on:click="doSomething"></a>
    銀.
    <a @click="doSomething"></a>
    前述したように、省略して使用することができる.

    ボタンイベントをクリック


    クリックして2番目のボタンをクリックできない例


    ソースコード
    <!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Vue.js sample</title>
		<link rel="stylesheet" href="style.css" >
		<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<h2 lign="center">클릭하면 두번째는 누를 수 없게 되는 버튼 예제</h2>
			<button v-on:click="stop">눌러보세요</button>
		</div>
		<script>
			new Vue({
				el:"#app",
				data:{
				},
				methods : {
					stop:function(){
						alert("더이상 버튼을 누를 수 없습니다!");
					}
				}
			})	
		</script>
	</body>
</html>
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
.menu{
  background: darkslateblue;
  padding : 15px;
   border-radius: 5px;
}
.menu a{
  color: white;
  padding: 20px;
}
</style>
    結果

    画質は悪いけど知らないふりしようぶらぶら

    パラメータを渡してメソッドを実行


    指定した値で増加する例をクリックします


    ソースコード
    <!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Vue.js sample</title>
		<link rel="stylesheet" href="style.css" >
		<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<h2 lign="center">클릭하면 지정된 값만큼 증가 시키는 버튼 예제</h2>
			<button v-on:click="add(5)">5 증가</button>
			<button v-on:click="add(10)">10 증가</button>
			<button v-on:click="add(100)">100 증가</button>
			<p>{{num}}</p>
		</div>
		<script>
			new Vue({
				el:"#app",
				data:{
					num:0
				},
				methods : {
					add: function(n){
						this.num += n;
					}
				}
			})	
		</script>
	</body>
</html>
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
.menu{
  background: darkslateblue;
  padding : 15px;
   border-radius: 5px;
}
.menu a{
  color: white;
  padding: 20px;
}
</style>
    結果

    キーの入力


    特定のキーを入力したときにイベントが実行されることを確認できます.

    書式設定

    <input v-on:keyup.키수식자="메소드명"></a>
    このキーワードのフォーマットは以下の通りです.
    暗記や必要なときはグーグルでいいです
    [キー修飾子]
  • enter
  • .tab
  • .delete
  • .esc
  • .space
  • .up
  • .down
  • .left
  • .right
  • .48~.57(0~9)
  • .65~.90(A~Z)
  • .ctrl
  • .alt
  • .shift
  • .meta(windows:windowキー/Macos:commandキー)

    • enterキーを押して通知ウィンドウを表示する例


    ソースコード
    <!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Vue.js sample</title>
		<link rel="stylesheet" href="style.css" >
		<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<h2 align="center">Enter키를 누르면 알림창을 표시하는 예제</h2>
			<input v-model="myData" v-on:keyup.enter="printAlert">
		</div>
		<script>
			new Vue({
				el:"#app",
				data:{
					myData:'',
				},
				methods : {
					printAlert:function(){
						alert("Enter키를 누르셨습니다!");
					}
				}
			})	
		</script>
	</body>
</html>
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
.menu{
  background: darkslateblue;
  padding : 15px;
   border-radius: 5px;
}
.menu a{
  color: white;
  padding: 20px;
}
</style>
    結果

    実践:シンプルなコンピューティングの実装


    ソースコード

    <!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Vue.js sample</title>
		<link rel="stylesheet" href="style.css" >
		<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<h2 align="center">간단한 계산기</h2>
			<input v-model.number="num1">
			<input v-model.number="num2"><br>
			<button v-on:click="add(num1, num2)">덧셈계산</button>
			<button v-on:click="minus(num1, num2)">뺄셈계산</button>
			<button v-on:click="multiply(num1, num2)">곱센계산</button>
			<button v-on:click="divide(num1, num2)">나눗셈계산</button>
			<p>결과는 {{result}} 입니다.</p>
		</div>
		<script>
			new Vue({
				el:"#app",
				data:{
					num1:0,
					num2:0,
					result:0
				},
				methods : {
					add:function(a, b){
						this.result = a+b;
					},
					minus:function(a, b){
						this.result = a-b;
					},
					multiply:function(a, b){
						this.result = a*b;
					},
					divide:function(a, b){
						this.result = a/b;
					}
				}
			})	
		</script>
	</body>
</html>
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
.menu{
  background: darkslateblue;
  padding : 15px;
   border-radius: 5px;
}
.menu a{
  color: white;
  padding: 20px;
}
</style>

    結果



    💤 ポスト


    そんなことで1週間経ってからVueをアップしました
    はい.なんだ.今はまだ精神的に崩壊していますが、私は再び平均状態に戻りたいようです.はい.なんだ.上がらなければ仕方がない.
    もう3月の最後の週です2022年の第1四半期はもう終わりました.みんなが幸せで意味のある時期を過ごしてほしいです.
    実は生活の中で一つのことに集中すると、急に憂鬱で怖くなります.私の頭の中ではずっと余裕を持って森を見に行くことを考えていますが、これは難しいです.
    たまに私のポスターを見ているすべての人は健康に注意しなければなりません(コロナに気をつけて、季節を変えて風邪を引いて)、意味があって、暇な時に幸せになりたいです.
    こう書くと、遠く離れたところに書かれた墨跡が隠れた直筆文のように見えますが…
    そうではありません.明日あさってにも発表します私は死んだ水になります.🤍
    Heap
    struts 2フロントパラメータを受信する3つの方法