vue2.0的一些心得

208 阅读1分钟

最近写前端,记录一些使用vue(2.0)的体会。

目前前端趋向与工程化,对比之前用的jquery之类的一些库,使用vue之后,减少了代码量,搭配webpack打包工具等,调试更加方便,自动热启动,构建spa应用等。

搭建开发环境方便,

1.安装node 官网可以下载

2.安装vue-cli脚手架 npm install vue-cli

3.初始化项目 npm init ...期间eslint可以跳过选no

4.安装路由 npm install vue-router

5.安装ajax提交工具axios或fetch npm install axios 或者 npm install fetch

6.启动项目npm run dev

接下来就可以开始你的第一个vue项目了

首先介绍下项目结构

main.js入口函数 程序由此处进入

index.js 配置路由函数

index.html 打包后的spa页面

assets 静态文件存放文件夹例如图片,css等

components 存放子组件的文件夹

app.vue 父组件

图片缺少/src/libs 文件夹 可存放一些自定义函数,前后端交互封装的axios等库函数

config文件夹下为webpack的一些配置

package.json 存放引用的一些依赖等。

下面介绍一下vue的生命周期

created初始化一些属性值,在页面初始化之前调用

mounted页面初始化完成后,做一些操作

data与computed()的区别

data一般用来初始化一些属性,如果需要改变则需要使用this.x=xxxx来改变

computed()则为响应式的,可以用来监控其他变量,自主改变自身变量,做到响应式变化。

最后说一下vue-router的一些钩子函数

beforeRouteEnter响应路由进入时

beforeRouteUpdate响应路由更新时

beforeRouteLeave响应路由离开时