ホームページ > 記事 > ウェブフロントエンド > apicloud は vue を使用できますか?
apicloud は vue を使用できますか?
- 藏色散人オリジナル
- 2021-02-02 09:36:482659ブラウズ
apicloud は vue を使用できます。使用方法: 最初に vue.min.js を apicloud ページに導入し、次にテンプレートのレンダリングに vue.js を使用する必要がある ID をマークし、最後に、vue.js を使用する必要がある ID をマークします。 apiready メソッド。id の要素は 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: '#vue', // 与标记的id相同
data: function() {
return {
message: 'Hello world!'
};
},
});
};
</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: '#vue',
data: function() {
return {
message: 'Hello world!'
};
},
});
};
</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: '#vue',
data: function() {
return {
message: 'Hello world!'
};
},
methods: {
getData: function(name) {
setTimeout(function() {
vm.message = vm.message + name + '吃了吗？';
}, 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('Tim')">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('xxx'); // 模块的引用
vm = new Vue({
el: '#vue',
data: function() {
return {
message: 'Hello world!'
};
},
mounted: function() {
this.greet();
module.xxx(); // 模块的使用
},
methods: {
greet: function() {
this.message = '你好！';
},
getData: function(name) {
setTimeout(function() {
vm.message = vm.message + name + '吃了吗？';
}, 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 = 'BAR';
if (xxx) {
a = 1;
} else {
a = 2;
}
console.log(`${b} ${a}`);ネイティブ JavaScript の記述方法 (√):
var a = undefined;
var b = 'BAR';
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: '#vue',
data: function() {
return {
message: 'Hello world!'
};
},
methods: {
getData: function(name) {
setTimeout(function() {
vm.message = vm.message + name + '吃了吗？';
}, 3000);
}
}
});
};
</script>
</html>
通过js文件将组件内容从html页面中分离，达到复用的效果。使用时，相当于给已有的Vue加上了一个全局组件。
由于原生js的字符串拼接较为麻烦，是否这样用取决于使用者自身。
本示例中使用到的css样式来自tailwindcss
searchBar.js：
/**
* searchBar.js
* @overview 搜索框组件
*/
if (Vue) {
Vue.component('search-bar', {
props: {
value: String,
placeholder: {
type: String,
default: '搜索'
}
},
data: function() {
return {
model: undefined,
disabled: false,
};
},
mounted: function() {
this.model = this.value;
},
methods: {
handleInput: function(e) {
this.model = e.target.value;
this.$emit('change', this.model);
},
handleClear: function() {
this.model = undefined;
this.$emit('change', this.model);
this.$emit('search', this.model);
},
handleSearch: function() {
this.$emit('search', this.model);
}
},
template:
'<div class="flex justify-between">' +
'<div class="flex flex-auto items-center bg-grey-light rounded py-2 px-4">' +
'<div class="flex-auto"><input @input="handleInput" :disabled="disabled" v-model="model" type="text" style="width: 100%;" :placeholder="placeholder" /></div>' +
'<i v-if="model && !disabled" @click="handleClear" class="iconfont icon-roundclosefill text-base text-grey pl-2"></i>' +
'</div>' +
'<div v-if="model && !disabled" class="flex items-center justify-center text-blue active:text-orange pl-4" @click="handleSearch">查询</div>' +
'</div>'
})
}以上がapicloud は vue を使用できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。