vueのテンプレートとelの違いとテンプレートをvueコンポーネントに段階的に抽出するプロセス

記事のディレクトリ

1はじめに

Vueをwebpack環境に統合したいので、それに依存している必要があるので、最初にインストールする必要があります

我々はまた、将来的には、実際のプロジェクトでVUEを使用しますので、我々は開発に依存しない、我々はそれを使用する必要があります--save、ありません--save-dev
インストール： npm install vue --save

コードディレクトリ構造、このブログのデモコードはページ下部にダウンロードリンクがあります（〜￣▽￣）〜
ここに画像の説明を挿入

2.コードデモ

2.1elとテンプレートの関係

index.htmlファイル

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>测试</title>
</head>
<body>

<div id="app">
  <h2>{
   
   {message}}</h2>
  <button @click="btnClick">按钮</button>
</div>

</body>
<script src="./dist/bundle.js"></script>
</html>

main.jsファイル

//使用vue进行开发
import Vue from 'vue'

let app = new Vue({
    
    
  el: '#app',
  data:{
    
    
    message:'hello world'
  },
  methods:{
    
    
    btnClick() {
    
    
      console.log('---');
    }
  }
})

通常の操作の後、別の質問を考えてみましょう。

インターフェイスのデータにデータを表示する場合は、index.htmlを変更する必要があります
後でコンポーネントをカスタマイズする場合は、コンポーネントを使用するようにindex.htmlも変更する必要があります
しかし、将来のhtmlテンプレートの開発では、手動で頻繁に変更したくありません。それは可能ですか？

定義されたtemplate属性：

前の例のVueではel、index.htmlの属性を定義し、#appバインドした後、Vueインスタンスがそのコンテンツを管理できるようにします。
ここでは、index.htmlファイルのdiv要素のコンテンツを削除して、アプリIDを持つ基本的なdiv要素のみを残すことができます。
それでも{ {message}}の内容を表示したい場合は、どうすればよいですか？
別のテンプレート属性を定義できます。コードは次のとおりです。

let app = new Vue({
    
    
  el: '#app',
  template: `
    <div>
      <h2>{
     
     {message}}</h2>
      <button @click="btnClick">按钮</button>
    </div>
  `,
  data: {
    
    
    message: 'hello world'
  },
  methods: {
    
    
    btnClick() {
    
    
      console.log('---');
    }
  }
})

再パックしてプログラムを実行し、以前と同じ結果とHTMLコード構造を表示します。

では、elとtemplateの関係は何ですか？

elは、Vueによって管理されるDOMを指定するために使用されます。これは、命令の解析、イベントの監視などに役立ちます。
また、テンプレートがVueインスタンスでも指定されている場合、テンプレートテンプレートのコンテンツは、マウントされた対応するelテンプレートを置き換えます。

以下のアニメーションに示すように、テンプレートテンプレートのコンテンツは、elに対応するマウントされたテンプレートを置き換えます。

ここに画像の説明を挿入
これを行うことの利点は何ですか？答えは次のとおりです。これを行った後、将来の開発でindex.htmlを再度操作する必要はなく、対応するタグをテンプレートに書き込むだけです。

2.2さらなる抽出の最適化

上記のコードの場合、テンプレートモジュールを作成するのは非常に面倒ですが、どうすればよいですか？

コンポーネント化のアイデアを使用して、テンプレートのコンテンツを抽出できます。

main.js

//使用vue进行开发
import Vue from 'vue'

// 1.抽离出一个组件
let App = {
    
    
  template: `
    <div>
      <h2>{
     
     {message}}</h2>
      <button @click="btnClick">按钮</button>
    </div>
  `,
  data() {
    
    
    return {
    
    
      message: 'hello world'
    }
  },
  methods: {
    
    
    btnClick() {
    
    
      console.log('---');
    }
  }
}

let app = new Vue({
    
    
  el: '#app',
  template: '<App></App>', // 3.使用
  components:{
    
     // 2.在Vue根实例中进行注册
    App
  }
})

2.3jsファイルに再度抽出します

次のコードをjsファイルに抽出してエクスポートすることもできます。

app.jsファイルを作成します

export default {
    
    
  template: `
    <div>
      <h2>{
     
     {message}}</h2>
      <button @click="btnClick">按钮</button>
    </div>
  `,
  data() {
    
    
    return {
    
    
      message: 'hello world'
    }
  },
  methods: {
    
    
    btnClick() {
    
    
      console.log('---');
    }
  }

次に、main.jsファイルで紹介します

//使用vue进行开发
import Vue from 'vue'

import App from './vue/app'

let app = new Vue({
    
    
  el: '#app',
  template: '<App></App>',
  components:{
    
    
    App
  }
})

2.4.vueファイルへの抽出を続行します

しかし、上記のコードでは、jsオブジェクトの形式でコンポーネントを整理して使用することは非常に不便です

一方で、テンプレートモジュールの作成は非常に面倒です
逆に、スタイルがあるとしたら、どこに書けばいいのでしょうか？

これで、vueのコンポーネントを整理する新しい方法がApp.vueでき
ここに画像の説明を挿入
ました。ファイルを作成するApp.vueファイル

<template>
  <div>
    <h2 class="title">{
    
    {
    
    message}}</h2>
    <button @click="btnClick">按钮</button>
  </div>
</template>

<script>
  export default {
    
    
    name: "App",
    data() {
    
    
      return {
    
    
        message: 'hello world'
      }
    },
    methods: {
    
    
      btnClick() {
    
    
        console.log('---');
      }
    }
  }
</script>

<style scoped>
  .title {
    
    
    color: red;
  }
</style>

main.jsファイルにインポートします

import Vue from 'vue'

// import App from './vue/app'
import App from './vue/App.vue' //注意需要加 .vue 后缀

let app = new Vue({
    
    
  el: '#app',
  template: '<App></App>',
  components:{
    
    
    App
  }
})

再パッケージ化してエラーを報告しました。私たちは、処理するために適切なローダーを必要とするヒント.vueファイル
ここに画像の説明を挿入
インストールをvue-loaderし、vue-template-compiler

npm install vue-loader vue-template-compiler --save-dev

vue-loaderはwebpackローダーであり、Vueコンポーネントをシングルファイルコンポーネント（SFC）と呼ばれる形式で記述できます。
vue-template-compilerはvueファイルをコンパイルします

構成

// webpack.config.js

module.exports = {
    
    
  module: {
    
    
    rules: [
      // ... 其它规则
      {
    
    
        test: /\.vue$/,
        loader: 'vue-loader'
      }
    ]
  }
}

再パッケージした後、再びエラーが見つかりました：vue-loaderを提供し、それを操作するにはプラグインが必要です。
ここに画像の説明を挿入
理由：インストールしたvue-loaderのバージョンは15.9.6で、vueの公式ウェブサイトには次のように書かれています：Vue Loader v15を正しく使用するには、webpackプラグインが必要です。Vueローダーの構成は他のローダーとは異なります。ルールを介して拡張子が.vueのすべてのファイルにvue-loaderを適用することに加えて、必ずVueLoaderプラグインをwebpack構成に追加してくださいVueLoaderPlugin。

このプラグインは必須です！その責任は、定義した他のルールを.vueファイルの対応する言語ブロックにコピーして適用することです。たとえば、一致する/\.js$/ルールがある場合、それ.vueは<script>ブロック内のドキュメントに適用されます。

// webpack.config.js
const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
    
    
  // ...
  
  plugins: [
    // 请确保引入这个插件来施展魔法
    new VueLoaderPlugin()
  ]
}

詰め替え、通常！

2.5vueファイルをインポートするときにサフィックスを省略する方法

// webpack.config.js
const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
    
    
  // ...
  
 resolve: {
    
    
    extensions:['.js','.vue','.css'] //加一条配置
  }
}

3.いくつかの情報

vue公式ウェブサイト| vue-loaderとは

vue公式サイト| elとテンプレートの紹介

https://www.cnblogs.com/vickylinj/p/10941112.html

デモコードのダウンロードリンク：https：//webchang.lanzous.com/i9bBNkgdnreパスワード：34bq