Jquery プロジェクトで vue.js と element-ui を使用する

作業していると、JQ で書かれた古いプロジェクトに遭遇したり、JQ で新しい関数を変更したり追加したりすることがあります。元の JQ プロジェクトはコードの保守性が低いです。ページには数千行の JQ が含まれており、保守性は良好です。パフォーマンスは非常に悪いです。作業量が膨大なので、現時点では誰でも vue.js を導入できます。

ステップ 1: vue.js を導入する

ここでは 2 つの方法をご紹介します

CDN：

	<!-- 引入vue.js -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

ローカルファイルのインポート:

<script src="./vue/vue.min.js" type="text/javascript"></script>

ダウンロードリンク:

Alibaba Cloudアドレス: Alibaba Cloud Disk Share https://www.aliyundrive.com/s/JwJppQFQCQBパスワードの抽出: t59b

注: vue.js は jq.js の前に導入する必要があります

ステップ 2: vue インスタンスを作成する

独自の js ファイルコードで vue インスタンスを作成し、テストします。

	    var app = new Vue();
	    console.log(app);

印刷結果:

この時点で、Vue インスタンスが正常に作成され、Vue の構文とライフサイクル関数を使用できることを意味します。

コードをコピーします:

ここの el の後には、ページ全体の最大の親の ID が続きます。ここでの私の名前は app です。書くときは、ページの最大の親に ID をバインドすることを忘れないでください。その後、el の値は次のようになります。バインドした ID。これはとても重要です

// 使用vue实例 可以使用vue的方法和生命函数
new Vue({
    el:'#app',
    data:{
        text:'这是一个vue实例',
        list:['1','2','3']
    },
    methods:{
        initData(){
            this.list=['我爱你','你爱我','哈哈哈哈']
        }
    },
    created(){
        this.initData()
    },
});

UI には次のような教えが導入されています。

結果を示す：

コードの指導:

1 CSS スタイルをインポートします (注:フォントアイコンのインポートパスの変更が必要な場合があります)

2.jsファイルをインポート

要素 ui ファイルのアドレス:

Alibaba Cloud ネットワークディスク:

アリババクラウドのディスク共有

抽出コード：n93y

最後に、皆さんのお役に立てれば幸いです。作成するのは簡単ではありません。出発する前にいいね！をお願いします。