写给移动开发者的Vuejs快速入门指北

2024-03-11 13:00:13

1、nodeJs

本文是团队内一次分享的时候写的，整体是一个快速索引系列。

1-1、Node安装和npm介绍

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/

1-2、基于CommonJs实现的模块管理

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')

2、es5（es 2015） & es6 & ts 常用语法

2-1、原型对象

使用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()

2-1、自运行函数(IIFE)

//自运行函数
(function name(params) {
    console.log(params)
})('Hello World')

2-2、`var` 、`let`、`const`

变量提升,js 中如果var定义变量使用前没有定义，则会先定义出来，并作赋值

function f(shouldInit: boolean) {
    if (shouldInit) {
        var x = 10;
    } else {
        x = 20;  
    }
    return x;   //shouldInit=true输出10，false输出20
}

var 使用陷阱

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
const相比于let的优点是可以防止变量的二次赋值

2-3、解构 & 展开 & 可变参数 & 默认参数

数组结构

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}`)
    }
}

默认参数也是一种可选参数类型，可选参数需要放置在必选参数的后面

2-4、其他js/ts支持类型

ts 支持类型

1、 bool 类型
2、 number 类型
3、 string 类型
4、 array 类型
5、 tuple(元组) 类型
6、 enum(枚举) 类型
7、 any 类型
8、 Void 类型
9、 Null和Undefined
10、 Never 类型

3、vueJs

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

3-1、使用cdn方式

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>

3-2、使用`vue-cli`

vue-cli是vue项目脚手架工具

> npm i -g vue-cli

创建一个vue项目

> vue create xxx

3-3、声明周期图示例

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SwOhjBTn-1634309467077)(en-resource://database/609:1)]

3-4、模版语法 & jsx语法

模块语法

<span>Message: {{ msg }}</span>

jsx语法

https://cn.vuejs.org/v2/guide/render-function.html

3-5、常用指令

v-if & v-else & v-else-if

v-if是条件渲染指令，它根据表达式的真假来删除和插入元素，它的基本语法如下：

v-if="expression"

expression是一个返回bool值的表达式，表达式可以是一个bool属性，也可以是一个返回bool的运算式

v-show
v-show也是条件渲染指令，和v-if指令不同的是，使用v-show指令的元素始终会被渲染到HTML，它只是简单地为元素设置CSS的style属性: display:none;

<h1 v-show="yes">Yes!</h1>
<h1 v-show="no">No!</h1>

v-for
v-for指令基于一个数组渲染一个列表，它和JavaScript的遍历语法相似：

v-for="item in items"

v-bind
v-bind指令可以在其名称后面带一个参数，中间放一个冒号隔开，这个参数通常是HTML元素的特性（attribute），例如：v-bind:class

v-bind:argument="expression"

v-on
可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。

<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
  }
})

3.6、双向绑定 `v-model`

你可以用 v-model 指令在表单、及元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。

<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>

3-7、实现自定义组件 & 使用自定义组件

// 定义一个名为 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>

码农公寓