第三阶段前端随手笔记
直接输出x,会报错!
在输出语句后面使用var定义变量x,会变量提升,输出undefined
2 Vue 笔记
1 控制台直接使用vm对象
2 idea 中 v-bind 爆红问题
alt + enter 引入一下即可 引入xml的命名空间
3 url书写格式注意
https://www.baidu.com/ 冒号写在http后面再后面是//
4 v-if v-on: 后面可以直接写一个条件表达式
<h1>欢迎你{{message}}-{{name}}</h1>
单向数据渲染
<img v-bind:src="img_src" v-bind:width="img_width">
<img :src="img_src" :width="img_width">
双向数据渲染
<input type="text" v-model="hobby.val"><br/><br/>
Vue修饰符使用
<form action="http://www.baidu.com" v-on:submit.prevent="onMySubmit">
妖怪名: <input type="text" v-model="monster.name"><br/><br/>
<button v-on:click.once="onMySubmit">点击一次</button><br/>
<input type="text" v-on:keyup.enter="onMySubmit">
<input type="text" v-on:keyup.down="onMySubmit">
<input type="text" v-model.trim="count">
事件处理
<button v-on:click="sayHi()">点击输出</button>
<button v-on:click="count += 2">点击增加+2</button>
<button @click="sayHi()">点击输出</button>
<button v-on:click="count += 2">点击增加+2</button>
条件渲染 v-if
<div v-if="score >= 90">你的成绩优秀</div>
<div v-else-if="score >= 70">你的成绩良好</div>
<div v-else-if="score >= 60">你的成绩及格</div>
<div v-else="score < 60">你的成绩不及格</div>
v-for 列表渲染
<ul>
<li v-for="item in items" :key="item.id">...</li>
</ul>
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>事件处理-作业1</title>
</head>
<body>
<div id="app">
<h1>{{message}}</h1>
<button v-on:click="add">点击增加+1</button>
<!--老师解读
1. 这里count += 2 的count数据是data数据池的count
2. 案例不难,重点是掌握和理解机制
-->
<button v-on:click="add2">点击增加+2</button>
<!--add2()函数只有一句话 this.count += 2;
Vue 支持直接写在 v-on:click="" 里 因为在这写 脱离了下面的vm Vue对象实例 所以 把this拿掉
this 只可以在对象里面使用;问题是在这里写count += 2 它能不能找到数据池里的 count
可以 因为上来就把vm Vue对象挂载到了 id="app"的div 所以在此处去找count时 它发现count并不是一个方法
它就会自动的去数据池里面找,找到count ,因此 这里的count 还是数据池里的数据count
-->
<button v-on:click="this.count += 2">点击增加+2</button>
<button v-on:click="count += 2">点击增加+2</button>
<p>你的按钮被点击了{{count}}次</p>
</div>
<script src="vue.js"></script>
<!--创建一个vue实例,并挂载到id=app的div-->
<script>
let vm = new Vue({
el: "#app", //创建的vue实例挂载到 id=app的div, el 就是element的简写
data: { //data{} 表示数据池(model中的数据), 有很多数据 ,以k-v形式设置(根据业务需要来设置)
message: "Vue事件处理的作业",
count: 0//点击的次数
},
methods: {
add() {
//修改data数据池的count
//因为data和methods在同一个vue实例中,因此可以通过this.数据方式访问
this.count += 1;
},
add2() {
//修改data数据池的count
//因为data和methods在同一个vue实例中,因此可以通过this.数据方式访问
this.count += 2;
}
}
})
</script>
</body>
</html>
5 如何查看是否安装了node.js
cmd控制台 输入 node -v 回车
安装过会显示版本号:
没安装过 :
6 安装node时出现错误
C:\WINDOWS\system32>cnpm install -g @vue/cli@4.0.3
internal/modules/cjs/loader.js:638
throw err;
^
Error: Cannot find module 'node:util'
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:636:15)
at Function.Module._load (internal/modules/cjs/loader.js:562:25)
at Module.require (internal/modules/cjs/loader.js:692:17)
at require (internal/modules/cjs/helpers.js:25:18)
at Object.<anonymous> (C:\Users\yangd\AppData\Roaming\npm\node_modules\cnpm\bin\cnpm:3:15)
at Module._compile (internal/modules/cjs/loader.js:778:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
at Module.load (internal/modules/cjs/loader.js:653:32)
at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
at Function.Module._load (internal/modules/cjs/loader.js:585:3)
解决方法:
https://blog.csdn.net/qq_41619841/article/details/129869658
npm和cnpm的版本不匹配,需要匹配版本(记得先删除之前的):
npm uninstall cnpm
当前npm版本:在命令行输入指令时记得输入的是# 后面的npm -v
C:\WINDOWS\system32>node -v
v10.16.3
C:\WINDOWS\system32>npm -v
6.9.0
全局安装cnpm指定版本:这里这句话解决了问题!!!
npm install -g cnpm@6.0.0 --registry=https://registry.npm.taobao.org
C:\WINDOWS\system32>npm install -g cnpm@6.0.0 --registry=https://registry.npm.taobao.org
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 har-validator@5.1.5: this library is no longer supported
C:\Users\yangd\AppData\Roaming\npm\cnpm -> C:\Users\yangd\AppData\Roaming\npm\node_modules\cnpm\bin\cnpm
npm WARN urllib@2.41.0 requires a peer of proxy-agent@^5.0.0 but none is installed. You must install peer dependencies yourself.
+ cnpm@6.0.0
added 388 packages from 138 contributors, removed 401 packages and updated 188 packages in 59.646s
查看cnpm的版本:
cnpm -v
如下即为成功:
C:\WINDOWS\system32>cnpm -v cnpm@6.0.0 (C:\Users\yangd\AppData\Roaming\npm\node_modules\cnpm\lib\parse_argv.js) npm@6.14.18 (C:\Users\yangd\AppData\Roaming\npm\node_modules\cnpm\node_modules\npm\lib\npm.js) node@10.16.3 (D:\Java_developer_tools\program\nodejs10.16\node.exe) npminstall@3.28.1 (C:\Users\yangd\AppData\Roaming\npm\node_modules\cnpm\node_modules\npminstall\lib\index.js) prefix=C:\Users\yangd\AppData\Roaming\npm win32 x64 10.0.19045 registry=https://registry.npm.taobao.org
安装vue cli 脚手架时 命令行具体执行代码如下:
Microsoft Windows [版本 10.0.19045.3324]
(c) Microsoft Corporation。保留所有权利。
C:\WINDOWS\system32>node -v
v10.16.3
C:\WINDOWS\system32>npm uninstall vue-cli -g
up to date in 0.029s
C:\WINDOWS\system32>npm install -g cnpm --registry=https://registry.npm.taobao.org
C:\Users\yangd\AppData\Roaming\npm\cnpm -> C:\Users\yangd\AppData\Roaming\npm\node_modules\cnpm\bin\cnpm
npm WARN urllib@2.41.0 requires a peer of proxy-agent@^5.0.0 but none is installed. You must install peer dependencies yourself.
+ cnpm@9.2.0
updated 249 packages in 39.775s
C:\WINDOWS\system32>npm install webpack@4.41.2 webpack-cli -D
npm WARN saveError ENOENT: no such file or directory, open 'C:\WINDOWS\system32\package.json'
npm WARN enoent ENOENT: no such file or directory, open 'C:\WINDOWS\system32\package.json'
npm WARN @webpack-cli/configtest@2.1.1 requires a peer of webpack@5.x.x but none is installed. You must install peer dependencies yourself.
npm WARN @webpack-cli/info@2.0.2 requires a peer of webpack@5.x.x but none is installed. You must install peer dependencies yourself.
npm WARN @webpack-cli/serve@2.0.5 requires a peer of webpack@5.x.x but none is installed. You must install peer dependencies yourself.
npm WARN webpack-cli@5.1.4 requires a peer of webpack@5.x.x but none is installed. You must install peer dependencies yourself.
npm WARN system32 No description
npm WARN system32 No repository field.
npm WARN system32 No README data
npm WARN system32 No license field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.3.3 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.3.3: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules\watchpack-chokidar2\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
+ webpack-cli@5.1.4
+ webpack@4.41.2
updated 2 packages and audited 600 packages in 7.088s
found 3 high severity vulnerabilities
run `npm audit fix` to fix them, or `npm audit` for details
C:\WINDOWS\system32>cnpm install -g @vue/cli@4.0.3
internal/modules/cjs/loader.js:638
throw err;
^
Error: Cannot find module 'node:util'
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:636:15)
at Function.Module._load (internal/modules/cjs/loader.js:562:25)
at Module.require (internal/modules/cjs/loader.js:692:17)
at require (internal/modules/cjs/helpers.js:25:18)
at Object.<anonymous> (C:\Users\yangd\AppData\Roaming\npm\node_modules\cnpm\bin\cnpm:3:15)
at Module._compile (internal/modules/cjs/loader.js:778:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
at Module.load (internal/modules/cjs/loader.js:653:32)
at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
at Function.Module._load (internal/modules/cjs/loader.js:585:3)
C:\WINDOWS\system32>cnpm install webpack@4.41.2 webpack-cli -D
internal/modules/cjs/loader.js:638
throw err;
^
Error: Cannot find module 'node:util'
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:636:15)
at Function.Module._load (internal/modules/cjs/loader.js:562:25)
at Module.require (internal/modules/cjs/loader.js:692:17)
at require (internal/modules/cjs/helpers.js:25:18)
at Object.<anonymous> (C:\Users\yangd\AppData\Roaming\npm\node_modules\cnpm\bin\cnpm:3:15)
at Module._compile (internal/modules/cjs/loader.js:778:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
at Module.load (internal/modules/cjs/loader.js:653:32)
at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
at Function.Module._load (internal/modules/cjs/loader.js:585:3)
C:\WINDOWS\system32>npm audit fix
npm ERR! code EAUDITNOPJSON
npm ERR! audit No package.json found: Cannot audit a project without a package.json
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\yangd\AppData\Roaming\npm-cache\_logs\2023-08-28T06_20_26_816Z-debug.log
C:\WINDOWS\system32>npm init --yes
Wrote to C:\WINDOWS\system32\package.json:
{
"name": "system32",
"version": "1.0.0",
"description": "",
"main": "index.js",
"dependencies": {
"webpack-cli": "^5.1.4",
"webpack": "^4.41.2"
},
"devDependencies": {},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}
C:\WINDOWS\system32>npm audit fix
npm WARN @webpack-cli/configtest@2.1.1 requires a peer of webpack@5.x.x but none is installed. You must install peer dependencies yourself.
npm WARN @webpack-cli/info@2.0.2 requires a peer of webpack@5.x.x but none is installed. You must install peer dependencies yourself.
npm WARN @webpack-cli/serve@2.0.5 requires a peer of webpack@5.x.x but none is installed. You must install peer dependencies yourself.
npm WARN webpack-cli@5.1.4 requires a peer of webpack@5.x.x but none is installed. You must install peer dependencies yourself.
npm WARN system32@1.0.0 No description
npm WARN system32@1.0.0 No repository field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules\watchpack-chokidar2\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.3.3 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.3.3: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
up to date in 1.447s
fixed 0 of 1 vulnerability in 387 scanned packages
1 package update for 1 vuln involved breaking changes
(use `npm audit fix --force` to install breaking changes; or refer to `npm audit` for steps to fix these manually)
C:\WINDOWS\system32>npm install webpack@^4.41.2 --save-dev
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 urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated source-map-url@0.4.1: See https://github.com/lydell/source-map-url#deprecated
npm WARN deprecated chokidar@2.1.8: Chokidar 2 does not receive security updates since 2019. Upgrade to chokidar 3 with 15x fewer dependencies
npm WARN deprecated fsevents@1.2.13: The v1 package contains DANGEROUS / INSECURE binaries. Upgrade to safe fsevents v2
npm notice save webpack is being moved from dependencies to devDependencies
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@~2.3.2 (node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.3.3: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.2.7 (node_modules\watchpack-chokidar2\node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN @webpack-cli/configtest@2.1.1 requires a peer of webpack@5.x.x but none is installed. You must install peer dependencies yourself.
npm WARN @webpack-cli/info@2.0.2 requires a peer of webpack@5.x.x but none is installed. You must install peer dependencies yourself.
npm WARN @webpack-cli/serve@2.0.5 requires a peer of webpack@5.x.x but none is installed. You must install peer dependencies yourself.
npm WARN webpack-cli@5.1.4 requires a peer of webpack@5.x.x but none is installed. You must install peer dependencies yourself.
npm WARN system32@1.0.0 No description
npm WARN system32@1.0.0 No repository field.
+ webpack@4.41.2
updated 1 package and audited 387 packages in 35.631s
found 1 high severity vulnerability
run `npm audit fix` to fix them, or `npm audit` for details
C:\WINDOWS\system32>
C:\WINDOWS\system32>npm audit fix
npm WARN @webpack-cli/configtest@2.1.1 requires a peer of webpack@5.x.x but none is installed. You must install peer dependencies yourself.
npm WARN @webpack-cli/info@2.0.2 requires a peer of webpack@5.x.x but none is installed. You must install peer dependencies yourself.
npm WARN @webpack-cli/serve@2.0.5 requires a peer of webpack@5.x.x but none is installed. You must install peer dependencies yourself.
npm WARN webpack-cli@5.1.4 requires a peer of webpack@5.x.x but none is installed. You must install peer dependencies yourself.
npm WARN system32@1.0.0 No description
npm WARN system32@1.0.0 No repository field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.3.3 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.3.3: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules\watchpack-chokidar2\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
up to date in 1.455s
fixed 0 of 1 vulnerability in 387 scanned packages
1 package update for 1 vuln involved breaking changes
(use `npm audit fix --force` to install breaking changes; or refer to `npm audit` for steps to fix these manually)
C:\WINDOWS\system32>cnpm install -g @vue/cli@4.0.3
internal/modules/cjs/loader.js:638
throw err;
^
Error: Cannot find module 'node:util'
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:636:15)
at Function.Module._load (internal/modules/cjs/loader.js:562:25)
at Module.require (internal/modules/cjs/loader.js:692:17)
at require (internal/modules/cjs/helpers.js:25:18)
at Object.<anonymous> (C:\Users\yangd\AppData\Roaming\npm\node_modules\cnpm\bin\cnpm:3:15)
at Module._compile (internal/modules/cjs/loader.js:778:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
at Module.load (internal/modules/cjs/loader.js:653:32)
at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
at Function.Module._load (internal/modules/cjs/loader.js:585:3)
C:\WINDOWS\system32>npm uninstall cnpm
npm WARN @webpack-cli/configtest@2.1.1 requires a peer of webpack@5.x.x but none is installed. You must install peer dependencies yourself.
npm WARN @webpack-cli/info@2.0.2 requires a peer of webpack@5.x.x but none is installed. You must install peer dependencies yourself.
npm WARN @webpack-cli/serve@2.0.5 requires a peer of webpack@5.x.x but none is installed. You must install peer dependencies yourself.
npm WARN webpack-cli@5.1.4 requires a peer of webpack@5.x.x but none is installed. You must install peer dependencies yourself.
npm WARN system32@1.0.0 No description
npm WARN system32@1.0.0 No repository field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.3.3 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.3.3: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules\watchpack-chokidar2\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
audited 387 packages in 3.01s
found 1 high severity vulnerability
run `npm audit fix` to fix them, or `npm audit` for details
C:\WINDOWS\system32>[root@localhost ~]# npm install -g cnpm@6.0.0 --registry=https://registry.npm.taobao.org
'[root@localhost' 不是内部或外部命令,也不是可运行的程序
或批处理文件。
C:\WINDOWS\system32>npm install -g cnpm@6.0.0 --registry=https://registry.npm.taobao.org
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 har-validator@5.1.5: this library is no longer supported
C:\Users\yangd\AppData\Roaming\npm\cnpm -> C:\Users\yangd\AppData\Roaming\npm\node_modules\cnpm\bin\cnpm
npm WARN urllib@2.41.0 requires a peer of proxy-agent@^5.0.0 but none is installed. You must install peer dependencies yourself.
+ cnpm@6.0.0
added 388 packages from 138 contributors, removed 401 packages and updated 188 packages in 59.646s
C:\WINDOWS\system32>cnpm install -g @vue/cli@4.0.3
Downloading @vue/cli to C:\Users\yangd\AppData\Roaming\npm\node_modules\@vue\cli_tmp
Copying C:\Users\yangd\AppData\Roaming\npm\node_modules\@vue\cli_tmp\_@vue_cli@4.0.3@@vue\cli to C:\Users\yangd\AppData\Roaming\npm\node_modules\@vue\cli
Installing @vue/cli's dependencies to C:\Users\yangd\AppData\Roaming\npm\node_modules\@vue\cli/node_modules
[1/36] deepmerge@^3.2.0 installed at node_modules\_deepmerge@3.3.0@deepmerge
[2/36] commander@^2.20.0 installed at node_modules\_commander@2.20.3@commander
[3/36] @vue/cli-ui-addon-widgets@^4.0.3 installed at node_modules\_@vue_cli-ui-addon-widgets@4.5.19@@vue\cli-ui-addon-widgets