Vue を使用して特殊効果マスターを模倣したページ デザインを実装するにはどうすればよいですか?

現在のモバイル インターネット時代では、Web サイトやモバイル アプリケーションにとってページ効果のデザインがますます重要になっています。顧客エクスペリエンスと人気を向上させるには、Faux Effects Master などのツールを使用して、高品質の効果を備えたページをデザインする必要があります。ただし、Vue フレームワークを使用して特殊効果マスターのデザインを実装すると、2 つの大きな利点が得られます。まず、Vue フレームワークのコンポーネント プログラミング モデルを使用して、再利用可能なコンポーネント ライブラリを設計し、設計機能を強化できます。次に、Vue フレームワークには強力な一方向データ バインディングと応答性の高いデータ原則があり、DOM 要素をより速く更新し、ユーザー エクスペリエンスを向上させることができます。

以下、Vueを使って特撮マスターを模したページデザインを実装する方法を詳しく紹介します。

1. 準備

始める前に、最新バージョンの Vue.js がインストールされていることを確認してください。公式 Web サイトから Vue.js をダウンロードし、CDN を使用して Vue.js を含めることができます。ここでは Vue.js 2.6.12 を使用します。

ステップ 1: Vue CLI を使用して新しいプロジェクトを作成する

vue create vue-effect-design
cd vue-effect-design

ステップ 2: 必要な依存ライブラリをインストールする

npm install axios vue-router vuex

これで、Vue を使用する準備が整いました。次に、Vue を使用して特撮マスターを模倣したページ デザインを実装する方法をステップごとに紹介します。

2. 基本ページの作成

ページの作成を開始する前に、適切なエディターがインストールされていることを確認してください。 Visual Studio Code または Brackets を使用することをお勧めします。

ステップ 1: App.vue という名前のファイルを作成し、そのファイルに次のコードを追加します。

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

<script>
 export default {
   name: 'App'
 }
</script>

<style>
 #app {
   min-height: 100vh;
   display: flex;
   justify-content: center;
   align-items: center;
   font-size: 2rem;
   background-color: #f7f8fc;
   color: #333;
   font-weight: bold;
   font-family: Arial, Helvetica, sans-serif;
 }
</style>

上記のコードでは、ルーター ビューを使用する Vue コンポーネントを作成すると、Vue はコンポーネントのルーター ビューを読み取り、ルーター ビューに基づいてコンポーネントをレンダリングします。

ステップ 2: Home.vue という名前のファイルを作成し、そのファイルに次のコードを追加します。

<template>
  <div>
    <header/>
    <main>
      <card>
        <img src="/static/imghwm/default1.png"  data-src="imageUrl"  class="lazy"  : :alt="imageAlt">
        <h2 id="title">{{ title }}</h2>
        <p>{{ message }}</p>
      </card>
    </main>
    <footer/>
  </div>
</template>

<script>
 import Header from '@/components/Header.vue'
 import Footer from '@/components/Footer.vue'
 import Card from '@/components/Card.vue'

 export default {
   name: 'Home',
   components: {
     Header,
     Footer,
     Card
   },
   data () {
     return {
       title: 'Hello World',
       message: 'Welcome to Vue.js!',
       imageUrl: 'https://picsum.photos/400/300',
       imageAlt: 'Random image from Picsum'
     }
   }
 }
</script>

上記のコードでは、 3 つのコンポーネント Header、Footer、Card を使用し、img には v-bind を使用します。 タグはデータです。バウンド。これで、開発サーバーを起動し、ページが適切に実行されていることを確認できます:

npm run serve

3. 再利用可能なコンポーネント ライブラリを作成します

次に、再利用可能なコンポーネント ライブラリを作成します。ページをより速く作成できるようになります。

ステップ 1: Header.vue という名前のファイルを作成し、そのファイルに次のコードを追加します。

<template>
  <header>
    <h1 id="siteTitle">{{ siteTitle }}</h1>
  </header>
</template>

<script>
 export default {
   name: 'Header',
   data () {
     return {
       siteTitle: '仿特效大师'
     }
   }
 }
</script>

<style scoped>
 header {
   background-color: #fff;
   margin-bottom: 2rem;
   text-align: center;
   border-bottom: 1px solid #ccc;
 }

 h1 {
   margin: 0;
   font-weight: bold;
   font-size: 2.6rem;
   font-family: Arial, Helvetica, sans-serif;
 }
</style>

上記のコードでは、タイトルとテキスト ラベルを含む Header という名前のコンポーネントを作成しました。

ステップ 2: Footer.vue という名前のファイルを作成し、そのファイルに次のコードを追加します。

<template>
  <footer>
    <slot/>
  </footer>
</template>

<script>
 export default {
   name: 'Footer'
 }
</script>

<style scoped>
 footer {
   background-color: #fff;
   margin-top: 2rem;
   text-align: center;
   border-top: 1px solid #ccc;
   padding: 2rem;
 }
</style>

上記のコードでは、 Footer というコンポーネントを作成し、スロットを使用してコンテンツを配置します。

ステップ 3: Card.vue という名前のファイルを作成し、そのファイルに次のコードを追加します。

<template>
  <div class="card">
    <slot/>
  </div>
</template>

<script>
 export default {
   name: 'Card'
 }
</script>

<style scoped>
 .card {
   background-color: #fff;
   padding: 2rem;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
   border-radius: 6px;
   margin-bottom: 2rem;
 }

 img {
   max-width: 100%;
 }
</style>

上記のコードでは、 Card (カード) という名前のコンポーネントを作成します。これにはスロットが含まれており、CSS スタイルでそれを美しくします。

4. Axios と API の使用

Axios ライブラリを使用して、外部 API からデータを取得します。 Axios は、Web クライアントから HTTP リクエストを行うためのライブラリで、Promise オブジェクトを返すため、外部 API から比較的簡単にデータを取得できます。

ステップ 1: 上記のステップに基づいて、Home コンポーネントの data 属性を置き換えて、外部 API からデータを取得できるようにします。コードは次のとおりです。

<template>
  <div>
    <header/>
    <main>
      <div v-if="isLoading" class="loading"></div>
      <card>
        <img src="/static/imghwm/default1.png"  data-src="imageUrl"  class="lazy"  : :alt="imageAlt">
        <h2 id="title">{{ title }}</h2>
        <p>{{ message }}</p>
      </card>
    </main>
    <footer/>
  </div>
</template>

<script>
 import axios from 'axios'
 import Header from '@/components/Header.vue'
 import Footer from '@/components/Footer.vue'
 import Card from '@/components/Card.vue'

 export default {
   name: 'Home',
   components: {
     Header,
     Footer,
     Card
   },
   data () {
     return {
       title: '',
       message: '',
       imageUrl: '',
       imageAlt: '',
       isLoading: false
     }
   },
   created () {
     this.fetchData()
   },
   methods: {
     fetchData () {
       this.isLoading = true
       axios.get('https://jsonplaceholder.typicode.com/posts/1')
         .then(response => {
           this.isLoading = false
           this.title = response.data.title
           this.message = response.data.body
           this.imageUrl = `https://picsum.photos/400/300?random=${response.data.id}`
           this.imageAlt = response.data.title
         })
         .catch(error => {
           console.log(error)
           this.isLoading = false
         })
     }
   }
 }
</script>

<style scoped>
 header {
   background-color: #fff;
   margin-bottom: 2rem;
   text-align: center;
   border-bottom: 1px solid #ccc;
 }

 h1 {
   margin: 0;
   font-weight: bold;
   font-size: 2.6rem;
   font-family: Arial, Helvetica, sans-serif;
 }

 .loading {
   border: 16px solid #f3f3f3;
   border-top: 16px solid #3498db;
   border-radius: 50%;
   width: 120px;
   height: 120px;
   animation: spin 2s linear infinite;
   margin: 2rem auto 0;
 }

 @keyframes spin {
   0% { transform: rotate(0deg); }
   100% { transform: rotate(360deg); }
 }
</style>

上記のコードでは、次の変更を加えました。

• data## で使用されなかったデフォルトの属性を削除しました。 ＃ 属性。
Vue コンポーネントを使用して外部 API を呼び出してデータを取得するために、
• fetchData という名前の新しいメソッドを作成しました。
API 応答のヘッダー、テキスト、および URL プロパティをデータ プロパティに割り当てます。
• 読み込みプロセスを示す読み込みインジケーターを追加しました。これにより、CSS スタイルを通じて回転効果が生成されます。
• 新しく作成された
• fetchData メソッドは、created ライフサイクル中に呼び出されます。

5. 動的ルーティング

最後に、動的ルーティングに Vue Router を使用する方法を学びます。

ステップ 1: Design.vue という名前のファイルを作成し、そのファイルに次のコードを追加します。

<template>
  <div>
    <header/>
    <main>
      <card v-for="item in designs" :key="item.id">
        <router-link :to="{ name: 'Details', params: { id: item.id }}">
          <img src="/static/imghwm/default1.png"  data-src="item.image"  class="lazy"  : :alt="item.title">
        </router-link>
        <h2 id="item-title">{{ item.title }}</h2>
        <p>{{ item.description }}</p>
      </card>
    </main>
    <footer/>
  </div>
</template>

<script>
 import Header from '@/components/Header.vue'
 import Footer from '@/components/Footer.vue'
 import Card from '@/components/Card.vue'

 export default {
   name: 'Design',
   components: {
     Header,
     Footer,
     Card
   },
   data () {
     return {
       designs: [
         {
           id: 1,
           title: 'Design 1',
           description: 'Description of Design 1',
           image: 'https://picsum.photos/400/300'
         },
         {
           id: 2,
           title: 'Design 2',
           description: 'Description of Design 2',
           image: 'https://picsum.photos/400/300'
         },
         {
           id: 3,
           title: 'Design 3',
           description: 'Description of Design 3',
           image: 'https://picsum.photos/400/300'
         }
       ]
     }
   }
 }
</script>

上記のコードでは、

Design という名前の Vue コンポーネントを作成し、実験に 3 つのサンプル データを使用しました。

ステップ 2: router.js ファイルを更新し、ファイルに次のコードを追加します。

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from './views/Home.vue'
import Design from './views/Design.vue'
import Details from './views/Details.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/designs',
    name: 'Design',
    component: Design
  },
  {
    path: '/details/:id',
    name: 'Details',
    component: Details
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

上記のコードでは、次のコードを更新しました。ルーティング。この動的ルートには、

Design および Details という名前の新しいルートが追加されました。

ステップ 3: Details.vue という名前のファイルを作成し、そのファイルに次のコードを追加します。<pre class='brush:php;toolbar:false;'>&lt;template&gt; &lt;div&gt; &lt;header/&gt; &lt;main&gt; &lt;card&gt; &lt;img src=&quot;/static/imghwm/default1.png&quot; data-src=&quot;selectedDesign.image&quot; class=&quot;lazy&quot; : :alt=&quot;selectedDesign.title&quot;&gt; &lt;h2 id=&quot;selectedDesign-title&quot;&gt;{{ selectedDesign.title }}&lt;/h2&gt; &lt;p&gt;{{ selectedDesign.description }}&lt;/p&gt; &lt;/card&gt; &lt;/main&gt; &lt;footer/&gt; &lt;/div&gt; &lt;/template&gt; &lt;script&gt; import Header from '@/components/Header.vue' import Footer from '@/components/Footer.vue' import Card from '@/components/Card.vue' export default { name: 'Details', components: { Header, Footer, Card }, data () { return { selectedDesign: {} } }, created () { this.fetchData() }, methods: { fetchData () { const id = this.$route.params.id // 从外部API获取数据 } } } &lt;/script&gt;</pre><p>在以上代码中，我们创建了一个名为<code>Details的Vue组件，并使用了数据属性selectedDesign来保存所选设计的详细信息。另外，我们还创建了一个名为fetchData的新方法以与外部API通信的方法获取动态的数据。

第四步： 在fetchData方法的代码中，我们使用了this.$route.params.id来获取具体的路由参数，并这些参数使用外部API获取具体路由的数据。

axios.get(`https://jsonplaceholder.typicode.com/posts/${id}`)
    .then(response => {
        this.selectedDesign = response.data
        this.isLoading = false
    })
    .catch(error => {
        console.log(error)
        this.isLoading = false
    })

以上代码将请求数据，并在响应中将选择的设计属性分配到数据属性中。

这样，我们就可以使用Vue路由动态显示数据到页面中，并完成了仿特效大师的页面设计。

总结：

在本文中，我们研究了如何使用Vue.js实现仿特效大师的页面设计。我们首先介绍了Vue组件，组件化编程模式以及Vue强大的单向数据绑定和响应式数据原理的基本概念。接下来我们创建了一个简单的基本页面，然后创建了一个可重用的组件库，以帮助我们更快地编写页面。我们学习了如何使用Axios与外部API进行通信，最后使用Vue Router动态路由显示数据从而完成了页面的设计。希望这篇文章对您有所帮助，谢谢！

以上がVue を使用して特殊効果マスターを模倣したページ デザインを実装するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。