apicloud は vue を使用できますか?-Vue.js-php.cn

ホームページ

ウェブフロントエンド

Vue.js

apicloud は vue を使用できますか?

藏色散人

Feb 02, 2021 am 09:36 AM

vue

apicloud は vue を使用できます。使用方法: 最初に vue.min.js を apicloud ページに導入し、次にテンプレートのレンダリングに vue.js を使用する必要がある ID をマークし、最後に、vue.js を使用する必要がある ID をマークします。 apiready メソッド。id の要素は vue インスタンスを初期化できます。

apicloud は vue を使用できますか?

この記事の動作環境: Windows7 システム、vue2.0 バージョン、Dell G3 コンピューター。

Vue は apicloud で使用できます。

APICloud で効率的に開発するために Vue.js を使用するにはどうすればよいですか?

APICloud では、開発にネイティブ JS を使用することを公式に推奨していますが、複雑なビジネスロジックの下では、ネイティブ JS の開発効率が MVVM フレームワークほど高くない場合が多いため、Vue.js を使用することで開発効率を効果的に向上させることができます。

ハイブリッドでのネイティブ API のアプリケーションのパフォーマンスやユーザーエクスペリエンスにできるだけ影響を与えないことを前提として、Vue.js の SPA 開発モードの使用は推奨されません。 vue-router、vuex、axois、およびその他のモジュールのシングルページアプリケーションをコンパイルして使用するために vue-cli を使用することはお勧めできません。

スクリプトを直接使用して vue.js を導入すると、vue と apicloud プロジェクトの間の結合を最小限に抑えることができ、既存のネイティブ API やネイティブモジュールと競合することはありません。

1. 基本的な使い方

まず apicloud ページに vue.min.js を導入します (2019 年 10 月 12 日の記事で引用した最新バージョンは v2.6.10)。

次に、テンプレートのレンダリングに vue.js を使用する必要がある ID をマークします。便宜上、通常は本文の下の最も外側の要素にマークされます。もちろん、Vue レンダリングはローカル要素に対して実行することもでき、ネイティブメソッドと競合しません。

最後に、apicloud の初期化が完了した後、つまり apiready メソッドで、id でマークされた要素に従って vue インスタンスが初期化されます。

サンプルコード:

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width" />
  <meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
</head>
<body>
  <div id="vue">
    {{ message }}
  </div>
</body>
<script type="text/javascript" src="./script/vue.min.js"></script>
<script type="text/javascript">
  apiready = function () {
    new Vue({
      el: &#39;#vue&#39;, // 与标记的id相同
      data: function() {
        return {
          message: &#39;Hello world!&#39;
        };
      },
    });
  };
</script>
</html>

ログイン後にコピー

2. ページのちらつきの処理

一般に、レンダリングに vue が必要な新しいページを開くと、レンダリング処理中に、テンプレートとテンプレートのレンダリング結果を切り替えるときに、コードがちらつきます。これは、Vue が新しいページを開いた後でレンダリングを開始するためです。デフォルトでは、レンダリング前にレンダリングテンプレートのコンテンツが表示され、レンダリングが成功した後に結果が表示されます。

ここでは、処理のために vue テンプレート要素に v-cloak をマークできます。

推奨: "vue チュートリアル"

注: ここでは、v-cloak のスタイルをスタイル内で非表示として宣言する必要があります。これにより、v- が前にマークされます。レンダリングが完了すると、マント要素は表示されません。

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width" />
  <meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
  <style>
    [v-cloak] {
  display: none;
}
  </style>
</head>
<body>
  <div id="vue" v-cloak>
    {{ message }}
  </div>
</body>
<script type="text/javascript" src="./script/vue.min.js"></script>
<script type="text/javascript">
  apiready = function () {
    new Vue({
      el: &#39;#vue&#39;,
      data: function() {
        return {
          message: &#39;Hello world!&#39;
        };
      },
    });
  };
</script>
</html>

ログイン後にコピー

3. 非 vue レンダリング要素には vue インスタンスコンテンツを使用します

テンプレートレンダリングに vue を使用すると、レンダリング時間がかかります。レンダリングパフォーマンスと表示効果に厳しい要件がある一部のページでは、メインのコンテンツ領域はネイティブ HTML によって実装され、複雑な論理操作は Vue によってレンダリングされます。 vue インスタンスの一部のプロパティまたはメソッドは、vue レンダリング領域の外側で必要になる場合があります。この場合、vue インスタンスは、vue の初期化時に現在のページのグローバル変数に割り当てることができます。

この記事では vue インスタンス名として vm を使用していますが、もちろん他の名前に変更することもできます。 vm を apiready の外側に配置すると、初期化が完了する前に関連するメソッドが直接呼び出されたときにエラーが報告されなくなります。 vm を vue インスタンスとしてグローバルに使用すると、vue 内の一部のコールバックメソッドでコンテキストを再定義するための var that = this; の必要性を回避できます。

次の状況で vue グローバルインスタンス vm を使用できます。

vue レンダリング領域の外で vue インスタンスコンテンツを呼び出す必要がある場合

次のようなネイティブメソッドを使用する場合onclick

コールバックメソッドでvueインスタンスの内容を呼び出す必要がある場合

例:

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width" />
  <meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
  <style>
    [v-cloak] {
  display: none;
}
  </style>
</head>
<body>
  <div id="vue" v-cloak>
    {{ message }}
    <button onclick="vm.getData();" tapmode>Button One</button>
  </div>
</body>
<script type="text/javascript" src="./script/vue.min.js"></script>
<script type="text/javascript">
  var vm;
  
  apiready = function () {
    vm = new Vue({
      el: &#39;#vue&#39;,
      data: function() {
        return {
          message: &#39;Hello world!&#39;
        };
      },
      methods: {
        getData: function(name) {
          setTimeout(function() {
            vm.message = vm.message + name + &#39;吃了吗？&#39;;
          }, 3000);
        }
      }
    });
  };
</script>
</html>

ログイン後にコピー

4.モジュールリファレンス

ではありません。 apicloud のモジュールを vue インスタンスに配置することを推奨しますが、apiready 内で vue インスタンスの外に配置する必要があります。

例:

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width" />
  <meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
  <style>
    [v-cloak] {
  display: none;
}
  </style>
</head>
<body>
  <div id="vue" v-cloak>
    {{ message }}
    <button onclick="vm.getData();" tapmode>Button One</button>
    <div @click="getData">Button Two</div>
    <div @click="getData(&#39;Tim&#39;)">Button Three</div>
  </div>
</body>
<script type="text/javascript" src="./script/api.js"></script>
<script type="text/javascript" src="./script/vue.min.js"></script>
<script type="text/javascript">
  var vm;
  
  apiready = function () {
  
    var module = api.require(&#39;xxx&#39;); // 模块的引用
    
    vm = new Vue({
      el: &#39;#vue&#39;,
      data: function() {
        return {
          message: &#39;Hello world!&#39;
        };
      },
      mounted: function() {
      this.greet();
      module.xxx(); // 模块的使用
      },
      methods: {
        greet: function() {
          this.message = &#39;你好！&#39;;
        },
        getData: function(name) {
          setTimeout(function() {
            vm.message = vm.message + name + &#39;吃了吗？&#39;;
          }, 3000);
        }
      }
    });
    
  };
</script>
</html>

ログイン後にコピー

5。コードスタイル

There現在、多くの携帯電話メーカーが利用しており、メーカーバージョンのカスタマイズは大幅に細分化されています。メーカーごとに ECMA Script6 構文のサポートレベルが異なるため、ネイティブ JavaScript を使用すると、Android バージョンが低い携帯電話でも正常に実行できるようになります。一部の端末では、Android のバージョンが低いと es6 を適切に解析できないという問題も発生しています。 API Cloud は、ポリフィルの使用を公式に推奨していないため、ポリフィルなどのツールは使用しないようにしてください。代わりに、公式に推奨されているネイティブ JS 記述方法を選択してください。これにより、アプリケーションのパフォーマンスが確保され、API Cloud フレームワークがアップグレードされたときにも確実に将来的には、ローカルコードのロジックが壊れることはありません。変更が多すぎます。

関数の書き方

関数を書くときはes6の書き込みやアロー関数を使わないように注意してください

ES6の書き込み(×):

foo(value) {
  console.log(value);
}
const fun = (value) => {
  alert(value);
}

ログイン後にコピー

Native JavaScript の記述方法 (√):

function foo(value) {
  console.log(value);
}
var fun = function(value) {
  alert(value);
}

ログイン後にコピー

変数と文字列

ネイティブ Java Script キーワードを使用し、es6 キーワードを使用しないように注意してください。文字列を連結するときは、ネイティブ JavaScript プラス記号接続も使用する必要があります。

ES6 の記述方法 (×):

let a;
const b = &#39;BAR&#39;;
if (xxx) {
  a = 1;
} else {
  a = 2;
}
console.log(`${b} ${a}`);

ログイン後にコピー

ネイティブ JavaScript の記述方法 (√):

var a = undefined;
var b = &#39;BAR&#39;;
if (xxx) {
  a = 1;
} else {
  a = 2;
}
console.log(a + b);

ログイン後にコピー

6. コンポーネントベースのアプリケーション

よく使われる vue .js apicloud 開発者は、ビジネスロジックのコンポーネント化、コードの再利用、生産効率の向上という目的を達成するために、vue-cli コンパイルを使用せずにコンポーネント開発を実行することもできることを見落としがちです。

注: ネイティブ js を使用して apicloud で vue コンポーネントを開発する場合は、v-model を使用してコンポーネントの値を双方向バインドしないでください。同様に、大量のデータを含む他の表示リストでの v-model の双方向バインディングは避けてください。そうしないと、vue のレンダリング効率に影響し、アプリが停止する原因になります。＃＃＃＃＃＃例：＃＃＃

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width" />
  <meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
  <style>
    [v-cloak] {
  display: none;
}
  </style>
</head>
<body>
  <div id="vue" v-cloak>
    {{ message }}
    <search-bar ref="searchBar" @search="getData" placeholder="请输入关键词"></search-bar>
  </div>
</body>
<script type="text/javascript" src="./script/vue.min.js"></script>
<!-- 引入自定义组件的js文件 -->
<script type="text/javascript" src="./components/searchBar.js"></script>
<script type="text/javascript">
  var vm;
  
  apiready = function () {
    vm = new Vue({
      el: &#39;#vue&#39;,
      data: function() {
        return {
          message: &#39;Hello world!&#39;
        };
      },
      methods: {
        getData: function(name) {
          setTimeout(function() {
            vm.message = vm.message + name + &#39;吃了吗？&#39;;
          }, 3000);
        }
      }
    });
  };
</script>
</html>

ログイン後にコピー

通过js文件将组件内容从html页面中分离，达到复用的效果。使用时，相当于给已有的Vue加上了一个全局组件。

由于原生js的字符串拼接较为麻烦，是否这样用取决于使用者自身。

本示例中使用到的css样式来自tailwindcss

searchBar.js：
/**
 * searchBar.js
 * @overview 搜索框组件
 */
if (Vue) {
  Vue.component(&#39;search-bar&#39;, {
    props: {
      value: String,
      placeholder: {
        type: String,
        default: &#39;搜索&#39;
      }
    },
    data: function() {
      return {
        model: undefined,
        disabled: false,
      };
    },
    mounted: function() {
      this.model = this.value;
    },
    methods: {
      handleInput: function(e) {
        this.model = e.target.value;
        this.$emit(&#39;change&#39;, this.model);
      },
      handleClear: function() {
        this.model = undefined;
        this.$emit(&#39;change&#39;, this.model);
        this.$emit(&#39;search&#39;, this.model);
      },
      handleSearch: function() {
        this.$emit(&#39;search&#39;, this.model);
      }
    },
    template:
      &#39;<div class="flex justify-between">&#39; +
        &#39;<div class="flex flex-auto items-center bg-grey-light rounded py-2 px-4">&#39; +
          &#39;<div class="flex-auto"><input @input="handleInput" :disabled="disabled" v-model="model" type="text" style="width: 100%;" :placeholder="placeholder" /></div>&#39; +
          &#39;<i v-if="model && !disabled" @click="handleClear" class="iconfont icon-roundclosefill text-base text-grey pl-2"></i>&#39; +
        &#39;</div>&#39; +
        &#39;<div v-if="model && !disabled" class="flex items-center justify-center text-blue active:text-orange pl-4" @click="handleSearch">查询</div>&#39; +
      &#39;</div>&#39;
  })
}

ログイン後にコピー

以上がapicloud は vue を使用できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

ホットトピック

Gmailメールのログイン入り口はどこですか？

7504

CakePHP チュートリアル

1378

Steamのアカウント名の形式は何ですか

Win11 Activation Key Permanent

NYTの接続はヒントと回答です

Related knowledge

VUEのボタンに関数を追加する方法 Apr 08, 2025 am 08:51 AM

HTMLテンプレートのボタンをメソッドにバインドすることにより、VUEボタンに関数を追加できます。 VUEインスタンスでメソッドを定義し、関数ロジックを書き込みます。

vue.jsでJSファイルを参照する方法 Apr 07, 2025 pm 11:27 PM

vue.jsでJSファイルを参照するには3つの方法があります。タグ;; mounted（）ライフサイクルフックを使用した動的インポート。 Vuex State Management Libraryを介してインポートします。

VueでBootstrapの使用方法 Apr 07, 2025 pm 11:33 PM

vue.jsでBootstrapを使用すると、5つのステップに分かれています。ブートストラップをインストールします。 main.jsにブートストラップをインポートしますブートストラップコンポーネントをテンプレートで直接使用します。オプション：カスタムスタイル。オプション：プラグインを使用します。

VueでWatchの使用方法 Apr 07, 2025 pm 11:36 PM

Vue.jsの監視オプションにより、開発者は特定のデータの変更をリッスンできます。データが変更されたら、Watchはコールバック関数をトリガーして更新ビューまたはその他のタスクを実行します。その構成オプションには、すぐにコールバックを実行するかどうかを指定する即時と、オブジェクトまたは配列の変更を再帰的に聴くかどうかを指定するDEEPが含まれます。

Vueによる前のページに戻る方法 Apr 07, 2025 pm 11:30 PM

vue.jsには、前のページに戻る4つの方法があります。$ router.go（-1）$ router.back（）outes＆lt; router-link to =＆quot;/＆quot; Component Window.history.back（）、およびメソッド選択はシーンに依存します。

Vueはマーキー/テキストスクロール効果を実現します Apr 07, 2025 pm 10:51 PM

CSSアニメーションまたはサードパーティライブラリを使用して、VUEでマーキー/テキストスクロール効果を実装します。この記事では、CSSアニメーションの使用方法を紹介します。スクロールテキストを作成し、テキストを＆lt; div＆gt;をラップします。 CSSアニメーションを定義し、オーバーフローを設定します：非表示、幅、アニメーション。キーフレームを定義し、アニメーションの開始と終了時にtranslatex（）を設定します。期間、スクロール速度、方向などのアニメーションプロパティを調整します。

Vueのバージョンを照会する方法 Apr 07, 2025 pm 11:24 PM

Vue Devtoolsを使用してブラウザのコンソールでVueタブを表示することにより、Vueバージョンを照会できます。 NPMを使用して、「NPM List -G Vue」コマンドを実行します。 package.jsonファイルの「依存関係」オブジェクトでVueアイテムを見つけます。 Vue CLIプロジェクトの場合、「Vue -Version」コマンドを実行します。＆lt; script＆gt;でバージョン情報を確認してくださいVueファイルを参照するHTMLファイルにタグを付けます。

VUEトラバーサルの使用方法 Apr 07, 2025 pm 11:48 PM

Vue.jsには配列とオブジェクトを通過するには3つの一般的な方法があります。V-Forディレクティブは、各要素をトラバースしてテンプレートをレンダリングするために使用されます。 V-BindディレクティブをV-Forで使用して、各要素の属性値を動的に設定できます。 .mapメソッドは、配列要素を新しい配列に変換できます。

See all articles

apicloud は vue を使用できますか?

ホットAIツール

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

人気の記事

ホットツール

メモ帳++7.3.1

SublimeText3 中国語版

ゼンドスタジオ 13.0.1

ドリームウィーバー CS6

SublimeText3 Mac版

ホットトピック