コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > フロントエンドQ&A > 本文

vuejs1.0と2.0の違いは何ですか

青灯夜游
リリース： 2021-09-22 19:16:02
オリジナル
2721 人が閲覧しました

違い: 1. VUE2.0 では、すべてのコードをルート要素でラップする必要がありますが、VUE1.0 ではそうではありません。 2. コンポーネントはさまざまな方法で定義されます。 3. ライフサイクル機能が異なります。 4. Vue2.0 では、vue1.0 の組み込みフィルタがすべて削除されました。vue2.0 でフィルタを使用するにはカスタマイズする必要がありますが、vue1.0 ではカスタマイズが必要ありません。

vuejs1.0と2.0の違いは何ですか

このチュートリアルの動作環境: Windows7 システム、vue2.9.6 バージョン、DELL G3 コンピューター。

1. 各コンポーネント テンプレートで、

VUE1.0 をサポートしなくなったフラグメント コードは次のとおりです: 

<template>
  <h3>我是组件</h3><strong>我是加粗标签</strong>
</template>
ログイン後にコピー

VUE2.0: すべてのコードをラップするルート要素が必要です

<template id="aaa">
  <div>
    <h3>我是组件</h3>
      <strong>我是加粗标签</strong>
   </div>
</template>
ログイン後にコピー

2. コンポーネントを定義するさまざまな方法

VUE1 の方法.0 はコンポーネントを定義します:

Vue.extend このメソッドは 2.0 で利用できますが、いくつかの変更があります

Vue.component(组件名称,{  在2.0继续能用
  data(){}
  methods:{}
  template:
});
ログイン後にコピー

VUE2.0 でコンポーネントを定義する方法はより簡単です

var Home={
    template:&#39;&#39;    ->  相当于Vue.extend()
};
ログイン後にコピー

3. ライフ サイクルの変更

##1. 1.0 のライフ サイクル:

##Cycle##initコンポーネントは作成されたばかりですが、データ、メソッド、その他の属性はまだ計算されていませんcreatedコンポーネントの作成は完了しましたが、DOM はまだ生成されていませんbeforeCompileテンプレートのコンパイル前compiledテンプレートのコンパイル後readyコンポーネントの準備 (通常はさらに使用されます) )attachedvm.$el が DOM に挿入されるときに呼び出されますdetached vm.$el 内 DOM から削除されるときに呼び出されますbeforeDestoryコンポーネントが破棄される前にコンポーネントが破棄された後 次の図は、1.0 ライフ サイクルに関する公式のフローチャートです:
説明
#destoryed


# #2. 2.0 のライフサイクル

vuejs1.0と2.0の違いは何ですか

サイクル

説明beforeCreateコンポーネントは作成されたばかりですが、データ、メソッド、およびその他の属性はまだ計算されていません#mountedテンプレートのコンパイル後、コンポーネントの準備コンポーネントの更新前 (データなどが変更された場合) コンポーネント更新後(データ等変更時) for keep -alive、コンポーネントがアクティブ化されたときに呼び出されます##deactivatedキープアライブの場合、コンポーネントが削除されたときに呼び出されます
##createdコンポーネントの作成は完了しましたが、DOM はまだ計算されていません
##更新前
updated
activated
#beforeDestoryコンポーネントが破棄される前
破棄コンポーネントが破棄された後

下图是官方关于2.0生命周期的流程图：
vuejs1.0と2.0の違いは何ですか

借用一位大神的图来总结他们的变化：
vuejs1.0と2.0の違いは何ですか

2.0生命生命周期变化感觉变得更加语义化一点（有规律可寻，更好记了），而且增加了beforeUpdate、updated、activated、deactivated，删除了attached、detached。

四、过滤器

2.0将1.0所有自带的过滤器都删除了，也就是说，在2.0中，要使用过滤器，则需要我们自己编写，以下是一个自定义过滤器示例,

Vue.filter(&#39;toDou&#39;,function(n,a,b){
    return n<10?n+a+b:&#39;&#39;+n;
});
ログイン後にコピー

如果想展示JSON数据，不需要调用过滤器了，框架会自动帮我们解析出来；
2.0过滤器的传参方式不是以前的方式，是以函数传参的方式，下面示例：

之前调用:       {{msg | mimi &#39;12&#39; &#39;5&#39;}}
现在调用:   {{msg | mimi(&#39;12&#39;,&#39;5&#39;)}}
ログイン後にコピー

五、循环

刚学vue1.0的人可能会碰到一个错误信息：

vuejs1.0と2.0の違いは何ですか

这里提示我们要使用tranck-by=”$index”，这个属性也可以帮我们提高for循环的性能，而在2.0，使用重复数据将不会报错，同时也去掉了一些隐式变量如：index、key，那我们如果要用到这些数据则可以通过ES6的语法来获取

v-for="(val,index) in array"
ログイン後にコピー

关于整数循环，1.0的整数循环是从0开始的，2.0的整数循环是从1开始的，下面对比：

//HTML代码
<ul id=&#39;box&#39;>
    <li v-for=&#39;val in 5&#39; v-text=&#39;val&#39;></li>
</ul>
ログイン後にコピー

运行结果：
vuejs1.0と2.0の違いは何ですか

vuejs1.0と2.0の違いは何ですか

四、片段代码

编写template的时候，2.0必须要用一个根元素（如p）将代码片段包裹起来，否则报错。

之前:   在1.0使用时完全没问题
    <template>
        <h3>我是组件</h3><strong>我是加粗标签</strong>
    </template>
现在:  必须有根元素，包裹住所有的代码
    <template id="aaa">
            <div>
                <h3>我是组件</h3>
                <strong>我是加粗标签</strong>
            </div>
    </template>
ログイン後にコピー

相关推荐：《vue.js教程》

以上がvuejs1.0と2.0の違いは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル：
vue
ソース：php.cn
前の記事：CSS flex-direction プロパティは何をするのでしょうか? 次の記事：HTML の構造にはどの 2 つの部分が含まれますか?
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
テンプレートのメソッドで定義された変数の使用 Vue (v3 ではなく v2) を使用するのは初めてで、テンプレート内 (メソッド内で定義された) で変数を使用しようとしています。私の簡略化されたコード: <templa...
から 2024-04-06 18:10:25
0
2
513
ログインせずに Firebase を使用して Vue でユーザーを作成する ユーザープロフィールを作成するフォームを作成しました。しかし、ユーザーを作成するたびに問題が発生します。ログインおよびログアウトしたユーザー。この問題の解決にご協力ください。 co...
から 2024-04-06 14:20:12
0
1
514
Vue3 Webコンポーネントのプロダクションビルドの問題を解決する vue2web コンポーネントを vue3 に移行しようとしていますが、運用用のビルドを作成するときに問題が発生します。 --targetwc を指定して vue-cli を使用し...
から 2024-04-06 12:43:37
0
1
473
vue vee-validate は日付ピッカーの選択の問題をキャプチャします datepicker フィールドの v-model バインディングが正しく機能しません。選択を行うと、画面上でライブ更新されますが、値は formValues リアクティブ オブジ...
から 2024-04-06 11:38:56
0
1
510
Vueでルートプロパティを設定する方法はありますか? ページ内の特定のタブ this.$router.push({name:"AdminNotifications",params:{tab:"reques...
から 2024-04-06 11:35:59
0
1
456
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート