ES6模块化与异步编程与vue2基础语法

最新推荐文章于 2024-05-06 10:59:29 发布

2201_75455711

最新推荐文章于 2024-05-06 10:59:29 发布

阅读量100

点赞数

文章标签： es6 前端 javascript

本文链接：https://blog.csdn.net/2201_75455711/article/details/133279529

版权

ES6模块化

默认导出：export default

默认导入：import 接收名称 from '模块标识符'

ES6模块化

模块化：隔离不同的js文件，仅暴露当前模块所需要的其他模块，降低沟通成本，方便各模块的调用

ES6模块化规范是浏览器前端与服务器前端通用的模块开发规范

导入模块：import

导出模块：export

默认导出：export default

每个模块只能使用一次export default，否则报错

const n1 = 10;
const n2 = 39;
let add = 0;
function And(){
    add = n1 + n2;
}
export default{
    n1,
    And
}

默认导入：import 接收名称 from '模块标识符'

接收名称可任意，注意符合规范（不能以数字开头）

import vue from 'vue.js'

按需导出和按需导入

一个模块中可进行多次

//export 按需导出的成员
export let x = 2
export function hello(){
    console.log("hello")
}

//按需导入：import {s1} from '模块标识符'
import {x, hello} from 'xx.js'

Promise

多层回调函数相互嵌套形成了回调地狱，导致代码冗余，难以修改，可读性不强

可通过promise避免这种情况

promise基本概念

promise是一个构造函数，通过const p = new Promise() 创建Promise实例，代表一个异步操作（异步指的是每一个任务有一个或多个回调函数（callback），前一个任务结束后，不是执行后一个任务，而是执行回调函数，后一个任务则是不等前一个任务结束就执行，所以程序的执行顺序与任务的排列顺序是不一致的、异步的）
Promise上包含一个then方法，用于为 Promise 对象的完成（兑现或拒绝）设置回调函数，then的链式调用解决了回调地狱的问题。调用.then()方法时，成功的回调函数是必选的，失败的回调函数是可选的
```
const p = new Promise()
//p.then(成功的回调函数，失败的回调函数)
p.then(result =>{},error =>{})
```

then.fs

下载then.fs第三方包可以基于Promise的方式读取文件的内容

npm install then-fs

调用then-fs提供的readFile方法，可异步读取文件内容，返回值是Promise实例对象

通过.catch 捕获错误

promise链式操作发生了问题，不希望前面的错误导致后面.then无法正常执行，可以使用Promise.catch进行捕获和处理

链式操作出现问题是，不希望前面的错误导致后面.then无法正常执行，可以将.catch调用提前

获取then的两个实参

const p = new Promise((resolve, reject) => {
//异步执行代码
setTimeout(() =>{
//resolve('success')
reject(new Error('fail'))
},2000)
})
console.log(p)
//获取结果
p.then(result =>{
console.log(result)
}).catch(error => {
cosole.log(error)}
})

async/await

用于简化Promise操作

thenFs.readFile('file1.txt','utf-8')
    .then(r1 => {
    console.log(r1)
    return thenFs.readFile('file2.txt','utf8)
    })

async function getAllFile() {
const r1 = await thenFs.readFile('file1.txt','utf8)
}

function中使用了await，则function必须被async修饰

async方法中，第一个await之前的代码会被同步执行，之后的代码会异步执行

vue2

初识

1.想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象

2.root容器里的代码依旧符合HTML规范，只是混入了一些Vue语法

3.root容器里的代码被称为【Vue模板】

4.VUe实例和容器一一对应

5.真实开发中只有一个Vue实例，并且会配合组件一起使用

6.{{xxx}}中的xxx要写js表达式，xxx可自动读取到data中的所有属性

7.一旦data中的数据发生改变，那么页面中用到该数据的地方会自动更新

区分：js表达式和 js代码（语句）

表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方

(1).a

(2).a+b

(3).demo(1)

(4).x === y ? 'a' : 'b'

Vue.config.productionTip = false//阻止 vue 在启动时生成生产提示

//创建Vue实例，传入配置对象
x = new Vue({
   el: '#root',//用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串
   data: {//data中用于存储数据，数据供el所指定的容器使用，值暂时写成一个对象
        name: 'Mark'
    }
})

模板语法

Vue模板语法有两大类：

1.插值语法：

功能：解析标签体内容

写法：{{xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性

2.指令语法：

功能：解析标签（包括：标签属性，标签体内容，绑定事件···）

举例：v-bind:href="xxx"或简写为:href="xxx",xxx是js表达式

且可以直接读取到data中的所有属性

注：Vue中有很多指令，形式都为v-???

<div id="root">
        <h1>插值语法</h1>
        <h3>你好，{{name}}</h3>
        <hr/>
        <h1>指令语法</h1>
        <a v-bind:href="school.url.toUpperCase()">点击{{school.name}}1</a>
        <a :href="school.url">点击{{school.name}}2</a>
        <a :href="Date.now()">点击{{school.name}}3</a>
    </div>

    <script>
        Vue.config.productionTip = false
        new Vue({
            el:'#root',
            data:{
                name:'Nacy', 
                school:{
                    url:'http://www.sicau.com',
                    name:'chipu'
                }
                
            }
        })
    </script>

数据绑定

Vue中有两种数据绑定的方式：

1.单向绑定(v-bind)：数据只能从data流向页面

2.双向绑定(v-model):数据不仅能从data流向页面，还能从页面流向data

备注：

1.双向绑定一般应用于表单类元素上（input、select等）

2.v-model:value可以简写为v-model，因为v-model默认收集value值

<div id="root">
        <!-- 普通写法
        单向数据绑定：<input type="text" v-bind:value="name"><br/>
        双向数据绑定：<input type="text" v-model:value="name"><br/> -->
        <!-- 简写 -->
        单向数据绑定：<input type="text" :value="name"><br/>
        双向数据绑定：<input type="text" v-model="name"><br/>
    <!-- 如下代码错误，因为v-model只用于表单输入类型 -->
        <h2 v-model:x="name">hello</h2>
    </div>
</body>

<script>
    Vue.config.productionTip = false
    new Vue({
        el:'#root',
        data:{
            name:'Lucy', 
        }
    })

data与el的2种写法

1.el：

(1).new Vue时候配置el属性

(2).先创建Vue实例，随后通过vm.$mount('#root')指定el的值

2.data有2种写法：

(1).对象式

(2).函数式

如何选择：当学习组件是=时，data必须用函数式，否则会报错

3.一个重要原则：

由Vue管理的函数，一定不要写箭头函数，否则this不再是Vue实例

<div id="root">
        <h1>你好，{{name}}</h1>
    </div>
</body>

<script type="text/javascript">
    Vue.config.productionTip = false//阻止 vue 在启动时生成生产提示
    // const v =new Vue({
    //     // el:'#root',//第一种写法
    //     data:{
    //         name:'chi'
    //     }
    // })
    // console.log(v);
    // v.$mount('#root')//el第二种写法

    //data两种写法
    new Vue({
        el: '#root',
        //data第一种写法：对象式
        // data: {
        //     name:'pu'
        // }
        //data第二种写法：函数式，不能写成箭头函数，否则this是window
        data:function(){
            console.log(this);//此处的this是Vue实例对象
            return{
                name:'chipu'
            }
        }
    })

2201_75455711

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
ES6模块化与异步编程与vue2基础语法

promise链式操作发生了问题，不希望前面的错误导致后面.then无法正常执行，可以使用Promise.catch进行捕获和处理。写法：{{xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性。模块化：隔离不同的js文件，仅暴露当前模块所需要的其他模块，降低沟通成本，方便各模块的调用。6.{{xxx}}中的xxx要写js表达式，xxx可自动读取到data中的所有属性。async方法中，第一个await之前的代码会被同步执行，之后的代码会异步执行。
复制链接

扫一扫