Vue框架开发新手学习之路

超心塞的阿秋

已于 2022-08-26 11:19:15 修改

阅读量648

点赞数

文章标签： vue.js 学习 javascript elementui

于 2022-07-29 13:26:33 首次发布

本文链接：https://blog.csdn.net/qq_36697072/article/details/126051874

版权

Vue框架开发

1、vue帮助文档
2、vue cli 帮助文档
3、学习笔记参考

目录

Vue框架开发
@[TOC](目录)

一、Vue测试项目搭建（Idea）
二、Vue生命周期
1、创建部分(create)
2、挂载阶段(mount)
3、更新阶段(update)
4、销毁阶段(destory)

三、标签
四、父组件调用子组件
1、props的使用：父给子传值
2、ref的使用:父给子传值 / 调用子组件的方法
3、children

五、子组件调用父组件
1、this.$parent
2、this.$emit()
3、props

兄弟组件的调用
父子组件双向绑定
六、slot的使用
九、vuex
1、vuex安装（需先安装vue-cli）

自学笔记，内容仅供参考
目前学习进度：axios/router/登录校验/前后端流程/项目搭建/elementui融合/各功能细节：登录，导出，表单，表格，复用/

一、Vue测试项目搭建（Idea）

D:\workspace\test12>npm -v
8.11.0
D:\workspace\test12>vue -v
Usage: vue <command> [options]

Options:
  -V, --version                              output the version number
  -h, --help                                 display help for command

Commands:
  create [options] <app-name>                create a new project powered by vue-cli-service
  add [options] <plugin> [pluginOptions]     install a plugin and invoke its generator in an already created project
  invoke [options] <plugin> [pluginOptions]  invoke the generator of a plugin in an already created project
  inspect [options] [paths...]               inspect the webpack config in a project with vue-cli-service
  serve                                      alias of "npm run serve" in the current project
  build                                      alias of "npm run build" in the current project
  ui [options]                               start and open the vue-cli ui
  init [options] <template> <app-name>       generate a project from a remote template (legacy API, requires @vue/cli-init)
  config [options] [value]                   inspect and modify the config
  outdated [options]                         (experimental) check for outdated vue cli service / plugins
  upgrade [options] [plugin-name]            (experimental) upgrade vue cli service / plugins
  migrate [options] [plugin-name]            (experimental) run migrator for an already-installed cli plugin
  info                                       print debugging information about your environment
  help [command]                             display help for command

  Run vue <command> --help for detailed usage of given command.

D:\workspace\test12>npm install vue

npm WARN ERESOLVE overriding peer dependency

added 1 package, and removed 1 package in 3s

D:\workspace\test12>vue -v

Usage: vue <command> [options]

Options:
  -V, --version                              output the version number
  -h, --help                                 display help for command

Commands:
  create [options] <app-name>                create a new project powered by vue-cli-service
  add [options] <plugin> [pluginOptions]     install a plugin and invoke its generator in an already created project
  invoke [options] <plugin> [pluginOptions]  invoke the generator of a plugin in an already created project
  inspect [options] [paths...]               inspect the webpack config in a project with vue-cli-service
  serve                                      alias of "npm run serve" in the current project
  build                                      alias of "npm run build" in the current project
  ui [options]                               start and open the vue-cli ui
  init [options] <template> <app-name>       generate a project from a remote template (legacy API, requires @vue/cli-init)
  config [options] [value]                   inspect and modify the config
  outdated [options]                         (experimental) check for outdated vue cli service / plugins
  upgrade [options] [plugin-name]            (experimental) upgrade vue cli service / plugins
  migrate [options] [plugin-name]            (experimental) run migrator for an already-installed cli plugin
  info                                       print debugging information about your environment
  help [command]                             display help for command

  Run vue <command> --help for detailed usage of given command.

D:\workspace\test12>npm install --global vue-cli

npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead.
npm WARN deprecated har-validator@5.1.5: this library is no longer supported
npm WARN deprecated uuid@3.4.0: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances,
 which is known to be problematic.  See https://v8.dev/blog/math-random for details.
npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated coffee-script@1.12.7: CoffeeScript on NPM has moved to "coffeescript" (no hyphen)
npm ERR! code EEXIST
npm ERR! path C:\Users\94762\AppData\Roaming\npm\vue.cmd
npm ERR! EEXIST: file already exists
npm ERR! File exists: C:\Users\94762\AppData\Roaming\npm\vue.cmd
npm ERR! Remove the existing file and try again, or run npm
npm ERR! with --force to overwrite files recklessly.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\94762\AppData\Local\npm-cache\_logs\2022-07-19T15_00_11_310Z-debug-0.log

D:\workspace\test12>vue init webpack my_web

 Command vue init requires a global addon to be installed.
  Please run npm i -g @vue/cli-init and try again.

D:\workspace\test12>npm install --global vue-cli

npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead.
npm WARN deprecated har-validator@5.1.5: this library is no longer supported
npm WARN deprecated uuid@3.4.0: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances,
 which is known to be problematic.  See https://v8.dev/blog/math-random for details.
npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated coffee-script@1.12.7: CoffeeScript on NPM has moved to "coffeescript" (no hyphen)
npm WARN deprecated vue-cli@2.9.6: This package has been deprecated in favour of @vue/cli

added 230 packages, and audited 231 packages in 1m
9 packages are looking for funding
  run `npm fund` for details
4 vulnerabilities (2 moderate, 2 high)
To address all issues (including breaking changes), run:
  npm audit fix --force
Run `npm audit` for details.

D:\workspace\test12>vue init webpack my_web

'git'      ڲ    ⲿ   Ҳ   ǿ    еĳ   
       ļ 
? Project name my_web
? Project description A Vue.js project
? Author
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? No
? Set up unit tests No
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been
 created? (recommended) no

   vue-cli · Generated "my_web".

# Project initialization finished!
# ========================

To get started:

  cd my_web
  npm install (or if using yarn: yarn)
  npm run dev

Documentation can be found at https://vuejs-templates.github.io/
webpack

D:\workspace\test12>cd my_web

D:\workspace\test12\my_web>npm run dev

> my_web@1.0.0 dev
> webpack-dev-server --inline --progress --config build/webpack.
dev.conf.js

CLI for webpack must be installed.
  webpack-cli (https://github.com/webpack/webpack-cli)

We will use "npm" to install the CLI via "npm install -D webpack
-cli".

Do you want to install 'webpack-cli' (yes/no): no

You need to install 'webpack-cli' to use webpack via CLI.
You can also install the CLI manually.

D:\workspace\test12\my_web>npm install -D webpack

npm WARN deprecated stable@0.1.8: Modern JS already guarantees A
rray#sort() is a stable sort, so this library is deprecated. See
 the compatibility table on MDN: https://developer.mozilla.org/e
n-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#bro
wser_compatibility
npm WARN deprecated source-map-url@0.4.1: See https://github.com
/lydell/source-map-url#deprecated
npm WARN deprecated urix@0.1.0: Please see https://github.com/ly
dell/urix#deprecated
npm WARN deprecated source-map-resolve@0.5.3: See https://github
.com/lydell/source-map-resolve#deprecated
npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell
/resolve-url#deprecated
npm WARN deprecated uuid@3.4.0: Please upgrade  to version 7 or
higher.  Older versions may use Math.random() in certain circums
tances, which is known to be problematic.  See https://v8.dev/bl
og/math-random for details.
npm WARN deprecated bfj-node4@5.3.1: Switch to the `bfj` package
 for fixes and new features!
npm WARN deprecated querystring@0.2.0: The querystring API is co
nsidered Legacy. new code should use the URLSearchParams API ins
tead.
npm WARN deprecated flatten@1.0.3: flatten is deprecated in favo
r of utility frameworks such as lodash.
npm WARN deprecated svgo@0.7.2: This SVGO version is no longer s
upported. Upgrade to v2.x.x.
npm WARN deprecated browserslist@2.11.3: Browserslist 2 could fa
il on reading Browserslist >3.0 config used in other tools.
npm WARN deprecated uglify-es@3.3.9: support for ECMAScript is s
uperseded by `uglify-js` as of v3.13.0
npm WARN deprecated html-webpack-plugin@2.30.1: out of support
npm WARN deprecated extract-text-webpack-plugin@3.0.2: Deprecate
d. Please use https://github.com/webpack-contrib/mini-css-extrac
t-plugin
npm WARN deprecated core-js@2.6.12: core-js@<3.23.3 is no longer
 maintained and not recommended for usage due to the number of i
ssues. Because of the V8 engine whims, feature detection in old
core-js versions could cause a slowdown up to 100x even if nothi
ng is polyfilled. Some versions have web compatibility issues. P
lease, upgrade your dependencies to the actual version of core-j
s.
npm WARN deprecated chokidar@2.1.8: Chokidar 2 does not receive
security updates since 2019. Upgrade to chokidar 3 with 15x fewe
r dependencies
npm WARN deprecated svgo@1.3.2: This SVGO version is no longer s
upported. Upgrade to v2.x.x.
npm WARN deprecated browserslist@1.7.7: Browserslist 2 could fai
l on reading Browserslist >3.0 config used in other tools.
npm WARN deprecated browserslist@1.7.7: Browserslist 2 could fai
l on reading Browserslist >3.0 config used in other tools.
npm WARN deprecated browserslist@1.7.7: Browserslist 2 could fai
l on reading Browserslist >3.0 config used in other tools.
npm WARN deprecated chokidar@2.1.8: Chokidar 2 does not receive
security updates since 2019. Upgrade to chokidar 3 with 15x fewe
r dependencies

added 1294 packages, and audited 1295 packages in 12m

70 packages are looking for funding
  run `npm fund` for details

80 vulnerabilities (55 moderate, 20 high, 5 critical)

To address issues that do not require attention, run:
  npm audit fix

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.

D:\workspace\test12\my_web>npm run dev

> my_web@1.0.0 dev
> webpack-dev-server --inline --progress --config build/webpack.
dev.conf.js

(node:6208) [DEP0111] DeprecationWarning: Access to process.bind
ing('http_parser') is deprecated.
(Use `node --trace-deprecation ...` to show where the warning wa
s created)
 10% building modules 0/1 modules 1 active ... webpack/hot/dev-s
...
 95% emitting

 DONE  Compiled successfully in 1872ms                  23:32:57

 I  Your application is running here: http://localhost:8080

二、Vue生命周期

1、创建部分(create)

beforeCreate在vue实例初始化后，没有进行数据读取前就触发，如果在此时进行读取data中的数据就会提示unfined。 
created 是在实例创建完成后再被调用，此时data中的数据已经写入完成，但是还没有进行dom的挂载，也就还没有与页面进行关联。

2、挂载阶段(mount)

该阶段就是将页面中dom挂载到实例化后的vue对象上。简单的说就是执行了 el: ‘#dom'。
beforemount 是在挂载之前触发，仅对模板进行解析，如果此时输出需要挂载的dom的innerHTML的话，会将模板原样输出，并没有将数据进行渲染。 
mounted 是在dom挂载之后，可以将data中的数据渲染的页面上。

3、更新阶段(update)

该阶段是在页面上的数据在第一次加载之后再次进行更新的时候。同样对应两个接口 beforeupdate 和 update。
这两个接口的差异主要在于有没有对页面dom进行渲染。在我们对data中的数据进行修改，且修改完成后触发 beforeupdate ，此时data中的属性值已经是修改完成的状态，但是没有对页面的dom进行渲染。update 就是将数据渲染到页面上。

4、销毁阶段(destory)

在一个实列被销毁后，该实例所绑定的所有事件都会失效，监听器也会被移出。该阶段对应两个接口 beforeDestroy 和 destroy。
deforeDestory是在实例需要被销毁但是还没有先回之前调用，此时该实例的的绑定的各类事件、监听器仍然可用。 
destroy是在实例销毁后调用，此时该实例的所有东西都不能使用，但是页面上的数据仍保持页面最后一次渲染的数据。

三、标签

1、v-bind :disabled
单向绑定属性

:value
:src :href

:class 动态绑定class
1、对象语法
:class=“{ class1:isActive, class2:isLine }” 通过修改data属性isActive，确定class样式是true还是false；{ class1:isActive, class2:isLine }也可放到方法中return，:class调用该方法。
2、数组语法
:class=“[ ’ active ‘,’ line ’ ]” 数组内不加单引号表示是变量；也可以放到方法中，return [ active , line ]，数组中是属性变量，不是属性名。

:style 动态绑定style
1、对象语法
:style=" { fontSize：’ 50px ’ , color: ’ red ’ } "
2、数组语法

2、v-for
与v-bind结合使用
*使用v-for时最好加上key属性：添加 :key=" item "

3、v-on @click @input 事件绑定

传参问题：如果不传形参，则数据是undefined
如果需要event对象和其他参数传值，@input=方法名（ $e v e n t, 123 ）；获取 in p u t 的值：$ event.target.value

4、v-if

5、v-model

双向绑定，用于表单中，常与input、radio、checkbox、select结合使用

当父组件的props与子组件的v-model绑定，变量在子组件发生变化时，控制台会报错，因为v-model是双向绑定，变量变化后props对象值被改变，就会报错。

注意表单最好使用label，增加作用域

checkbox：
v-model根据=后面变量的类型，决定绑定checkbox的属性；
当v-model后面变量的类型为数组，获取的值为数组；
当v-model后面变量的类型为boolean，获取的值为布尔型；

select：
v-model需要绑定到select中
绑定多个数据时，将select设置为multiple，变量定义为数组

值绑定：
与:value结合使用，动态绑定后端传的值

修饰符：
lazy：在输入框失去焦点或回车的时候再刷新变量
number：input默认绑定string类型，使用v-model.number=“n1”
trim：去除左右两边的空格

6、v-show

v-if=" isShow " 当isShow是false时，v-if指令的元素不存在在dom中渲染；为true时重新创建
v-show=" isShow " 当isShow是false时，v-show指令的元素在dom中渲染，只是增加了行内样式display：none
因此，切换频率非常高时，选择v-show

四、父组件调用子组件

8种传值方式收藏链接

1、props的使用：父给子传值

<template class="father">
   <child :自定义属性名="父组件的变量"></child> 
<template >

export default {
	name: "child",
	props: ["自定义属性名"],
    data() {}
}

2、ref的使用:父给子传值 / 调用子组件的方法

//父组件
<child ref="child" ></popup>
...
 this.$refs.child.name= this.sdata;
// 方法1:触发监听事件并传参，on与emit的配合使用
 this.$refs.child.$emit('childMethod','发送给方法一的数据')
 // 方法2:直接调用
 this.$refs.child.callMethod() 
 //父组件调用子组件的方法，并给子组件传参
 this.$refs.child.parentMsg(this.msg)

//子组件
data () {
    return {
      name: 'Vue.js'
    }
  },
//该方法要放入mounted中
this.$on('childMethod', (res) => {
    console.log('方法1:触发监听事件监听成功')
    console.log(res)
 })
},
parentMsg: function (msg) {
    this.messages.push(msg)
}

on和emit的使用例子

vm.$on( event, callback):监听当前实例上的自定义事件。事件可以由vm.$emit触发。回调函数会接收所有传入事件触发函数的额外参数。

vm.$emit( event, […args] )：触发当前实例上的事件。附加参数都会传给监听器回调。

3、children

父子组件通讯总结

五、子组件调用父组件

1、this.$parent

父组件中定义方法：

switchLoadPage(msg) {
    if(!this.loading && msg)
  		this.loadtext=msg;
  		this.loading = !this.loading;
},

子组件：

this.$parent.switchLoadPage();

2、this.$emit()

子组件调用父组件方法，并给父组件传值

1、子组件用“ $e mi t ” 向父组件触发一个事件，子调用父组件的方法，并给父组件传值。 2 、在父组件中通过 v - o n 监听当前实例上的自定义事件。在子组件中通过^{'}$ emit’触发当前实例上的自定义事件。

//父组件，@emitMethods/v-on:emitMethods
<child @emitMethods="fatherMethod"></child>
//<child v-on:emitMethods="fatherMethod"></child>
fatherMethod(arg) {
   console.log(arg);//输出123
}

//子组件
this.$emit('emitMethods','123');

3、props

子组件里调用父组件方法
父组件：

<child :sendMethod="fatherMethod"></child>
fatherMethod() {
  console.log('父组件方法');
}

子组件：

   props: {
      sendMethod: {
        type: Function,
        default: null
      }
    },
    methods: {
      childMethod() {
          this.sendMethod();
        }
      }

兄弟组件的调用

eventBus.$emit

父子组件双向绑定

1、props接收父组件的值
2、this.$emit(" getMethod " , params) 将子组件的值params传给父组件
3、在父组件调用子组件的地方，绑定事件@getMethod=" changeParams "
4、父组件实现changeParams 方法，将params赋给父组件变量
changeParams （params）{ 赋值 }

六、slot的使用

七、webpack
八、路由

九、vuex

1、vuex安装（需先安装vue-cli）

1.cd到自己的项目目录下
2.输入命令：npm install vuex --save

十、axios
添加链接描述
常用的elementui封装：
封装1

超心塞的阿秋

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫