国产视频三级,极品久久久,性爱第一页欧美

前言

通過前面我寫的VUE入門博客，相信已經(jīng)大概了解VUE是何物，但是對于細節(jié)性的問題我們還是有些忽略，有很多網(wǎng)友希望我能繼續(xù)寫相關(guān)博客，但是由于工作繁忙原因一直無空去寫，終于得空于是協(xié)知識歸來。

2017年一定是VUE火熱的一年，引得無數(shù)人飛蛾撲火，對于前端大神來說輕松入手，對于剛剛接觸這一行的同學來說，vue的官方文檔還是太過與欠缺信息，如此我決定帶你們?nèi)ゲ瓤印?/p>

對稍微了解VUE的人來說，我們都知道Vue.js（讀音 /vju?/，類似于 view）是一套構(gòu)建用戶界面的漸進式框架。其采用自底向上增量開發(fā)的設(shè)計。如果你有用過Angular，知道它是MVC(模型 - 視圖 - 控制器)結(jié)構(gòu)的，而VUE 是MVVM的，即Vue 的核心庫只關(guān)注視圖層，視圖依賴與數(shù)據(jù)，它不僅易于上手，還便于與第三方庫或既有項目整合。另一方面，當與單文件組件和 Vue 生態(tài)系統(tǒng)支持的庫結(jié)合使用時，Vue 也完全能夠為復雜的(SPA)單頁應(yīng)用程序提供驅(qū)動。

但是這只是定義，有些人連SPA是什么都不知道(SPA-單頁應(yīng)用)，更不知道MVVM是為何物？請準備好你的雙手

打開項目

VUE是有一個配套開發(fā)組件的他叫：element(餓了么組件)，如圖：

element(餓了么組件)官網(wǎng)

為了方便大家跟上我，我決定做一個初始模板放在github上，各位請使用git拉一下項目：vuetemplate，如果有不知道git怎么用的請看我的博客:git+github的使用-最簡單的入門教程

如果實在是不知道git怎么用我會貼出代碼，但是前提是你有信心解決那些問題。

我們用的編輯器是atom，怎么使用請看: 打造前端MAC工作站（四）配置 Atom 編輯器

重要的事情說三遍：這里不負責解決任何代碼之外的事情，但是還是好意給你們指條明路！
這里不負責解決任何代碼之外的事情，但是還是好意給你們指條明路！
這里不負責解決任何代碼之外的事情，但是還是好意給你們指條明路！

使用git拉下來我的代碼，用atom打開目錄如圖：

不會使用git拉文件的請去GitHub上下載壓縮包。

在本地打開文件夾，先npm install，然后npm run dev，讓它跑起來。效果如圖：

運行

注意如果npm安裝不合適請使用cnpm，見淘寶鏡像

這里做了一個假的登陸，輸入yanmo，密碼：123，進入。這個項目整個構(gòu)建都是完整，你們?nèi)绻跞腴T就多看看我的目錄結(jié)構(gòu)構(gòu)建，以及路由的使用。

路由簡單使用

打開vue官網(wǎng)給的教程:vue-router

vue官網(wǎng)所給的路由使用很初級，我們在項目構(gòu)建的時候并不會這樣子，打開項目/src/routes/index.js，代碼如下：

import frame from '../frame/frame.vue'
import index from '../page/index.vue'
import home from '../page/home.vue'
import login from '../page/login.vue'

import introduction from '../page/introduction/index.vue'
import introductionDetails from '../page/introduction/details.vue'

import introductionDetailspage from '../page/introduction/detailspage/detailspage.vue'

import advanced from '../page/advanced/index.vue'
import advancedDetails from '../page/advanced/details.vue'

import advancedDetailspage from '../page/advanced/detailspage/detailspage.vue'

// 配置路由
export default [
  {
    path: '/',
    component: index
  },
  {
    path: '/login',
    component: login
  },
  {
    path: '/home',
    component: home
  },
  {
    path: '/introduction',
    component: frame,
    children: [
      {path: '', component: introduction},
      {path: 'details', component: introductionDetails},
      {path: 'detailspage', component: introductionDetailspage}
    ]
  },
  {
    path: '/advanced',
    component: frame,
    children: [
      {path: '', component: advanced},
      {path: 'details', component: advancedDetails},
      {path: 'detailspage', component: advancedDetailspage}
    ]
  }
]

這是正確的路由構(gòu)建方式，我們通過import...form導入我們的文件模塊，component（組件）引入我們需要的模塊，path則是網(wǎng)頁上的url，同時路由的使用離不開<router-view></router-view>，在/src/App.vue中：

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'app'
}
</script>

<style lang="scss">
  @import "./style/style";
</style>

<router-view></router-view>承接路由的組件，其本質(zhì)是根據(jù)url的不同來進行組件的各種切換罷了。如果url是‘/login’它就切換成login.vue，如果url是‘/home’它就切換成home.vue。

同理，我們就可以使用另外一個<router-view></router-view>來實現(xiàn)子路由的切換，在component（組件）引入<router-view></router-view>再加一個屬性children就可以了，例如：

const Foo = { template: '<router-view></router-view>' }
import introduction from '../page/introduction/index.vue'
import introductionDetails from '../page/introduction/details.vue'
import introductionDetailspage from '../page/introduction/detailspage/detailspage.vue'
export default [
{
    path: '/introduction',
    component: Foo,
    children: [
      {path: '', component: introduction},
      {path: 'details', component: introductionDetails},
      {path: 'detailspage', component: introductionDetailspage}
    ]
  }
]

我們可以通過/introduction進入'../page/introduction/index.vue'組件，/introduction/details進入'../page/introduction/details.vue'組件

同時在.vue文件中實現(xiàn)路由的函數(shù)式操作也是我們經(jīng)常用的，比如我們需要按鈕點擊跳轉(zhuǎn)：在/src/page/index.vue

<el-button type="info" @click="$router.push('/login')" size="small">前往登錄</el-button>

$router.push('/login')是this.$router.push('/login')的簡化，其是vue-router的編程式的導航
，即除了使用 <router-link> 創(chuàng)建 a 標簽來定義導航鏈接，我們還可以借助 router 的實例方法，通過編寫代碼來實現(xiàn)。

router.push 方法。這個方法會向 history 棧添加一個新的記錄，所以，當用戶點擊瀏覽器后退按鈕時，則回到之前的 URL。

router.go(n) 方法。在 history 記錄中向前或者后退多少步，類似 window.history.go(n)。

// 在瀏覽器記錄中前進一步，等同于 history.forward()
router.go(1)

// 后退一步記錄，等同于 history.back()
router.go(-1)

// 前進 3 步記錄
router.go(3)

同時我們還可以帶參數(shù)：

router.push({ name: 'login', params: { userId: 123 }})

還可以帶查詢條件：

// 帶查詢參數(shù)，變成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})

路由的信息獲取-`$route`對象

首先，我們稱呼 routes 配置中的每個路由對象為路由記錄。路由記錄可以是嵌套的，因此，當一個路由匹配成功后，他可能匹配多個路由記錄。

類似/introduction/details這個 URL 將會匹配父路由記錄以及子路由記錄。

一個路由匹配到的所有路由記錄會暴露為$route對象，$route對象存了很多信息，有時我們需要取一些信息就得使用它：

$route對象

有時我們在路由路徑傳遞了id，如{path: 'edit/:id', component: newsEdit}，這里:id指的是一個變量叫id，我們有時需要用到這個id，我們可以在$route對象下的params屬性中取到他，即this.$route.params.id，就可以取到路由的id變量的值，同時我們也可以取其他變量的名字，這些路由路徑的變量都存在params屬性中。

控制臺log如圖：

$route.params

同時，請區(qū)分$route對象和$router對象的區(qū)別。這兩個不是一個東西你們可以在控制臺輸出一下看看區(qū)別。

路由信息對象的屬性：

$route.path: 字符串，對應(yīng)當前路由的路徑，總是解析為絕對路徑，如 "/foo/bar"。

$route.params: 一個 key/value 對象，包含了動態(tài)片段和全匹配片段，如果沒有路由參數(shù)，就是一個空對象。

$route.query: 一個 key/value 對象，表示 URL 查詢參數(shù)。例如，對于路徑 /foo?user=1，則有 $route.query.user == 1，如果沒有查詢參數(shù)，則是個空對象。

$route.hash: 當前路由的 hash 值 (帶 #) ，如果沒有 hash 值，則為空字符串。

$route.fullPath: 完成解析后的 URL，包含查詢參數(shù)和 hash 的完整路徑，如 "/foo/bar?urseid=11"。

$route.matched: 一個數(shù)組，包含當前路由的所有嵌套路徑片段的路由記錄。路由記錄就是 routes 配置數(shù)組中的對象副本（還有在 children 數(shù)組）。

`<router-link>`

<router-link> 組件支持用戶在具有路由功能的應(yīng)用中點擊導航。通過 to 屬性指定目標地址，默認渲染成帶有正確鏈接的<a>標簽，可以通過配置 tag 屬性生成別的標簽.。另外，當目標路由成功激活時，鏈接元素自動設(shè)置一個表示激活的 CSS 類名。

其默認屬性：

to: 表示目標路由的鏈接。當被點擊后，內(nèi)部會立刻把 to 的值傳到router.push()，所以這個值可以是一個字符串或者是描述目標位置的對象。

<!-- 使用 v-bind 的 JS 表達式 -->
  <router-link v-bind:to="'home'">Home</router-link>
  <!-- 不寫 v-bind 也可以，就像綁定別的屬性一樣 -->
  <router-link :to="'home'">Home</router-link>
  <!-- 同上 -->
  <router-link :to="{ path: 'home' }">Home</router-link>
  <!-- 命名的路由 -->
  <router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>

replace: 設(shè)置 replace 屬性的話，當點擊時，會調(diào)用router.replace()而不是router.push()，于是導航后不會留下 history 記錄。會發(fā)生路由替換

<router-link :to="{ path: '/abc'}" replace></router-link>

tag: 有時候想要 <router-link> 渲染成某種標簽，例如 <li>。于是我們使用 tag prop 類指定何種標簽，同樣它還是會監(jiān)聽點擊，觸發(fā)導航。

 <router-link to="/foo" tag="li">foo</router-link>
  <!-- 渲染結(jié)果 -->
  <li>foo</li>

小結(jié)：

至此路由的基本知識就結(jié)束了，例如懶加載等不常用的，這里不做多解。

重要的事情說三遍：`<router-view></router-view>`承接路由的組件，其本質(zhì)是根據(jù)url的不同來進行組件的各種切換罷了。
`<router-view></router-view>`承接路由的組件，其本質(zhì)是根據(jù)url的不同來進行組件的各種切換罷了。
`<router-view></router-view>`承接路由的組件，其本質(zhì)是根據(jù)url的不同來進行組件的各種切換罷了。

也許你們現(xiàn)在不懂，等到了組件的講解，你們就明白了。

提示：在最近幾天我會慢慢附上VUE系列教程的其他后續(xù)篇幅，后面還有精彩敬請期待，請大家關(guān)注我的專題：web前端。如有意見可以進行評論，每一條評論我都會認真對待。

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

vue成長之路+實戰(zhàn)+Vue2+VueRouter2+webpack（一）vue-router路由入門

vue成長之路+實戰(zhàn)+Vue2+VueRouter2+webpack（一）vue-router路由入門

前言

打開項目

路由簡單使用

路由的信息獲取-`$route`對象

`<router-link>`

小結(jié)：

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

vue成長之路+實戰(zhàn)+Vue2+VueRouter2+webpack（一）vue-router路由入門

前言

打開項目

路由簡單使用

路由的信息獲取-$route對象

<router-link>

小結(jié)：

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

路由的信息獲取-`$route`對象

`<router-link>`