Vue和Element的基本使用

技术2023-05-21 88

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>

页面效果：

以上就是本次的全部介绍，如果有不恰当的地方，欢迎指正。

Processed: 0.011, SQL: 9