使用cdn(script)使用vue和element-ui

使用cdn(script)使用vue和element-ui

在开发静态页面时,起一个服务方式很麻烦,也不能直接运行。就只想快速、简介、方便运行的开发一个页面,调用后端接口,展示数据。想着vue的双向数据绑定很好用,对毫无样式可言的原生html又还是有点看不上,样式还是有一定要求,因此选用了element-ui。

安装

按照vueelement-ui的官网开发指南中提供的cdn安装方式,直接以script方式引入

使用

跟官网上教程都一样直接使用即可:

new Vue({
  el: '#app',
  data: {},
  methods:{}
})

element-ui的标签也可以直接按官网上一样使用 

<el-table :data="tableData" style="width: 100%">
      <el-table-column prop="date" label="日期" width="180"></el-table-column>
      <el-table-column prop="name" label="姓名" width="180"></el-table-column>
      <el-table-column prop="address" label="地址"></el-table-column>
</el-table>

但是再类似Message的组件,需要引用element的类库就会报错:

TypeError: this.$message is not a function at Object.success (index.html:81)

这时候就需要用以下方式调用message方法:

ELEMENT.Message({
  message: '查询音乐列表成功',
  type: 'success'
});

可以看到ELEMENT可以识别到element-ui对象。Message方法调用成功

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值