vue學習day5

父組件向子組件傳值

組件實例定義方式，注意：一定要使用props屬性來定義父組件傳遞過來的數據

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

使用v-bind或簡化指令，將數據傳遞到子組件中：

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

子組件中，默認無法訪問到父組件中的 data 上的數據和 methods 中的方法
子組件中的 data 數據，並不是通過父組件傳遞過來的，而是子組件自身私有的，比如：子組件通過 Ajax ，請求回來的數據，都可以放到 data 身上且 data 上的數據，都是可讀可寫的
組件中的所有 props 中的數據，都是通過父組件傳遞給子組件
props 中的數據，都是隻讀的，無法重新賦值

子組件向父組件傳值

原理：父組件將方法的引用，傳遞到子組件內部，子組件在內部調用父組件傳遞過來的方法，同時把要發送給父組件的數據，在調用方法的時候當作參數傳遞進去；
父組件將方法的引用傳遞給子組件，其中，getMsg是父組件中methods中定義的方法名稱，func是子組件調用傳遞過來方法時候的方法名稱

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

子組件內部通過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>

組件中data和props的區別

data是子組件的私有屬性，與父組件無關，可以在子組件內部修改
props是父組件傳給子組件的，在子組件中只讀無法修改

評論列表案例

目標：主要練習父子組件之間傳值

<!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>
  <script src="./lib/vue-2.4.0.js"></script>
  <link rel="stylesheet" href="./lib/bootstrap-3.3.7.css">
</head>

<body>
  <div id="app">

    <cmt-box @func="loadComments"></cmt-box>

    <ul class="list-group">
      <li class="list-group-item" v-for="item in list" :key="item.id">
        <span class="badge">評論人： {{ item.user }}</span>
        {{ item.content }}
      </li>
    </ul>
  </div>

  <template id="tmpl">
    <div>

      <div class="form-group">
        <label>評論人：</label>
        <input type="text" class="form-control" v-model="user">
      </div>

      <div class="form-group">
        <label>評論內容：</label>
        <textarea class="form-control" v-model="content"></textarea>
      </div>

      <div class="form-group">
        <input type="button" value="發表評論" class="btn btn-primary" @click="postComment">
      </div>

    </div>
  </template>

  <script>

    var commentBox = {
      data() {
        return {
          user: '',
          content: ''
        }
      },
      template: '#tmpl',
      methods: {
        postComment() { // 發表評論的方法
          // 分析：發表評論的業務邏輯
          // 1. 評論數據存到哪裏去？？？   存放到了 localStorage 中  localStorage.setItem('cmts', '')
          // 2. 先組織出一個最新的評論數據對象
          // 3. 想辦法，把 第二步中，得到的評論對象，保存到 localStorage 中：
          //  3.1 localStorage 只支持存放字符串數據， 要先調用 JSON.stringify 
          //  3.2 在保存 最新的 評論數據之前，要先從 localStorage 獲取到之前的評論數據（string）， 轉換爲 一個  數組對象， 然後，把最新的評論， push 到這個數組
          //  3.3 如果獲取到的 localStorage 中的 評論字符串，爲空不存在， 則  可以 返回一個 '[]'  讓 JSON.parse 去轉換
          //  3.4  把 最新的  評論列表數組，再次調用 JSON.stringify 轉爲  數組字符串，然後調用 localStorage.setItem()

          var comment = { id: Date.now(), user: this.user, content: this.content }

          // 從 localStorage 中獲取所有的評論
          var list = JSON.parse(localStorage.getItem('cmts') || '[]')
          list.unshift(comment)
          // 重新保存最新的 評論數據
          localStorage.setItem('cmts', JSON.stringify(list))

          this.user = this.content = ''

          // this.loadComments() // ?????
          this.$emit('func')
        }
      }
    }

    // 創建 Vue 實例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        list: [
          { id: Date.now(), user: '李白', content: '天生我材必有用' },
          { id: Date.now(), user: '江小白', content: '勸君更盡一杯酒' },
          { id: Date.now(), user: '小馬', content: '我姓馬， 風吹草低見牛羊的馬' }
        ]
      },
      beforeCreate(){ // 注意：這裏不能調用 loadComments 方法，因爲在執行這個鉤子函數的時候，data 和 methods 都還沒有被初始化好

      },
      created(){
        this.loadComments()
      },
      methods: {
        loadComments() { // 從本地的 localStorage 中，加載評論列表
          var list = JSON.parse(localStorage.getItem('cmts') || '[]')
          this.list = list
        }
      },
      components: {
        'cmt-box': commentBox
      }
    });
  </script>
</body>

</html>

使用 `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>

什麼是路由

**後端路由：**對於普通的網站，所有的超鏈接都是URL地址，所有的URL地址都對應服務器上對應的資源；
**前端路由：**對於單頁面應用程序來說，主要通過URL中的hash(#號)來實現不同頁面之間的切換，同時，hash有一個特點：HTTP請求中不會包含hash相關的內容；所以，單頁面程序中的頁面跳轉主要用hash實現；
在單頁面應用程序中，這種通過hash改變來切換頁面的方式，稱作前端路由（區別於後端路由）；

在 vue 中使用 vue-router

導入 vue-router 組件類庫：

<!-- 1. 導入 vue-router 組件類庫 -->
  <script src="./lib/vue-router-2.7.0.js"></script>

使用 router-link 組件來導航

<!-- 2. 使用 router-link 組件來導航 -->
<router-link to="/login">登錄</router-link>
<router-link to="/register">註冊</router-link>

使用 router-view 組件來顯示匹配到的組件

<!-- 3. 使用 router-view 組件來顯示匹配到的組件 -->
<router-view></router-view>

創建使用Vue.extend創建組件

    // 4.1 使用 Vue.extend 來創建登錄組件
    var login = Vue.extend({
      template: '<h1>登錄組件</h1>'
    });

    // 4.2 使用 Vue.extend 來創建註冊組件
    var register = Vue.extend({
      template: '<h1>註冊組件</h1>'
    });

創建一個路由 router 實例，通過 routers 屬性來定義路由匹配規則

// 5. 創建一個路由 router 實例，通過 routers 屬性來定義路由匹配規則
    var router = new VueRouter({
      routes: [
        { path: '/login', component: login },
        { path: '/register', component: register }
      ]
    });

使用 router 屬性來使用路由規則

// 6. 創建 Vue 實例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      router: router // 使用 router 屬性來使用路由規則
    });

父組件向子組件傳值

子組件向父組件傳值

組件中data和props的區別

評論列表案例

使用 `this.$refs` 來獲取元素和組件

什麼是路由

在 vue 中使用 vue-router

釘釘打卡速度慢

Nginx R31 doc 官方文檔-01-nginx 如何安裝

Python 潮流週刊#51：用 Python 繪製美觀的圖表

Qt/C++音視頻開發74-合併標籤圖形/生成yolo運算結果圖形/文字和圖形合併成一個/水印濾鏡

挑戰程序設計競賽 2.2章習題 POJ - 3617 Best Cow Line 貪心

字節面試：MySQL什麼時候鎖表？如何防止鎖表？

.NET8連接SQL SERVER 2008 R2 報：證書鏈是由不受信任的頒發機構頒發的

golang開發環境搭建(win10)

python計算機視覺學習筆記——PIL庫的用法

Golang初學：獲取程序內存使用情況，std runtime

vue學習day6

vue學習day2

vue學習day5

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結

vue學習day5

父組件向子組件傳值

子組件向父組件傳值

組件中data和props的區別

評論列表案例

使用 this.$refs 來獲取元素和組件

什麼是路由

在 vue 中使用 vue-router

使用 `this.$refs` 來獲取元素和組件