VUEの基礎

5236 ワード

vue? vue!😎


vueに入りました.もともとreactを使っていたのですが、なぜかvueを使ってしまいました.反応もすぐに熟してVUEもすぐに熟したようです簡単に分かるときはランニングマシンが低いと言っていましたが、まず反応を学んでからvueを学んで、理解しやすくなったような気がします.
KakaoNAVERもVueと言っていますが最近はよくわかりません最近はreactをよく使うようで、vueを使うとreactを忘れるのではないかと心配していますが、開発者は変化する姿勢に素早く適応しなければならないので、このような姿勢に素早く適応するために、vueを学ぶのも良い機会です.
一方、反応も学ぶべきことが多く、残念ながら新しいことに挑戦することにしました.vueに対して簡単な理解があって、学習の過程の中でvueに対して理解と総括があります.
基本については、YouTube講座を見ながらまとめます.

Vue🧑🏼‍💻


構造はtemplate、script、styleに分けられます.
templateは各タグを使用してhtmlを入力します.
scriptはjs、javascript、関数などを入力する空間です.
styleはcssを入力する空間です.

データのバインド


reactのstate値のようにデータをバインドし、変数として使用できます.
<script> 안에 
  export default { name : 'APP', data(){
return{} }
data()のreturn{}にデータを保存します.
データはobject形式でキーとキー値で格納されます.
例)
export default { name : 'APP', data(){
return{elm:[要素]}
使用はtemplateコードで{鍵名}として使用されます.
<div> {{elm}} </div>
このような形式です.{}カッコは2回使用する必要があります.
参考までにhtmlプロパティにも使用できます.でも使い方が違います.

HTML属性での使用


カッコの代わりに、コロン(:)を使用します.
<div :style="elm"> 
このように使います.
コロンを使用する理由は、v-bindというプロパティを使用するためです.
v-bindは、以下と略すことができる.
プロパティでは、この形式でデータをバインドするのではなく、v-bindを使用してデータをバインドします.以下を省略します.
使用する理由
reactの状態値と似ています.値を変更するたびに自動的にレンダリングされます.
また、コードをきれいに使うことができます.

複文


vueの中の複文はずっときれいです.reactはfor,for-each,mapなどを用いて重複文を記述した.vueは、vforを使用する方法です.
<ラベルv-for="">はこの形式で使用されます.
反応器にはmapが用いられ,使用方法も似ている.
<タグv-for="(data,index)"何回か:key="index">{{data}
mapのように、2つのパラメータを設定できます.indexは確かに選択肢です.
:keyを使用しても、エラーは発生しません.
第数話の部分には、数字だけでなくarray、objectも入れることができます.万一入れたら.
データの数に応じて繰り返します.
タグを繰り返す場合は、タグに入れるとタグも繰り返されます.
<태그 v-for="(data,index) in 몇회 " :key="index">
<p></p></태그>
pラベル、divなどのラベルを入れると、中のラベルが繰り返されます.

イベントハンドラ


reactはonclickなどをhtml属性として記述する.
vueはv-on:click=「関数名」を使用します.
@clickも簡単に使えます.
v-on:keyup.Enter=""は、Enterキーを押したときの条件として使用できます.

関数の作成


reactはクラスに関数を作成し、関数に関数を作成し、vueはscriptに関数を作成します.
scriptはどこでも作成されているわけではありません.
メソッド:{}に関数を作成して使用します.
また,クラスリアクターと同様にデータ(state)へのアクセスに使用する.
例は以下のとおりです.
 
<script>
export default { name : 'APP', data(){
return{ elm : '요소' } },
methods:{함수 보관 }
vueはscriptでマルチ演算処理を行い、htmlを入力するテンプレートコードで
簡単に書くことをお勧めします.
scriptは汚れていて、templateでは簡潔です
各コンポーネントは関数を作成および記述しますが、reactのように、vueもvuex、helperであることを後で知っていれば、関数をより簡潔に記述できます.
reactのグローバルステータスマネージャーの李徳思と同じだと思います.Ridex、vueのvuex、helperも使用したことがあります.これについては、後でまとめます.

じょうけんしき


reactはタグにif条件を加えることができないことが分かった.代わりに条件付きレンダリングがあり、vueではタグ属性を使用して条件式を追加できます.
v-if=このように「条件式」を入れて親ラベル属性に入れると、サブラベルにも条件があるため、条件付きレンダリングのように使用できる場合があります.

モジュール


import es 6から現れるモジュール反応には多く使われているので適応しやすい.reactは上部でimportを使用していましたが、vueはscript内で作成されています.vuex、helperを使うときに使うことが多いです.
こうしてvueを簡単に理解しました.これは基礎に関する問題で、これだけ知っていてもvueを使いやすいです.しかし,コードを簡潔に記述するためにvuex,helperを理解すると,vueをより高度に使用する可能性がある.
Cha Vuex,Helperについての勉強内容を整理します.