国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

vue學習筆記4

番茄西紅柿 / 1229人閱讀

摘要：主要當作屬性來使用方法表示一個具體的操作，主要書寫業務邏輯一個對象，鍵是需要觀察的表達式，值是對應回調函數。

父組件向子組件傳值

  1. 組件實例定義方式，注意：一定要使用props屬性來定義父組件傳遞過來的數據
  1. 使用v-bind或簡化指令，將數據傳遞到子組件中：

子組件向父組件傳值

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

組件中data和props的區別

評論列表案例

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

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

  

    

      
      
      
這是一個大大的H1

什么是路由

  1. 后端路由：對于普通的網站，所有的超鏈接都是URL地址，所有的URL地址都對應服務器上對應的資源；

  2. 前端路由：對于單頁面應用程序來說，主要通過URL中的hash(#號)來實現不同頁面之間的切換，同時，hash有一個特點：HTTP請求中不會包含hash相關的內容；所以，單頁面程序中的頁面跳轉主要用hash實現；

  3. 在單頁面應用程序中，這種通過hash改變來切換頁面的方式，稱作前端路由（區別于后端路由）；

在 vue 中使用 vue-router

  1. 導入 vue-router 組件類庫：
  1. 使用 router-link 組件來導航

登錄
注冊
  1. 使用 router-view 組件來顯示匹配到的組件
  1. 創建使用Vue.extend創建組件
    // 4.1 使用 Vue.extend 來創建登錄組件
    var login = Vue.extend({
      template: '
登錄組件
'
    });

    // 4.2 使用 Vue.extend 來創建注冊組件
    var register = Vue.extend({
      template: '
注冊組件
'
    });
  1. 創建一個路由 router 實例，通過 routers 屬性來定義路由匹配規則
// 5. 創建一個路由 router 實例，通過 routers 屬性來定義路由匹配規則
    var router = new VueRouter({
      routes: [
        { path: '/login', component: login },
        { path: '/register', component: register }
      ]
    });
  1. 使用 router 屬性來使用路由規則
// 6. 創建 Vue 實例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      router: router // 使用 router 屬性來使用路由規則
    });

使用tag屬性指定router-link渲染的標簽類型

設置路由重定向

設置路由高亮

設置路由切換動效

在路由規則中定義參數

  1. 在規則中定義參數：
{ path: '/register/:id', component: register }
  1. 通過 this.$route.params來獲取路由中的參數：
var register = Vue.extend({
      template: '
注冊組件 --- {{this.$route.params.id}}
'
    });

使用 children 屬性實現路由嵌套

  

    Account

命名視圖實現經典布局

  1. 標簽代碼結構：
  1. JS代碼：
  1. CSS 樣式：

watch屬性的使用

考慮一個問題：想要實現 名 和 姓 兩個文本框的內容改變，則全名的文本框中的值也跟著改變；（用以前的知識如何實現？？？）

  1. 監聽data中屬性的改變：

     +
     =
    {{fullName}}
  1. 監聽路由對象的改變：

    登錄
    注冊

computed計算屬性的使用

  1. 默認只有getter的計算屬性：

     +
     =
    {{fullName}}
  1. 定義有getter和setter的計算屬性：

    
    
    
    

    {{fullName}}

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中的hash（井號）

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/1105.html

相關文章

  • Vue.js學習系列二 —— vuex學習實踐筆記（附DEMO）

    摘要：有興趣的同學可以查看之前發布的文章學習系列一學習實踐筆記附學習系列二學習實踐筆記附學習系列三和網絡傳輸相關知識的學習實踐學習系列四打包工具的使用學習系列五從來聊聊學習系列項目地址項目暫時有點亂，之后會進行整理優化。 上次學習了vue-router的使用，讓我能夠在各個頁面間切換，將頁面搭建了起來。這次則要學習vue的狀態管理模式——vuex。它類似于redux來應用的全局狀態。 注：本...

    DobbyKim 評論0 收藏0

  • (原創)vue 學習筆記

    摘要：菜鳥教程這是一個屬性其值是字符串菜鳥教程同上這是一個屬性其值是字符串用于定義的函數，可以通過來返回函數值。它們都有前綴，以便與用戶定義的屬性區分開來。 開篇語 我最近學習了js,取得進步,現在學習vue.js.建議新手學習,請不要用npm的方式(vue-cli,vue腳手架),太復雜了. 請直接下載vue.js文件本地引入,就上手學習吧參照菜鳥教程網站的vue.js教程http://...

    layman 評論0 收藏0

  • vue 學習筆記

    1.vue的開始 var vm = new Vue({ el: #app, // el: 用來掛載 Vue 實例的元素 data: {}, // data: 要綁定的資料 props: {}, // props: 用來接收外部資料的屬性 methods: {}, ...

    yhaolpz 評論0 收藏0

  • vue學習筆記（五）

    摘要：各模塊各司其職，提高開發效率。使用生成的項目目錄里，我們主要關注目錄。這個是我們之前提到的單頁面組件。這是項目的路由文件，存放項目中所有的路由。這里和我們之前所學沒什么不同，不過是涉及了不少的知識。 一、vue模塊化開發 所謂的模塊化開發是指將不同的部分封裝到不同的模塊中，不再將所有的組件、路由等寫在一個頁面中。各模塊各司其職，提高開發效率。 使用vue-cli生成的項目目錄里，我們主...

    shusen 評論0 收藏0

  • vue學習筆記（五）

    摘要：各模塊各司其職，提高開發效率。使用生成的項目目錄里，我們主要關注目錄。這個是我們之前提到的單頁面組件。這是項目的路由文件，存放項目中所有的路由。這里和我們之前所學沒什么不同，不過是涉及了不少的知識。 一、vue模塊化開發 所謂的模塊化開發是指將不同的部分封裝到不同的模塊中，不再將所有的組件、路由等寫在一個頁面中。各模塊各司其職，提高開發效率。 使用vue-cli生成的項目目錄里，我們主...

    paulquei 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<