Vue和Element的基本使用

最新推荐文章于 2024-09-19 21:41:32 发布

落魄山上齐剑仙

最新推荐文章于 2024-09-19 21:41:32 发布

阅读量1.8k

点赞数 1

文章标签： vue javascript

本文链接：https://blog.csdn.net/YINJOER/article/details/107103833

版权

Vue和Element

今天给大家介绍以下几个内容：

Vue介绍
Vue 快速入门
Vue 常用指令
Element 基本使用

Vue简单介绍

Vue 是一套构建用户界面的渐进式前端框架。
只关注视图层，并且非常容易学习，还可以很方便的与其它库或已有项目整合。
通过尽可能简单的 API 来实现响应数据的绑定和组合的视图组件。
特点
易用：在有 HTML CSS JavaScript 的基础上，快速上手。
灵活：简单小巧的核心，渐进式技术栈，足以应付任何规模的应用。
性能：20kb min+gzip 运行大小、超快虚拟DOM、最省心的优化。

Vue 快速入门

下载和引入 vue.js 文件。

<script src="js/vue.js"></script>

编写入门程序。
视图：负责页面渲染，主要由 HTML+CSS 构成。
脚本：负责业务数据模型（Model）以及数据的处理逻辑。

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
</head>
<body>
   <div id="div">
       {{msg}}
   </div>
</body>
<script src="js/vue.js"></script>
<script>
   new Vue({
       el:"#div",
       data:{
           msg:"helloworld"
       }
   });
</script>
</html>

运行结果：
在这里插入图片描述

Vue 常用指令

在这里插入图片描述

Element 基本使用

Element 介绍
在这里插入图片描述

Element 快速入门

下载 Element 核心库。
引入 Element 样式文件。

    <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">

引入 Vue 核心 js 文件。

 <script src="js/vue.js"></script>

引入 Element 核心 js 文件。

<script src="element-ui/lib/index.js"></script>

编写按钮标签，通过 Vue 核心对象加载元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>快速入门</title>
    <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
    <script src="js/vue.js"></script>
    <script src="element-ui/lib/index.js"></script>
</head>
<body>
    <button>我是按钮</button>
    <br>
    <div id="div">
        <el-row>
            <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>
          </el-row>
          <br>
          <el-row>
            <el-button plain>朴素按钮</el-button>
            <el-button type="primary" plain>主要按钮</el-button>
            <el-button type="success" plain>成功按钮</el-button>
            <el-button type="info" plain>信息按钮</el-button>
            <el-button type="warning" plain>警告按钮</el-button>
            <el-button type="danger" plain>危险按钮</el-button>
          </el-row>
          <br>
          <el-row>
            <el-button round>圆角按钮</el-button>
            <el-button type="primary" round>主要按钮</el-button>
            <el-button type="success" round>成功按钮</el-button>
            <el-button type="info" round>信息按钮</el-button>
            <el-button type="warning" round>警告按钮</el-button>
            <el-button type="danger" round>危险按钮</el-button>
          </el-row>
          <br>
          <el-row>
            <el-button icon="el-icon-search" circle></el-button>
            <el-button type="primary" icon="el-icon-edit" circle></el-button>
            <el-button type="success" icon="el-icon-check" circle></el-button>
            <el-button type="info" icon="el-icon-message" circle></el-button>
            <el-button type="warning" icon="el-icon-star-off" circle></el-button>
            <el-button type="danger" icon="el-icon-delete" circle></el-button>
          </el-row>
    </div>
</body>
<script>
    new Vue({
      el:"#div"
    });
</script>
</html>