04

時間 2019-11-16

原文原文鏈接

VUE基礎-第四天css

01-反饋html

姓名意見或建議
*** 學了vue後神清氣爽,腰不疼了,腿不軟了
*** 組件之間傳值,必須利用子組件的props選項嗎?用data能夠嗎
*** 老師，對於組件沒怎麼聽懂，能夠再講解一下麼？感受天天的知識重點都在下午，又容易犯困，好難吸取啊！！前端

問題：經過安裝基於你的編輯器的插件，啓動服務。
爲何須要啓動一個服務？咱們寫的是頁面，運行在瀏覽器，跑在服務器中。
node階段：訪問的方式 127.0.0.1:80 便可 localhost:3000 本機
命令行工具：在任何的目錄快速啓動服務。 server-cli
- 安裝： npm i -g server-cli
- 啓動：切到文件的目錄，執行 server-cli 命令

02-回顧vue

axios
- 做用在 nodejs 和瀏覽器端發送請求
- 服務端
  - 簡紹 json-server 接口服務器
  - 某個目錄定義 db.json 文件寫好數據
  - 啓動服務 json-server --watch db.json
  - 怎麼訪問：
    - 基於restful風格的接口
    - get post put delete
    - localhost:3000/brands
- 客戶端發請求：使用axios插件特色：基於promise
- axios.get() axios.post() axios.put() axios.delete()
- 表格案例經過 axios 實現和後臺數據交互
watch
- 偵聽器: 監聽某個數據的變化，去作一些事件，通常是異步的操做。
- 實現搜索功能
組件
- 看下面。

03-組件複習node

組件：vue組件開發思想，一個應用都是由組件組成的。

組成部分：html css js 組成，獨立的功能。

在vue中怎麼去定義組件，在js文件中定義組件，之後在vue文件中定義。
全局定義

// 註冊組件
Vue.component('com-span',{
    // 組件的配置對象
    // 和 new Vue() 的選項是同樣的  排除 el 
    data(){
        return { //組件數據  獨立 }
    }，
    // 支持vue的語法   插值  指令
    template:'<div>//內容</div>'，
    methods:{}
})
複製代碼

局部定義

new Vue({
    components:{
     	'組件名稱'：‘組件配置對象’   
    }
})
複製代碼

影響組件關係的是使用時候的位置關係

組件關係：由於不一樣的關係組件之間的通信方式是不同的。
- 父子組件
  - 父組件向子組件傳值 webpack
  - 子組件向父組件傳值ios
- 兄弟組件
- 不相關組件

04-組件和模塊區別git

組件：由HTML CSS JS 組成的，構建UI界面。
模塊：是由若干個js函數組成，js代碼，js功能。
組件是否可以使用模塊，組件methods:{}使用js函數，使用模塊。

05-單頁面應用SPA-特色github

spa是單頁面應用程序（single page application）,通俗：在一個頁面開發一個完整網站功能。
優勢：
- 使用更流暢（不須要跳轉頁面，局部更新頁面內容）
- 徹底前端組件化（可維護性高，使用框架來實現vue）
缺點：
- 第一次訪問很慢（首屏加載慢，按需加載）
- 開發複雜（全部的功能在一個頁面完成）模塊化開發webpack
- 不利於 SEO 搜索引擎優化（幾乎全部的內容都是js渲染上去的，搜索引擎收錄的是頁面的源碼）
  - 服務端渲染

06-單頁面應用SPA-鋪墊概念web

先後端分離
- 代碼分離
- 項目分離使用組件化開發使用框架 vue
基於前端路由
- 路由：是個概念，經過URL標識符去映射不一樣的功能，描述這個映射關係的就是路由。
- 前端路由：根據不一樣的URL標識符渲染不一樣的組件（不一樣的網頁內容）。
- 思考路由的實現：url標識符改變卻不跳轉，去局部更新頁面內容。

07-路由-路由實現原理

<!-- 需求：不一樣的URL地址 局部去更新app容器的內容 不能跳轉-->
<!-- 1. 不讓它跳轉 也能改變URL標識符  -->
<!-- 2. 經過在標識符前加#號  叫哈希 hash  能夠經過 location.hash 獲取 -->
<!-- 3. 若是url標識改變 對應內容改變  路由也就實現-->
<!-- 4. 經過 hashchange 事件來監聽標識符的改變-->
<!-- 5. 不一樣標識展示不一樣的內容  局部更新-->
<ul>
  <li><a href="#/home">首頁</a></li>
  <li><a href="#/list">列表</a></li>
  <li><a href="#/detail">詳情</a></li>
</ul>
<div id="app">
  <!--更新內容的位置-->
</div>
<script>
  const app = document.querySelector('#app')
  window.onhashchange = function () {
    // 改變了hash
    // 獲取hash
    const hash = location.hash
    // 不一樣標識展示不一樣的內容  局部更新
    // 定義 映射關係  路由規則
    switch (hash) {
      case '#/home':
        app.innerHTML = '首頁內容'
        break
      case '#/list':
        app.innerHTML = '列表內容'
        break
      case '#/detail':
        app.innerHTML = '詳情內容'
        break
    }
  }
</script>
複製代碼

08-路由-vue-router-文檔

vue-router在vue項目中來實現路由功能。
vue-router是基於vue的一個插件，使用時候先引入vue在去引入vue-router插件
安裝
- 本地
- cnd unpkg.com/vue-router/…
- npm

09-路由-vue-router-體驗

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <!-- 連接 -->
  <ul>
    <li>
      <router-link to="/home">首頁</router-link>
    </li>
    <li>
      <router-link to="/list">列表</router-link>
    </li>
    <li>
      <router-link to="/detail">詳情</router-link>
    </li>
  </ul>
  <!-- 容器 -->
  <router-view></router-view>
</div>
<script src="assets/vue.js"></script>
<script src="assets/vue-router.js"></script>
<script>
  /*使用vue-router*/
  const router = new VueRouter({
    //路由規則
    routes: [
      // component 指定組件的配置項
      {path:'/home',component:{template:'<div>首頁內容</div>'}},
      {path:'/list',component:{template:'<div>列表內容</div>'}},
      {path:'/detail',component:{template:'<div>詳情內容</div>'}}
    ]
  })

  /*實例*/
  const vm = new Vue({
    el: '#app',
    /*掛載 到 vue選項*/
    router
  })
</script>
</body>
</html>
複製代碼

10-路由-vue-router-使用步驟

一共六步：
- 定義 router-link 指定 to 屬性， to跳轉URL
- 定義 router-view 指定渲染組件的位置
- 定義組件選項對象
- 定義路由規則 routes 數組
- 實例化 vue-router 對象
- 掛載到根實例 router 選項
  Title
  首頁列表詳情

11-路由-vue-router-動態路由

不一樣的URL標識符，指定顯示同一個組件，這樣的路由規則就是動態路由
好比： edit/824 edit/870 指定的是同一個編輯組件
```
<router-link to="/edit/824">編輯</router-link>
<router-link to="/edit/870">編輯</router-link>
複製代碼
```
// 動態路由規則定義 edit/824 edit/870 :id ---> url路徑形參 {path:'/edit/:name',component:Edit}

13-路由-vue-router的to屬性賦值

router-link的to屬性的用法還有不少種：首頁列表詳情 AAA BBB CCC100 CCC200 DDD

12-路由-vue-router-重定向

原本你想訪問的 /list 路徑訪問列表頁面，強制把路徑改爲了 /home , 訪問了主頁。
redirect 重定向

// 在路由規則中配置：

// 當你訪問 / 路徑時重定向到 Home 組件

// redirect 字符串路徑標識符 //{path: '/', redirect:'/home'},

// redirect 對象 {name:'home'} //{path: '/', redirect: {name: 'home'}},

// redirect 對象 {name:'home'} {path: '/', redirect: {path: '/home'}},

14-路由-vue-router-編程式導航

js跳轉路由

goDetail(){ // this.route 獲取數據 // 觸發事件跳轉 #/detail 地址 ===> 路由的path /detail // router.push({path:'/detail'}) }

15-路由-vue-router-激活樣式&tag

激活樣式在選中導航的時候路由默認會加上選中的類名根據類型寫選中樣式便可
tag屬性當你想顯示的是一個標籤套着A元素指定router-link渲染成的標籤 tag="li"
```

<router-link to="/home" tag="li"><a>首頁</a></router-link>
複製代碼
```

16-路由-vue-router-嵌套路由

使用嵌套路由的步驟：

/實現嵌套路由的步驟/ /*1. 渲染二級導航熱門文章體育文章 */ /*2. 定義路由規則 /list/hot ==> Hot */ /*3. 定義路由規則 /list/sports ==> Sports */ /*4. 按照定義在同一級規則不能夠 */ /5.1 須要把路由規則定義在一級路由的 children 屬性下/ /5.2 在一級路由對應的組件中準備子路由對應組件渲染位置/

代碼：

// 3. 定義 組件配置對象
  const Home = {template: '<div>首頁內容</div>'}
  const List = {
    template: `<div>
                  <router-link to="/list/hot" tag="li">熱門文章</router-link>
                  <router-link to="/list/sports" tag="li">體育文章</router-link>
                  <router-view></router-view>
              </div>`
  }
  const Detail = {template: '<div>詳情內容</div>'}

  const Hot = {template: '<div>熱門++++</div>'}
  const Sports = {template: '<div>體育++++</div>'}

  // 4. 定義 路由規則
  const routes = [
    {path: '/home', component: Home},
    {
      path: '/list', component: List, children: [
        {path: '/list/hot', component: Hot},
        {path: '/list/sports', component: Sports}
      ]
    },
    {path: '/detail', component: Detail}
  ]
  // 5 實例化 路由對象
  const router = new VueRouter({routes})
  // 6. 掛載到vue實例
  const vm = new Vue({
    el: '#app',
    router
  })
複製代碼

17-git-介紹和安裝

Window安裝
- git-scm.com/download/wi… 下載Git客戶端軟件，和普通軟件安裝方式同樣。
Mac安裝
- 打開Terminal直接輸入git命令，會自動提示，按提示引導安裝便可。

git是：分佈式版本控制系統（多臺計算機同時來維護版本庫）

18-git-基礎概念

git 命令行工具，學習操做命令。

工做區（項目目錄）已修改
暫存區已暫存
本地倉庫（版本存放的地方）已提交

19-git-基礎操做

在使用git版本管理功能----作信息配置工做：

git config --global user.name "zhoushugang"
 git config --global user.email "zhoushugang@itcast.cn"
複製代碼

而後進行操做：

初始化本地倉庫 git init
查看文件狀態 git status 紅色已修改綠色已暫存什麼都看不到倉庫中
添加到暫存區 git add . 所有提交暫存區
從暫存區恢復文件 git checkout 文件路徑
提交到本地倉庫 git commit -m '備註信息'
查看提交日誌 git log
切換版本 git reset --hard 版本號

20-git-遠程倉庫操做

若是你想分享項目給其餘人，須要共享倉庫，也稱爲：遠程倉庫。
共享倉庫在服務端搭建，外網服務器，成本很高，使用共享倉庫服務平臺。
平臺 github gitee(碼雲) gitlab

21-git-平臺github

註冊平臺的賬戶
在平臺去建立共享倉庫
只輸入倉庫名字，其餘不選擇，目的：空倉庫
提交git push 倉庫的網絡地址 master
https: github.com/zhousg/baid…
- 輸入用戶名和密碼
ssh:git@github.com:zhousg/baidu.git
- 須要配置免用戶名和密碼
拉取
- 本地沒有倉庫 git clone 倉庫的網絡地址 [項目的名稱]
- 本地有了倉庫 git pull 倉庫的網絡地址 master

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。