小白入門之前端網頁技術 Vue進階-有解無憂

文章目錄

- 自定義組件
- - 創建組件Car.vue
  - 修改App.vue,注冊自定義組件
  - 測驗
- 安裝 element-ui
- - 安裝
  - 修改 main.js,引入Element
  - 修改 Car.vue
- 基礎知識
- - 布局 layout
  - 容器 container
  - 圖示 icon
  - 按鈕 button
  - 表格 table
  - 當前行 scope
  - 表單 form
  - 輸入框 input
- 擴展:JavaScript API
- - splice
  - Object.assign
  - copyObject
- 專案案例：商品后臺管理系統
- - 界面原型

自定義組件

在這里插入圖片描述

創建組件Car.vue

<template>
  <!-- 獲取值 -->
  <h1>{{msg}}</h1>
  <!--  <h1>{{msg}}</h1> 報錯,只能有一個根標簽 -->
</template>

<script>
  /* 自定義組件 */
  export default{
    name:'Car',
    data(){
      return{
        msg:'hi components'
      }
    }
  }
</script>

<style>
</style>

修改App.vue,注冊自定義組件

<template>
  <div id="app">
      <!-- 3.使用自定義組件,就像用標簽 -->
    <Car></Car>
  </div>
</template>

<script>
  // 1.匯入自定義組件,必須寫./
  import Car from './components/Car.vue'

  export default {
    name: 'App',
    components:{ // 2.添加自定義組件
      Car //用了第一步的名字
    }
  }
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

測驗

在這里插入圖片描述

安裝 element-ui

安裝

訪問官網: https://element.eleme.cn/#/zh-CN/component/installation,查看組件指南
在工程目錄下,使用 npm 的方式安裝，它能更好地和 webpack 打包工具配合使用，

npm i element-ui –D  # 下載資料,這可能要等幾分鐘

安裝完成其檔案保存在專案下的node_modules目錄下：
在這里插入圖片描述

修改 main.js,引入Element

你可以引入整個 Element，或是根據需要僅引入部分組件，我們先介紹如何引入完整的 Element，
你可以參考官網的【快速上手】

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false

import ElementUI from 'element-ui'; //匯入element
import 'element-ui/lib/theme-chalk/index.css';//匯入element的css
//以上代碼便完成了 Element 的引入，需要注意的是，樣式檔案需要單獨引入，
Vue.use(ElementUI);//使用element


/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

修改 Car.vue

至此，一個基于 Vue 和 Element 的開發環境已經搭建完畢，現在就可以使用Element代碼了，

<template>
  <!-- 獲取值 -->
  <div>
   <i class="el-icon-edit"></i>
   <i class="el-icon-share"></i>
   <i class="el-icon-delete"></i>
   <el-button type="primary" icon="el-icon-search">搜索</el-button>
    {{msg}}
  </div>
<!--  <h1>{{msg}}</h1> 報錯,只能有一個根標簽 -->


</template>

<script>
  // 定義匯出的組件
  export default{
    name:'Item',
    data(){
      return{
        msg:'京淘電商管理系統'
      }
    }
  }
</script>

<style>
</style>

基礎知識

布局 layout

柵格體系：把頁面分成24分欄，可以形成PC端、移動端自適應，

<template>
  <div>
<!-- 2.使用ele的柵格,默認24列,可以自適應螢屏的寬度 -->
<!-- el-row表示行,el-col表示列 ,:span合并列數-->
  <el-row> 
    <el-col :span="24">123</el-col>
  </el-row>
  <el-row>
    <el-col :span="12">abc</el-col>
    <el-col :span="12">123</el-col>
  </el-row>

  </div>
</template>

<script>
  // 定義匯出的組件
  export default{
    name:'Item',
    data(){
      return{
        msg:'京淘電商管理系統'
      }
    }
  }
</script>

<style>
</style>

容器 container

用于布局的容器組件，方便快速搭建頁面的基本結構：

在這里插入圖片描述

圖示 icon

https://element.eleme.cn/#/zh-CN/component/icon

在這里插入圖片描述

<template>
  <!-- 獲取值 -->
  <div>
    <!-- 1.使用ele的各種圖示-->
     <i class="el-icon-edit"></i>
     <i class="el-icon-share"></i>
     <i class="el-icon-delete"></i>
     <i class="el-icon-eleme"></i>
  
  </div>
</template>

<script>
  // 定義匯出的組件
  export default{
    name:'Item',
    data(){
      return{
        msg:'京淘電商管理系統'
      }
    }
  }
</script>

<style>
</style>

按鈕 button

https://element.eleme.cn/#/zh-CN/component/button
在這里插入圖片描述

<template>
  <!-- 獲取值 -->
  <div>
    <!-- 1.使用ele的各種按鈕-->
     <el-button type="primary" icon="el-icon-search">搜索</el-button>
<el-button>默認按鈕</el-button>
      <el-button type="primary">主要按鈕</el-button>
      <el-button type="success">成功按鈕</el-button>
      <el-button type="info">資訊按鈕</el-button>
      <el-button type="warning">警告按鈕</el-button>
      <el-button type="danger">危險按鈕</el-button>
  
  </div>
</template>

<script>
  // 定義匯出的組件
  export default{
    name:'Item',
    data(){
      return{
        msg:'京淘電商管理系統'
      }
    }
  }
</script>

<style>
</style>

表格 table

<template>
  <!-- 獲取值 -->
  <div>
    
    <!-- 3.使用ele的表格,a創建表格,b準備資料,c系結資料 -->
    <el-row >
      <el-button type="info" @click="toadd">新增</el-button>
    </el-row>
  <el-table :data="list"> <!-- :data獲取指定資料 ,prop是json里的key-->
        <el-table-column label="編號" prop="id"></el-table-column>
        <el-table-column label="名稱" prop="name"></el-table-column>
        <el-table-column label="價格" prop="price"></el-table-column>
        <el-table-column label="更多">
<el-button type="primary" icon="el-icon-edit" circle @click="toupdate"></el-button>
<el-button type="danger" icon="el-icon-delete" circle @click="del"></el-button>
        </el-table-column>
    </el-table>

  </div>
</template>

<script>
  // 定義匯出的組件
  export default{
    name:'Item',
    data(){
      return{
        msg:'京淘電商管理系統',
        // b. 準備表格要的資料
        list:[
          {
            id:1001,
            name:"鄭州加油",
            price:1000
          },
          {
            id:1002,
            name:"廣州加油",
            price:1000
          }
        ]
      }
    },
   // 1,宣告按鈕  2,添加事件methods 3,給按鈕系結事件@click
    methods:{
        toadd:function(){
          console.log("新增業務成功")
        },
        toupdate:function(){
          console.log("修改業務成功")
        },
        del:function(){
          console.log("洗掉成功")
        }
      }
  }
</script>

<style>
</style>

當前行 scope

Vue提供了語言編譯的能力，提供了變數，這些變數在具體運行時才被指定內容，那開發者如何使用這些變數和html組合呢？就是通過<template slot-scope>，

<template slot-scope="scope"> vue提供的slot-scope槽，scope變數名
scope.$index 									代表當前行的索引值
scope.row 										代表當前行資料
@click="del(index)" 							傳遞當前行索引值
@click="toupdate(scope.$index,scope.row)" 	傳遞當前行的資料

表單 form

在這里插入圖片描述

<template>
  <!-- 獲取值 -->
  <div>
	<!-- 制作表單 el-form表示表單,el-form-item表示表單項
1,資料區提供資料 2,給form指定雙向系結:model="m" 3,input雙向系結獲取資料v-model="m.price"
  -->
    <el-form label-width="80px" :model="m">
      <el-form-item label="標題">
          <el-input v-model="m.title" ></el-input>
      </el-form-item>
      <el-form-item label="賣點">
        <el-input v-model="m.sellPoint"></el-input>
      </el-form-item>
      <el-form-item label="價格">
        <el-input v-model="m.price"></el-input>
      </el-form-item>
      <el-form-item label="詳情">
        <el-input type="textarea" v-model="m.note"></el-input>
      </el-form-item>
      <el-button type="primary" @click="save">提交</el-button>
      <el-button>取消</el-button>
    </el-form>

    </div>
</template>

<script>
  // 定義匯出的組件
  export default{
    name:'Item',
    data(){
      return{
        msg:'京淘電商管理系統',
        //給表單準備資料,資料驅動,雙向系結
        m:{
          title:'null',
          price:'0',
          note:'null',
          sellPoint:'null'
        }
      }
    },
   // 1,宣告按鈕  2,添加事件methods 3,給按鈕系結事件@click
    methods:{
      save:function(){ //表單提交
        // console.log("submit")
        console.log(this.m) //呼叫上面的變數m
      }
      }
  }
</script>

<style>
</style>

輸入框 input

<el-input v-model="input" placeholder="請輸入內容"></el-input>

<script>
export default {
  data() {
    return {
      input: ''
    }
  }
}
</script>

擴展:JavaScript API

splice

這是js中相關陣列的最強大一個函式，功能豐富：

this.list.splice(n, m, i) //三個引數：第n位置，洗掉m個，i新值

在這里插入圖片描述

Object.assign

淺拷貝：拷貝物件的屬性

//利用ES6 api Object的assign方法，復制空陣列實作置空現有model物件

//第一個引數代表新陣列，第二個引數代表每個元素為空值

this.m = Object.assign({},{})

不好理解，很少用，會用即可

快捷置空方法(把資料都清空了)：

this.m = {}

copyObject

復制物件

打斷Vue的資料系結：

forin通過key變數物件obj的每個元素，obj[key]獲取對應的值

copyObj(obj){

var newObj = {}

for(var key in obj){

newObj[key] = obj[key]

}

return newObj;

}

還可以利用JSON的轉換，形成新物件：

this.m = JSON.parse(JSON.stringify(row));

專案案例：商品后臺管理系統

界面原型

在這里插入圖片描述

轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/292091.html

標籤：其他

上一篇：session、token、jwt、oauth2 傻傻分不清

下一篇：小邊同學和你下【三子棋】（C語言）