【Vueインタビュー・簡単編その2】httpのカテゴリとは、httpの5つのカテゴリとは、vue2のルーティング、いくつかのジャンプ方法とパラメータの渡し方、httpとhttpsの違い、コンポーネントの通信方法、ディレクティブ カスタム命令

http のカテゴリとは? http の 5 つのカテゴリとは?

タイプ	理由句	ノート
1XX	情報提供	受け入れられた要求が処理されていることを示す情報ステータス コード
2XX	成功	リクエストが正常に処理されたことを示す成功ステータス コード
3XX	リダイレクション	クライアントが追加の操作を実行する必要があることを示すリダイレクト ステータス コード
4XX	クライアント エラー	サーバーがリクエストを処理できないことを示すクライアント エラー ステータス コード
5XX	サーバーエラー	サーバー エラー ステータス コード。サーバーでリクエストの処理中にエラーが発生したことを示します。

vue2ルーティング

ルーティング分類

1. バックエンド ルーティング

   1. 理解:値は関数であり、クライアントから送信されたリクエストを処理するために使用されます
   2. 作業プロセス: サーバーがリクエストを受信すると、リクエスト パスに従って一致する関数を見つけてリクエストを処理し、レスポンス データを返します。

2. フロントエンド ルーティング

   1. 理解:値は、ページのコンテンツを表示するために使用されるコンポーネントです
   2. 作業プロセス: ブラウザのパスが変更されると、対応するコンポーネントが表示されます

アクティブクラスの構成可能な強調表示スタイル

<router-link to="/index" active-class="active">选中后的颜色</router-link>

いくつかのジャンプ方法、パラメーターの受け渡し方法

1.宣言型ルーターリンク

 < router-link to="/me"> 我的 < /router-link>
  < router-link to="//me?id=15265"> 我的 < /router-link>
  < router-link to="//me?id=  **:id** "> 我的 < /router-link>

2. 機能的な this.$router.push('/me')

パラメータなし

this.$router.push('/home')
this.$router.push({
    
    name:'home'})
this.$router.push({
    
    path:'/home'})

パラメータ付き

クエリ パラメータ

query は GET リクエストに相当します. ページがジャンプすると、
アドレス バーにリクエスト パラメータ uery pass パラメータが表示されます**

this.$router.push({
    
    name:'home',query: {
    
    id:'1'}})
this.$router.push({
    
    path:'/home',query: {
    
    id:'1'}})

// html 取参  $route.query.id
// script 取参  this.$route.query.id

パラメータを渡す

params は POST リクエストと同等であり、パラメーターはアドレス バーに表示されません。

his.$router.push({
    
    name:'home',params: {
    
    id:'1'}})  // 只能用 name

// 路由配置 path: "/home/:id" 或者 path: "/home:id" ,
// 不配置path ,第一次可请求,刷新页面id会消失，配置path,刷新页面id会保留

// html 取参  $route.params.id
// script 取参  this.$route.params.id

ルートへのジャンプにはパスメソッドを使用します. パスはパラメータを無視するため, パスとパラメータを併用することはできません.
ルートジャンプを実現するには, name と params メソッドを使用することをお勧めします.

// 字符串，不带参数
this.$router.push('home')

// 对象，不带参数
this.$router.push({
    
     path: 'home' })

// params（推荐）：命名的路由，params 必须和 name 搭配使用
this.$router.push({
    
     name:'user',params: {
    
     userId: 123 }})

// 这里的 params 不生效
this.$router.push({
    
     path:'/user',params: {
    
     userId: 123 }})

// query：带查询参数，变成 /register?plan=private
this.$router.push({
    
     path: 'register', query: {
    
     plan: 'private' }})

//meta方式：路由元信息
export default new Router({
    
    
    routes: [
        {
    
    
            path: '/user',
            name: 'user',
            component: user,
            meta:{
    
    
                title:'个人中心'
            }
        }
    ]
})

通过 $route 对象获取，注意是route，没有r ,不是router
this.$route.params
this.$route.query
this.$route.meta

3.this.$router.replace()

this.$router.replace('/home')
this.$router.replace({
    
    name:'home'})
this.$router.replace({
    
    path:'/home'})

4.this.$router.go(n)

n ページを前方または後方にジャンプします。n は正または負の整数にできます 1

this.$router.go(-1)  // 返回上一页
this.$router.go(1)  //前进一页

5. ジャンプとみなされますが、ジャンプを指定することはできません

this.$router.back() // 返回上一页
this.$router.forwarp()  //前进一页

ルートとルーターの違い

$route : ルーティング情報オブジェクト、読み取り専用オブジェクト

$router : ルーティング操作オブジェクト、書き込み専用オブジェクトです

httpとhttpsの違いは何ですか

1. セキュリティ — httpsには、http よりも SSL プロトコルの追加レイヤーがあり、ウェブサイトとクライアントの間で送信されるデータを暗号化します。データ漏洩の問題はありません。

2. 応答速度 -理論的には、http は接続を確立するために 3 つのハンドシェイク、つまり 3 つのパケットしか必要としないため、http はより高速に応答します。

3. ポート — httpと https は 2 つのまったく異なる接続方法を使用します。前者はポート 80を使用し、後者はポート 443 を使用します。

4. リソースの消費 - https は SSL の上に構築された http プロトコルであるため、httpsはより多くのサーバー リソースを消費します。

5. 料金が異なります - https はWeb サイト用の ssl 証明書を購入して構成する必要があり、一定の料金が発生します。

6. 表示方法 - http はブラウザによって安全でない、 https は安全

コンポーネントの通信方法

1.父から息子へ

Vue.component(){} で、テンプレートとデータと同じレベルで props を追加して、渡された値を受け入れます
。

親コンポーネント

//父组件
<template>
  <div>
    <h1>{
    
    {
    
     title }}</h1>
    <h1>{
    
    {
    
     titleted }}</h1>
                                         <!--    传入字符串-->
    <SonView @getMessage="showMsg" sontitleted="sontitleted" /> 
                                          <!--    传入变量-->
    <SonView @getMessage="showMsg" :sontitleted="sontitleted" />

  </div>
</template>

export default {
    
    
  name: "FatherView",
  components: {
    
    SonView,},
  data() {
    
    
    return {
    
    
      title: '我是父组件',
      titleted: '我是子组件',
      sontitleted: '我是父组件传参给sonview',
    }
  },
  methods: {
    
    
    showMsg(title) {
    
    
      console.log(title)
      this.title = title;
    }
  },
}

サブアセンブリ

受け入れる 3 つの方法:

1. 小道具：['xxx']
2. 小道具:{xxx:文字列}
3. props:{ xxx:{ type:String, //必要な型:true, //必須default:'Lao Wang' //デフォルト値} }
   
   
   
   
   
   

<template>
  <div>
    <h3>我是SonView子组件</h3>
    <h3>{
    
    {
    
    sontitleted}}</h3>
    <h3>我要给
      <button @click="clickEvent()"> 传给twosonview组件</button>
    </h3>
  </div>
</template>

<script>
import EventBus from '@/event-bus/event-bus'

export default {
    
    
  name: "SonView",
  data() {
    
    
    return {
    
    
      title: '456'
    }
  },
  //灵活有默认参数默认参数
  // props:{
    
    
  //   type:String,
  //   sontitleted:{
    
    
  //     type:String,
  //     default:'默认父组件传参'
  //   }
  // },
  
  //方便 单方面接收
  // props:['sontitleted'],
  props:{
    
    sontitleted:String},
  //将编译好的html挂载到页面完成后执行的钩子函数
  //页面从内存中渲染到html的过程
  created() {
    
    
    console.log('getMessage', this)
    this.$emit('getMessage', '我是SonView子组件传过来的父组件！自动传')
  }
}
</script>

<style scoped>

</style>

2.子传父

カスタム イベント: @on、@emit は、子から親への通信を実装できます。つまり、vm.$emit( event, arg )

$emit はカスタム イベント イベントにバインドされています。このステートメントが実行されると、パラメーター arg が親コンポーネントに渡され、親コンポーネントは @event を介してパラメーターをリッスンして受け取ります。

//父组件
<template>
  <div>
    <h1>{
    
    {
    
    title}}</h1>
    <h1>{
    
    {
    
    titleted}}</h1>
    <SonView @getMessage="showMsg"/>
    <TwoSonView @getMessage="showTitle"/>
  </div>
</template>

<script>
import SonView from "@/views/SonView";
import TwoSonView from "@/views/TwoSonView";

export default {
    
    
  name: "FatherView",
  components: {
    
    SonView,TwoSonView},
  data() {
    
    
    return {
    
    
      title: '我是父组件',
      titleted:'我是子组件'
    }
  },
  methods: {
    
    
    showMsg(title) {
    
    
      console.log(title)
      this.title = title;
    },
    showTitle(data){
    
    
      console.log(data)
      this.titleted = data;
    }
  }
}
</script>

<style scoped>

</style>

注意：

コンパイルされた html をページにマウントした後に実行されるグローバル スタイル マウント フック関数に影響を与えないようにするためのスコープ スタイル分離
- メモリから html にページをレンダリングするプロセス

パラメータをライフサイクルに渡す

//子组件
<template>
  <div>
    <h3>我是SonView子组件</h3>
  </div>
</template>

<script>
export default {
    
    
  name: "SonView",
  data() {
    
    
    return {
    
    
      title: '456'
    }
  },
  //将编译好的html挂载到页面完成后执行的钩子函数
  //页面从内存中渲染到html的过程
  mounted () {
    
    
    console.log('getMessage',this)
    this.$emit('getMessage', '我是SonView子组件传过来的父组件！自动传')
  }
}
</script>

<style scoped>

</style>

クリックイベントを介してパラメーターを渡す

//子组件
<template>
  <div>
    <h3>TwoSonView第二个子组件</h3>
    <button @click="clickFun()">子组件点击传参</button>
  </div>
</template>

<script>
export default {
    
    
  name: "TwoSonView",
  methods: {
    
    
    clickFun(){
    
    
      console.log('TwoSonView子组件打印')
      this.$emit('getMessage', '我是TwoSonView子组件传过来的父组件！点击传')
    }
  }
}
</script>

<style scoped>

</style>

変身前

変身後

3. Vuex コア

状態: すべてのコンポーネントの共有状態を保存します
ゲッター: 状態値に似た計算されたプロパティ
ミューテーション: 状態変更リスナーとレコーダーを含む State の状態値を変更する唯一の方法
アクション: 状態値を非同期的に処理するために使用されます後で変更
モジュールを呼び出す: State オブジェクトが比較的大きい場合、State を複数のモジュール モジュールに分割できます。

ページについて

//About页
<template>
  <div class="about">
    <h1>This is an about page</h1>
    <h3>{
    
    {
    
     $store.state.user.name }}</h3>
    <h3>{
    
    {
    
     $store.state.user.num }}</h3>

    <div>
      <button @click="clickFun"> 点击vuex加加</button>
    </div>
  </div>
</template>
<script>
export default {
    
    
  name: 'About',
  data() {
    
    
    return {
    
    
      num: 1
    }
  },
  methods: {
    
    
    clickFun() {
    
    
      this.$store.commit('stateClickFun', this.$store.state.user.num + this.num)
    }
  },
  created() {
    
    
    console.log('store', this.$store.state.user)
  }
}
</script>

ストアファイル内のindex.js

//引入Vue核心库
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//应用Vuex插件
Vue.use(Vuex)


//创建并暴露store
export default new Vuex.Store({
    
    
    state: {
    
    
        user: {
    
    
            name: '我是state',
            num: 50
        }
    },
    mutations: {
    
    
        stateClickFun(state, data) {
    
    
            // console.log(state,data)
            state.user.num = data
        }

    },
    actions: {
    
    },
    getters: {
    
    },
    modules: {
    
    }
})

メインファイルでは、インポートすることで直接使用できます

import store from './store'		//这里因为vue中的定义配置,自动寻找index.js文件

new Vue({
    
    
  store,
}).$mount('#app')

4. イベントバス

• 小規模なプロジェクトでは、vuex を導入する必要がない場合に eventBus を使用できます。

• 実装の考え方も分かりやすく、通信が必要な2つのコンポーネントに同じ新しいvueインスタンスを導入し、2つのコンポーネントでこのインスタンスのイベントトリガーとリスナーを呼び出すことで通信を実現します。

srcディレクトリにevent-busフォルダーのevent-bus js ファイルを作成します。

イベントバスファイルの内容

// 引入vue，创建一个vue实例，并导出这个实例
import Vue from 'vue'
export default new Vue()

クリックイベントを介してパラメーターを渡す

//发送子组件
<template>
  <div>
    <h3>我是SonView子组件</h3>
    <h3>我要给
      <button @click="clickEvent()"> 传给twosonview组件</button>
    </h3>
  </div>
</template>

<script>
import EventBus from '@/event-bus/event-bus'

export default {
    
    
  name: "SonView",
  methods: {
    
    
    clickEvent() {
    
    
      // 通过vue实例方法$emit发送事件名称和需要传递的数据
      EventBus.$emit('msgAHandler', 'hello world')
    }
  }
}
</script>

<style scoped>

</style>

//接收的子组件
<template>
  <div>
    <h3>{
    
    {
    
    msg}}</h3>
  </div>
</template>

<script>
import EventBus from '@/event-bus/event-bus'

export default {
    
    
  name: "TwoSonView",
  data() {
    
    
    return {
    
    msg: '我要接受sonview组件的参数'}
  },
  created() {
    
    
    // 通过vue实例方法$on监听到事件和接受到数据
    // 接收数据的组件，通常挂载监听在vue生命周期created和mounted当中
    EventBus.$on('msgAHandler', (value) => {
    
    
      this.msg = value
    })
  }
}
</script>

<style scoped>

</style>

5.ref

dom 要素を取得する

1. dom ノードに ref 属性を記録することは、dom ノードに名前を付けることと理解できます。
   dom ノードに ref 属性を記録することは、dom ノードに名前を付けることと理解できます。
   <div><h5>我是普通标签</h5></div>
<div ref="refChild" id="refChild"><h5>我是普通ref</h5></div>

2. ref を追加すると、$refs 属性にこの要素への参照が追加されます。

3. vue インスタンスの $refs プロパティを介して、この dom 要素を取得します。

注意：

created は、domノードを取得できず、beforeMount の後のノードのみを取得できることを意味します。

<template>
  <div>
    <div><h5>我是普通标签</h5></div>
    <div ref="refChild" id="refChild"><h5>我是普通ref</h5></div>

  </div>
</template>

<script>
export default {
    
    
  name: "FatherView",

  created() {
    
    
    console.log(document.getElementById('refChild'))  //拿不到ref created也就是拿不到dom节点
    console.log(this.$refs)
  },
  mounted() {
    
    
    console.log(document.getElementById('refChild'))
    console.log(this.$refs)
    this.$refs.refChild.style.color="red"
  }

}
</script>

<style scoped>

</style>

コンポーネントを取得

1.クリックイベントによるガガ

//父组件
<template>
  <div>
    <ThereSonView ref="thereSon"/>
    <button @click="jiaFun()">点击ThereSonView中的num加加</button>

  </div>
</template>

<script>
import ThereSonView from "@/views/ThereSonView";

export default {
    
    
  name: "ThereSonView",
  components: {
    
    ThereSonView},
  data() {
    
    
    return {
    
    
      number: 1,
    }
  },
  methods: {
    
    
    jiaFun() {
    
    
      console.log(this.$refs.thereSon)
      this.$refs.thereSon.num = this.$refs.thereSon.num + this.number
    }
  },
}
</script>

<style scoped>

</style>

//子组件
<template>
  <div>
    <h3>我是ThereSonView</h3>
    <h3>{
    
    {
    
     msg }}</h3>
    <h3>{
    
    {
    
     num }}</h3>

  </div>
</template>

<script>
export default {
    
    
  name: "ThereSonView",
  data() {
    
    
    return {
    
    
      msg: '我是ThereSonView的msg数据',
      num: 5,
    }
  }
}
</script>

<style scoped>

</style>

マウントによるデータの変更

//父组件
<template>
  <div>

    <div><h5>我是普通标签</h5></div>
    <div ref="refChild" id="refChild"><h5>我是普通ref</h5></div>
    
    <ThereSonView ref="thereSon"/>
    <button @click="jiaFun()">点击ThereSonView中的num加加</button>

  </div>
</template>

<script>
import ThereSonView from "@/views/ThereSonView";

export default {
    
    
  name: "ThereSonView",
  components: {
    
    ThereSonView},
  data() {
    
    
    return {
    
    
      number: 1,
    }
  },
   mounted() {
    
    
    this.$refs.refChild.style.color = "red"
    this.$refs.thereSon.msg = '通过ref改变数据'
  }
}
</script>

<style scoped>

</style>

子コンポーネントは上記と同じまま

完全なコードは、gitee Communication ブランチのcloud-comフォルダーにあります。

6.ローカルキャッシュ

1. localStorage 永続ストレージ

   • セーブデータ：localStorage.setItem(key, value)
   • データの読み取り: localStorage.getItem(key)
   • 単一データの削除: localStorage.removeItem(key)
   • すべてのデータを削除: localStorage.clear()
   • インデックスのキーを取得: localStorage.key(index)

2. sessionStorage 一時ストレージ

   • セーブデータ：sessionStorage.setItem(key, value)
   • データの読み取り: sessionStorage.getItem(key)
   • 単一データの削除: sessionStorage.removeItem(key)
   • すべてのデータを削除: sessionStorage.clear()
   • インデックスのキーを取得: sessionStorage.key(index)

拡張機能: sessionStorage と localStorage の類似点と相違点は何ですか?

• 共通点: これらはすべてブラウザ側に保存され、同じソースを持ち、クライアント側で一時的な情報を保存するために使用されるオブジェクトでもあります。それらは文字列型のオブジェクトのみを格納できます (ただし、他のネイティブ型のオブジェクトは仕様に格納できますが、これまで実装されたブラウザはありません)。
• 相違点: 2 つの主な違いは次のとおりです。localstorage は永続的なストレージであり、session storage は一時的なストレージです
  1.セッションとは、ユーザーが特定の Web サイトを閲覧するときに、Web サイトに入ってからブラウザーを閉じるまでに経過した時間を指します。seesion オブジェクトは、この期間中に保存する必要があるデータを保存するために使用できます。ライフ サイクルは現在のセッションでのみ有効です
  。閉じても、データは存在したままです。----ライフサイクルは永続的です

7. スロット - 父から息子への受け渡しに似ています

1. 機能: 親コンポーネントが html 構造を子コンポーネントの指定された位置に挿入できるようにします。これは、コンポーネント間の通信の方法でもあり
   、父组件 ===> 子组件 .

2. カテゴリ: デフォルト スロット、名前付きスロット、スコープ付きスロット

スロットは、親コンポーネントに提供される子コンポーネント内のプレースホルダーです. これは、<slot></slot> 親コンポーネントがこのプレースホルダー内の HTML やコンポーネントなどの任意のテンプレート コードを埋めることができることを意味します<slot></slot>.子コンポーネント。

1. 例として最も単純なスロット (通常のスロット) を取り上げます。サブコンポーネントにプレースホルダーを配置します。

//子组件
<template>
    <div>
        <h1>今天天气状况：</h1>
        <slot></slot>
    </div>
</template>
<script>
    export default {
    
    
        name: 'child'
    }
</script>

2. プレースホルダーに親コンポーネントのコンテンツを入力します

//父组件
<template>
    <div>
        <div>使用slot分发内容</div>
        <div>
            <child>
                <div style="margin-top: 30px">多云，最高气温34度，最低气温28度，微风</div>
            </child>
        </div>
    </div>
</template>
<script>
    import child from "./child.vue";
    export default {
    
    
        name: 'father',
        components:{
    
    
            child
        }
    }
</script>

要約: 子コンポーネントがスロットを使用しない場合、親コンポーネントが子コンポーネントにテンプレートまたは html を入力する必要がある場合、それは実行できません。

2. スロットの使用法 - 名前付きスロット

説明: 名前付きスロットは、実際にはスロットに名前を付けるためのものです。子コンポーネントは複数のスロットに配置でき、さまざまな場所に配置できます。親コンポーネントがコンテンツを埋めるとき、名前に従って対応するスロットにコンテンツを埋めることができます。コードは以下のように表示されます:

1. サブコンポーネントのコードでは、2 つのスロット (ヘッダーとフッター) が設定されています。

<template>
    <div>
        <div class="header">
            <h1>我是页头标题</h1>
            <div>
                <slot name="header"></slot>
            </div>
        </div>
        <div class="footer">
            <h1>我是页尾标题</h1>
            <div>
                <slot name="footer"></slot>
            </div>
        </div>
    </div>
</template>
 
<script>
    export default {
    
    
        name: "child1"
    }
</script>
 
<style scoped>
 
</style>

2. 親コンポーネントはコンテンツで満たされ、親コンポーネントは v-slot:[name] によって対応するスロットに割り当てられます

<template>
<div>
    <div>slot内容分发</div>
    <child1>
        <template slot="header">
            <p>我是页头的具体内容</p>
        </template>
        <template slot="footer">
            <p>我是页尾的具体内容</p>
        </template>
    </child1>
</div>
</template>
 
<script>
    import child1 from "./child1.vue";
 
    export default {
    
    
        name: "father1",
        components: {
    
    
            child1
        }
    }
</script>
 
<style scoped>
 
</style>

ディレクティブ カスタム ディレクティブ

パラメータ 1 命令名 (定義には v- を付けず、使用するために v- を付けます)
パラメータ 2 オブジェクト {bind(el でバインドされた DOM 要素)}

        // 参数1 指令名字（定义不加v-，使用时加v-）
        //  参数二，对象 {bind(el绑定的dom元素)}
        Vue.directive("color", {
    
    

            bind(el, binding) {
    
    
                // console.log(el);
                // console.log(binding);
                // el.style.color = 'red'
                el.style.color = binding.value
            },
            inserted(el) {
    
    

                // 这个元素已经渲染到界面上之后执行
                // console.log(el);
            },
            // update 当元素有更新的时候执行
            update(el) {
    
    
                console.log(el);
            }

        })

Bad luck, I guess. It floats around, It’s got to land on somebody. It was my turn, that’s all. I was in the path of the tornado. I just didn’t expect the storm would last as long as it has.

运气太差，我想是。霉运四处飘荡，总会有人碰上。刚巧轮到我而已。我刚好挡了飓风的道！只是没想到这场风暴会刮这么久！