1219クラスの概要

A、Vueの-CLI

（A）を構築するための環境を

1. インストールノード

   官网下载安装包，傻瓜式安装：https://nodejs.org/zh-cn/

2. 他のソースインストールcnpmで

   npm install -g cnpm --registry=https://registry.npm.taobao.org

3. インストールVUEプロジェクト足場

   cnpm install -g @vue/cli

4. キャッシュ処理を空にする

   npm cache clean --force  # 第2、3步安装失败时，可以清空npm缓存，再重复执行失败的步骤

作成（b）のプロジェクト

1. プロジェクトを作成します。

   # 1. 命令行式创建,自定义方式创建项目（选取Babel、Router、Vuex插件）
   vue create 项目名
   
   # 2. 命令行键入图形化界面创建
   vue ui

2. コマンドラインスタート/ストッププロジェクト

   npm run serve / cltr+c  # 要提前进入项目根目录

3. プロジェクトをパッケージング

   npm run build  # 要在项目根目录下进行打包操作

4. 依存ファイルをダウンロード

   cnpm install # 当项目移植到其他电脑时,node_moodules需要重新构建,需要通过该指令根据package.json文件下载依赖文件,

（C）プロジェクトのディレクトリ構造

• V-PROJプロジェクト

  1. node_moodules：現在のプロジェクトのすべての依存ファイルは、他のコンピュータに移植することはできません。再設定します
  2. 公衆
     1. favicon.icoを：ページタブのアイコン
     2. index.htmlを：現在のhtmlページプロジェクト
  3. SRC
     1. 資産：静的リソースIMG、CSS、JS
     2. コンポーネント：ウィジェット
     3. ビュー：ページコンポーネント
     4. App.vue：ルートコンポーネント
     5. main.js：グローバル・スクリプト・ファイル（エントリー・プロジェクト）
     6. ルータ
        • インデックス：スクリプトファイルをルーティング（コンフィギュレーションおよびルーティング接続URLのページコンポーネント間のマッピング）
     7. お店
        • index.js：倉庫スクリプトファイル（vuexプラグイン構成ファイル、データウェアハウス）
  4. package.json：ストレージ・プロジェクトの依存関係リストJSONファイル
  5. readme.md

• ポートプロファイル：vue.config.js

  // 修改端口，没有可以自己新建，选做
  module.exports={
      devServer:{
          port:8888 // 端口号
    }
  }

（D）ヴューアセンブリ（.vueファイル）

1. テンプレート：1と唯一のルートタグがあります
2. export default {}：スクリプトタグ内のエクスポートコンポーネントオブジェクト
3. scopedプロパティ：スタイル属性は、コンポーネント内のスタイルの代わりにタグを追加、唯一の作品（コンポーネントのスタイルを）スコープ
4. ルータビュータグ：ファイル内App.vueルート存在する成分、プレースホルダページコンポーネント

<template>
    <div class="test">
        
    </div>
</template>

<script>
    export default {
        name:"Test"
    }
</script>

<style scoped>
    
</style>

（E）グローバルスクリプトファイルmain.js（プロジェクト玄関）

1. import 别名 form '资源'
2. 必要：公式の擁護者の負荷に必要な静的ファイルの使用を
3. @：絶対パスは、SRCフォルダを表し
4. .$mount('app')：マウント、および同等のエルメンバーをマウント
5. レンダリング：インスタンスが作成されたVueのは、システムが自動的にトリガーがそうDOM要素のAppルートノードにレンダリングするよう、機能をレンダリング、関数のパラメータが関数で、アプリケーションによってパラメータを渡すパラメータ関数呼び出しが機能をレンダリングレンダリングレンダリング、パラメータはのcreateElementを表し

import Vue from 'vue'  // 加载vue环境
import App from './App.vue'  // 加载根组件
import router from './router'  // 加载路由环境
import store from './store'  // 加载数据仓库环境

Vue.config.productionTip = false  // 定义用户引导功能的开启，需要先定义

// 配置全局样式：@就代表src文件夹的绝对路径，官方提倡require加载静态文件
// import '@/assets/css/global.css'
require('@/assets/css/global.css')

new Vue({
    router,
    store,
    render: h => h(App)
}).$mount('#app')

リライト

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

Vue.config.productionTip = false
new Vue({
    el: '#app',
    router,
    store,
    render: function (readFn) {
        return readFn(App);
    },
});

（VI）Vueの要求のライフサイクル

1. ブラウザのユーザーの要求
2. ルータのプラグインマッピングUser.vueのページビューアセンブリ内
3. ウィジェットのレンダリングUser.vueページのコンポーネント（サブアセンブリ）の良好なコンポーネントフォルダ
4. 次いで、プレースホルダUser.vue `アセンブリにApp.vue（ルート成分）交換

第二に、ページジャンプや質量参加

（A）ジャンプページ

（1）タグジャンプ

1. ルータリンクタグ：ジャンプは、ラベルにタグ対応のルーティングを完了
2. パラメータへ：ポインタジャンプ路線へ

<!-- 该标签完成路由跳转 -->
<router-link to="路由"></router-link>

（2）論理ジャンプ

1. $router.push('路由')：ために$routerルートを追加し、ルートはジャンプを完了するために
2. $router.go(NUM)：歴史・ベースの完全な前方と後方ジャンプは、NUMが前方の整数である、NUMは戻るために負であります

（B）ルーティング構成およびパラメータ渡し

（1）は、経路設定パラメータありません

1. 通常の構成

   // router/index.js路由配置文件中
   const routes = [
     {
       path: '/',
       name: 'home',
       component: Home
     },
   ];

2. リダイレクトの設定

   // router/index.js路由配置文件中
   const routes = [
     {
       path: '/home',
       redirect:"/"
     },
   ];

（2）構成パラメータを有するルーティング

1. スプライシングされたクエリパラメータ

   // 1.页面跳转
   // (1) 标签跳转(router-link标签中)
   to="/user?pk=1"
   
   // (2) 逻辑跳转
   this.$router.push('/user?pk=1')
   
   // 2. 路由配置
   path:'/user'
   
   // 3.取值方式
   this.$router.query.pk

2. パケットタイプの既知パラメータparams

   // 1. 页面跳转
   // (1) 标签跳转(router-link标签中)
   to='/user/1'
   
   // (2) 逻辑跳转
   this.$router.push('/user/1')
   
   // 2. 路由配置
   path:'/user/:pk'
   
   // 3. 取值方式
   this.$router.params.pk

第三に、フックのライフサイクル

（A）の概念

1. 時間ノードを作成するための組立方法は、破壊をトリガーします
2. これらの方法は、コンポーネントインスタンスのメンバーであるVUE

（b）メソッド

1. beforeCreate（）{}：アセンブリのトリガーを作成する前に
2. 作成（）{}：このコンポーネントは正常にトリガ作成し、その後、このプロセスでデータを操作することができ、バックグラウンドデータを受け入れる、重要な方法
3. beforeMount（）{}：ローディング完了トリガーアセンブリの前
4. 搭載（）{}：ローディング完了トリガーアセンブリ、非常に時間データ要求を消費し、重要な方法を
5. 破壊された（）{}：正常場合、トリガーアセンブリ破壊します

四、JSプロトタイプ

（A）プロトタイプ（オブジェクト属性）

1. コンストラクタ：人気の言葉、関数は関数宣言Aであること
2. プロトタイプオブジェクト：関数を宣言した後、ブラウザが自動的に一定の規則に従ってオブジェクトを作成しますが、オブジェクトが呼び出されたプロトタイプオブジェクト。プロトタイプオブジェクトは、実際にプロトタイプオブジェクトがあり、それらのメモリに記憶されているプロパティのコンストラクタをこの属性ポイントは、このコンストラクタに、
3. 関数、コンストラクタ（宣言された関数）が存在することになる宣言した後、プロトタイプの性質を、このプロパティは、プロトタイプオブジェクトのコンストラクタに対応する点です

（ii）のプロトタイプチェーン

1. A1は、プロトタイプチェーンと呼ばれる、オブジェクトのプロトタイプオブジェクトのインスタンスの間に接続されています
2. JSオブジェクトA1を作成するときに、そこに呼び出され_proto_、組み込みのプロパティのプロトタイプオブジェクトのプロトタイプ関数オブジェクトを作成するためのポイントを使用

用（C）コード

1. コンストラクタは、prototypeプロパティを持っている、とA1 Aのコンストラクタは、彼のprototypeプロパティのうち、オブジェクトを作成することで存在していません
2. A1が、持っている__proto__このプロパティは、プロトタイプオブジェクトのコンストラクタAへ直接アクセスすることができますプロパティ、STUコールを
3. 次に、コンストラクタコンストラクタAのプロトタイプオブジェクトを介してアクセスプロトタイププロパティへのアクセスよう

• クラスのプロトタイプに相当するが、このクラスはプロパティへのアクセスのオブジェクトのうちでインスタンス化され、プロパティを追加します
• ように、また、ウィジェットを追加するグローバルな方法Axios、Axiosにプロパティに、この例のVue Vueの-CLIで添加してもよいです

function A() {}

let a1 = new A();
let a2 = new A();

// 为A类添加原型 => 类似于类属性
A.prototype.num = 100;
console.log(a1.num); // 100

// ES6语法下类
class B {
    constructor(name) {
        this.name = name;
    }
}
let b1 = new B('Tom');
let b2 = new B('Ben');
B.prototype.count = 666;
console.log(b1.count);
console.log(b2.count);


// 推导
Vue.prototype.$ajax = axios;