vue的elementUI开发

elementUI开发

  • ElementUI

ElementUI

  1. 我们学习VUE,知道它的核心思想是组件和数据驱动,但是每一个组件都需要自己编写模板,样式,添加事件,数据等是非常麻烦的,所以饿了吗推出了基于VUE2.0的组件库,它的名称叫做element-ui,提供了丰富的PC端组件
    ElementUI官网:http://element-cn.eleme.io/#/zh-CN
    vue的elementUI开发_第1张图片

注1:类似前端框架还有iview

  1. Vue+ElementUI安装
    CDN方式
 
  <link href="https://cdn.bootcss.com/element-ui/2.8.2/theme-chalk/index.css" rel="stylesheet">
  
  <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js">script>
  
  <script src="https://cdn.bootcss.com/vue-router/3.0.6/vue-router.js">script>
  
  <script src="https://cdn.bootcss.com/element-ui/2.8.2/index.js">script> 
  1. 完整代理案例

<html>
	<head>
		<meta charset="utf-8" />
		<title>title>
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.1/vue.js">script>
		
        <link href="https://cdn.bootcss.com/element-ui/2.8.2/theme-chalk/index.css" rel="stylesheet">
        
        <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js">script>
        
        <script src="https://cdn.bootcss.com/vue-router/3.0.6/vue-router.js">script>
        
        <script src="https://cdn.bootcss.com/element-ui/2.8.2/index.js">script> 
	head>
	<body>
		<div id="app">
			<el-button type="text" @click="open">点击打开 Message Boxel-button>
		div>
	body>


<script>
	var vm=new Vue({
		el:'#app',
		data:{
			
		},
		methods: {
		  open() {
			this.$alert('这是 HTML 片段', 'HTML 片段', {
			  dangerouslyUseHTMLString: true
			});
		  }
		}
	});
   
 
script>
html>

vue的elementUI开发_第2张图片
vue的elementUI开发_第3张图片

你可能感兴趣的:(vue的elementUI开发)