小白入门之前端网页技术 Vue进阶

阳光穿透心脏的1/2处 2021-09-11 03:22 428阅读 0赞

### 文章目录 ###

*   *  自定义组件
     *   *  概述
         *  项目结构
         *  创建组件Car.vue
         *  修改App.vue,注册自定义组件
         *  测试
     *  安装 element-ui
     *   *  安装
         *  修改 main.js,引入Element
         *  修改 Car.vue
     *  基础知识
     *   *  布局 layout
         *  图标 icon
         *  按钮 button
         *  输入框 input
         *  表格 table
         *  表单 form
     *  扩展:JavaScript API
     *   *  splice
         *  Object.assign
         *  copyObject
     *  项目案例：商品后台管理系统
     *   *  界面原型

## 自定义组件 ##

### 概述 ###

组件（Component）是 Vue.js 最强大的功能之一。  
组件可以扩展 HTML 元素，封装可重用的代码。  
组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树

### 项目结构 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI5MzI4NzY_size_16_color_FFFFFF_t_70]

### 创建组件Car.vue ###

<template>
      
      <h1>{
       {msg}}</h1>
      
    </template>
    
    <script> /* 自定义组件 */ export default{ name:'Car', data(){ return{ msg:'hi components' } } } </script>
    
    <style> </style>

### 修改App.vue,注册自定义组件 ###

<template>
      <div id="app">
          
        <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>

### 测试 ###

![在这里插入图片描述][956503e6a04942bb91977578fb9114ea.png]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI5MzI4NzY_size_16_color_FFFFFF_t_70 1]

## 安装 element-ui ##

访问官网: https://element.eleme.cn/\#/zh-CN/component/installation,查看组件指南

### 安装 ###

在工程目录下,使用 npm 的方式安装，它能更好地和 webpack 打包工具配合使用。

npm i element-ui –D  # 下载资料,这可能要等几分钟

安装完成其文件保存在项目下的node\_modules目录下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI5MzI4NzY_size_16_color_FFFFFF_t_70 2]

### 修改 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>
    
    
    
    </template>
    
    <script> // 定义导出的组件 export default{ name:'Item', data(){ return{ msg:'京淘电商管理系统' } } } </script>
    
    <style> </style>

## 基础知识 ##

### 布局 layout ###

栅格体系：把页面分成24分栏，可以形成PC端、移动端自适应。

<template>
      <div>
    
    
      <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>

### 图标 icon ###

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI5MzI4NzY_size_16_color_FFFFFF_t_70 3]

<template>
      
      <div>
        
         <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  
![在这里插入图片描述][eef381cb45db40109459a33b7a67e9f7.png]

<template>
      
      <div>
        
         <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>

### 输入框 input ###

<el-input placeholder="用户名" v-model="msg"></el-input>
      <el-input placeholder="密码" v-model="msg" show-password></el-input>
    
    
    <script> export default { data() { return { input: '' } } } </script>

### 表格 table ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI5MzI4NzY_size_16_color_FFFFFF_t_70 4]

<template>
      
      <div>
        
        
        <el-row >
          <el-button type="info" @click="toadd">新增</el-button>
        </el-row>
      	<el-table :data="list">
           <el-table-column label="编号" prop="id"></el-table-column>
           <el-table-column label="标题" prop="title"></el-table-column>
           <el-table-column label="卖点" prop="sell"></el-table-column>
           <el-table-column label="描述" prop="desc"></el-table-column>
           <el-table-column label="更多">
              <el-button type="primary" @click="toupdate()">编辑</el-button>
              <el-button type="success" @click="del()">删除</el-button>
           </el-table-column>
         </el-table>
      </div>
    </template>
    
    <script> // 定义导出的组件 export default{ name:'Item', data(){ return{ msg:'京淘电商管理系统', // b. 准备表格要的数据 list:[ { id:100, title:'鸿星尔克', sell:'为中国代言', desc:'to be no.1' }, { id:101, title:'蜜雪冰城', sell:'一瓶只赚1毛钱', desc:'你爱我我爱你蜜雪冰城甜蜜蜜' }, { id:102, title:'特步', sell:'有一种踩.的感觉', desc:'飞一样的感觉' } ] } }, // 1,声明按钮 2,添加事件methods 3,给按钮绑定事件@click methods:{ toadd:function(){ console.log("新增业务成功") }, toupdate:function(){ console.log("修改业务成功") }, del:function(){ console.log("删除成功") } } } </script>
    
    <style> </style>

### 表单 form ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI5MzI4NzY_size_16_color_FFFFFF_t_70 5]

<template>
      
      <div>
    	
        <el-form label-width="100px" :model="form">
        <el-form-item label="标题">
          <el-input placeholder="请输入标题" v-model="form.title"></el-input>
        </el-form-item>
        <el-form-item label="卖点">
          <el-input v-model="form.sell"></el-input>
        </el-form-item>
        <el-form-item label="价格">
          <el-input v-model="form.price"></el-input>
        </el-form-item>
        <el-form-item label="详情">
          <el-input type="textarea" v-model="form.desc"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="save()" type="success">保存</el-button>
        </el-form-item>
      </el-form>
    
        </div>
    </template>
    
    <script> // 定义导出的组件 export default{ name:'Item', data(){ return{ msg:'京淘电商管理系统', //给表单准备数据,数据驱动,双向绑定 msg:'hi components', form:{ title:"test", sell:'爆款热销', price:999, desc:"我是详情..." }, } }, // 1,声明按钮 2,添加事件methods 3,给按钮绑定事件@click methods:{ save:function(){ //表单提交 // console.log("submit") console.log(this.m) //调用上面的变量m } } } </script>
    
    <style> </style>

## 扩展:JavaScript API ##

### splice ###

这是js中相关数组的最强大一个函数，功能丰富：

this.list.splice(n, m, i) //三个参数：第n位置，删除m个，i新值

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI5MzI4NzY_size_16_color_FFFFFF_t_70 6]

### 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));

## 项目案例：商品后台管理系统 ##

### 界面原型 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI5MzI4NzY_size_16_color_FFFFFF_t_70 7]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI5MzI4NzY_size_16_color_FFFFFF_t_70]: /images/20210911/f3037cdf557f48358161b5fd15e68e17.png
[956503e6a04942bb91977578fb9114ea.png]: /images/20210911/b52fb30ab3e544f8b2dbe57c09aa20dc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI5MzI4NzY_size_16_color_FFFFFF_t_70 1]: /images/20210911/d8aacd8d03874a55a94b14727e1da422.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI5MzI4NzY_size_16_color_FFFFFF_t_70 2]: /images/20210911/276354702e214e04a376ce8e050b5bc1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI5MzI4NzY_size_16_color_FFFFFF_t_70 3]: /images/20210911/8933c7fd87fe420d8f84412de351a62e.png
[eef381cb45db40109459a33b7a67e9f7.png]: /images/20210911/3a3c6b8739354dfb90cfc2211f026302.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI5MzI4NzY_size_16_color_FFFFFF_t_70 4]: /images/20210911/f3cdfa4298fc46169fffa6d493d4fb07.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI5MzI4NzY_size_16_color_FFFFFF_t_70 5]: /images/20210911/850ae2b92f094da299502f19ae1c4b5d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI5MzI4NzY_size_16_color_FFFFFF_t_70 6]: /images/20210911/e78e88e27f644598b787957ba0f6bc92.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI5MzI4NzY_size_16_color_FFFFFF_t_70 7]: /images/20210911/b9bae1d173e24a89975d26d5ae505d1a.png