VUEの研究4

Vue.js - Day4

親コンポーネントは、サブアセンブリ値を渡します

1. コンポーネントのインスタンスに定義方法、注：使用するために必ずprops親コンポーネントからのデータ転送を定義するプロパティを

<script>
    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        msg: '这是父组件中的消息'
      },
      components: {
        son: {
          template: '<h1>这是子组件 --- {{finfo}}</h1>',
          props: ['finfo']
        }
      }
    });
  </script>

2. 使用v-bindまたは簡略化命令は、サブアセンブリにデータを渡します。

<div id="app">
    <son :finfo="msg"></son>
  </div>

値は、親サブアセンブリコンポーネントに送信しました

1. 原理：参照メソッドの親コンポーネント、方法は、内部サブアセンブリに渡され、サブアセンブリ、データが親コンポーネントに送信するながらメソッドを呼び出すときに渡されるパラメータとして、上を通過内部親コンポーネントを呼び出します。
2. 親コンポーネントの参照は、サブアセンブリメソッドに渡されたgetMsgの親コンポーネントであるmethodsに定義されたメソッド名func名呼び出しを通過するときの方法副組立方法

<son @func="getMsg"></son>

3. 内部サブアセンブリによるthis.$emit('方法名', 要传递的数据)方法の構成要素は、親にデータを渡すために使用しながら、親コンポーネントのメソッドを呼び出すこと

<div id="app">
    <!-- 引用父组件 -->
    <son @func="getMsg"></son>

    <!-- 组件模板定义 -->
    <script type="x-template" id="son">
      <div>
        <input type="button" value="向父组件传值" @click="sendMsg" />
      </div>
    </script>
  </div>

  <script>
    // 子组件的定义方式
    Vue.component('son', {
      template: '#son', // 组件模板Id
      methods: {
        sendMsg() { // 按钮的点击事件
          this.$emit('func', 'OK'); // 调用父组件传递过来的方法，同时把数据传递出去
        }
      }
    });

    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {},
      methods: {
        getMsg(val){ // 子组件中，通过 this.$emit() 实际调用的方法，在此进行定义
          alert(val);
        }
      }
    });
  </script>

データ・コンポーネントと小道具の差

コメントリストケース

目的：父と息子の運動コンポーネント間の主値渡し

使用this.$refs要素および成分を取得します

  <div id="app">
    <div>
      <input type="button" value="获取元素内容" @click="getElement" />
      <!-- 使用 ref 获取元素 -->
      <h1 ref="myh1">这是一个大大的H1</h1>

      <hr>
      <!-- 使用 ref 获取子组件 -->
      <my-com ref="mycom"></my-com>
    </div>
  </div>

  <script>
    Vue.component('my-com', {
      template: '<h5>这是一个子组件</h5>',
      data() {
        return {
          name: '子组件'
        }
      }
    });

    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {},
      methods: {
        getElement() {
          // 通过 this.$refs 来获取元素
          console.log(this.$refs.myh1.innerText);
          // 通过 this.$refs 来获取组件
          console.log(this.$refs.mycom.name);
        }
      }
    });
  </script>

ルーティングとは何ですか

1. **バックエンドルーティング：**平均ウェブサイトの場合は、すべてのハイパーリンクは、サーバに対応するリソースの全てに対応したURLアドレス、URLアドレスです。

2. **遠位ルート：**単一ページのアプリケーションでは、主に同時に異なるページ間でURLのハッシュ（＃記号）のハンドオーバにより、特性ハッシュがある：HTTPリクエストは、関連するハッシュが含まれていませんコンテンツので、ジャンプページ単一ページプログラムが主に使用されるハッシュを実現しました。

3. ハッシュを変更することにより、ページを切り替えるには、このように単一ページのアプリケーションでは、ルート（後端から経路異なる）のフロントエンドと呼ばれます。

VUEでVUE-ルータを使用します

1. VUE-ルータコンポーネントのクラスライブラリの紹介：

<!-- 1. 导入 vue-router 组件类库 -->
  <script src="./lib/vue-router-2.7.0.js"></script>

2. ナビゲートするために、ルータ・リンクアセンブリを使用します

<!-- 2. 使用 router-link 组件来导航 -->
<router-link to="/login">登录</router-link>
<router-link to="/register">注册</router-link>

3. コンポーネントにマッチした要素のルータビュー表示を使います

<!-- 3. 使用 router-view 组件来显示匹配到的组件 -->
<router-view></router-view>

4. 使用して作成したVue.extendコンポーネントを作成します。

    // 4.1 使用 Vue.extend 来创建登录组件
    var login = Vue.extend({
      template: '<h1>登录组件</h1>'
    });

    // 4.2 使用 Vue.extend 来创建注册组件
    var register = Vue.extend({
      template: '<h1>注册组件</h1>'
    });

5. ルーティング規則を定義するために、ルーティングルータのインスタンスを作成し、ルータプロパティで一致

// 5. 创建一个路由 router 实例，通过 routers 属性来定义路由匹配规则
    var router = new VueRouter({
      routes: [
        { path: '/login', component: login },
        { path: '/register', component: register }
      ]
    });

6. ルーティングルールを使用する属性のルータを使用します

// 6. 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      router: router // 使用 router 属性来使用路由规则
    });

レンダリングされたルータ・リンクのタイプを指定するには、タグの属性を使用してタグ

ルーティングリダイレクトを設定します

ルートハイライトを設定します

経路切替動的効率を提供します

ルーティングルールで定義されたパラメータ

1. ルールで定義されたパラメータ：

{ path: '/register/:id', component: register }

2. することでthis.$route.params、ルートのパラメータを取得します：

var register = Vue.extend({
      template: '<h1>注册组件 --- {{this.$route.params.id}}</h1>'
    });

使用childrenプロパティは、ルーティングの実装ネストされました

  <div id="app">
    <router-link to="/account">Account</router-link>

    <router-view></router-view>
  </div>

  <script>
    // 父路由中的组件
    const account = Vue.extend({
      template: `<div>
        这是account组件
        <router-link to="/account/login">login</router-link> | 
        <router-link to="/account/register">register</router-link>
        <router-view></router-view>
      </div>`
    });

    // 子路由中的 login 组件
    const login = Vue.extend({
      template: '<div>登录组件</div>'
    });

    // 子路由中的 register 组件
    const register = Vue.extend({
      template: '<div>注册组件</div>'
    });

    // 路由实例
    var router = new VueRouter({
      routes: [
        { path: '/', redirect: '/account/login' }, // 使用 redirect 实现路由重定向
        {
          path: '/account',
          component: account,
          children: [ // 通过 children 数组属性，来实现路由的嵌套
            { path: 'login', component: login }, // 注意，子路由的开头位置，不要加 / 路径符
            { path: 'register', component: register }
          ]
        }
      ]
    });

    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {},
      methods: {},
      components: {
        account
      },
      router: router
    });
  </script>

名前付きの古典的なレイアウトビューを達成

1. タグコードの構造：

<div id="app">
    <router-view></router-view>
    <div class="content">
      <router-view name="a"></router-view>
      <router-view name="b"></router-view>
    </div>
  </div>

2. JSコード：

<script>
    var header = Vue.component('header', {
      template: '<div class="header">header</div>'
    });

    var sidebar = Vue.component('sidebar', {
      template: '<div class="sidebar">sidebar</div>'
    });

    var mainbox = Vue.component('mainbox', {
      template: '<div class="mainbox">mainbox</div>'
    });

    // 创建路由对象
    var router = new VueRouter({
      routes: [
        {
          path: '/', components: {
            default: header,
            a: sidebar,
            b: mainbox
          }
        }
      ]
    });

    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {},
      methods: {},
      router
    });
  </script>

3. CSSスタイル：

  <style>
    .header {
      border: 1px solid red;
    }

    .content{
      display: flex;
    }
    .sidebar {
      flex: 2;
      border: 1px solid green;
      height: 500px;
    }
    .mainbox{
      flex: 8;
      border: 1px solid blue;
      height: 500px;
    }
  </style>

watchプロパティの使用

この問題を考えてみましょう：あなたが達成したい名と姓あまりにも2つのテキストボックスの内容が変更、テキストボックスの変更の完全な名前の値;（???どのように達成するかの以前の知識を持ちます）

1. モニターのdata属性の変更：

<div id="app">
    <input type="text" v-model="firstName"> +
    <input type="text" v-model="lastName"> =
    <span>{{fullName}}</span>
  </div>

  <script>
    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        firstName: 'jack',
        lastName: 'chen',
        fullName: 'jack - chen'
      },
      methods: {},
      watch: {
        'firstName': function (newVal, oldVal) { // 第一个参数是新数据，第二个参数是旧数据
          this.fullName = newVal + ' - ' + this.lastName;
        },
        'lastName': function (newVal, oldVal) {
          this.fullName = this.firstName + ' - ' + newVal;
        }
      }
    });
  </script>

2. オブジェクトの変更を監視するルーティング：

<div id="app">
    <router-link to="/login">登录</router-link>
    <router-link to="/register">注册</router-link>

    <router-view></router-view>
  </div>

  <script>
    var login = Vue.extend({
      template: '<h1>登录组件</h1>'
    });

    var register = Vue.extend({
      template: '<h1>注册组件</h1>'
    });

    var router = new VueRouter({
      routes: [
        { path: "/login", component: login },
        { path: "/register", component: register }
      ]
    });

    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {},
      methods: {},
      router: router,
      watch: {
        '$route': function (newVal, oldVal) {
          if (newVal.path === '/login') {
            console.log('这是登录组件');
          }
        }
      }
    });
  </script>

computed計算されたプロパティを使用します

1. 唯一のデフォルトのgetter計算プロパティ：

<div id="app">
    <input type="text" v-model="firstName"> +
    <input type="text" v-model="lastName"> =
    <span>{{fullName}}</span>
  </div>

  <script>
    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        firstName: 'jack',
        lastName: 'chen'
      },
      methods: {},
      computed: { // 计算属性； 特点：当计算属性中所以来的任何一个 data 属性改变之后，都会重新触发 本计算属性 的重新计算，从而更新 fullName 的值
        fullName() {
          return this.firstName + ' - ' + this.lastName;
        }
      }
    });
  </script>

2. それは定義があるgetterとsetterの特性の計算を：

<div id="app">
    <input type="text" v-model="firstName">
    <input type="text" v-model="lastName">
    <!-- 点击按钮重新为 计算属性 fullName 赋值 -->
    <input type="button" value="修改fullName" @click="changeName">

    <span>{{fullName}}</span>
  </div>

  <script>
    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        firstName: 'jack',
        lastName: 'chen'
      },
      methods: {
        changeName() {
          this.fullName = 'TOM - chen2';
        }
      },
      computed: {
        fullName: {
          get: function () {
            return this.firstName + ' - ' + this.lastName;
          },
          set: function (newVal) {
            var parts = newVal.split(' - ');
            this.firstName = parts[0];
            this.lastName = parts[1];
          }
        }
      }
    });
  </script>

watch、computedそしてmethods間のコントラスト

1. computed結果がキャッシュされた属性である、応答性の属性変更は依存しない限り、再計算だけ。使用する主なプロパティ。
2. methodsこの方法は、特定の操作、メイン書き込みのビジネスロジックを表します。
3. watchオブジェクトキーは、コールバック関数に対応する値を観察する必要性の表現です。主に、それによって特定のビジネスロジック演算を行うデータの特定の変化を監視するために使用されている。考えることができcomputed、およびmethodsそれらの組み合わせ;

nrmインスト

役割：最も一般的に使用されるNPMパッケージミラーアドレスの一部を提供するためには、私たちはすぐにパケット時間のサーバーアドレスをインストールするために切り替えることができ、
ミラーイメージは何です：元のパッケージは非常に始まり、多くの場合、外国NPMサーバーにのみ存在するが、ネットワーク上の理由によるもの今回の訪問ではない、私たちは家庭ですることができ、およびNPMの公式ウェブサイトとまったく同じサーバーを作成しますが、データはまったく同じ方法を使用して、加えて、人々どこから引き継いでいます。

1. 実行npm i nrm -gグローバルインストールnrmパッケージを、
2. 使用nrm lsビューが利用可能なすべてのカレントミラー元アドレスとカレントミラーの送信元アドレスが使用されています。
3. 使用nrm use npmまたはnrm use taobaoミラー元アドレスとスイッチ。

関連ドキュメント

1. URLハッシュ（ポンド記号）