VUEエントリー例

ヴューの簡単な例

 

ヴューのご紹介

VUE(発音/vjuː/と同様の表示が)ユーザインターフェースのセット構築するために使用されるプログレッシブフレーム他のフレームの差が大きい、Vueのは、層によってアップ底層から印加されるように設計されています。Vueのコアライブラリのビュー層にのみ焦点を当て、使いやすいだけでなく、サードパーティ製のライブラリまたは既存のプロジェクトを統合することは容易ではないだけです。一方、現代のツールチェーンとさまざまなサポート・ライブラリーを組み合わせて使用、複雑な1ページのアプリケーションのためにドライブを提供することも十分に可能ヴュ。

 

1、我々はファイルをダウンロードする公式サイトVUE vue.jsするために必要なすべての最初のhttps://cn.vuejs.org/

 

 

 

インストールすることを選択 - - 選択開発版のチュートリアルへ

 

 

 

JSコードの束を入力した後、我々はすべてのコピーを選択します

 

 

 

 

2は、プロジェクトvue.jsでファイルを作成し、VUEの運動プログラムを作成し、将軍がネットにコードをコピー&ペースト、ノード、データセットを結合、VUEのインスタンスを作成し、インデックスページでvue.jsライブラリパッケージを導入しました。{{メッセージ}}は、データ取得のデータの値です。

 

 

<!DOCTYPE HTML>

<HTML>

       <ヘッド>

              <メタ文字セット= "UTF-8" />

              簡単な例VUE <タイトル> </ TITLE>

              <! - 導入VUEライブラリ - >

              <スクリプトSRC = "vue.js"> </ SCRIPT>

       </ head>の

       <身体>

              <DIV ID = "ルート"> {{MSG}} </ div>

              <div id="root2"></div>

              <script>

                     //创建一个vue实例--与ID为root的结点进行绑定--data 是vue实例中的一些数据存放地点

                     new Vue({

                            el:"#root",

                            data:{

                                   msg:"hello world"

                            }

                     })

              </script>

              <script>

                     //原生js实现

                     var dom =document.getElementById("root2");

                     dom.innerHTML="hello world!";

              </script>

       </body>

</html>

 

3、 效果的实现,如果能够成功的获取到data中msg的数据,就表示vue已经成功引用

 

 

おすすめ

転載: www.cnblogs.com/muchen220/p/10983163.html