05

時間  2019-11-16
原文   原文鏈接

VUE基礎-第五天css

01-反饋html

姓名 意見或建議
*** 鋼哥 啥事漸進式框架
*** 剛哥~~你寫的函數裏面的形參通常都是有語義化的,有些分不清楚哪些是形參,哪些是固定寫法必需要這樣寫.前端

  • vue能夠看成一個庫使用，可使用vue全家桶（vue-router,axios,element-ui,vuex）進行開發。
  • 申明函數的時候 使用的形參 function per(age){}
  • 調用函數的時候 使用的實參 per(10) var age = 10; per(age)
  • new Vue({router}) 若是是配置選項 固定。

02-回顧vue

  • 單頁面應用
    • 俗語：在一個頁面上開發一套完整的網站功能
    • 流暢 組件化 ， 首屏慢 難度大 不利於SEO
    • 實現路由功能：url標識符對應不一樣的組件
    • 實現路由原理：經過hashchange監聽url標識符改變，顯示不一樣的內容。
    • 代碼分離：工做目錄，頁面沒有後臺代碼
    • 項目分離：前端項目一個服務器 後端接口服務一個服務器
  • vue-router
    • 基於vue的路由插件
    • 步驟：
      • 使用 router-link 連接
      • 使用 router-view 指定組件渲染的位置
      • 準備 組件 選項對象 ｛template:''｝
      • 定義路由規則 routes = [//定義規則]
      • 實例 const router = VueRouter({routes }) 對象
      • 掛載路由 new Vue({router})
    • to
    • 動態路由
    • 重定向
    • 編程式導航 router 調api $route.params|query
    • 激活樣式&tag
  • git基本操做
    • 工做區 暫存區 本地倉庫
    • git init
    • git status
    • git add .
    • git checkout index.html
    • git commit -m 'xxx'
    • git reset --hard 版本號
    • git log
    • 遠程倉庫 github
    • git push 倉庫地址 master
    • git pull 倉庫地址 master
    • git clone 倉庫地址 [項目名字]

03-vue-cli-介紹webpack

  • vue-cli vue項目的腳手架（輔助開發項目，提早建立好項目須要的一些配置文件，項目的目錄）
  • 文檔：cli.vuejs.org/zh/
  • vue-cli 是一個命令行工具 安裝在全局

04-vue-cli-安裝ios

  • 安裝命令 npm i -g @vue/cligit

  • 默認安裝最新版本，你安裝的將是 3.0 版本，使用的是3.0版本的命令github

  • 可是企業中還有使用2.0版本的項目，2.0版本的命令和3.0版本是不同web

  • 當你使用3.0時你有可能須要使用2.0的命令，須要安裝過渡工具 npm install -g @vue/cli-initvue-router

    安裝慢的問題

    建議使用 cnpm 安裝

    npm i -g cnpm

    安裝 vue-cli

    cnpm i -g @vue/cli cnpm i -g @vue/cli-init

    安裝一直失敗

    卸載

    npm un -g @vue/cli

    清除緩存

    npm-cache 文件目錄 C:/users/本身使用的用戶/appData/roaming/npm-cache

05-vue-cli-建立項目

  • 建立項目：執行命令 vue init webpack-simple 項目的名字

06-vue-cli-目錄解釋

07-vue-cli-生成代碼-render

  • render 渲染的意思

  • 也是vue的選項

  • el 指定視圖

  • template 指定視圖內容

  • render 函數 渲染組件

    new Vue({ el: '#app', render: h => h(App) }) // render: function (createElements) { // // createElements 建立元素 構建頁面結構 // // 參數 組件選項 // return createElements(App) // },

  • 使用render渲染函數渲染App組件

  • 即便在el中書寫了內容 最終render替換 使用的App的組件（根組件）

08-vue-cli-生成代碼-ES6模塊化

  • commonJS規範
    • 導入 require()
    • 導出 module.exports
  • ES6模塊化
    • 導入 import 名稱 from '包名|js文件路徑'
    • 導入 import './index.css'
    • 導出 export default {}

09-vue-cli-後綴.vue文件使用

  • 在vue-cli構建的項目中 .vue 文件（html,js,css）就是組件配置對象
  • { template:'',js代碼... }這種寫法 全部的資源在對象中 耦合在一塊兒，很差維護
  • template 寫html
  • script 寫js 導出組件配置對象
  • style 寫樣式

使用步驟：

  • 定義一個helloword.vue的文件
  • <template>
  <div class="red">hello world {{msg}}</div>
</template>
<script>
  export default {
    name: 'HelloWorld',
    data () {
      return {
        msg:'!!!!'
      }
    }
  }
</script>
<style>
  .red{
    color: red;
  }
</style>
複製代碼

注意：導出的時候 導出的是一個組件的配置對象

  • 導入 import hw from './helloworld.vue'
  • 若是想看成使用組件使用 根據這個配置對象註冊一個組件
  • components:{hw}
  • 視圖中看成自定義元素使用

10-案例heroes-佈局分析

  • 頁面都是組件化的
    • 導航組件
    • 側邊欄組件
    • 英雄列表組件
    • 英雄添加組件
    • 英雄編輯組件
    • 技能列表組件
    • 裝備列表組件

11-案例heroes-導入依賴資源

  • 安裝 bootstrap cnpm i bootstrap@3.3.7

  • 導入 main.js import '路徑'

  • 運行的時候發現錯誤：字體文件沒法編譯

  • 修改配置文件：webpack.config.js

  • rules選項再加一個配置

    {
  test: /\.(ttf|woff2|woff|eot)$/,
  loader: 'file-loader',
  options: {
    name: '[name].[ext]?[hash]'
  }
}
複製代碼

12-案例heroes-提取導航組件

  • AppNav.vue 在 components
  • 導入 App.vue 到 import appNav from './components/AppNav.vue'
  • App.vue的選中註冊組件 components:{appNav}
  • 使用

13-案例heroes-提取側邊欄組件

同上

14-案例heroes-實現路由功能

<!--AppSlider.vue-->
<div class="list-group">
    <router-link to="/heroes" class="list-group-item">英雄列表</router-link>
    <router-link to="/equip" class="list-group-item">裝備列表</router-link>
    <router-link to="/skill" class="list-group-item">技能列表</router-link>
  </div>

<!--App.vue-->
<div class="col-md-10">
      <!--顯示組件的位置-->
      <router-view></router-view>
    </div>
複製代碼

定義了三個vue文件 三個配置對象

// main.js
import Heroes from './components/Heroes'
import Equip from './components/Equip'
import Skill from './components/Skill'
複製代碼

路由規則

//定義路由規則
const routes = [
  {path:'/heroes',component:Heroes},
  {path:'/equip',component:Equip},
  {path:'/skill',component:Skill}
]
複製代碼

實例化路由對象

//實例化路由對象  依賴vue-router
// npm i vue-router
// 導入
import VueRouter from 'vue-router'
// npm 安裝的 路由須要註冊在 Vue對象中
Vue.use(VueRouter)
// 使用
const router = new VueRouter({routes})
複製代碼

掛載

new Vue({
  el: '#app',
  router,
  render: h => h(App)
})
複製代碼

15-案例heroes-提取路由模塊

新建router.js

// 封裝路由導出給main.js使用
import Vue from 'vue'
import Heroes from './components/Heroes'
import Equip from './components/Equip'
import Skill from './components/Skill'
//定義路由規則
const routes = [
  {path:'/heroes',component:Heroes},
  {path:'/equip',component:Equip},
  {path:'/skill',component:Skill}
]
//實例化路由對象  依賴vue-router
// npm i vue-router
// 導入
import VueRouter from 'vue-router'
// npm 安裝的 路由須要註冊在 Vue對象中
Vue.use(VueRouter)
// 實例化
const router = new VueRouter({routes})

export default router
複製代碼

在main.js使用

import router from './router'
複製代碼

16-案例heroes-激活路由樣式

<style scoped>
  /* scoped 讓樣式在只該組件下生效 */
  /* AppSlider文件 加強優先級 */
  a.list-group-item.router-link-exact-active,
  a.list-group-item.router-link-active{
  /*選中樣式  在active類裏面*/
  z-index: 2;
  color: #fff;
  background-color: #337ab7;
  border-color: #337ab7;
}
</style>
複製代碼

17-案例heroes-啓動接口服務

  • 使用json-server來快速啓動接口服務

  • 在某個目錄下 db.json文件

  • 內容：

    { "heroes":[ {"id":100,"name":"亞索","gender":"男","ctime":"2019-04-17 15:00:00"} ] }

  • 啓動服務 json-server --watch db.json

18-案例heroes-構建列表組件

<div class="wrapper">
    <a href="heroes-form.html" class="btn btn-primary">添加英雄</a>
    <hr>
    <table class="table table-hover">
      <thead>
      <tr>
        <th>ID</th>
        <th>英雄名稱</th>
        <th>英雄性別</th>
        <th>建立時間</th>
        <th>操做</th>
      </tr>
      </thead>
      <tbody>
      <tr>
        <td>101</td>
        <td>亞索</td>
        <td>男</td>
        <td>2019-02-10 10:50:12</td>
        <td>
          <button class="btn btn-success">編輯</button>
          <button class="btn btn-danger">刪除</button>
        </td>
      </tr>
      </tbody>
    </table>
  </div>
複製代碼

19-案例heroes-渲染列表

// 使用axios
  // 安裝 npm i axios
  // 導入
  import axios from 'axios'

  export default {
    name: 'Heroes',
    data () {
      return {
        list:[]
      }
    },
    methods: {
      getData () {
        // 獲取英雄列表的數據
        axios.get('http://localhost:3000/heroes')
          .then(res => {
            this.list = res.data
          }).catch(err => alert('獲取英雄數據失敗'))
      }
    },
    // 視圖渲染完畢
    mounted () {
      this.getData()
    }
  }
複製代碼

20-案例heroes-刪除功能

del (id) {
    // 思路： 須要確認框
    // 1. 獲取id
    // 2. 發刪除請求
    // 3. 若是成功  獲取後臺最新的列表數據 更新list 更新視圖
    // 4. 若是失敗 提示
    if(confirm('老鐵，確認刪除嗎')){
        axios.delete('http://localhost:3000/heroes/' + id)
            .then(res => {
            this.getData()
        }).catch(err => alert('刪除失敗'))
    }
}
複製代碼

21-案例heroes-構建添加組件

  • 添加按鈕改爲了 router-link
  • 新建了一個HeroesAdd.vue
  • 在router.js導入了這個組件
  • 在路由規則配置 映射 {path:'/heroes/add',component:HeroesAdd}

22-案例heroes-綁定表單

  • 申明 data -> form:{name:'',gender:''}
  • 在表單中： <form @submit.prevent="add()"> 添加英雄

23-案例heroes-添加功能

  • 須要在 this.form添加一個建立時間的屬性

  • 正常的去發送 post 請求

  • 成功的時候 切換到 列表組件

  • 編程式導航 this.$router.push('/heroes')

    // 3. 發送請求 axsio.post('url',數據對象) this.form.ctime = new Date() axios.post('http://localhost:3000/heroes',this.form) .then(res=>{ // 4. 添加成功的時候 展現最新的列表 // 改變 url 標識符 列表路由的url地址 渲染對應的列表組件 獲取最新的屬性 新的列表 this.$router.push('/heroes') }).catch(err=>alert('添加失敗'))

24-案例heroes-構建編輯組件

  • 新建文件 HeroesEdit.vue 使用的內容和添加的表單是一致
  • 在列表組件中 的編輯按鈕 綁定了點擊事件 指定 函數 toEdit()
  • 在 toEdit 使用編程式導航 進行了url的跳轉

25-案例heroes-編輯的動態路由配置

在點擊跳轉的事件：

toEdit (id) {
  // 加參數  路徑參數   /heroes/edit/100
  this.$router.push({name: 'heroesEdit', params: {id}})
}
複製代碼

在路由規則中加名字,修改爲動態路由規則

{path:'/heroes/edit/:id',name:'heroesEdit',component:HeroesEdit},
複製代碼

26-案例heroes-默認展現英雄數據

在組件渲染後 mounted函數中 獲取當前id對應的英雄數據

methods:{
      getData(){
        // 根據ID獲取英雄數據
        const id = this.$route.params.id
        // 發請求
        axios.get('http://localhost:3000/heroes/'+id)
          .then(res=>{
            // 獲取數據成功 res.data 就是單個英雄數據
            // 對象中包含 name gender  id ctime
            this.form = res.data
          }).catch(err=>alert('獲取英雄數據失敗'))
      }
    },
    mounted(){
      this.getData()
    }
複製代碼

視圖中修改

<form action="" method="post" role="form">
  <legend>編輯英雄</legend>
  <div class="form-group">
    <label>英雄名稱</label>
    <input type="text" class="form-control" v-model="form.name">
  </div>
  <div class="form-group">
    <label>英雄性別</label>
    <input type="text" class="form-control" v-model="form.gender">
  </div>
  <button type="submit" class="btn btn-primary">提交</button>
</form>
複製代碼

27-案例heroes-編輯功能

edit () {
     // 修改英雄須要哪些數據
     this.form.ctime = new Date()
     axios.put('http://localhost:3000/heroes/' + this.form.id, this.form)
         .then(res => {
         //修改爲功 跳到列表組件
         this.$router.push('/heroes')
     }).catch(err => alert('修改失敗'))
 }
複製代碼
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程