- 切记引入elementui的前提是引入vue
常见出错的情况：
一个简单的html页面或者一个非vue的项目，想要引入elementui的组件，然后引入elementui之后发现样式不起作用，很大一个原因就是没有引入vue
为方便此处CDN引入
<!--引入 element-ui 的样式，-->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 必须先引入vue， 后使用element-ui -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<!-- 引入element 的组件库-->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>引入vue之后发现还是不显示样式
原因：引入vue就得有挂载 所以vue的基本“样子”得有
此处简单举个el-button的例子
<div id="app">
<el-button type="primary">主要按钮</el-button>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
}
})
</scipt>- form标签里边自己写的按钮点击后无法调用事件
是以下这么个情况
<form>
<input type="text" />
..............不详细写了
<button @click="submit()">提交</button>
</form>点击提交按钮发现submit()方法调用不了
网上百度了半天最终原因是：
一旦写了form标签，form会有本身的提交函数，自己写的提交就调用不了
解决方法：
把form自带的提交给他关了
可以单独在<script></script>中写个函数
也可简单一点直接写在form标签里
<form onsubmit="return false;">
.....
</form>- vue的methods中函数调用不了
实际场景是这样:
//代码如下
<div id="app">
......
<el-button type="primary" @click=“method2()”>主要按钮</el-button>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
},
mounted(){
this.method1()
}，
methods: {
method1(){
axios...发了一个请求 记得如果要用axios记得引入axios
},//不详细写具体的方法了
method2(){
axios...发了一个请求 记得如果要用axios记得引入axios
}
}
})
</scipt>
//实际情况
method2()的axios请求一直发不出去 但是method1() 就可以
说明后端接口没问题【这是当时在排错】原因：？？？？欢迎大家评论区指点
大概就是this的指向这些问题吧
解决方法：
//在created里边加两行
<script>
var app = new Vue({
el: '#app',
data: {
},
created(){
var that = this
window.method1 = that.method1
},
mounted(){
this.method1()
}，
methods: {
method1(){
axios...发了一个请求 记得如果要用axios记得引入axios
},//不详细写具体的方法了
method2(){
axios...发了一个请求 记得如果要用axios记得引入axios
}
}
})
</scipt>- 类似3的问题 从后端请求回来的数据赋值给this.变量 页面无法渲染请求回来的数据
实际情况
//我们想要的效果是页面渲染出我们从后端请求回来的数据，但是实际上并没有
//代码如下
<div id="app">
{{message}}
</div>
<script>
var app = new Vue({
el: '#app',
data() {
return{
message:""
}
},
//或者这样写也行 这不影响
data: {
message:""
}
mounted(){
this.method1()
}，
methods: {
method1(){
axios.get(url.then(res => {
this.message = res.data
})
}
})
</scipt>解决方法：
methods: {
method1(){
var self = this //此处this是全局
axios.get(url.then(res => {
self.message = res.data //此处我们定义的self是局部
})
} 有些问题在之前用vue-cli搭建的前端项目中从来没有遇到过的，以上是基于在html文件中CDN引入vue时候遇到的问题
博客内容写的不够严谨和不够清晰的地方欢迎大家指正交流。
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
