vue學(xué)習(xí)筆記4

番茄西紅柿發(fā)布于2019-04-23 11:45 / 1331人閱讀

摘要：主要當(dāng)作屬性來(lái)使用方法表示一個(gè)具體的操作，主要書寫業(yè)務(wù)邏輯一個(gè)對(duì)象，鍵是需要觀察的表達(dá)式，值是對(duì)應(yīng)回調(diào)函數(shù)。

父組件向子組件傳值

組件實(shí)例定義方式，注意：一定要使用props屬性來(lái)定義父組件傳遞過來(lái)的數(shù)據(jù)

使用v-bind或簡(jiǎn)化指令，將數(shù)據(jù)傳遞到子組件中：

子組件向父組件傳值

原理：父組件將方法的引用，傳遞到子組件內(nèi)部，子組件在內(nèi)部調(diào)用父組件傳遞過來(lái)的方法，同時(shí)把要發(fā)送給父組件的數(shù)據(jù)，在調(diào)用方法的時(shí)候當(dāng)作參數(shù)傳遞進(jìn)去；
父組件將方法的引用傳遞給子組件，其中，getMsg是父組件中methods中定義的方法名稱，func是子組件調(diào)用傳遞過來(lái)方法時(shí)候的方法名稱

子組件內(nèi)部通過this.$emit(方法名, 要傳遞的數(shù)據(jù))方式，來(lái)調(diào)用父組件中的方法，同時(shí)把數(shù)據(jù)傳遞給父組件使用

組件中data和props的區(qū)別

評(píng)論列表案例

目標(biāo)：主要練習(xí)父子組件之間傳值

使用 `this.$refs` 來(lái)獲取元素和組件

  
    
      
      
      這是一個(gè)大大的H1

什么是路由

后端路由：對(duì)于普通的網(wǎng)站，所有的超鏈接都是URL地址，所有的URL地址都對(duì)應(yīng)服務(wù)器上對(duì)應(yīng)的資源；
前端路由：對(duì)于單頁(yè)面應(yīng)用程序來(lái)說(shuō)，主要通過URL中的hash(#號(hào))來(lái)實(shí)現(xiàn)不同頁(yè)面之間的切換，同時(shí)，hash有一個(gè)特點(diǎn)：HTTP請(qǐng)求中不會(huì)包含hash相關(guān)的內(nèi)容；所以，單頁(yè)面程序中的頁(yè)面跳轉(zhuǎn)主要用hash實(shí)現(xiàn)；
在單頁(yè)面應(yīng)用程序中，這種通過hash改變來(lái)切換頁(yè)面的方式，稱作前端路由（區(qū)別于后端路由）；

在 vue 中使用 vue-router

導(dǎo)入 vue-router 組件類庫(kù)：

使用 router-link 組件來(lái)導(dǎo)航


登錄
注冊(cè)

使用 router-view 組件來(lái)顯示匹配到的組件

創(chuàng)建使用Vue.extend創(chuàng)建組件

    // 4.1 使用 Vue.extend 來(lái)創(chuàng)建登錄組件
    var login = Vue.extend({
      template: '登錄組件'
    });

    // 4.2 使用 Vue.extend 來(lái)創(chuàng)建注冊(cè)組件
    var register = Vue.extend({
      template: '注冊(cè)組件'
    });

創(chuàng)建一個(gè)路由 router 實(shí)例，通過 routers 屬性來(lái)定義路由匹配規(guī)則

// 5. 創(chuàng)建一個(gè)路由 router 實(shí)例，通過 routers 屬性來(lái)定義路由匹配規(guī)則
    var router = new VueRouter({
      routes: [
        { path: '/login', component: login },
        { path: '/register', component: register }
      ]
    });

使用 router 屬性來(lái)使用路由規(guī)則

// 6. 創(chuàng)建 Vue 實(shí)例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      router: router // 使用 router 屬性來(lái)使用路由規(guī)則
    });

使用tag屬性指定router-link渲染的標(biāo)簽類型

設(shè)置路由重定向

設(shè)置路由高亮

設(shè)置路由切換動(dòng)效

在路由規(guī)則中定義參數(shù)

在規(guī)則中定義參數(shù)：

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

通過 this.$route.params來(lái)獲取路由中的參數(shù)：

var register = Vue.extend({
      template: '注冊(cè)組件 --- {{this.$route.params.id}}'
    });

使用 `children` 屬性實(shí)現(xiàn)路由嵌套

  
    Account

命名視圖實(shí)現(xiàn)經(jīng)典布局

標(biāo)簽代碼結(jié)構(gòu)：

JS代碼：

CSS 樣式：

`watch`屬性的使用

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

監(jiān)聽data中屬性的改變：


     +
     =
    {{fullName}}

監(jiān)聽路由對(duì)象的改變：


    登錄
    注冊(cè)

`computed`計(jì)算屬性的使用

默認(rèn)只有getter的計(jì)算屬性：


     +
     =
    {{fullName}}

定義有getter和setter的計(jì)算屬性：


    
    
    
    

    {{fullName}}

`watch`、`computed`和`methods`之間的對(duì)比

computed屬性的結(jié)果會(huì)被緩存，除非依賴的響應(yīng)式屬性變化才會(huì)重新計(jì)算。主要當(dāng)作屬性來(lái)使用；
methods方法表示一個(gè)具體的操作，主要書寫業(yè)務(wù)邏輯；
watch一個(gè)對(duì)象，鍵是需要觀察的表達(dá)式，值是對(duì)應(yīng)回調(diào)函數(shù)。主要用來(lái)監(jiān)聽某些特定數(shù)據(jù)的變化，從而進(jìn)行某些具體的業(yè)務(wù)邏輯操作；可以看作是computed和methods的結(jié)合體；

`nrm`的安裝使用

作用：提供了一些最常用的NPM包鏡像地址，能夠讓我們快速的切換安裝包時(shí)候的服務(wù)器地址；
什么是鏡像：原來(lái)包剛一開始是只存在于國(guó)外的NPM服務(wù)器，但是由于網(wǎng)絡(luò)原因，經(jīng)常訪問不到，這時(shí)候，我們可以在國(guó)內(nèi)，創(chuàng)建一個(gè)和官網(wǎng)完全一樣的NPM服務(wù)器，只不過，數(shù)據(jù)都是從人家那里拿過來(lái)的，除此之外，使用方式完全一樣；

運(yùn)行npm i nrm -g全局安裝nrm包；
使用nrm ls查看當(dāng)前所有可用的鏡像源地址以及當(dāng)前所使用的鏡像源地址；
使用nrm use npm或nrm use taobao切換不同的鏡像源地址；

相關(guān)文件

URL中的hash（井號(hào)）

GPU云服務(wù)器云服務(wù)器 vue3 學(xué)習(xí)筆記 (五)——vue3 學(xué)習(xí)筆記學(xué)習(xí)筆記一基礎(chǔ)學(xué)習(xí)筆記

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://hztianpu.com/yun/1105.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

番茄西紅柿

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

tensor

閱讀 973·2023-04-25 19:43
Windows 下安裝 XGBoost

閱讀 4290·2021-11-30 14:52
Hadoop 2.6.0 啟動(dòng)問題 lib/native/libhadoop.so which mi

閱讀 4058·2021-11-30 14:52
VmShell：黑五美國(guó)VPS,免費(fèi)先開通測(cè)試,滿意后付款!支持tiktok美區(qū)

閱讀 4155·2021-11-29 11:00
百度智能云：云產(chǎn)品特惠福利,1核2G輕量應(yīng)用服務(wù)器僅48元/年

閱讀 4046·2021-11-29 11:00
Linux系統(tǒng)和寶塔面板如何啟用禁ping功能?

閱讀 4201·2021-11-29 11:00
301重定向怎么做?301重定向設(shè)置方法有幾種

閱讀 3895·2021-11-29 11:00
wordpress網(wǎng)站重定向次數(shù)過多的解決方法

閱讀 6835·2021-11-29 11:00

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

vue學(xué)習(xí)筆記4

父組件向子組件傳值

子組件向父組件傳值

組件中data和props的區(qū)別

評(píng)論列表案例

使用 this.$refs 來(lái)獲取元素和組件

這是一個(gè)大大的H1

什么是路由

在 vue 中使用 vue-router

登錄組件

注冊(cè)組件

使用tag屬性指定router-link渲染的標(biāo)簽類型

設(shè)置路由重定向

設(shè)置路由高亮

設(shè)置路由切換動(dòng)效

在路由規(guī)則中定義參數(shù)

注冊(cè)組件 --- {{this.$route.params.id}}

使用 children 屬性實(shí)現(xiàn)路由嵌套

命名視圖實(shí)現(xiàn)經(jīng)典布局

watch屬性的使用

computed計(jì)算屬性的使用

watch、computed和methods之間的對(duì)比

nrm的安裝使用