Vue框架、Element组件快速使用

1、vue官方文档:

vue文档

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

element组件使用

3、代码案例

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


<html lang="en">
	
<head>
	<title>老程title>
	<meta charset="UTF-8">
	<style>
		@import url("//unpkg.com/[email protected]/lib/theme-chalk/index.css");
	style>
head>

<script src="//unpkg.com/vue/dist/vue.js">script>
<script src="//unpkg.com/[email protected]/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、效果截图
Vue框架、Element组件快速使用_第1张图片

你可能感兴趣的:(前端,vue)