本文是团队内一次分享的时候写的,整体是一个快速索引系列。
NodeJs官方网站: https://nodejs.org/en/
NodeJs中文网站: http://nodejs.cn/
安装完成之后检查是否安装成功
> node -v
或者
> npm -v
非浏览器环境执行js
> node xxx.js
常用的npm命令
> #输出当前版本 > npm -v > #升级当前的npm版本 > npm install -g npm > #安装局部模块 > npm install xxx --save > #安装全局模块 > npm install -g xxx > #同步package.json中的依赖 > npm install # 或者 npm i > #执行脚本命令 > npm run xxxx
NPM 仓库网址:
https://www.npmjs.com/
exports
方式// custom_module_1.js exports.get = function(){ console.log('get请求') } exports.post = function(){ console.log('post请求') }
module.exports
方式// custom_module_2.js var app = { name: '天气', version: '1.0.0', build: function(){ console.log('构建app') } }
引入模块
// 自定义模块 const module1 = require('./custom_module_1.js') const module2 = require('./custom_module_2.js') //三方模块 const fs = require('fs') //使用get方法 mobule1.build() //使用build方法 mobule2.build() //使用fs function checkFile(params) { fs.stat(params, function(error, data){ if(error){ console.log("报错了: " + error); return; } if(data.isFile){ console.log(`${params}是文件`); }else{ console.log(`${params}是文件夹`); } }) } checkFile('./es5_exports.js')
使用prototype
,可以实现对象、方法、属性的扩展、继承
function User() {} User.prototype.name = '张三'; User.prototype.speak = function(){ console.log(`hi,我叫${this.name}`) } let user = new User() console.log(user.name) user.speak()
更好的写法,基于es6
class User { constructor() { } speak() { console.log(`hi,我叫${this.name}`) } } User.prototype.name = '张三'; let user = new User() console.log(user.name) user.speak()
//自运行函数 (function name(params) { console.log(params) })('Hello World')
var
、let
、const
变量提升
,js 中如果var定义变量使用前没有定义,则会先定义出来,并作赋值function f(shouldInit: boolean) { if (shouldInit) { var x = 10; } else { x = 20; } return x; //shouldInit=true输出10,false输出20 }
for (var i = 0; i < 10; i++) { setTimeout(function () { console.log(i); }, 100 * i); }
fix方案
for (var i = 0; i < 10; i++) { (function (result) { setTimeout(function () { console.log(result); }, 100 * result); })(i) }
fix2方案
for (let i = 0; i < 10; i++) { setTimeout(function () { console.log(i); }, 100 * i); }
const
vs let
数组结构
let [a, b, c] = [1, 2, 3];
对象解构
let { foo, bar } = { foo: 'aaa', bar: 'bbb' };
展开
let defaults = { food: "spicy", price: "$$", ambiance: "noisy" }; let search = { ...defaults, food: "rich" };
可变参数 (ts)
interface SomeObj { item: Object, keyPath: string, key: string?, //可变参数-可空 //可变参数-可选 }
默认参数(ts)
function getScreenResume(name: string, bust?: number, age: number = 24) { console.log(`名称: ${name}, 年龄:${age}`) if (bust) { console.log(`胸围: ${bust}`) } }
默认参数也是一种可选参数类型,可选参数需要放置在必选参数的后面
ts 支持类型
1、 bool 类型 2、 number 类型 3、 string 类型 4、 array 类型 5、 tuple(元组) 类型 6、 enum(枚举) 类型 7、 any 类型 8、 Void 类型 9、 Null和Undefined 10、 Never 类型
Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
vue-cli
vue-cli
是vue项目脚手架工具
> npm i -g vue-cli
创建一个vue项目
> vue create xxx
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SwOhjBTn-1634309467077)(en-resource://database/609:1)]
<span>Message: {{ msg }}</span>
https://cn.vuejs.org/v2/guide/render-function.html
v-if
& v-else
& v-else-if
v-if是条件渲染指令,它根据表达式的真假来删除和插入元素,它的基本语法如下:
v-if="expression"
expression是一个返回bool值的表达式,表达式可以是一个bool属性,也可以是一个返回bool的运算式
v-show
display:none;
<h1 v-show="yes">Yes!</h1> <h1 v-show="no">No!</h1>
v-for
v-for="item in items"
v-bind
v-bind:class
v-bind:argument="expression"
v-on
<div id="example-1"> <button v-on:click="counter += 1">Add 1</button> <p>The button above has been clicked {{ counter }} times.</p> </div> var example1 = new Vue({ el: '#example-1', data: { counter: 0 } })
v-model
你可以用 v-model 指令在表单 、 及 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇,但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据,并对一些极端场景进行一些特殊处理。
<input v-model="message" placeholder="edit me"> <p>Message is: {{ message }}</p>
// 定义一个名为 button-counter 的新组件 Vue.component('button-counter', { data: function () { return { count: 0 } }, template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>' })
组件是可复用的 Vue 实例,且带有一个名字:在这个例子中是 。我们可以在一个通过 new Vue 创建的 Vue 根实例中,把这个组件作为自定义元素来使用:
<div id="components-demo"> <button-counter></button-counter> </div> new Vue({ el: '#components-demo' })
Prop 是你可以在组件上注册的一些自定义 attribute。当一个值传递给一个 prop attribute 的时候,它就变成了那个组件实例的一个 property。为了给博文组件传递一个标题,我们可以用一个 props 选项将其包含在该组件可接受的 prop 列表中:
Vue.component('blog-post', { props: ['title'], template: '<h3>{{ title }}</h3>' })
一个组件默认可以拥有任意数量的 prop,任何值都可以传递给任何 prop。在上述模板中,你会发现我们能够在组件实例中访问这个值,就像访问 data 中的值一样。
<blog-post title="My journey with Vue"></blog-post>