Angular vs React vs Vue vs UISYSイベントバインディングメソッドの比較（初心者は必見）

1.ゼロから始める

イベントバインディングは、Web開発の初心者向けの2番目のレッスンです。イベントバインディングの学習は、インタラクションに挑戦する新しいコースです。
まず、ネイティブhtml + JavaScriptがどのように機能するかを見てみましょう。

ネイティブな方法：

<div>
  <button onclick="greet()">Greet</button>
</div>
<script>
	function greet(){
     
     
		alert("html and javascript");
 	}
</script>

これは非常に単純な例ですが、この例はWebページであるため、パッケージ化またはモジュール化することはできません。
モジュール性の欠如がWebページの問題点です。w3cの初期にWebコンポーネント標準がリリースされましたが、後の期間に廃止されました。
したがって、人々のための3つの主要なフレームワーク、つまりAngular、React、およびVueがあります。これらの3つのフレームワークはモジュール化できます。BEMの感謝の気持ちも聞いたことがあるかもしれません。オンラインでダウンロードできます。同時に、データバインディング、MVVM、その他の概念も提供します（この記事では紹介しませんが、疲れすぎて書くことができません）。
さらに、新しい開発ツールを紹介したいと思います。これはWEBモジュラーツールairoot-uisysとして理解できます。v1バージョンは今年リリースされたばかりです。非常に使いやすく、独立した分析エンジンを備えており、リアルタイムコンパイルが非常に高速です。
では、これらのいくつかのイベントバインディングメソッドを見てみましょう。

1.角度イベントバインディング

Angularは、人々が何が起こっているのかを理解していることを知っており、より学術的であり、イベントコントローラーのアイデアがそれに統合されていることがわかります。

<div ng-app="myApp" ng-controller="myctrl">
	<button ng-click="greet()">Greet</button>
</div>
<script>
	var app = angular.module('myApp', []);
	app.controller('myctrl', function($scope) {
     
     
	    $scope.greet = function() {
     
     
	       alert("Angular");
	    };
	});
</script>

2.イベントバインディングを反応させる

Reactはネイティブに比較的近いです。jsの能力が強い場合は、ThinkPadを使用しているような感覚があります（リトルレッドライディングフード付き、マウスなし）。

<div id="example"></div>
<script type="text/babel">
function App() {
     
     
  function greet(e) {
     
     
  	e.preventDefault();
    alert('React');
  }
  return (
    <button  href="#" onClick={
     
     greet}>Greet</button>
  );
}

ReactDOM.render(
  <App />,
  document.getElementById('example')
);
</script>

3.Vueイベントバインディング

v-onまたは@clickを介してVueオブジェクトをバインドする方法は、Reactへの参照と見なす必要があると思います。もちろん、vue自体はangluarからのアイデアです。

<div id="app">
  <button v-on:click="greet">Greet</button>
</div>
<script>
	var vue = new Vue({
     
     
  		el: '#app',
  		data: {
     
     
    		name: 'Vue.js'
  		},
  		methods: {
     
     
	    	greet: function (event) {
     
     
		      	alert("Vue.js");
	    	}
  		}
	});
</script>

4.UISYSイベントバインディング

uisysは最も直接的で、元のuisysとほぼ同じであり、モジュール化して参照することができます。
Airoot uisysは、airoot.cnによって起動されたuiクイックモジュラーツールです。非常に強力な感じがしますが、エコシステムはそれほど大きくありません。結局のところ、人々は大企業によって後援されています。

<div>
  <button onclick="@this.greet()">Greet</button>
</div>
<script>
	func greet(){
     
     
		alert("airoot uisys");
 	}
</script>

uisysはより柔軟に使用でき、次のように書くこともできます。

<div>
  <button id="greet">Greet</button>
</div>
<script>
	greet.addEventListener("click",func(){
     
     
		alert("airoot uisys");
 	});
</script>

また、元のポイントで行うことができます：

<div>
  <button id="greet">Greet</button>
</div>
<script>
	//注意通过getElementById 获取，需要在greet前面加个$
	document.getElementById("$greet").addEventListener("click",func(){
     
     
		alert("airoot uisys");
 	});
</script>

第二に、小さなテスト

ここでは、VueとUisysを使用して座ってデモンストレーションを行います。これらのフレームワークは実際のビジネスで考慮されているため、試してみましょう。
例：モジュールの作成と言えば、モジュールには可変フラグがあります。フラグが外界からtrueに設定されている場合、モジュールをクリックできます。それ以外の場合はクリックできません。

1.表示

実際、これを書く方法はたくさんあります。v-ifとv-elseを使って表示するようなものです。
検証を容易にするために、setTimeoutメソッドを使用し、5秒後にフラグをfalseに変更します。

<div id="app">
	<div v-if="flag" @click="greet()">
	 添加产品
	</div>
	<div v-else>
	 添加产品
	</div>
</div>
<script>
	var vue = new Vue({
     
     
  		el: '#app',
  		data: {
     
     
    		flag: true
  		},
  		methods: {
     
     
	    	greet: function (event) {
     
     
		      	alert("Vue.js");
	    	}
  		}
	});
	//开始可以点击，5秒后点击效果就失效了。
	setTimeout(function(){
     
     
		vue.flag = false;
	},5000);
</script>

2. uisys

uisysは非常に簡単です。銃を手に取るだけです。素晴らしいです。
検証を容易にするために、setTimeoutメソッドを使用し、5秒後にフラグをfalseに変更します。

<div id="app">
	添加产品
</div>
<script>
	func greet(){
     
     
		alert("airoot uisys");
	}
	
	set flag(value){
     
     
		app.onclick = value ? greet : null;//三目运算符
	}
	
	//初始化函數
	func init(){
     
     
		flag = true;
		//开始可以点击，5秒后点击效果就失效了。
		setTimeout(function(){
     
     
			flag = false;
		},5000);
	}
</script>

3、まとめ

3つの主要なWebフレームワークとairootuisysがすべての人に紹介されました。イベントのバインドに最適です。Angluarを除いて、一部の小規模なパートナーは、Angluarがなぜそれほど複雑なのか疑問に思うでしょう。実際、Angluarは設計の当初から大規模なエンタープライズプロジェクトについて多くのことを検討しており、そのコンポーネントは最も成熟しています。結局のところ、ReactとVueグーグルほど複雑ではないので、アングルアが学び始めたときは少し「パンツを脱いでおならしたような気分」になりましたが、深く学ぶと作者のジレンマがわかります。

しかし、ReactとVueがangluarより劣っていると言っているわけではありません。「数千マイルの旅は一歩から始まります」と言われているように、ReactとVueのコミュニティはどんどん大きくなっており、angluarとadobe flexを模倣するコンポーネントはほとんど同じであるため、区別するのは困難です。

最後に、新しいairoot uisysを評価します。正直なところ、この男は3つの主要なWebフレームワークと完全に互換性があります。彼は、html解析全体を記述し、独自の解析エンジンを介してhtml、jsコードを生成し、完全に確立されたブラウジングを行いました。デバイスの最下層なので、モジュール化の効率は間違いなく高くなります。コンテナを知っているパートナーがDockerとVMwareの違いを知っている場合、uisysがDockerの原則であり、3つのフレームワークがVMWareの原則です。そのため、uisysは本当にお腹が空いていますが、企業はプラットフォームを選択してエコシステムを確認し、コンポーネントを確認し、単にそれ以上書きたくないので、uisysは劣っていますが、uisysはTMaxフレームワークをプッシュしたいと考えており、さまざまなJSプラグインを次のように変更できると言われています。 HTML、あらゆる種類の「魅力的な星」、待って見てください。

OK、フロントエンドを学ぶことは実際には非常に困難です。よく学ぶことは創造的な経験です。よく学ばなければ、それはプリンターになります（インターフェースは同じで、プラグインは設計に従って設計されます）。皆さんが素晴らしいフルスタック開発者になることを願っています。ご覧いただきありがとうございます。