ES6及Vue入门介绍

站长

2023年06月02日 21:07 · 阅读数 45

ES6

let&const

let和var的区别：

	作用域	变量提升	重复声明
let	块级作用域可见	不存在，不能在声明之前使用	不允许
var	函数内可见	存在，会被提升到作用域的顶部，可以在声明之前使用	允许,后面覆盖前面

const声明常量，声明必须初始化，声明之后不允许改变

解构&字符串

数组解构

ES6中的数组解构赋值是一种简化的变量赋值方式，可以通过解构赋值同时将数组的元素赋值给多个变量

let array = ['apple', 'banana', 'orange'];
let [a,b,c] = array
console.log(a,b,c)

对象解构

从对象中提取属性值并赋值给多个变量，对象解构赋值时要求变量名与属性名相同，如果变量名与属性名不同，可以使用别名来指定变量名

let person = {
  name: '张三',
  age: 18,
  gender: '男'
};
// 使用对象解构赋值将属性值赋值给多个变量
let {name, age, gender} = person;
let {name: personName, age: personAge} = person;
// 输出各个变量的值
console.log(name);    // '张三'
console.log(age);     // 18
console.log(gender);  // '男'

字符串

1、新的方法

const str = 'hello world';
console.log(str.startsWith('hello'));  // true
console.log(str.endsWith('world'));    // true
console.log(str.includes('world'));   // true
console.log(str.repeat(3));           // hello worldhello worldhello world

2、模板字符串

使用反引号创建模板字符串，使用${}嵌入任意表达式

const name = '张三';
const age = 18;
console.log(`我叫${name}，今年${age}岁。`);

函数优化

箭头函数

简洁的定义匿名函数

const sum = (a, b) => a + b;
sum(1,2)

const square = x => x * x;
square(4)

默认参数

在ES6中，函数可以使用默认参数，即在函数定义时给参数赋一个默认值。如果调用时没有传递该参数，则使用默认值

function add(a, b=2)
{
    return a+b
}
add(2)

扩展运算符

扩展运算符（...）可以将数组或类似数组的对象展开为一组参数

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
console.log(...arr1, ...arr2);  // 输出结果为：1 2 3 4 5 6

剩余参数

剩余参数（...）可以将多余的参数收集为一个数组，从而方便地处理可变参数个数的函数

function sum(...args) {
     return args.reduce((a, b) => a + b);
}
console.log(sum(1, 2, 3, 4));  // 输出结果为：10

对象优化

内置函数

let person = {
  name: "jack",
  age: 21,
  language: ['java', 'js', 'css']
};

console.log(Object.keys(person);); // 所有属性名，["name", "age", "language"]
console.log(Object.values(person));//["jack", 21, Array(3)]
console.log(Object.entries(person));//[Array(2), Array(2), Array(2)]

合并对象：其他对象的属性合并到第一个中，如果有重复的属性，后面的覆盖前面的

Object.assign(target, source1, source2);

对象声明：简写，如果属性名和引用的变量名是相同的就可以省略赋值，它会自动调用相同名字的变量

let person={
    name,
    age
} 
console.info(person)

对象拷贝：深拷贝

let person={name:"亚索",age:18,brother:{name:"永恩"}};
let person2={...person};
console.info(person2)

数组优化

在ES6中，map()和reduce()是数组的两个常用方法，可以方便的操作数组

map()方法可以对数组中的每个元素进行处理，并返回一个新的数组

let arr = [1, 20, -3, 5];
let newArr = arr.map(item => item * 2);
console.log(newArr); // [2, 40, -6, 10]

reduce()方法可以将数组中的所有元素依次计算，并返回结果。

let arr = [1, 20, -3, 5];

let sum = arr.reduce((preValue, curValue) => {
  return preValue + curValue;
}, 0);

console.log(sum); // 23

promise异步编排

ES6引入了Promise对象，它是一种异步编排的解决方案，更好的处理回调地狱问题（将多个回调函数嵌套调用的代码重构为链式调用），Promise对象表示一个异步操作的最终完成或失败，并返回一个包含操作结果的值。

Promise对象有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。当Promise对象的状态从pending变为fulfilled或rejected时，称为Promise对象已“settled”


//`myAjax()`函数返回一个Promise对象，该对象在异步操作完成时解决（resolve）,执行then 或拒绝（reject）,执行catch
function myAjax(url) {
  return new Promise((resolve, reject) => {
    $.ajax({
      url: url,
      success: function (result) {
        resolve(result);
      },
      error: function (err) {
        reject(err);
      }
    });
  });
}

myAjax('http://localhost:8811/user/existUsername')
  .then((result) => {
    if (result.data) {
      alert('用户名不存在！');
      return myAjax('http://localhost:8811/user/existPhone');
    } else {
      alert(result.message);
      throw new Error('用户名已存在！');
    }
  })
  .then((result) => {
    if (result.data) {
      alert('手机不存在！');
      return myAjax('http://localhost:8811/user/registryUser');
    } else {
      alert(result.message);
      throw new Error('手机号已存在！');
    }
  })
  .then((result) => {
    alert(result.message);
  })
  .catch((err) => {
    alert('异常' + err);
  });

模块化

ES6中的模块化使用import和export关键字来导入和导出模块。使用import关键字可以从其他模块中导入需要的组件, 使用export关键字可以将组件导出到其他模块中使用。

// user.js
let name = 'Tom';
let age = 18;

function sayHello() {
  console.log('Hello, ' + name);
}

export { name, age, sayHello };

// main.js
import { name, age, sayHello } from './user.js';
或者
import * as user from './user.js';

console.log(name); // Tom
console.log(age); // 18
sayHello(); // Hello, Tom

Vue

Vue是一套用于构建用户界面的渐进式框架，采用MVVM响应式编程模型，核心思想是数据驱动视图，当数据发生变化时，自动更新视图，反之亦然

MVVM：页面输入改变数据，数据改变影响页面数据展示与渲染

ES6及Vue入门介绍

M(model):应用程序的数据和业务逻辑

V(view):前端界面

VM(ViewModel):也就是Vue实例，负责将模型中的数据转换为视图中的数据，同时也负责将视图中的数据转换为模型中的数据，还包括事件处理、数据验证、状态管理

vue指令

v-text:显示纯文本，不解析html标签

v-html: 解析html标签并展示

<div id="app">
  <p v-text="message"></p>
  <p v-html="message"></p>
</div>

<script>
  var vm = new Vue({
    el: '#app',
    data: {
      message: '<a href='#'>Hello</a>'
    }
  });
</script>

v-if和v-show都是Vue中用于控制元素显示和隐藏的指令，但它们的实现方式不同

v-if: 根据表达式的值决定是否渲染元素，当表达式为 true 时，元素会被渲染并插入到 DOM 中，v-if 是动态地向 DOM 中添加或删除元素。v-if的优点是减少不必要的DOM操作，缺点是频繁切换元素的显示状态，性能会受到影响。

v-show: 根据表达式的值决定是否展示元素，通过CSS控制元素的显示和隐藏，不会动态添加和删除元素，性能较好

v-else、v-else-if : 与v-if一起使用，当表达式为false时展示

v-for: 循环渲染一个数组，可以遍历数组、对象和字符串，并为每个元素生成DOM节点

<!-- 循环渲染数组 -->
<li v-for="(item, index) in items">{{ item }}</li>

<!-- 循环渲染对象 -->
<li v-for="(value, key) in object">{{ key }}: {{ value }}</li>

<!-- 循环渲染数字 -->
<span v-for="n in 10">{{ n }}</span>

v-on: 用于绑定事件监听器，它可以监听DOM事件，如click、input、submit等，也可以监听自定义事件。当事件被触发时，指定的方法会被调用。

<!-- 监听click事件 -->
<button v-on:click="handleClick">Click me</button>
<button @click="handleClick">Click me</button>

<!-- 监听自定义事件 -->
<child-component v-on:custom-event="handleCustomEvent"></child-component>

v-on指令可以使用简写语法@，例如@click等价于v-on:click

v-on：可以使用修饰符控制事件行为

.once修饰符可以让事件只触发一次

.stop修饰符可以阻止事件冒泡，比如触发子元素的点击事件，不会触发父元素的点击事件

.prevent修饰符可以阻止默认事件，比如点击a标签只会执行指定的事件，不会执行浏览器跳转

<div @click.once="hello('1')" style="background: red;width: 800px;height: 500px;padding: 50px;">
      1
<div @click.stop="hello('2')" style="background: blue;width: 400px;height: 200px;padding: 50px;">
      2
<a @click.stop.prevent="hello('3')" style="background: yellow;width: 200px;height: 100px;display: block;padding: 50px;" href="http://www.baidu.com">3</a>
</div> 
</div>

v-bind: 用于动态绑定HTML元素的属性。它可以绑定任何HTML元素的任何属性，例如title、href、src、class、style等。当Vue实例中的属性发生变化时，绑定的属性也会相应地更新。

<!-- 动态绑定title属性 -->
<div v-bind:title="title">Hello World</div>
<div :title="title">Hello World</div>

<!-- 动态绑定href属性 -->
<a v-bind:href="url">Click me</a>

v-bind指令可以使用简写语法:，例如:title等价于v-bind:title

v-model: 用于实现表单元素和vue实例中数据的双向绑定，将表单元素的值绑定到Vue实例中的数据，表单元素的值变化时，Vue实例的数据也会更新，反之亦然

侦听器和过滤器

计算属性：它的值是根据其他属性计算得来的，计算属性的值会被缓存，当计算属性依赖的属性变化时，才会重新计算，可以提升性能；也可以在methods里定义一个方法实现计算属性，只是每次调用都需要计算一次

侦听器：监听Vue实例中的数据，发生变化时执行相应的操作，可以监听多个属性

<script>
    new Vue({
        el:"#app",
        data:{
            car:[
                {pname:'Iphone 12',price:7999,stock:10,num:1},
                {pname:'小米11',price:3599,stock:3,num:4},
            ],
            message:"",
        },
        // methods : 当方法中使用的数据发生改变，方法会自动调用
        methods: {
            // calcSum(){
            //     let sum=0;
            //     this.car.forEach(item => {
            //         sum+=item.price*item.num;
            //     });
            //     return sum;
            // }
            warn(){
                let message="";
                this.car.forEach(item => {
                    if(item.num>item.stock){
                        message+=`${item.pname}的库存超出限制<br/>`
                    }
                });
                return message;
            }
        },
        // 计算属性: 当方法中使用的数据发生改变，方法会自动调用
        computed:{
             calcSum(){
                let sum=0;
                this.car.forEach(item => {
                    sum+=item.price*item.num;
                });
                return sum;
            }
        },
        // 侦听器 专门用于侦听数据的变化，当数据发生变化会自动调用方法
        watch:{
            // 要侦听的数据: 数组
            car:{
                handler(newvalue,oldvalue){ 
                    this.message="";
                    this.car.forEach(item => {
                        if(item.num>item.stock){
                            this.message+=`${item.pname}的库存超出限制<br/>`
                        }
                    });
                },
                deep:true   //深度侦听器
            },
            // 基础类型的侦听， 将侦听数据作为函数就可以了  
            message(newvalue,oldvalue){
                console.info(newvalue,oldvalue)
            }
        }
    });


    /*
    方法和计算属性的区别：
        声明发生不一样，调用不一样方法要用(), 计算属性调用不要加()
    */


    /*
    方法和侦听器的区别：
        方法： 方法中任意数据发生了改变就会自动调用方法
        可以调用，进行返回值


        侦听器：需要指定具体的侦听数据，只有被具体指定的侦听数据发生了改变才会触发
        不能像方法那样去调用， 而是靠vue自动触发


    */
</script>

过滤器：用于对数据进行格式化处理，过滤器可以在模板中使用，将数据经过过滤器处理后再进行渲染


{{ user.gender | filterGender }}

// 把性别格式化为 !男  !女
filters: {
  filterGender: function (gender) {
    if (gender === 1) {
      return '!男'
    } else {
      return '!女'
    }
  }
}

组件

组件是可复用的Vue实例，用于封装可重用的代码块。组件可以包含模板、数据、方法等，可以在多个Vue实例中复用，从而实现更加灵活的代码组织和复用。

组件分为全局组件和局部组件


<xushu :num="numxx"></xushu>

<script>
   // 1.全局組件： 在所有的Vue实例中使用
   /*
        1.1 命名：不要使用驼峰命名, 可以使用中划线的方式命名
        1.2 模板： 必须的
        1.3 数据：一定要函数的方式声明
   */
    Vue.component("xushu",{
        template: ` <div @click='num++'>{{num}}</div>`,
        // data() {
        //     return {
        //         num:10
        //     }
        // },
        props:["num"]  //从父实例接收的数据
    })


   // 2.局部组件 
    const appXushu={
                template: ` <div @click='num++'>{{num}}</div>`,
                data() {
                    return {
                        num:66
                    }
                },
            }

    new Vue({
        el: "#app",
         data: {
             numxx: 50
         },
         components:{  //局部组件,只能在当前实例中使用
             "app-xushu":appXushu
         }
    })

    new Vue({
        el: "#app2",
         data: {
             numxx: 100
         }
    })
</script>

生命周期

生命周期是指Vue从创建到销毁的整个过程中，会自动调用一些特定的函数，这些函数被称为生命周期钩子函数。生命周期钩子函数可以在特定的时刻执行一些操作，例如初始化数据、渲染页面、销毁实例等。

ES6及Vue入门介绍

Vue.js的生命周期可以分为8个阶段，分别是：

beforeCreate：实例刚被创建，页面数据还未初始化，此时无法访问到data、computed、methods等属性和方法。
created：实例已经被创建，页面数据已经初始化，此时可以访问到data、computed、methods等属性和方法，但是无法访问到DOM元素。
beforeMount：模板已经编译完成，但是还未渲染成HTML，此时可以访问到DOM元素，但是无法获取到DOM元素的具体内容。
mounted：模板已经渲染成HTML，此时可以访问到DOM元素，并且可以获取到DOM元素的具体内容，通常在这个阶段进行一些初始化操作，例如获取数据、绑定事件等。
beforeUpdate：数据发生变化，但是页面还未更新，此时可以访问到更新前的DOM元素和数据。
updated：数据已经更新，页面已经重新渲染，此时可以访问到更新后的DOM元素和数据。
beforeDestroy：实例即将被销毁，此时可以进行一些清理操作，例如取消定时器、解绑事件等。
destroyed：实例已经被销毁，此时无法访问到实例的属性和方法。

Vue路由

路由是指根据不同的URL地址，将不同的组件渲染到页面上的过程，可以使用官方路由插件vue-router实现路由功能

路由通常包含以下几个部分：

路由器（Router）：负责管理路由，根据URL地址将不同的组件渲染到页面上。
路由表（Routes）：定义了URL地址和组件之间的映射关系，告诉路由器在哪个URL地址下渲染哪个组件。
路由链接（Router Link）：用于在页面中生成链接，点击链接可以跳转到对应的URL地址。
路由视图（Router View）：用于渲染组件，根据URL地址动态地切换组件。

// 1. 安装vue-router插件
// 2. 引入vue-router插件
// 3. 创建路由表
// 4. 创建路由器
// 5. 在Vue实例中使用路由器

// 引入vue-router插件
import VueRouter from 'vue-router'

// 定义路由表
const routes = [
  {
    path: '/',
    component: Home
  },
  {
    path: '/about',
    component: About
  }
]

// 创建路由器
const router = new VueRouter({
  routes
})

// 在Vue实例中使用路由器
const app = new Vue({
  router
}).$mount('#app')

axios

Axios是一个基于Promise的HTTP客户端，可以用于浏览器和Node.js环境中发送HTTP请求。Axios可以支持多种请求方式，例如GET、POST、PUT、DELETE等，还可以拦截请求和响应、设置请求头、处理请求错误等。

下面是一个简单的Axios示例代码：

// 发送GET请求
axios.get('/user?ID=12345')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

// 发送POST请求
axios.post('/user', {
    firstName: 'John',
    lastName: 'Doe'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

脚手架

Vue脚手架是一个用于快速搭建Vue.js项目的工具，可以帮助我们快速生成Vue.js项目的基础结构和配置文件，提高开发效率。Vue脚手架基于Node.js和Webpack构建，提供了一些常用的功能，例如开发服务器、热重载、代码打包等。

下面是使用Vue脚手架创建Vue.js项目的步骤：

安装Node.js：首先需要安装Node.js，可以从官网下载安装包进行安装。
安装Vue脚手架：在命令行中执行以下命令安装Vue脚手架：
```
npm install -g vue-cli
```
创建Vue.js项目：在命令行中执行以下命令创建Vue.js项目：
```
vue init webpack my-project
```
其中，my-project是项目名称，可以根据实际情况进行修改。
安装依赖：进入项目目录，执行以下命令安装项目依赖：
```
cd my-project
npm install
```
启动开发服务器：执行以下命令启动开发服务器：
```
npm run dev
```

然后在浏览器中访问http://localhost:8080 就可以看到Vue.js项目的首页了。

ES6及Vue入门介绍

转载自:https://juejin.cn/post/7239644172210077751