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 までご連絡ください。

フレームワークの選択：Netflixの決定を推進するものは何ですか？Apr 13, 2025 am 12:05 AM

Netflixは、主に、パフォーマンス、スケーラビリティ、開発効率、エコシステム、技術的な負債、およびフレームワーク選択におけるメンテナンスコストを考慮しています。 1。パフォーマンスとスケーラビリティ：JavaとSpringbootが選択され、大規模なデータと高い同時リクエストを効率的に処理します。 2。開発効率とエコシステム：Reactを使用して、フロントエンド開発効率を向上させ、その豊富なエコシステムを利用します。 3.技術的な負債とメンテナンスコスト：node.jsを選択してマイクロサービスを構築して、メンテナンスコストと技術的債務を削減します。

Netflixのフロントエンドの反応、Vue、および未来Apr 12, 2025 am 12:12 AM

Netflixは、主にReactをフロントエンドフレームワークとして使用し、特定の機能のためにVUEによって補足されます。 1）Reactのコンポーネント化と仮想DOMは、Netflixアプリケーションのパフォーマンスと開発効率を向上させます。 2）VueはNetflixの内部ツールと小規模プロジェクトで使用されており、その柔軟性と使いやすさが重要です。

フロントエンドのvue.js：実際のアプリケーションと例Apr 11, 2025 am 12:12 AM

Vue.jsは、複雑なユーザーインターフェイスを構築するのに適した進歩的なJavaScriptフレームワークです。 1）そのコア概念には、レスポンシブデータ、コンポーネント、仮想DOMが含まれます。 2）実際のアプリケーションでは、TODOアプリケーションを構築し、Vuerouterを統合することで実証できます。 3）デバッグするときは、vuedevtools and Console.logを使用することをお勧めします。 4）パフォーマンスの最適化は、V-IF/V-Show、リストレンダリング最適化、コンポーネントの非同期負荷などを通じて達成できます。

Vue.jsとReact：重要な違いを理解するApr 10, 2025 am 09:26 AM

Vue.JSは中小企業から中規模のプロジェクトに適していますが、Reactは大規模で複雑なアプリケーションにより適しています。 1。VUE.JSのレスポンシブシステムは、依存関係追跡を介してDOMを自動的に更新し、データの変更を簡単に管理できるようにします。 2.反応は一方向のデータフローを採用し、データは親コンポーネントから子コンポーネントに流れ、明確なデータフローと簡単な抽出構造を提供します。

Vue.js vs. React：プロジェクト固有の考慮事項Apr 09, 2025 am 12:01 AM

VUE.JSは、中小規模のプロジェクトや迅速な反復に適していますが、Reactは大規模で複雑なアプリケーションに適しています。 1）Vue.jsは使いやすく、チームが不十分な状況やプロジェクトスケールが小さい状況に適しています。 2）Reactにはより豊富なエコシステムがあり、高性能で複雑な機能的ニーズを持つプロジェクトに適しています。

Vueにタグをジャンプする方法Apr 08, 2025 am 09:24 AM

VUEでタグのジャンプを実装する方法には、HTMLテンプレートでAタグを使用してHREF属性を指定する方法が含まれます。 VUEルーティングのルーターリンクコンポーネントを使用します。 JavaScriptでこれを使用します。$ router.push（）メソッド。パラメーターはクエリパラメーターに渡すことができ、ルートは動的ジャンプのルーターオプションで構成されています。

VUEのコンポーネントジャンプを実装する方法Apr 08, 2025 am 09:21 AM

VUEでコンポーネントジャンプを実装するための次の方法があります。Router-Linkと＆lt; router-view＆gt;を使用してください。ハイパーリンクジャンプを実行し、ターゲットパスとして属性を指定するコンポーネント。＆lt; router-view＆gt;を使用してください現在ルーティングされているレンダリングされているコンポーネントを表示するコンポーネント。プログラマティックナビゲーションには、router.push（）およびrouter.replace（）メソッドを使用します。前者は歴史を保存し、後者は記録を残さずに現在のルートに取って代わります。