フロントエンド Js フレームワーク Vue

モバイル 2023-07-01 09:50:29 訪問数: null

1. Vue の概要

Vue は jQuery のようなフロントエンド フレームワークであり、その中心的な考え方はデータを使用して UI を駆動することです。jQuery を使用する時代では、特定の DOM 要素の値を変更したい場合、jQuery はまず dom オブジェクトを取得し、その後 dom オブジェクトの値を変更するなどの操作を実行する必要がありましたが、Vue.js は ViewModel に焦点を当てていました。 MVVM モデルのレイヤーでは、Vue は最初に値を ViewModel オブジェクトにバインドし、次に ViewModel オブジェクトの値を変更します。Vue フレームワークは Dom 関連の操作を自動的に実行します。この種の dom 要素は ViewModel の値によって変化しますViewModel オブジェクトの値も dom 要素の値に応じて変化する場合、それは双方向データ バインディングと呼ばれます。

2.vue.jsの導入

Vue.jsを利用する前にVue.jsを導入する必要がありますが、Vue.jsの導入方法は大きく分けてローカルインポート、CDNインポート、Npm scaffoldインポートの3つがあります。

1. vue.js をダウンロードしてローカルインポートします

Vue.js の公式 Web サイトから直接 vue.js をダウンロードし、<script>.html 内のタグ内に vue.js を引用することで使用できます。

開発環境では最小の圧縮バージョンを使用しないでください。使用しないと、エラー プロンプトや警告が表示されなくなります。

2. CDN メソッドを使用して vue.js を導入する

例は次のとおりです。

<!DOCTYPE html>
<html>
	<head>
		<title>Vue学习</title>
		<meta charset="utf-8">
		<script type="text/javascript" src="https://cn.vuejs.org/js/vue.js"></script>
	</head>
	<body>
		...
	</body>
</html>

3. NPM足場のやり方（推奨）

この方法を使用することをお勧めしますが、この方法については後で詳しく説明するため、この記事では省略します。

3. Vueエントリーケース

1.Vueの作業領域を定義します。
2. 関数クラス ライブラリをインポートします。
3. Vue オブジェクトをインスタンス化します。
4. データ参照 - 補間式を使用します。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>入门案例</title>
	</head>
	<body>
		<!-- 1.定义vue工作的区域 -->
		<div id="app">
			<h1>vue的入门案例</h1>
			<!-- 4数据的引用 插值表达式-->
			{
   
   {hello}}
		</div>

		<!-- 2.导入函数类库 -->
		<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>

		<!-- 3.实列化vue对象 -->
		<script>
			const app=new Vue({
				//关键字el：标识vue对哪个元素有效
				el: "#app",
				data: {
					hello:"你好Vue"
				}
			});
		</script>
	</body>
</html>

4. Vue テンプレートの構文

Vue.js は HTML ベースのテンプレート構文を使用しており、これにより開発者は DOM を基礎となる Vue インスタンスのデータに宣言的にバインドできます。Vue.js の核心は、簡潔なテンプレート構文を使用して DOM にデータを宣言的にレンダリングできるようにするシステムです。応答システムと組み合わせると、アプリケーションの状態が変化したときに、Vue はコンポーネントを再レンダリングするための最小コストをインテリジェントに計算し、それを DOM 操作に適用できます。
Html に含まれる構文コード Vue.js は、次の 2 種類に分けられます。

  • 補間構文 (二重中括弧式)。
  • ディレクティブ (v- で始まる)。

1. Vue補間構文

  1. 機能: タグ本体の内容を解析するために使用されます。
  2. 構文: { {xxx}} 、xxxx は js 式として Html に解析されます。
<!DOCTYPE html>
<html>
	<head lang="en">
		<meta charset="UTF-8">
		<title>Vue插值语法</title>
		<!--1.引入vue.js-->
		<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
	</head>
	<body>
		<!--view视图-->
		<div id="app">
			{
   
   {message}}
		</div>
		<script>
			var vue=new Vue({
			        <!--关联id为app的元素-->
			        el:"#app",
			         /*model数据*/
			         data:{
			             message:"hello,vue"
			         }
			     });
		</script>
	</body>
</html>

2. Vueコマンド構文

  1. 機能: タグ属性の解析、タグ本体のコンテンツの解析、イベントのバインディング。
  2. 例: v-bind:href = 'xxxx' 、xxxx は js 式として解析されます。
<!DOCTYPE html>
<html>
	<head lang="en">
		<meta charset="UTF-8">
		<title>Vue指令语法</title>
		<!--1.引入vue.js-->
		<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
	</head>
	<body>
		<!--view视图-->
		<div id="app">
			<a v-bind:href="url">点我</a>
		</div>
		<script>
			var vue=new Vue({
			        el:"#app",
			         /*model数据*/
			         data:{
			           url: "http://www.baidu.com",
			         }
			     });
		</script>
	</body>
</html>

Vue でよく使用される組み込み命令:

命令 説明
v-テキスト 補間と同様に、vue の変数も使用します。これにより元のコンテンツが上書きされ、補間は行われません。
v-html HTMLの内容を表示する
v-if true の場合、現在のラベルがページに出力されます。
v-その他 false の場合、現在のタグはページにのみ出力されます。
Vショー 表示スタイルを制御して表示/非表示を制御
v-for 配列/オブジェクトを反復処理する
ヴオン Vue が提供するイベント バインディング メカニズム。省略形は「@」です。
vバインド Vue が提供する属性バインディング メカニズム。省略形は「:」です。
v モデル 双方向データバインディング
Vマント 補間式のちらつき問題を解決
vバインド

v-bind は、データと要素の属性をバインドするための
完全な例です。

<body>
    <div class="app">
        <a v-bind:href="url">点击</a>
    </div>
 <script>
     var app = new Vue({
         el:'.app',
         data:{
             url:"https://www.baidu.com",
         }
     });
 </script>
</body>

注: v-bind の後には、属性名=が続きます。これは、この属性をバインドすることを意味します。バインド後、対応する値が vue のデータ内で見つかるはずです。コンソールで URL を変更すると、対応する URL も変更されます。
同様に、画像の src 属性とハイパーリンクのクラスをバインドすることもできます。

<body>
    <div class="app">
        <a v-bind:href="url">点击</a>
        <img v-bind:src="imgsrc" width="200px"/>
    </div>
 <script>
     var app = new Vue({
         el:'.app',
         data:{
             url:"https://www.baidu.com",
             imgsrc:"https://cn.vuejs.org/images/logo.png"
         }
     });
 </script>
</body>

知らせ：

<div class="app">
	  <a v-bind:href="url">点击</a>
</div>

通常、v-bind: は次のように省略できます。

<div class="app">
  <a :href="url">点击</a>
</div>
v-if、v-else
<body>
    <div id="app">
        <div v-if="ok">YES</div>
        <div v-else>NO</div>
    </div>
     <script>
         var app = new Vue({
             el:"#app",
             data:{
                 ok:true,
             }
         });
     </script>
</body>
v-for
  1. プレーン配列に対する v-for ループ
    <body>
    <div id="app">
        <p v-for="(item,index) in list">{
     
     {item}}----索引:{
     
     {index}}</p>
    </div>
     <script>
         var app = new Vue({
             el:"#app",
             data:{
                list:[1,2,3,4,5],
             }
         });
     </script>
</body>
  2. オブジェクトの配列に対する v-for ループ
    <body>
    <div id="app">
        <p v-for="(user,index) in list">{
     
     {user.id}}---{
     
     {user.name}}-----索引:{
     
     {index}}</p>
    </div>
     <script>
         var app = new Vue({
             el:"#app",
             data:{
                list:[
                    {id:1,name:'张三'},
                    {id:2,name:'李四'},
                    {id:3,name:'王五'}
                ],
             }
         });
     </script>
</body>
  3. v-for ループ オブジェクト
    <body>
    <div id="app">
        <p v-for="(val,key,index) in user">值：{
     
     {val}}---键：{
     
     {key}}-----索引:{
     
     {index}}</p>
    </div>
     <script>
         var app = new Vue({
             el:"#app",
             data:{
                user:{
                    name:"张三",
                    age:"18",
                    sex:"男"
                }
             }
         });
     </script>
</body>

3. Vueのデータバインディング

一方向のデータバインディング

構文:v-bind:href ="xxx"または略称:href
機能: データは、データからビュー ページにのみ流れることができます。

双方向データバインディング

構文: v-mode:value="xxx" または v-model="xxx" の短縮形
機能: データは、データからビュー ページに流れるだけでなく、ビュー ページからデータに流れることもできます。
注: v-model は、すべてのフォーム要素の value、checked、selected 属性の初期値を無視し、常に Vue インスタンスのデータをデータ ソースとして使用します。初期値は、JavaScript を介してコンポーネントのデータ オプションで宣言する必要があります!
例:

<body>
    <div id="app">
        <input type="text"  v-model="message"/>{
   
   {message}}
    </div>
     <script>
         var app = new Vue({
             el:"#app",
             data:{message:'' }
         });
     </script>
</body>

4. Vueイベント処理

v-on ディレクティブを使用すると、DOM イベントをリッスンし、トリガーされたときに JavaScript コードを実行できます。v-on は呼び出すメソッド名を受け取ることもできます。
完全な例:

<!DOCTYPE html>
<html xmlns:v-on="https://cn.vuejs.org/">
<head lang="en">
    <meta charset="UTF-8">
    <title>事件绑定</title>
    <!--1.引入vue.js-->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
</head>
<body>
    <div id="app">
       {
   
   {count}}
        <!--触发时运行一些 JavaScript 代码--> 
        <button v-on:click="count+=1">点我加1</button>
        <!--触发时调用js方法--> 
        <button v-on:click="sub">点我减1</button>
    </div>
     <script>
         var app = new Vue({
             el:"#app",
             data:{count:1 },
             methods:{
                 sub:function(){
                    this.count-=1;
                 }
             }
         });
     </script>
</body>
</html>

知らせ：

  • v-bind は次のように省略できます。
  • v-on：@を省略できます

5. el の 2 つの書き方

最初の書き方:

<script type="text/javascript">
    new Vue({
        el: '#root', //绑定id为root的容器
        data: {
       		//定义数据 
    	}
    })
</script>

2 番目の書き方:

<script type="text/javascript">
    const vm = new Vue({
        data: {
       		//定义数据 
    	}
    })
    vm.$mount('#root') //绑定id为root的容器
</script>

2 つのメソッドの違いは、最初のメソッドは Vue オブジェクトの作成時にコンテナをバインドする必要があるのに対し、2 番目のメソッドは最初に Vue オブジェクトを作成し、他の操作を行った後にコンテナをバインドすることです。

6. データの書き込みには 2 つの方法があります

データ オブジェクトは、オブジェクト スタイルと関数スタイルで記述できます。
オブジェクト スタイルの記述:

<script type="text/javascript">
    new Vue({
        el: '#root',
        //定义data对象，然后在其中定义属性
        data: {
       		name:'Nicki Minaj' 
    	}
    })
</script>

機能的な文章:

<script type="text/javascript">
    new Vue({
        el: '#root',
        //定义data函数，然后在返回值中定义属性
        data(){
            return{
                //返回值是定义的数据
                name:'Nicki Minaj' 
            }
        }
    })
</script>

知らせ：

  1. コンポーネントを使用する場合、データは機能的に定義する必要があります。
  2. Vue で管理する関数はアロー関数として記述することはできません。アロー関数を使用する場合、関数内の はthisウィンドウを意味し、通常の関数形式を使用する場合は、thisVue オブジェクトを意味します。

5. Vue コンポーネントの開発

1. Vueコンポーネント化の概念

コンポーネント (Component) は、再利用可能な Vue インスタンスで、いくつかのパブリック モジュールを抽出し、再利用用のコンポーネント (部分的 (特定の) 機能効果を実現するために使用されるコード (html/css/js/image) の集合) として抽出します。 ) 次に、それを別のツール コンポーネントまたはページとして記述し、必要なページに直接インポートするだけです。

たとえば、複数のページで同じものを使用する必要がある場合、ページのヘッダー、サイド、コンテンツ領域、フッター、アップロードされた画像などをコンポーネント化できるため、コードの再利用率が向上します。コンポーネントを使用する場合は、大きく 3 つのステップがあります: コンポーネントを定義する (コンポーネントを作成する) => コンポーネントを登録する => コンポーネントを使用する (コンポーネント タグを書く)

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <!-- 1. 导入Vue包 -->
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
</head>

<body>
  <class class="app">
    <!-- 3、使用组件 -->
    <my-com></my-com>
  </class>
  <script>
    // 1、创建组件构造器
    const myComponent = Vue.extend({
        template: `
          <div>
            <h2>组件标题</h2>
            <p>我是组件中的一个段落内容</p>
          </div>
        `,
      })
      // 2、注册组件，并且定义组件标签的名称
      Vue.component("my-com", myComponent)
      
      //创建vm....
  </script>
</body>
</html>

2. Vueによるコンポーネントの定義（コンポーネントの作成）

Vue.extend(options) を使用して作成されます。オプションは new Vue(options) のときに渡されるオプションとほぼ同じですが、いくつかの違いがあります。

  1. 最終的にすべてのコンポーネントは vm によって管理され、vm 内の el によってどのコンテナーにサービスを提供するかが決定されるため、el は記述しないでください。
  2. データは関数として記述する必要があり、コンポーネントが再利用されるときのデータ参照関係を避けるために、関数は毎回新しいオブジェクトを返します。

コンポーネントの短縮表現を定義します。

const book = Vue.extend(options)

次のように省略できます。

const book = options

3. Vue登録コンポーネント

コンポーネントを使用するには、グローバル登録とローカル登録の 2 つの方法でコンポーネントを登録する必要があります。
1. ローカル登録: 新しい Vue に依存する場合はコンポーネント オプションを渡します。
2. グローバル登録: Vue.component('コンポーネント名', コンポーネント) に依存します。

グローバルコンポーネントの登録

Vue.component() の登録
Vue.component() で直接登録されたコンポーネントはグローバル コンポーネントであり、Vue の任意のインスタンスで使用できます。Vue.component() を呼び出すことは、今のコンポーネント コンストラクターをコンポーネントとして登録し、コンポーネント ラベル名を与えることです。したがって、登録されたコンポーネントのラベル名とコンポーネント コンストラクターの 2 つのパラメーターを渡す必要があります。

<!DOCTYPE html>
<html>
	<head>
		<title>vue组件测试</title>
		<meta charset="utf-8">
		<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<!-- 组件复用如下 -->
			<button-counter></button-counter>
			<br />
			<br />
			<button-counter></button-counter>
			<br />
			<br />
			<button-counter></button-counter>
		</div>
		<script type="text/javascript">
			// button-counter是组件名，
			    Vue.component('button-counter', {
			       // 和实例对象不一样，这里data不再返回对象，必须要是个函数，而且必须return
			      data: function() {
			        return {
			          count: 0
			        }
			      },
			      template: '<button @click="count++">You clicked me {
   
   { count }} times.</button>'
			    });
			    new Vue({
			      el: '#app'
			    });
		</script>
	</body>
</html>

注: ボタンカウンターコンポーネントを定義する場合、データは次のオブジェクトなどのオブジェクトではなく関数である必要があります。

data: {
  count: 0
};

各インスタンスは、返されたオブジェクトの独立したコピーを保持できるためです。オブジェクトの場合は、毎回共有実列を呼び出すため、変更されると同時に値も変更されます。公式ドキュメントには次のように書かれています: コンポーネントが複数の実列を作成するために使用される可能性があるため、コンポーネントが定義されるとき、データは初期データ オブジェクトを返す関数として宣言される必要があります。データがまだ純粋なオブジェクトである場合、すべての実列は同じデータ オブジェクトへの参照を共有します。data 関数を提供すると、新しいインスタンスが作成されるたびに data 関数を呼び出すことができるため、元のデータの新しいコピーであるデータ オブジェクトが返されます。

Vue.extend の設定オブジェクト
に Vue.extend(options) を登録します。Vue.extend が返すのは特定のコンポーネント インスタンスではなく「拡張インスタンス コンストラクター」であり、通常は Vue.component を通じてコン​​ポーネントを生成します。

  • Vue.extend() を呼び出すと、コンポーネント コンストラクターが作成されます。
  • 通常、コンポーネント コンストラクターを作成するとき、受信テンプレートはカスタム コンポーネントのテンプレートを表します。
  • テンプレートは、コンポーネントが使用される場所に表示される HTML コードです。
<!DOCTYPE html>
<html>
	<head>
		<title>vue组件测试</title>
		<meta charset="utf-8">
		<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<!-- 组件复用如下 -->
			<button-counter></button-counter>
			<br />
			<br />
			<button-counter></button-counter>
			<br />
			<br />
			<button-counter></button-counter>
		</div>
		<!-- 全局组件在 id为app2下也能使用的 -->
		<div id="app2">
			<button-counter></button-counter>
		</div>
		<script type="text/javascript">
			var buttonCounter = Vue.extend({
			      name: 'button-counter',
			      data: function() {
			        return {
			          count: 0
			        }
			      },
			      template: '<button @click="count++">You clicked me {
   
   { count }} times.</button>'
			    });
			    /*
			      Vue.component 是用来全局注册组件的方法, 其作用是将通过 Vue.extend 生成的扩展实列构造器注册为一个组件 
			    */
			    Vue.component('button-counter', buttonCounter);
			    // 初始化实列app
			    new Vue({
			      el: '#app'
			    });
			    // 初始化实列app2
			    new Vue({
			      el: '#app2'
			    });
		</script>
	</body>
</html>

効果は上記と同じです。上でわかるように、グローバル コンポーネントは「#app」ドメインだけでなく「#app2」ドメインでも使用できます。これがグローバル コンポーネントとローカル コンポーネントの違いです。

4. 部分コンポーネントの登録

ローカルコンポーネントとは、あるVUEオブジェクト内でのみ使用できるコンポーネントで、定義する際にはオブジェクトの形で定義するだけですが、VUEオブジェクトのコンポーネントに組み込むとVueインスタンスとなり、これは、インポートされた Vue インスタンス内でのみ使用できます。
例えば：

import HelloWorld from './components/HelloWorld'
export default {
  components: {
      HelloWorld
  }
}

違い: グローバル コンポーネントは Vue.options.components の下にマウントされますが、ローカル コンポーネントは vm.$options.components の下にマウントされるため、グローバルに登録されたコンポーネントは任意に使用できます。

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Title</title>
		<script src="../../js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<my-button></my-button>
			<my-button></my-button>
			<my-button2></my-button2>
		</div>
		<div id="app1">
			<my-button></my-button>
			<!--在这里不能用 <my-button2></my-button2>-->
		</div>
		<script type="text/javascript">
			const temp = Vue.extend({
				template: `
			                <h2>Welcome to Vue</h2>
			            `
			})
			//全局组件
			Vue.component('myButton', temp);
			const app = new Vue({
				el: "#app",
				data: {},
				//局部组件
				components: {
					myButton2: temp
				}
			})
			const app1 = new Vue({
				el: "#app1",
			})
		</script>
	</body>
</html>

部分的に登録されたコンポーネント

<div id="app">
	<child-component></child-component>
</div>
<script type="text/javascript">
	var child = {
	    template: "<h1>我是局部组件</h1>"
	  };
	  new Vue({
	    el: '#app',
	    components: {
	      "child-component": child
	    }
	  })
</script>

ブラウザでは、次のように HTML コードにレンダリングされます。

<div id='app'><h1>我是局部组件</h1></div>

上記のコードは部分コンポーネントの例であり、部分コンポーネントはIDが「app」のドメインでのみ利用可能であり、他のIDではアクセスできません。次のコードは次のとおりです。

<div id="app">
	<child-component></child-component>
</div>
<div id="app2">
	<child-component></child-component>
</div>
<script type="text/javascript">
	var child = {
	    template: "<h1>我是局部组件</h1>"
	  };
	  new Vue({
	    el: '#app',
	    components: {
	      "child-component": child
	    }
	  });
	  new Vue({
	    el: '#app2'
	  })
</script>

上記のコードでは、ID が「#app2」のドメインの下で子コンポーネント コンポーネントを使用できず、コンソールにエラーが報告されます。このコンポーネントはローカル コンポーネントであるため、「#app」ドメインでのみ使用できます。

5. コンポーネントの導入と利用（コンポーネントタグの記述）

コンポーネントタグについて：
その１の書き方：<book></book>
その２の書き方：<book/>

備考: スキャフォールディングを使用しない場合、後続のコンポーネントはレンダリングできません。(複数回使用した場合、最初のもののみがレンダリングされます)

コンポーネント名について:
1 つの単語は次のように構成されます。

  • 最初の書き方（頭文字小文字）：book
  • 2 番目の書き方 (最初の文字を大文字にする): Book

複数の単語で構成されています:

  • 最初の書き方（ケバブケースのネーミング）：my-book
  • 2 番目の書き方 (キャメルケース命名): MyBook (Vue スキャフォールディングのサポートが必要)

備考:
(1). コンポーネント名は、HTML 内の既存の要素名をできる限り避けます (例: h2 および H2 は受け入れられません)。
(2). 名前設定項目を使用して、開発者ツールに表示されるコンポーネントの名前を指定できます。

6. 非単一ファイルコンポーネントと単一ファイルコンポーネント

単一ファイル コンポーネント (.vue) と非単一ファイル コンポーネント (.html)。

非単一ファイルコンポーネント
  1. テンプレートはヒントなしで書かれています。
  2. ビルドプロセスを行わずに ES6 を ES5 に変換する方法はありません。
  3. コンポーネントの CSS はサポートされていません。
  4. 実際の開発ではほとんど使用されません。
単一ファイルコンポーネント

.vue ファイルの構成 (3 つの部分)

  1. テンプレートページ
<template>
    页面模板
</template>
  1. JSモジュールオブジェクト
<script>
export default {
    data() {return {}}, methods: {}, computed: {}, components: {}
}
</script>
  1. スタイル
<style>
    样式定义
</style>

App.vue ファイルは、Vue では公式 Web サイトではコンポーネントと呼ばれています。単一ページとは、構造、スタイル、ロジック コードがすべて同じファイル内に記述されていることを意味します。このファイルをインポートすると、対応する構造とスタイル、および JS コード、

<template>
	<div id="app">
		<img src="./assets/logo.png">
		<router-view></router-view>
	</div>
</template>

<script>
	export default {
	  name: 'app'
	}
</script>

<style>
	#app {
	  font-family: 'Avenir', Helvetica, Arial, sans-serif;
	  -webkit-font-smoothing: antialiased;
	  -moz-osx-font-smoothing: grayscale;
	  text-align: center;
	  color: #2c3e50;
	  margin-top: 60px;
	}
</style>

ノード側が.vueファイルを認識できるのは、前述のwebpackがコンパイル時に.vueファイル内のhtml、js、cssを抽出して新たな別ファイルを合成するためです。

6. Vue コンポーネントの値の受け渡し

コンポーネント間での値の受け渡しは、次の状況に分類されます。

  1. 親子コンポーネントの値を渡します。
  2. 兄弟コンポーネント間で値を渡します。
  3. 祖先要素と子孫要素の間で値を渡します。
    上記の状況には、次の表に示すように、対応する解決策があります。
値を渡す必要があるコンポーネントの関係 解決
親 -> 子 (祖先 -> 子孫) props、消息总线、发布订阅、provide/inject
子 -> 親 (子孫 -> 先祖) 消息总线、发布订阅、$refs、事件绑定($on/$emit)
兄弟コンポーネント 消息总线、发布订阅

1. 小道具を使用して値を渡す

  1. 役割: 親コンポーネントがデータを子コンポーネントに渡すために使用されます。
  2. 読み取り方法1：名前のみを指定する
    props: ['name', 'age', 'setName']

型には、次のネイティブ コンストラクターのいずれかを含めることができます。

  • 弦
  • 番号
  • ブール値
  • 配列
  • 物体
  • 日にち
  • 関数
  • シンボル
  1. 読み取り方法2：名前と種類を指定する
    props: {
 name: String, age: Number, setNmae: Function
}
  2. 読み取り方法3：名前/種類/要否/デフォルト値を指定
    props: {
name: {type: String, required: true, default:xxx}, }
例
<body>
    <div id="app">
        <!--组件：使用props把值传递给组件-->
        <blog-post v-for="item in items" v-bind:value="item"></blog-post>
    </div>
     <script>
         Vue.component("blog-post",{
             props:['value'],
             template:'<li>{
   
   {value}}</li>'
         });
         var app = new Vue({
             el:"#app",
             data:{
                 items:['张三','李四','王五']
             }
         });
     </script>
</body>

説明:
v-for="item in items": Vue インスタンスで定義された items という名前の配列を走査し、同じ数のコンポーネントを作成します。
v-bind:value="item": 走査された項目をコンポーネント内の props によって定義された value 属性にバインドします。= 記号の左側の値は props によって定義された属性名で、右側の値は項目内の項目の走査値 item 項目の値。

基本原則

  1. 子コンポーネントで親コンポーネントの状態データを直接変更しないでください。
  2. データがある場所では、データを更新する動作 (関数) をそこで定義する必要があります。

2. コンポーネント間の通信用の Vue カスタム イベント

バインディング イベントの監視
方法 1: v-on を介したバインディング:

@click="deleteTodo"

方法 2: $on() 経由でカスタム イベント (delete_todo) リスナーをバインドします。

<TodoHeader ref="xxx"/>
this.$refs.xxx.$on('delete_todo', function (todo) {
this.deleteTodo(todo)
})

トリガーイベント:

// 触发事件(只能在父组件中接收)
this.$emit(eventName, data)

注: このメソッドは、子コンポーネントが親コンポーネントにメッセージ (データ) を送信するためにのみ使用され、世代コンポーネントや兄弟コンポーネント間の通信には適していません。

3. コンポーネント間の通信のためのメッセージのサブスクリプションとパブリッシング

  1. ニュースを購読する:
    PubSub.subscribe('msg', function(msg, data){})
  2. アナウンスをする：
    PubSub.publish('msg', data)

注: このメソッドは、任意のリレーションシップ コンポーネント間の通信 (データ) を実現できます。たとえば、メッセージをサブスクライブする場合、配列を削除できます。

例
mounted () {
   // 订阅消息(deleteTodo)
   PubSub.subscribe('deleteTodo', (msg, index) => {
      this.deleteTodo(index)
   })
}

methods: {
   deleteTodo (index) {
      this.todos.splice(index, 1)
   },
}

<button class="btn btn-danger" v-show="isShow" @click="deleteItem">删除</button>
deleteItem () {
   // 发布消息(deleteTodo)
   PubSub.publish('deleteTodo', this.index)
}

7. Vue ネットワーク通信 - Axios

1.axiosの導入

  • npm を使用してインポートします。
    npm install axios
  • cdn を使用してインポートします。
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

2. axios の概要

Axios は Promise ベースの HTTP ライブラリであり、主に次の目的で使用されます。データを取得するための非同期リクエストを送信します。

一般的な方法:

  • アクシオス(構成)
  • axios.get(url, [config])
  • axios.post(url, [データ])
送信データ構成の共通パラメータ:
{
    url: '请求的服务器',
	method: '请求方式', // 默认是 get
    // GET请求参数
    params: {
    	参数名: 参数值
    },
	// POST请求参数, 如果使用axios.post,则参数在url之后直接书写,不需要该位置传递参数
    data: {
    	参数名: 参数值
    },
	// 响应数据格式,默认json
	responseType: 'json'
}
応答データの共通パラメータ:
{
    data: {},		//真正的响应数据(响应体)
    status: 200,	//响应状态码
    statusText: 'OK',	 //响应状态描述
    headers: {},	//响应头
    config: {}		//其他配置信息
}

3. Axios が Get リクエストを送信します

var app = new Vue({
    el: "#app",
    data: {
        user: {}
    },
    //当页面加载完毕后
    created() { 
        //发送GET请求axios.get("请求路径",{ config });
       axios.get("请求路径",{
            //get请求参数
            params: {
                name:"zhangsan",
                age:23
            },
            //响应数据格式为"json"
            responseType: 'json'
        }).then(res => {
            //打印响应数据
            console.log(res);
            //把响应数据赋值给Vue中的user属性
            app.user = res.data;
        }).catch(err => {
            //打印响应数据(错误信息)
            console.log(err);
        });
    }
});

4. Axios が Post リクエストを送信する

var app = new Vue({
    el: "#app",
    data: {
        user: {}
    },
    //当页面加载完毕后
    created() { 
        //发送POST请求axios.post("请求路径",{ 参数 });
        axios.post("请求路径",{
                name:"zhangsan",
                age:23
            }).then(res => {
                console.log(res);
                app.user = res.data;
            }).catch(err => {
                console.log(err);
            });
    }
});

5.Vueのクロスドメインの問題

クロスドメイン問題の原因

クロスドメインの問題の発生は、ブラウザの同一オリジン ポリシーの問題が原因です。いわゆる同一オリジン、つまり、2 つのページが同じプロトコル (プロトコル: http、https)、ホスト (ホスト)、およびポートを持っています。 (ポート) このコアは最も基本的な機能でもあり、同一生成元ポリシーが存在しない場合、ブラウザーは非常に危険であり、
いつ攻撃される可能性があります。データの取得をインターフェイスにリクエストしたときに、「Access-Control-Allow-Origin」などのエラー メッセージが表示された場合、リクエストがクロスドメインであることを意味します。一般に、クロスドメインの問題はバックエンドによって解決されますが、もちろんフロントエンドによって解決することもできます。

Vue でクロスドメインの問題を解決する方法
  1. vue.config.js に次のコード スニペットを設定します。
module.exports = {
		dev: {
			// Paths    
			assetsSubDirectory: 'static',
			assetsPublicPath: '/',
			proxyTable: {
				// 配置跨域   
				'/api': {
					target: `http://www.baidu.com`,
					//请求后台接口        
					changeOrigin: true,
					// 允许跨域        
					pathRewrite: {
						'^/api': ''
						// 重写请求       
					}
				}
			},
		}

2. axioss インスタンスを作成するときに、baseUrl を「/api」に設定します。

const http = axios.create({
	timeout: 1000 * 1000000,
	withCredentials: true,
	BASE_URL: '/api'
	headers: {
		'Content-Type': 'application/json; charset=utf-8'
	}
})

8. Vue のライフサイクル

一般的に使用されるライフサイクル手法

  • beforeCreate: データ、メソッド、$el は現時点では初期化されていません。
  • created: この時点でデータとメソッドの初期化は完了していますが、DOM ノードはマウントされていません。
  • beforeMount: テンプレートをコンパイルし、この時点で仮想 DOM ノードを el にマウントします。
  • マウント: テンプレートをコンパイルし、データ要求に使用できる実際の DOM ノードを el にマウントします。
  • beforeUpdate: データ更新時にこのフック関数を入力すると仮想DOMが再作成されます。
  • updated: データの更新が完了したときにこのフック関数を入力します。
  • beforeDestory: コンポーネントが破棄される前に呼び出され、ウォッチャー、サブコンポーネント、イベントなどが削除されます。
  • destroy: コンポーネントが破棄された後に呼び出されます。
<template>
  <div>
    <div class="label-head">
      <label>生命周期详解</label>
    </div>
    <div :data="count">{
   
   {count}}</div>
    <p>
      <button @click="add">添加</button>
    </p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      count: "",
      filter: "all",
      states: ["all", "active", "completed"]
    };
  },
  methods: {
    add() {
      this.count++;
    }
  },
  beforeCreate() {
    console.log("=========" + "beforeCreated:初始化之前" + "======");
    console.log(this.$el);
    console.log(this.$data);
    console.log(this.filter);
  },
  created() {
    console.log("==========" + "created：创建完成" + "===========");
    console.log(this.$el);
    console.log(this.$data);
    console.log(this.filter);
  },
  beforeMount() {
    console.log("==========" + "beforeMount：挂载之前" + "=======");
    console.log(this.$el);
    console.log(this.$data);
    console.log(this.filter);
  },
  mounted() {
    console.log("==========" + "mounted：被挂载之后" + "==========");
    console.log(this.$el);
    console.log(this.$data);
    console.log(this.filter);
  },
  beforeUpdate() {
    console.log("========" + "beforeUpdate：数据更新前" + "========");
    console.log(this.$el);
    console.log(this.$data);
    console.log(this.filter);
  },
  updated() {
    console.log("========" + "updated：被更新之后" + "============");
    console.log(this.$el);
    console.log(this.$data);
    console.log(this.filter);
  },
  beforeDestroy() {
    console.log("=========" + "beforeDestroy：销毁之前" + "========");
    console.log(this.$el);
    console.log(this.$data);
    console.log(this.filter);
  },
  destroyed() {
    console.log("==========" + "destroyed：销毁之后" + "===========");
    console.log(this.$el);
    console.log(this.$data);
    console.log(this.filter);
  },
  activated() {
    console.log("");
  },
  deactivated() {
    console.log("");
  }
};
</script>
<style scoped>
.label-head {
  text-align: center;
  font-size: 40px;
}
</style>

9. Vue プロジェクト エンジニアリング

1. シングルページアプリケーションとマルチページアプリケーション

SPA シングルページ アプリケーション (SinglePage Web アプリケーション) とは、メイン ページ (1 つの HTML ページ) が 1 つだけあるアプリケーションを指し、js および css 関連のリソースを最初に 1 回読み込むだけで済みます。すべてのコンテンツはメイン ページに含まれており、各機能モジュールはコンポーネント化されています。シングルページ アプリケーションのジャンプでは、関連するコンポーネントを切り替え、ローカル リソースのみを更新します。
MPA マルチページ アプリケーション (MultiPage Application) とは、複数の独立したページ (複数の HTML ページ) を持つアプリケーションを指し、各ページは js、css、およびその他の関連リソースを繰り返し読み込む必要があります。複数ページのアプリケーションにジャンプするには、ページ全体のリソースの更新が必要です。

- SPAアプリケーション MPA アプリケーション
リフレッシュ方法 関連するコンポーネントの切り替え、ページの部分的な更新または変更 ページ全体を更新
ルーティングパターン ハッシュまたは履歴を使用できます 通常のリンクジャンプ
ユーザー体験 ページ フラグメント間の切り替え時間は速く、ユーザー エクスペリエンスは良好です。初めてロードされるファイルが多すぎる場合は、関連する調整を行う必要があります。 ページ切り替えの読み込みが遅く、流暢さが十分ではなく、特にネットワーク速度が遅い場合、ユーザー エクスペリエンスが比較的劣ります。
トランジションアニメーション トランジションアニメーションを簡単に実装できる MPA: トランジション アニメーションを実現できません
データ転送 データ転送の実装は簡単で、方法も豊富（パラメータ付きのルーティングで値を渡す、Vuexで値を渡すなど） URL に依存してパラメータ、Cookie、ローカル ストレージを渡します
検索エンジン最適化 (SEO) 別のソリューションが必要ですが、実装が難しく、SEO の取得には役に立ちません。サーバーサイド レンダリング (SSR) を使用することで最適化できます。 実装が簡単
使用範囲 非常に厳しい経験、スムーズなインターフェースアプリケーションの追求 サポート性の高い検索エンジンを追求するアプリケーションに最適
開発費 高く長くするにはプロフェッショナルなフレームが必要です 低いですが、ページコードの繰り返しが多くなります
メンテナンス費用 比較的簡単な 比較的複雑な
構造 1 つのメイン ページ + 多数のモジュールのコンポーネント たくさんのフルページ
リソース コンポーネントの共通リソースは一度ロードするだけで済みます 各ページは共通リソースを単独でロードする必要があります

2. Vue スキャフォールディングを使用してプロジェクトを生成する (推奨)

Vue スキャフォールディングとは、単一ページ アプリケーション用の迅速かつ複雑なスキャフォールディングである vue-cli を指します。新しいアプリケーションを簡単に作成でき、vue および webpack 用のプロジェクト テンプレートを自動的に生成するために使用できます。vue-cli スキャフォールディングを使用して Vue プロジェクトを構築するには、最初に Node.js と NPM 環境をインストールする必要があります。

vue-cli をインストールする

Vue-cli は、プロジェクトの構築やその他の操作に使用される公式のプロジェクト足場です。
インストールコマンド

cnpm install -g @vue/cli

インストールを確認する

vue --version
@vue/cli 4.5.8
Vue プロジェクトの作成
vue create hello-world


次に、hello-world フォルダーが表示されました。このフォルダーには、教授がデフォルトで呼び出す App.vue や main.js などのいくつかの構成ファイルとプログラム ファイルが含まれていました。

Vue プロジェクトを実行する

cd で hello-world フォルダーに移動し、次のコマンドを実行してローカル ノード サーバーを起動し、Vue プロジェクトを実行します。

npm run serve

その後、対応するサービスが起動され、アドレスとポートにアクセスすることでデフォルトページが表示されます。

Vue プロジェクトのデプロイメントのサポート

デプロイメントについて説明しましたが、デフォルトのデプロイメントでは npm/cnpm (次のコマンド) が使用され、出力コンテンツは /dist ディレクトリーにあります。

npm run build

パラメーターを使用して設定すると、さまざまなニーズを満たすコンパイル結果が得られます。パッケージ化されたファイルはサーバーに展開できます。

3. Vueプロジェクトのディレクトリ構造

テンプレートプロジェクトの構造
§──node_modules
├──public
│ ├── favicon.ico: タブアイコン
│ └──index.html: メインページ
§── src
│ ├── アセット: 静的リソースの保存
│ │ └─ ─ ロゴ.png
│ │─ コンポーネント: コンポーネントを格納
│ │ └─ HelloWorld.vue
│ │─ App.vue: すべてのコンポーネントを要約
│ │─ main.js: エントリ ファイル
├─ .gitignore: git バージョン管理 無視される設定
§── babel.config.js: babel 設定ファイル
├── package.json: アプリケーション パッケージ設定ファイル
§── README.md: アプリケーション説明ファイル
§── package-lock.json: パッケージ バージョン管理ファイル

  • .eslintrc.js: これは、検証ルールを管理できる eslint 構成ファイルです。
  • babel.config.js: これは Babel の構成ファイルで、開発時に JavaScript の新機能を使用し、実稼働環境のブラウザー間で実行できる古い構文コードに変換できます。ここで追加の babel プラグインを設定することもできます。
  • .browserslistrc: これは Browserslist の構成ファイルであり、どのブラウザをサポートおよび最適化する必要があるかを制御するために使用できます。
  • public: このディレクトリには、Webpack のコンパイル中に処理されないファイルがいくつか含まれています (1 つの例外を除き、index.html には処理が行われます)。
    • favicon.ico: これはプロジェクトのアイコンであり、現在は Vue のロゴです。
    • Index.html: これはアプリケーションのテンプレート ファイルです。Vue アプリケーションはこの HTML ページを通じて実行され、lodash のテンプレート構文を通じてこのファイルに挿入することもできます。
      注: これは、ページの最終表示の管理を担当するテンプレートではなく、Vue アプリケーションの外部の静的 HTML ファイルです。通常、このファイルは、いくつかの高度な機能が使用される場合にのみ変更されます。
  • src: これは、Vue アプリケーションのコア コード ディレクトリです。
    • main.js: アプリケーションのエントリーファイルです。現在、Vue アプリケーションを初期化し、index.html ファイル内のどの HTML 要素にアプリケーションをマウントするかを指定します。通常、グローバル コンポーネントを登録したり、追加の Vue ライブラリを追加したりするいくつかの操作も実行されます。
    • App.vue: これは Vue アプリケーションのルート ノード コンポーネントです。Vue コンポーネントの詳細については、以下をお読みください。
    • コンポーネント: これはカスタム コンポーネントを保存するために使用されるディレクトリです。現在、サンプル コンポーネントが存在します。
    • assets: このディレクトリはCSSや画像などの静的リソースを格納するために使用されますが、コードディレクトリに属しているため、webpackで操作および処理できます。つまり、Sass/SCSS や Stylus などの前処理を使用できるということです。

4. 成分の分類

一般に、コンポーネントは次の 3 つのカテゴリに大まかに分類できます。

  • ページレベルのコンポーネント。
  • ビジネスで再利用可能な基本コンポーネント。
  • ビジネスとは関係のない独立したコンポーネント。
ページレベルのコンポーネント

ページレベルのコンポーネント (通常はページ ディレクトリ内の .vue コンポーネント) は、プロジェクト全体を構成する大きなページです。通常、外部インターフェイスはありません。私たちが普段開発するときは主にこのようなコンポーネントを書きます。以下に示すように: ページの下の Home.vue (ホームページ) と About.vue (当社について) はすべて独立したページおよびコンポーネントです。

pages
├─ About.vue
└─ Home.vue
ビジネスで再利用可能な基本コンポーネント

このタイプのコンポーネントは通常、ビジネス内のさまざまなページで再利用されるコンポーネントであり、通常、コンポーネント ディレクトリに書き込まれ、インポートを通じて各ページで使用されます。このタイプのコンポーネントは通常、テイクアウトの各ページで使用されるスコアリング システムなど、特定の機能を実装します。この部分はスコアリング機能を実現でき、独立したビジネスコンポーネントとして記述することができます。たとえば、次のコンポーネントの Star.vue はビジネス コンポーネントです。このタイプのコンポーネントの作成には、通常、コンポーネントで一般的に使用されるプロップ、スロット、カスタム イベントが含まれます。

components
└─ Star.vue
ビジネスとは関係のない独立したコンポーネント

このようなコンポーネントは通常、ビジネス機能とは何の関係もない独立したコンポーネントです。このようなコンポーネントは通常、さまざまなビジネス コンポーネントやページ コンポーネントの基本コンポーネントとして使用されます。市場で人気のある ElementUI と iview に含まれるコンポーネントはすべて独立したコンポーネントです。リッチテキストエディタなど、自分で定義した独立したコンポーネントの場合、通常はutilsディレクトリに記述されます。

10. Vueルーティング

1. Vue ルーティングを始める

Vue Router は、Vue.jsの公式ルーティング マネージャーです。Vue.js のコアと深く統合されているため、単一ページのアプリケーションを簡単に構築できます。

プロジェクトで使用するステップは 4 つありますvue-router。

  1. vue-routerプラグインをインポートします。
  2. プラグインを使用します。
  3. ルーティングインスタンスを作成し、ルーティング情報を設定します。
  4. ルート インスタンスを Vue のインスタンスに追加します。

main.js

// 引入 vue-router
import VueRouter from 'vue-router'
import Home from './views/Home'
import About from './views/About'

// 使用 VueRouter 插件
Vue.use(VueRouter)

// 添加路由信息
const router = new VueRouter({
    routes: [
        { path: '/', redirect: '/home', },
        { path: '/home', component: Home },
        { path: '/about', component: About },
    ]
})

new Vue({
    router,  // 纳入到 Vue 的实例中
    render: h => h(App),
}).$mount('#app')

app.vue

<template>
    <div>
        <ul>
            <li>
                <router-link to="/home">Home</router-link>
            </li>
            <li>
                <router-link to="/about">About</router-link>
            </li>
        </ul>
        <router-view></router-view>
    </div>
</template>

2. ルーターリンクのパラメータ

<router-link>重要なパラメータがいくつかあります。

  • active-class現在アクティブなルートのスタイル。
  • tagデフォルトの a タグを指定したタグに置き換えます。
  • exact-active-class完全一致ルート。
  • replace現在のルーティング情報を履歴に保存しないでください。
  • eventルートをトリガーするイベント。デフォルトはクリック イベントです。

3. プログラムによるルーティング

create a タグを使用してナビゲーション リンクを定義することに加えて、ルーターのインスタンス メソッドを使用してコードを記述して実装することもできます。Vue インスタンス内で、ルーティング インスタンスを呼び出すことで<router-link>アクセスできます。これは次と同等です。次のプログラムによるルーティング メソッド:$routerthis.$router.push<router-link to="" />

  • 特定のパスへのpush()リクエスト
  • replace() は特定のパスへのリクエストを実行し、履歴などの新しいレコードは追加しません
  • go(n) 前方または後方、一般的には使用されません
goto(p, n) {
    /**
    * 通过路径的方式实现路由的跳转，catch(() => {}) 主要的目的是为了不出现当
    * 用户点击重复的路由而在浏览器端出现的错误
    */
    // this.$router.push(p).catch(() => { })

    // 也可以通过组件的名字实现跳转
    // this.$router.push({name: n}).catch(() => { })

    // 通过组件的名字实现页面的跳转，但是不保存历史记录
    this.$router.replace({ name: n }).catch(() => { })
}

4. ルーティングのネスト

実際のアプリケーション インターフェイスは通常、多層のネストされたコンポーネントで構成され、特定の親レベルのルートの下に属性を追加することによってchildren複数のサブルーティング情報が含まれます。

const router = new VueRouter({
    routes: [
        { path: '/', component: Index, name: 'index' },
        {
            path: '/home',
            component: Home,
            name: 'home',
            // 添加子路由信息
            children: [
                { path: '', redirect: 'user' },
                { path: 'student', component: Student },
                { path: 'user', component: User }
            ]
        },
        { path: '/about', component: About, name: 'about' },
    ]
})

5. パラメータの受け渡し

あるルートから別のルートにジャンプするときは、ユーザーの詳細をクエリするなど、パラメーターを運ぶ必要があることがよくあります。

動的ルーティングパラメータ

ルータの設定では、path値を固定してハードコーディングして記述しますが、場合によってはパスを多様化することができます。たとえば、IDを変更して特定の値の詳細情報を問い合わせたい場合、動的ルーティングを使用すると、その構文は以下に示すように非常に単純になります。

// ---------------------------路由配置-------------------------------
{ path: 'detail/:id', component: Detail, name: 'about-detail' }

// ---------------------------路由跳转-------------------------------
goto(n) {
    // 如下两行代码，意思是一样的，如果不写，默认就是path
    // this.$router.push(`/about/detail/${n}`).catch(() => { })
    // this.$router.push({ path: `/about/detail/${n}` }).catch(() => { })

    // 使用params参数的方式，必须使用组件名
    this.$router.push({ name: 'about-detail', params: { id: n } })
}

// ----------------------------页面取值-------------------------------
data() {
    return {
    	id: ''
    }
},
created() {
	this.id = this.$route.params.id
}

上記のメソッドでは、props値を取得する方法を使用することを公式が推奨しています。これにより、値の取得方法が実現され、$route からの切り離しが実現されます。

// ---------------------------路由配置-------------------------------
{ path: 'detail/:id', component: Detail, name: 'about-detail',props: true }

// ---------------------------路由跳转-------------------------------
goto(n) {
    // 如下两行代码，意思是一样的，如果不写，默认就是path
    // this.$router.push(`/about/detail/${n}`).catch(() => { })
    // this.$router.push({ path: `/about/detail/${n}` }).catch(() => { })

    // 使用params参数的方式，必须使用组件名
    this.$router.push({ name: 'about-detail', params: { id: n } })
}

// ----------------------------页面取值-------------------------------
export default {
	// props中的值要与路由配置中的id对应
	props: ['id']
}
クエリパラメータ

クエリパラメータは実際にはURLアドレスにパラメータを運びます。

// ---------------------------路由配置-------------------------------
{ path: 'detail', component: Detail, name: 'about-detail'}

// ---------------------------路由跳转-------------------------------
goto(n) {
    // 可以在路径中直接携带
    // this.$router.push({ path: `/about/detail?id=${n}` })

    this.$router.push({
        //path: '/about/detail',  
        // 可以为路径也可以是名字
        name: 'about-detail',
        query: { id: n }
    })
}

// ----------------------------组件中取值-------------------------------
created() {
    this.id = this.$route.query.id
}
パラメータを定義する

定義パラメータは、ルーティング設定ファイルに記述される固定データでありmeta、props

私たちが直面している問題

ユーザーがデータを切り替える場合、コンポーネントは再利用されるため、ユーザーが渡した値は取得できません（つまり、同じルートでコンポーネントが破棄されることはありません）。watchと を使用してbeforeRouterUpdateデータを取得できます。

// watch 的方式实现数据切换的时候，参数的获取
watch: {
    // 获取直接监听 $route 也可以
    '$route.params': function (newVal) {
    	this.id = newVal.id
    }
}

// ----------------------使用beforeRouterUpdate的方式获取----------------
// to表示到哪里去，from从哪里来，next是个函数，表示接着往下走
beforeRouteUpdate(to, from, next) {
    this.id = to.params.id
    next()  // 一定要调用 next() 方法
}

6. ルーティングガード

ルーティング ガードは、ルーティング変更のためのコールバック フック関数であり、これらの関数内でプロセス制御、権限検証などの何らかの作業を実行すると判断できます。ルーティング ガードには、コンポーネント ルーティング ガードとグローバル ルーティング ガードが含まれます。

コンポーネントルーティングガード

コンポーネント ルート ガードは、いくつかのコンポーネント ライフサイクル機能にマップされます。

  • beforeRouteEnterルートがコンポーネントに入る準備ができたら、此时组件还没有被创建(实例的生命周期还没有开始)このメソッドが実行されます。ここで、ユーザーがページに入ることができるかどうかを判断できます。
  • beforeRouteUpdate, ページ上でルートが更新されるとこのメソッドが呼び出されますが、このメソッドの制限は、同じコンポーネントの下でルートの切り替えを実現できることです。
  • beforeRouteLeave、ページが次のルートに入ろうとしているときに、このメソッドが呼び出されます、理解してください。

注意上面三个方法都需要调用 next() 方法实现流程的继续

// 进入到对应的路由还没到达组件
beforeRouteEnter(to, from, next) {
    console.log('进入路由');
    next()
},
// 路由更新
beforeRouteUpdate(to, from, next) {
    console.log('更新路由');
    next()
},
// 路由退出
beforeRouteLeave(to, from, next) {
    console.log('退出');
    next()
}
グローバル ルーティング ガード (キー)

グローバル ルート ガードは、すべてのルートが実行するフック関数です。VueRouter のインスタンスに追加されます。最も一般的に使用されるメソッドは次のとおりです。

beforeEach: ルーティングインスタンス内に該当するルートが見つかった場合に実行します。

router.beforeEach((to, from, next) => {
    console.log('全局路由守卫');
    next()
})

11. 状態管理に Vuex を使用する

Vuex は、コンポーネントのグローバルな状態 (データ) 管理を実現するメカニズムであり、コンポーネント間のデータ共有を容易にします。

1. Vuex を使用して状態を均一に管理する利点

Vuex で共有データを一元管理できるため、後の開発やメンテナンスが容易 Vuex でコンポーネント間でのデータ共有を効率的に実現し、開発効率を向上 Vuex に保存されたデータは応答性が高く、データやデータをリアルタイムに保持できる ページ同期一般に、Vuex に保存する必要があるのはコンポーネント間で共有されるデータだけですが、コンポーネント内のプライベート データについては、コンポーネント自体のデータに保存されます。

2.Vuexの使用

Vuex の依存関係をインストールする
npm install vuex --save
Vuex パッケージをインポートする
import Vuex from 'vuex'
Vue.use(Vuex)
ストアオブジェクトを作成する
const store = new Vuex.store({
// state 中存放的就是全局共享的数据
    state: {
        count: 0
    }
})
vue インスタンスでストア オブジェクトをハングします。
new Vue({
	el: '#app',
	render: h => h(app),
	router,
	// 将创建的共享数据对象，挂在到 Vue 全局实例中
	// 所有的组件，就可以直接从 store 中获取全局的数据了
	store,
})

3. Vuex の核となるコンセプト

  • 状態
    オブジェクト タイプは、インスタンスのデータ属性と同様に、データを保存します。
  • getters
    オブジェクト タイプ。インスタンスの計算されたプロパティと同様です。
  • ミューテーション
    オブジェクト タイプ。インスタンス メソッドに似ていますが、非同期メソッドを処理できません。
  • アクション
    オブジェクト タイプは、インスタンスのメソッドと同様に、非同期メソッドを処理できます。
  • モジュールの
    オブジェクト タイプ。状態の内容が多い場合、この属性によって小さなモジュールに分割され、各モジュールには独自の状態、突然変異、アクション、ゲッターがあります。
州

State は唯一のパブリック データ ソースを提供し、すべての共有データは State of the Store に共通に保存される必要があります。

// ストア データ ソースを作成し、固有の公開データを提供します

const store = new Vuex.Store({
	state: {
		count: 0
	}
})

4.ゲッター

Vuex を使用すると、ストア内で「ゲッター」 (ストアの計算されたプロパティと考えることができます) を定義できます。計算されたプロパティと同様に、ゲッターの戻り値は依存関係に従ってキャッシュされ、依存関係の値が変更された場合にのみ再計算されます。
つまり、状態の値に対して複雑な計算を実行するときに、このプロパティを呼び出してゲッターで計算を実行し、計算された値を返すことができます。
例えば：

getters: {
  doneTodos: state => {
      return state.todos.filter(todo => todo.done)
    }
  }

この計算では、フィルタリングされたトークン値が返されます。

ゲッターは、store.getter オブジェクトとして公開され、プロパティとして値にアクセスできます。

これは、vuex を登録すると、コンポーネント内のゲッターにアクセスして、計算された状態値を取得できることを意味します。例えば：

store.getters.doneTodos // [{ id: 1, text: '...', done: true }]

5.突然変異

Vuex ストアの状態を変更する唯一の方法は、ミューテーションを送信することです。Vuex のミューテーションはイベントと非常に似ています。各ミューテーションには文字列イベント タイプ (タイプ) とコールバック関数 (ハンドラー) があります。

***注意: ***状態マネージャーの値を変更する唯一の方法は、次のようなミューテーションを使用することです。

mutations: {
    increment (state) {
      // 变更状态
      state.count++
    }
  }

次に、コンポーネント内でこのメソッドを呼び出します

store.commit('increment')

このとき、incrementメソッドを実行してカウントに1を加算するのと同じになります。

6.アクション

アクションは突然変異に似ていますが、違いは次のとおりです。

  • アクションは、状態を直接変更するのではなく、突然変異を送信します。
  • アクションには任意の非同期操作を含めることができます。

これが簡単な例です

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  },
  actions: {
	    incrementAsync ({ commit }) {
	    setTimeout(() => {
	      commit('increment')
	    }, 1000)
	  }
  }
})

アクションは、store.dispatch メソッドによってトリガーされることに注意してください。

コンポーネントでは以下を使用します。

store.dispatch('incrementAsync', {
  amount: 10
})

アクション内で非同期操作を実行できます。

7.モジュール

単一の状態ツリーを使用するため、アプリケーションのすべての状態が比較的大きなオブジェクトに集中します。アプリケーションが非常に複雑になると、ストア オブジェクトが非常に肥大化する可能性があります。
上記の問題を解決するために、Vuex ではストアをモジュールに分割できます。各モジュールには独自の状態、ミューテーション、アクション、ゲッター、さらにはネストされたサブモジュールがあり、上から下まで同じ方法で分割されています。

このような：

const moduleA = {
  state: { ... },
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}

const moduleB = {
  state: { ... },
  mutations: { ... },
  actions: { ... }
}

const store = new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
  }
})

store.state.a // -> moduleA 的状态
store.state.b // -> moduleB 的状态

12. Vue の拡張

  • vue-cli: vue 脚手架
  • vue-resource(axios): ajax リクエスト
  • vue-router: ルーティング
  • vuex: 状態管理
  • vue-lazyload: 画像の遅延読み込み
  • vue-scroller: ページのスライドに関連する
  • mint-ui: VueベースのUIコンポーネントライブラリ(モバイル端末)
  • element-ui: VueベースのUIコンポーネントライブラリ(PC側)

参考資料:
Vue チュートリアル Yuque
Vue チュートリアル Youdao Cloud
Vue チュートリアル Github
Vue コンポーネント開発
Vue シリーズ—Vue コンポーネント実装原則 (8) Vue
完全チュートリアル (実践)
Vue 超詳細チュートリアル、Vue プロジェクトの完了方法を教えます
Vue コンポーネント
Vue (9) —モジュールとコンポーネント、非単一ファイル コンポーネント、単一ファイル コンポーネント
vue コンポーネント プログラミングでは
、Vuex の使い方を教えます。サルでも理解できるチュートリアルです。

おすすめ

転載: blog.csdn.net/unreliable_narrator/article/details/125194046
おすすめ
ランキング
チップ製造の詳しい説明 エッチング原理 学習メモ(5)
StringBuilderを持つコンストラクタがそうではないのはなぜStringクラスのコンストラクタメソッドは、パラメータのStringBufferの使用の同期ブロックでいますか？
[Done] exited with code=3221225477 in 34.566 seconds
并行端口（Parallel Port）
推奨システム評価試験
3.22のノートが質問を行います
手紙の面白い組み合わせ
Flutter ポッドのインストールが報告されました [!] プロジェクト ディレクトリ ソリューションに Podfile が見つかりません
PromSQL の実践的なクエリ ステートメントの概要 (常に更新)
使用dedecms織ラベルはarclist夢
アーカイブ
もっと
2024-04-30(35)
2024-04-29(5)
2024-04-28(12)
2024-04-27(29)
2024-04-26(22)
2024-04-25(31)
2024-04-24(30)
2024-04-23(31)
2024-04-22(5)
2024-04-21(0)

コードワールド

© 2018 codetd.com