vue.js と WeChat アプレットの違いは何ですか?

vue.js と WeChat アプレットの違い: 1. vue がインスタンス化された後、データが初期化され、データ内のデータは [this.] を通じて取得できます; 2. アプレットでは、その後ページデータが初期化されているので、[this.data]を使用してページのデータを取得し、ページオブジェクトを取得します。

[関連記事の推奨: vue.js]

vue.js と WeChatミニ プログラム間の違い:

#1. WeChat ミニ プログラムには、通常使用するいくつかのページ ビュー効果をパッケージ化した独自のコンポーネント ビュー コンテナーのセットがあります。

例: スワイパー、スクロールビュー、フォーム コンポーネント

Vue プロジェクトでは、サードパーティ コンポーネント ライブラリのスワイパーを導入する必要がある場合があり、フォーム コンポーネントは element-ui とより結合されます。または、 ant-ui または iview を使用してフォーム ページを実装します。

2. 条件付きレンダリングとリスト レンダリング

JS で条件判断に最も一般的に使用されるのは if(){}else{} であることは誰もが知っています。 vue および WeChat アプレット フレームワークでは、このタイプのメソッドをカプセル化し、命令呼び出しを通じて実装します。

vue:

v-if="Math.random() > 0.5"或者v-if=”true”  //当指令的表达式返回 truthy 值的时候内容会被渲染

vue フレームワークに慣れている人、長期間 WeChat アプレットに触れなかった場合の影響:

wx-if=”Math.random() > 0.5”   //报错倒是不会，但是并没有按条件执行

次に、それを実行します。 「何も問題ないですよね？でも、データが出てきません。何度かコードを確認して、全く問題ないと確信しました。その後、バックグラウンドデータをコンソールに行ったところ、キャッシュバックデータがコンソールに表示されました。」そのとき初めて、WeChat アプレットの条件付きレンダリングが正しくない可能性があることに気づきました。その後、WeChat アプレットのドキュメントを確認したところ、WeChat では、変数が

の構文を通じてインターフェイスにバインドされていることがわかりました。

{{ }}. 正しい操作

wx-if=” {{ Math.random() > 0.5 }}” 或者 wx-if=”{{true}}”

vue でリストをレンダリングする場合、

<p v-for=”(index,item) in array” :key=”item.id”></p>；

WeChat アプレットで、コンポーネントの wx:for コントロール属性を使用して、配列をバインドすると、配列内の各項目のデータを使用してコンポーネントを繰り返しレンダリングできます。

デフォルトの配列の現在の項目の添字変数名はデフォルトでindexに設定され、配列の現在の項目の変数名はデフォルトでitemに設定されます;

<view wx:for="{{array}}">
  {{index}}: {{item.message}}
</view>

Use wx:for-item配列の現在の要素の変数名を指定するには、

wx:for-index を使用して、配列の現在の添え字の変数名を指定します:

<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
  {{idx}}: {{itemName.message}}
</view>

3。データ取得

vueをインスタンス化した後、データを初期化し、これによりdata内のデータを取得できます 通常動作:

data(){
  return {
    message:””
  }
},
methods:{
  change:function(){
    this.message = “呵呵哒”
  }
}

アプレット内で、ページデータを初期化した後、ページ データは、ページ オブジェクトを取得するために this.data を通じて取得されます。同じ操作、

data:{
  message:”呵呵”
},
methods:{
  this.data.message = “呵呵哒”;   //视图界面上的值并没有发生改变
}

偶然 this.message が表示されたことは言うまでもありませんが、後でこれが小さなプログラムであることに突然気づき、問題が再び発生しました。 、ビューインターフェイスの値は変更されませんでした。

ドキュメントをもう一度確認してください (WeChat アプレットの公式ドキュメントの説明から):

1. this.data を直接変更することは無効であり、ステータスを変更することはできません。データの不整合の原因にもなります。

2. 一度に設定できるデータは 1024kB を超えることはできませんので、一度に多くのデータを設定しないようにしてください。

3. this.data と this.setData の関係は、this.setData に格納されているのは this.data のコピーであり、インターフェイスはホストされている this.data のコピーからデータを取得するということです。 this.setData。そのため、this.data を変更しても、この時点では this.setData 内のコピーがまだ更新されていないため、インターフェイスは直接更新されません。

つまり、setData 関数はデータを更新してページに表示します。this.data はデータを変更しますが、ビュー ページのコンテンツは変更しません。

したがって、正しく操作してください

methods:{
  this.data.message = “呵呵哒”;
  this.setDate({
     message:this.data.message
});
console.log(this.data.message)
}

関連する無料学習の推奨事項:

JavaScript (ビデオ)

以上がvue.js と WeChat アプレットの違いは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。