ホームページ  >  記事  >  ウェブフロントエンド  >  Vue フレームワークについて 3 分で学ぶ

Vue フレームワークについて 3 分で学ぶ

烟雨青岚
烟雨青岚転載
2020-06-23 12:01:312541ブラウズ

Vue フレームワークについて 3 分で学ぶ

#Vue フレームワークを 3 分で理解する

##1. Vue の基本入門

1.vue はプログレッシブ JavaScript フレームワークです。

#2. 著者: You Yuxi (中国の元 Google エンジニア)

#3. 機能: ユーザー インターフェイスを動的に構築します

#2: Vue の機能

1. MVVM パターンに従います (m->model (データ オブジェクト) v->view (ビュー) vm->view model)

2. コーディングが簡単、サイズが小さく、実行効率が高く、モバイル/PC端末に最適 ##3. UIのみに特化しており、簡単にVueを導入可能プラグインまたはその他のサードパーティ ライブラリ開発プロジェクト

Vue 拡張プラグイン:

vue-cli:Vue Scaffolding

    vue-resource(axios ):ajax request
  • vue-router:routing
  • vuex:state管理
  • vue -lazyload: 画像の遅延読み込み
  • vue-scroller: ページ スライド関連
  • mint-ui: Vue ベースの UI コンポーネント ライブラリ (モバイル端末)
  • element-ui: Vue ベースの UI コンポーネント ライブラリ (PC 側)
  • 3. Vue は「Hello vue」を書き込みます

  • 1.vue.js を導入します

2.vue オブジェクトを作成します3.Two-データ バインディングの方法

4.データの表示

コード表示:

<p id="app">
    //3.双向数据绑定
    <input type="text" v-model="username">
    //4.显示数据
    <p>Hello {{msg}}</p>
</p>
//1.引入vue.js
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
    //2.创建vue对象
    var vm = new Vue({
        el:"#app",
        data:{
            msg:&#39;vue&#39;
        }
    })

読んでいただきありがとうございます。多くのメリットがあることを願っています。

この記事は、https://blog.csdn.net/weixin_44022886/article/details/88868789

推奨チュートリアル: 「

JS チュートリアル

」## から転載されました。 #

以上がVue フレームワークについて 3 分で学ぶの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事はcsdn.netで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。