コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > htmlチュートリアル > 本文

Vue_html/css_WEB-ITnose に基づくシンプルなシングルページ アプリケーションの実装

WBOY
リリース： 2016-06-24 11:16:06
オリジナル
3719 人が閲覧しました

Vue に基づくシンプルな単一ページ アプリケーション

Vue と webpack をある程度理解したら、理解できない学生でも、知っていることを使って簡単な Web アプリを作成できます。最初の 2 つの記事は、vue と webpack の基本的なアプリケーションについてです:

webpack+vue の開始

webpack と vue を使用してコンポーネント化を実現する

プロジェクトを構築する

まず、各コンポーネントを作成します。 

//没有后缀名的都是文件夹|-wechat    |-dist    |-src    |  |-components         //存放vue组件    |  |    |-tab           //存放home.vue中的tab，动态切换的模板    |  |    |    |-tab_1.vue    |  |    |    |-tab_2.vue    |  |    |-home.vue      //app的首页    |  |    |-list.vue      //点击home中的链接跳转到    |  |    |-detail.vue    //点击list中的链接跳转到    |  |-app.vue            //主要的vue文件(用于将各个组件的挂载)    |  |-main.js            //主要的js(用于配置路由)        |-static                //存放静态资源    |-index.html
ログイン後にコピー

ルーティングを設定する

まずプロジェクトに vue-router をインストールします 

npm install vue-router
ログイン後にコピー

さまざまなコンポーネントを導入し、ルーティングを設定します: 

//main.jsimport Vue from 'vue';import VueRouter from 'vue-router';//引入组件import App from './app.vue';import home from './components/home.vue';import list from './components/list.vue';import detail from './components/detail.vue';Vue.use(VueRouter);var app=Vue.extend(App);var router=new VueRouter();//配置路由router.map({  '/home': {    component: home  },  '/list': {    component: list      },  '/detail': {    component: detail  }});//设置默认情况下打开的页面router.redirect({  '/':'home'});router.start(app,'#app');//暴露路由接口调试window.router = router;
ログイン後にコピー

vue-router の導入については、公式ドキュメントの紹介が非常に明確です。アドレス: http:/ /router.vuejs.org/zh -cn/index.html。

ルートを設定した後、一致したコンポーネントをページに正しくレンダリングする必要があります。このとき、 が使用されます。通常の動的コンポーネントの多くの特性を継承します。ここでは 2 つを使用します:

  • v-transition とtransition-mode の完全サポート スイッチング効果が適切に機能するためには、ルーティング コンポーネントがフラグメント インスタンスであってはなりません。

  • ルーティング 0.7.2+ でキープアライブをサポート (キープアライブについて)

それで、app.vue に次のように記述します: 

<template>    <div class="main">        <router-view          keep-alive          transition="fade"          transition-mode='out-in'></router-view>    </div></template>
ログイン後にコピー

コマンドラインを開いて webpack-dev-server を起動します: 

$ webpack-dev-server --inline --hot
ログイン後にコピー

At今回、表示されるページは home.vue です

home.vue にタブ切り替えを実装します

タブ切り替えは非常に頻繁に発生する一般的なエフェクトです。 では、vuejs Woolen clothes でタブ切り替えエフェクトを記述するにはどうすればよいでしょうか。

現在クリックされているタブの番号を使用して、対応する動的コンポーネントを動的に切り替えることは、vuejs が切り替えを実装する方法です。動的コンポーネントの紹介は次のとおりです: https://vuejs.org.cn/guide/components.html#Dynamic Components。したがって、実装コードは次のとおりです: 

<template><div class="home">    <div class="bd" style="height: 100%;">        <div class="weui_tab">            <ul class="weui_navbar">                <li class="weui_navbar_item"                    v-for="tab in tabs"                    :class="{'weui_bar_item_on':$index===selected}"                    @click="choose($index)">{{tab.tabName}}</li>            </ul>            <div class="weui_tab_bd">                <component :is="currentView" transition="fade" transition-mode="out-in"></component>            </div>        </div>    </div>      </div></template><script>import  tab_1 from './tab/tab_1.vue';import  tab_2 from './tab/tab_2.vue';export default{    data(){        return{            tabs:[                {tabName:'Vuejs'},                {tabName:'VueTab'}            ],            selected:0,            currentView:'view_0'        }    },    components:{        'view_0':tab_1,        'view_1':tab_2    },    methods:{        choose(index) {            this.selected=index;            this.currentView='view_'+index;        }    }}</script>
ログイン後にコピー

2 つの動的コンポーネントは tab_1.vue と tab_2.vue です。これら 2 つのモジュールを導入し、コンポーネントの操作を外部のエクスポート デフォルトにエクスポートし、動的コンポーネントをテンプレートにロードし、予約された 要素を使用して、その is 属性を動的にバインドします。これにより、関数が調整されます。異なる値に従ってコンポーネントを動的に切り替えるには、クリックする必要があるタブ ナビゲーションで、v-for で 2 つのナビゲーションをループアウトし、クラスを動的にバインドし、現在クリックされているタブ ナビゲーションに従ってクラス名を動的に切り替える必要があります。 $index: class="{'weui_bar_item_on' :$index===selected}" をクリックし、クリックされたときにイベント @click="choose($index)" が実行されるように、クリック イベントを li にバインドします。

デフォルトでは最初のコンポーネントが表示され、最初のタブがグレーアウトされているのでdataにデフォルト値を設定します。トランジションを切り替えるには、transition="fade"transition-mode="out-in" を追加し、CSS でアニメーションの実行プロセスを設定します。 

/*切换动画*/.fade-transition {    transition: opacity 0.3s ease;}.fade-enter,.fade-leave {    opacity: 0;}
ログイン後にコピー

ルーティング リンクを実装するには v-link を使用します

コンポーネント内で、ルーティング、ルーティング リンクを a に書き込むときは、href の代わりに v-link を使用します。 v-link ディレクティブを含む要素では、v-link に対応する URL が現在のパスと一致する場合、特定のクラスが要素に追加されます。デフォルトは .v-link-active です。このデフォルト値は次のように作成できます。ルーティング時に linkActiveClass グローバル オプションを指定してカスタマイズすることも、activeClass インライン オプションを使用して個別に指定することもできます。コードは次のとおりです: 

<a v-link="{path:'/a',activeClass:'active'}">test</a>
ログイン後にコピー

この時点でコンソールに警告が表示されます

[Vue Warn]: src="{{item.image}}": "src" 属性の補間により 404 が発生します代わりに v-bind: src を使用してください。これは、src 属性を補間すると 404 リクエストが発生することを意味します。代わりに v-binding:src を使用してください。

したがって、これを次のように置き換えます: 

<div class="bio-slide" v-for="item in items">       <img src="{{item.image}}"></div>
ログイン後にコピー

ここが重要な点です。公式の声明によると、 

<div class="bio-slide" v-for="item in items">       <img v-bind:src="item.image"></div>
ログイン後にコピー

ここでの href は a です。 v- バインド ディレクティブは、要素の href 属性を式 URL の値にバインドします。属性補間 href="{{url}}" を使用しても同じ結果が得られることにお気付きかもしれません。これは正しく、内部的に属性補間は実際に v-bind バインディングに変換されます。

2. v-model の使用

v-model は、、