Vue项目开发过程中遇到的一些问题总结

转载 (原文地址) chang红达 随笔 js 857阅读 2018-02-27 16:07:11 举报

一、使用vue-cli搭建项目

1.安装vue-cli:安装好node,直接全局安装vue-cli:

安装完成后,使用vue-V查看是否安装成功
查看vue版本号
如果提示“无法识别 'vue' ” ,有可能是 npm 版本过低,可以使用 npm install -g npm 来更新版本。
2.生成项目:首先进入到项目目录中,执行命令:

命令执行之后,会在当前目录生成一个以该名称命名的文件夹:
vue-cli创建项目
配置完成之后,通过命令:cd Vue-Project进入项目目录,使用npm安装相关依赖

启动项目:

如果浏览器打开之后,没有加载出页面,有可能是本地的 8080 端口被占用,需要修改一下配置文件 config>index.js
vue配置文件修改
修改完成之后,项目就算已经搭建成功,可以开始编写自己的代码啦。

二、vue.js程序启动运行时,遇到Unexpected tab character问题

在vuejs程序启动时,会遇到一种常见问题,在终端报错:Unexpected tab character。如下图:
vue项目启动报错
解决方法:
在eslint的配置文件中(.eslintrc)rules项中添加一行:"no-tabs":"off",如下图:
vue报错解决方法

三、v-for 列表数据渲染完后如何重新渲染

当option列表渲染完成之后,如果数据改变需要重新渲染列表,解决方案为:
> 把academyList替换为新数组。官网文档以下两种数据变化vue无法检测:1.通过索引修改值;2.改变数组长度。赋值新数组不属于以上两种,有数据改变,就会有更新,记得在对应vue实例中定义academyList:[]这个数组,然后方法中赋值this.academyList就可以。

四、vue中src实现数据绑定遇到的问题

在vue2中,src实现数据绑定稍不留神就不成功。假定value.src是绑定的数据。
常见错误写法1:

错误之处在于:
1.属性值数据绑定应该用v-bind,应该写成v-bind:src=""
2.直接用引号"value.src"会报错,取不到值。
常见错误写法2:

常见错误写法3:

以上均会报错。正确写法:

五、vue页面中的定时器或者滚动事件报错

当vue项目中的组件被移除后,组件中的定时器和页面滚动事件并不会跟随组件一起移除掉,因此会导致出现一些错误,或影响其它组件的正常运行。
因此离开该页面需要移除这个监听的事件,destroyed在组件移除后执行。

六、vue中使用定时器时this指向问题

箭头函数中的this指向是固定不变(定义函数时的指向),在vue中指向vue;
普通函数中的this指向是变化的(使用函数时的指向),谁调用的指向谁。

在vue的定时器函数中如果要使用普通函数,要使用了一个变量来当中间值:

七、vue-router 页面切换后保持在页面顶部而不是保持原先的滚动位置的办法

vue-router有提供一个方法scrollBehavior,它可以使切换到新路由时,想要页面滚到顶部,或者是保持原先的滚动位置,就像重新加载页面那样。
这个功能只在 HTML5 history 模式下可用。

八、vue关于父组件调用子组件的方法

父组件: 在子组件中加上ref即可通过this.$refs.ref.method调用

<script>
import children from 'components/children/children.vue'
export default {
data(){
return {
}
},
computed: {
},
components: {
'children': children
},
methods:{
parentMethod() {
console.log(this.$refs.c1) //返回的是一个vue对象,所以可以直接调用其方法
this.$refs.c1.childMethod();
}
},
created(){
}
}
</script>

<div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
data: {
activeColor: 'red',
fontSize: 30
}

<div :style="{background: 'url('+ img +')',backgroundSize:cover }"></div>
data:{
img:'xxx.png'
}

<div :style="{background: 'url('+ img +')',backgroundSize:cover }"></div>
data:{
img:'xxx.png'
},
methods:{
// 伪代码 请求数据
getImg(){
this.$http.get().then(function (e) {
this.img = e.data //将数据赋值给img
}.bind(this))
}
},
created(){
// 调用函数
this.getImg()
}

<div v-if='img ' :style="{background: 'url('+ img +')',backgroundSize:cover }"></div>

评论 ( 6 )
最新评论
呵呵弟 2018-05-15 10:46:41 6F

五、vue页面中的定时器或者滚动事件报错

解决方案为watch路由变化 当路由变化时清楚定时器

lawrence 4F 2018-03-27 18:18:13 5F

灰常强大:)

人马在冬至追风 1F 2018-03-27 16:59:27 4F

为什么用react

小智1234 2018-03-12 10:49:34 3F
455540574 2018-03-05 11:26:57 2F

你早点写这笔记就好了~!当初我可是填了好久~

lawrence 2018-02-27 19:41:44 1F

为什么不用react?