vueの基本的な使い方-jsチュートリアル-php.cn

vueの基本的な使い方

巴扎黑

リリース： 2017-06-26 11:52:13

オリジナル

1002 人が閲覧しました

今Vueがとても人気なので、今日は簡単に紹介します

vueとは一体何ですか？

mvvm フレームワークに基づいており、angular に似ており、比較的小さくて使いやすいです。

vue 公式 Web サイト:

vue マニュアル Web サイト:

Angular を知っていれば、vue を学ぶのは簡単です。基本的に似ているからです

vueコマンドはv-xxxを使用します Vueはjsonと結合したhtmlコードで構成され、新しいvueインスタンスが作成されます Vueは個人によって開発され、個人によって維持されます

Vueの方が適しています同様に、angular と同様に、IE の以前のバージョンとは互換性がありません

これを使用するには、まず vue 公式 Web サイトにアクセスしてライブラリファイルをダウンロードする必要があります。

vueの基本的な使い方:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div id="box"> //上面说了我们需要一片html代码来展示数据

　　　　{{msg}} //这样我们就完成了一条数据的基本展示
　　</div> 
　　　

　　<script src="vue.js?1.1.11"></script>
　　<script>
　　　　new Vue({   //new 一个实例来展示一条基本数据
　　　　　　el:"#box", //el意思是element这个是固定的后边的是页面中你要展示数据到那个元素，就类似于anguar的控制器。 只是angular是写在html
　　　　　　　　　　　　　　页面中这个是获取到了元素然后再展示。它里面是选择器class id 标签名都是可以的。
　　　　　　data:{     //data也是定死的
　　　　　　　　msg:"这是一条数据"    //这其中就是数据当然他是个对象你可以写多条数据,还有这里面只可以放数据不可以是函数
　　　　　　}
　　　　})
　　</script>
</body>
</html>

ログイン後にコピー

共通コマンド:

Angularにはフォーム要素のデータを取得するng-modelがある Vueはフォーム要素のデータをv-modelとして取得し、angularは双方向のデータバインディングも行うことができます。

Angularには配列jsonオブジェクトをループするng-repeatがあり、v-for=' val in arr'を使用します。もちろん、名前を変更するだけで使い方は変わりません。

vue ループには、{{$index}} の各添え字も付属しています。

vue イベントのキー名を表示できる {{$key}} も付属しています。

Angular にはもちろん vue のイベントがあります。ここにも違いがあります。 angular は ng-click vue は v-on:click=" fn()"

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div id="box"> //上面说了我们需要一片html代码来展示数据
　　　　　<button v-on:click="fn()"></button>  //v-on:    后面可以跟你任何想跟的事件。
　　　　{{msg}} //这样我们就完成了一条数据的基本展示
　　</div> 
　　　

　　<script src="vue.js?1.1.11"></script>
　　<script>
　　　　new Vue({   
　　　　　　el:"#box",
　　　　　　data:{    
　　　　　　　　msg:"这是一条数据"    //这里只可以是数据
　　　　　　}，
　　　　　　methods:{    //这里写方法
　　　　　　　　fn:function(){ //如果你要使用上边的数据也不太一样angular是 $scope.a
　　　　　　　　　　alert(1);
　　　　　　　　　　alert(this.msg);   //这个this代表new的实例对象所以 this.msg 就调用到上边的数据了
　　　　　　　　}
　　　　　　}
　　　　})
　　</script>

</body>
</html>

ログイン後にコピー

v-show：

には ng-show="true/false" があります。 angular vue は v- show="true/false" と同じです true、show false、hide

//前边说了需要一片html代码来实现这就是我们那一片代码

ログイン後にコピー

と同じです

以上がvueの基本的な使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

php 8、私も来ます

ウェブサイトのレイアウトを 30 分で学ぶ

ビデオチュートリアルに精通したOracleの入門

あなたの最初のUNI-APPコード

ゼロからアプリの起動までフラッター

兄弟連新版Linuxビデオチュートリアル

AXURE 9 ビデオチュートリアル (プロダクトマネージャーのインタラクティブな製品設計 UI に適しています)

基礎能力ゼロ PS ビデオチュートリアル

16日間のUIビデオチュートリアル

PS テクニックとスライステクニックのビデオチュートリアル

アリクラウド環境構築およびプロジェクトオンラインビデオチュートリアル

コンピュータネットワークの概要 - プログラマが身につけるべき基礎知識

プログラマーのための基本チュートリアル - HTTP プロトコルの説明

Websocket ビデオチュートリアル

vueの基本的な使い方

今Vueがとても人気なので、今日は簡単に紹介します