以前项目组一直用的angularJS,项目即将转型用vue,所以开启了学习之旅,记录我的学习过程和遇到的问题。

看了很多文章,大致也差不多,直接入正题,下面是我的今天学习记录。

注意:需要安装node,会用到npm,我以前已经搞好了一切,就不写入记录里面了。

1. 打开终端(windows就是命令提示符),生成一个package.json,输入:npm init -y  

我的vue学习记录(一)

2.  安装vue输入:npm install vue         -->一切正常,无报错。

3. 安装webpack输入:npm install webpack -g       -->nice,无报错

4. 全局安装vue-cli构建工具输入:npm install --global vue-cli

我的vue学习记录(一)

emmmm..报错了!权限问题,重来!

从新输入:sudo npm install --global vue-cli  --->nice!安装完成。

5. 现在就使用vue-cli 来构建项目,新建一个项目文件,并终端找到项目所在位置(我是直接webstrom打开这个文件夹,打开项目terminal终端)

输入命令:vue init web pack my-vue   --->依次键入问题的答案,看图:⬇️

我的vue学习记录(一)

然后就会出现下面的提示,就表明咱们创建vue项目成功了!!

我的vue学习记录(一)

—————————————————————————————————————————————————————————

创建vue项目成功之后,我学习了一些基本的语法及API,这个就不记录了,主要记录一下我今天学习的几个钩子函数及对钩子函数的浅显总结:

1.  beforeCreate: vue实例创建之前,methods,data,watch下的东西都还拿不到,即this不能使用。

我的vue学习记录(一)

 

2. created: vue实例创建之后,还未挂载(页面还未加载完全),不能操作dom,但是能使用this。

我的vue学习记录(一)

我的vue学习记录(一)

3. mounted: 挂载完毕,能够操作dom,此函数只能执行一次。

我的vue学习记录(一)

4. computed: 计算属性,默认取缓存,不支持异步,属性依赖的值发生变化的时候,才会触发。

我的vue学习记录(一)

5.  watch:监测vue实例上的数据变动,不支持缓存,支持异步

我的vue学习记录(一)

 

相关文章:

  • 2021-08-11
  • 2021-05-17
  • 2022-12-23
  • 2021-11-04
  • 2021-05-30
  • 2022-12-23
  • 2022-12-23
猜你喜欢
  • 2022-12-23
  • 2022-12-23
  • 2021-04-26
  • 2021-11-08
  • 2022-12-23
相关资源
相似解决方案