Vue.jsを使い始めるには、どのような知識を学ぶ必要がありますか?

画像

Vue.jsの使用を開始するには、まず、Vue.jsの概念、機能、特性など、最も基本的な知識を学ぶ必要がありますVue.jsを最初大まかに理解することによってのみ、それを習得することが非常に重要である理由を理解できます。Vue.js.js使い始めるために学ぶべき知識を見てみましょう


1 Vue.jsはやっていますか?


1 の製造Vue.js

インターネットの急速な発展を遂げる現在の社会では、日々無数のアプリケーションが出入りしており、お祭りなどでウェブサイトのスタイルが頻繁に変わることもあり、今後も開発を続けるためには、ユーザーエクスペリエンスが基本です。モバイルブラウザでいくつかのWebページを開いた場合Webページとネイティブアプリの間にいくつかの違いがありますWebページの利点は、インストールする必要がない、使用するだけなどです。欠点は、ページの読み込み時に空白のページが表示され、一部のアニメーションエフェクトが明らかにスタックし、ページデータの読み込みのためにページ間のジャンプも表示されることです。短い空白ページの状況など。


一般に、Webページをネイティブアプリ比較すると、それらをインストールする必要がないという利点はほとんど1つだけであり、ユーザーエクスペリエンスの他の側面は明らかにネイティブアプリより劣っていますこの場合、Vue.jsなどの一連のフロントエンド開発フレームワークが生まれました。と言うことができるの人気などのフロントエンドのフレームワークVue.jsは、歴史の中で避けられない。優れた開発者になるために、する必要がある起動フロントエンド開発の学習フレームワークを。


2 Vue.jsの定義

学び始めたばかりの人は、まずVue.js定義の基本的な知識を理解する必要があります。Vue.jsの公式ドキュメントでは、ユーザーインターフェイスを構築するための進歩的なフレームワークであると説明されています。プログレッシブフレームワーク」に重点が置かれています。いわゆるプログレッシブタイプとは、Vue.jsに多くの機能があり、それらのすべて、または一部のみを使用できることを意味します。フレームワークについて話しましょう。エリアを指定し、棚に基づいて開発します。つまり、フレームワークには制限があり、フレームワーク自体の規制に準拠する必要があります。ライブラリはツールボックスであり、基本的に無制限に使用できます。


2 Vue.js特徴と利点は何ですか?

Vue.js基本を理解した後、Vue.jsの特徴を見てみましょう1つはサイズが小さいことです。Vue.js自体は非常に小さく、圧縮後33kです。さらに、より効率的です。データの双方向バインディングにより、開発者はDOMオブジェクトを操作できなくなります。そして、学ぶのは簡単です。もっとやさしい初心者のための、多くはより成熟し、安定した、市場に基づいていVue.js UIを使用する準備ができて使用されるフレームワークやコンポーネントを、。もちろん、そのメリットはそれだけではありません。始めてからゆっくりと体験していただきたいと思います。


3.最初のVueプログラムのデモンストレーション


1 vue.js紹介Vueを使用するときの最初のステップは、最初にそれを紹介することです。

<script src = "https://cdn.jsdelivr.net/npm/vue/dist/vue.js"> </ script> <!-CDN経由でロード-> <scriptsrc = "./ js / vue .js "> </ script> <!-またはローカルにダウンロード->

2 Vueのアクティブエリアを指定します

フレームと言えば、家を建てるときに棒鋼で造られた建築構造が思い浮かびます。この構造は一定の範囲でしか作用しません。Vueはフレームと同じです。また、作用範囲も指定する必要があります。したがって、次のステップはbodyタグに書き込むことです

<div id = "root"> </ div> <!-フレームを作成する場所を指定します->

私たちの目的はIDルートあるdivVueのアクティブ領域指定することです(フレームは指定された場所に構築する必要があります)。つまり、このdivでは、Vueの機能を使用できますがVueの規制にも準拠している必要がありVueこのdivの外部では制御できません。


(3)Vueインスタンスを作成します

上記のコードの後に​​、スクリプトタグを追加して次のように記述します。

    new Vue({el: '#root' //このコード行はVueを上記のdivにハングアップします。ここではCSSセレクターが使用されていることに注意してください))

Vueの新しいインスタンスが誕生し、Vueも機能しました。しかし、HTML要素とCSSスタイルが記述されていないため、今実行した結果は大きな白い画面になります。


4 HTML要素を追加します

HTML <div id = "root"> {{text}} <!-2つの中括弧{}-> </ div> Jsnew Vue({el: '#root'、data:{text: 'フロントエンドの留学生へようこそ'}})


ページを再度更新すると、ページが表示されます。

これを見て、誰もが基本的にVue.jsを使い始めています


以下のQRコードをスキャンしてください

Webフロントエンドの学習資料ビデオを入手する

備考「公式アカウント」

画像


おすすめ

転載: blog.51cto.com/15065851/2582871