Vue框架、Element组件快速使用

最新推荐文章于 2022-12-19 16:30:18 发布

#老程

最新推荐文章于 2022-12-19 16:30:18 发布

阅读量173

点赞数

分类专栏：前端文章标签： vue

老程出品

本文链接：https://blog.csdn.net/LuckKing0925/article/details/107504979

版权

前端专栏收录该内容

27 篇文章 2 订阅

订阅专栏

1、vue官方文档：

vue文档

2、element组件使用官方文档：

element组件使用

3、代码案例

我是采用cdn的方式引入组件和样式，下面代码实现的是提示框显示

<!DOCTYPE html>
<html lang="en">
	
<head>
	<title>老程</title>
	<meta charset="UTF-8">
	<style>
		@import url("//unpkg.com/element-ui@2.13.2/lib/theme-chalk/index.css");
	</style>
</head>

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui@2.13.2/lib/index.js"></script>

<body>
	<div id="app">
		<template>
		  <el-button :plain="true" @click="open2">成功</el-button>
		  <el-button :plain="true" @click="open3">警告</el-button>
		  <el-button :plain="true" @click="open1">消息</el-button>
		  <el-button :plain="true" @click="open4">错误</el-button>
		</template>
	</div>
</body>

</html>

<script>
	
	var Main = {
    methods: {
      open1() {
        this.$message('这是一条消息提示');
      },
      open2() {
        this.$message({
          message: '恭喜你，这是一条成功消息',
          type: 'success'
        });
      },

      open3() {
        this.$message({
          message: '警告哦，这是一条警告消息',
          type: 'warning'
        });
      },

      open4() {
        this.$message.error('错了哦，这是一条错误消息');
      }
    }
 }
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')

</script>

4、效果截图

#老程

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue框架、Element组件快速使用

1、vue官方文档：vue文档2、element组件使用官方文档：element组件使用3、代码案例我是采用cdn的方式引入组件和样式，下面代码实现的是提示框显示<!DOCTYPE html><html lang="en"> <head> <title>老程</title> <meta charset="UTF-8"> <style> @import url("//unpkg.com/elemen
复制链接

扫一扫