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

Posted 2021-08-31 cgblpx

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了小白入门之前端网页技术 Vue进阶相关的知识，希望对你有一定的参考价值。

文章目录

安装 element-ui

安装

访问https://element.eleme.cn/#/zh-CN/component/installation

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

npm i element-ui –D

安装完成其文件保存在项目下的node_modules目录下：

修改 main.js

参考[快速上手]加入以下三行代码

// 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'

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);//引用

Vue.config.productionTip = false


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

修改 Item.vue

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

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

界面原型

以上是关于小白入门之前端网页技术 Vue进阶的主要内容，如果未能解决你的问题，请参考以下文章

小白入门之前端网页技术JavaScript