es6 前端封装json数据 web前端es6

转载

mob6454cc6d3e23 2024-04-22 05:28:06

文章标签 es6 前端封装json数据 html 字符串赋值 文章分类 架构后端开发

一、es6基本语法

基本语法：

1、定义变量

<script>
        /*
            var修饰的变量没有作用域，可以在代码块中声明也可以在修改变量值
            let修饰的变量是有局部作用域的，不能再代码块中声明并且修饰的值不能修改
        */

        {
            var a = 1;
            let b = 2;
        }
        console.log(a)
        console.log(b) // b is not defined
        
        var m = 12;
        var m = 13
        let n = 14;
 </script>

2、定义常量

<script>
        /*
           const修饰常量：
                不能被修改
                一旦声明必须初始化，即：必须赋值
        */
       const PY_I = 3.14
       console.info(PY_I)

 </script>

3、结构赋值

<script>
        /*
            解构赋值是对赋值运算符的扩展
            他是一种针对数组或者对象进行模式匹配，然后对其中的变量进行赋值
        */

        // 常规赋值
        let a=11,b=22,c=33
        console.info(a,b,c)

        //1、数组解构
        let [x,y,z] = [1,2,3]
        console.log(x,y,z)

        // 2、对象解构
        let user = {name: '张三',age:18}

        let {name,age} = user
        console.log(name,age)
    </script>

4、模版字符串

<script>
           /*
            模版字符串相当于加强版的字符串，用反引号'，除了作为普通字符串，还可以
            用来定义多行字符串，还可以在字符串中加入变量和表达式
            */

            let name = 'lucy'
            let age = 18

            let info = `My name is ${name},I am ${age+1}`
            console.info(info)
    </script>

5、声明对象简写

<script>
        const name='lucy'
        const age = 18

        // es6声明对象简写
        const user = {name,age}
        console.log(user)
    </script>

6、对象扩展运算符

<script>
        /*
            扩展运算符（...）用于取出参数对象所有可遍历属性
            然后拷贝到当前对象
        */
        
        // 对象复制
        let person = {name:'大宝',age:18}
        let someone = {...person}
        console.info(someone)

        // 对象合并
        let age = {age:22}
        let name = {name:'Amy'}
        let person2 = {...name,...age}
        console.log(person2)
    </script>

7、箭头函数

<script>
        /*
            语法：参数 = > 函数体
        */
    //传统方式，函数的定义
       var f1 = function(a){
            return a
       }
    //箭头函数定义
        var f2 = a => a
        console.log(f2(5))
    /*
        当箭头函数没有参数或者多个参数，要用（）括起来
        当箭头函数体有多行语句，用{}包裹起来，表示代码块
        当只有一行语句，并且需要返回结果时，可以省略{}，结果自动返回
    */
       var f3 = (m,n) => m+n
       console.log(f3(3,4))
    </script>

二、vue

1、vscode创建代码片段

文件 => 首选项 => 用户片段 => 新建全局代码片段文件：

{
    "vue htm": {
        "scope": "html",
        "prefix": "vuehtml",
        "body": [
            "<!DOCTYPE html>",
            "<html lang=\"en\">",
            "",
            "<head>",
            "    <meta charset=\"UTF-8\">",
            "    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
            "    <meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">",
            "    <title>Document</title>",
            "</head>",
            "",
            "<body>",
            "    <div id=\"app\">",
            "",
            "    </div>",
            "    <script src=\"vue.min.js\"></script>",
            "    <script>",
            "        new Vue({",
            "            el: '#app',",
            "            data: {",
            "                $1",
            "            }",
            "        })",
            "    </script>",
            "</body>",
            "",
            "</html>",
        ],
        "description": "my vue template in html"
    }
}

以后再vue的html文件生成代码，直接敲vuehtml -->就能生成vue标准的代码了

2、vue指令语法：

指令带有前缀v-，除了使用“插值表达式{{}}”进行数据渲染(取值)，也可以使用v-bind指令，它的简写冒号（:）

es6 前端封装json数据 web前端es6_赋值

# 单项绑定：

es6 前端封装json数据 web前端es6_html_02

# 双向绑定：

es6 前端封装json数据 web前端es6_字符串_03

es6 前端封装json数据 web前端es6_赋值_04

# 绑定事件：-->主要针对的是方法

es6 前端封装json数据 web前端es6_html_05

es6 前端封装json数据 web前端es6_html_06

#条件指令

v-if: 条件判断
v-else:

es6 前端封装json数据 web前端es6_html_07

# 循环指令（列表渲染）

es6 前端封装json数据 web前端es6_字符串_08

# 生命周期

es6 前端封装json数据 web前端es6_es6 前端封装json数据_09

三、axios

1、作用：axios独立于vue的一个项目，可以用于浏览器和node.js中发射红ajax请求

es6 前端封装json数据 web前端es6_html_10

#案例模拟：模拟一个后端接口返回的JSON数据，然后前端通过axios取此文件内的data中的items数据

user.json

{
    "code":200,
    "message":"成功",
    "data":{
        "items":[
            {"name":"lucy","age":20},
            {"name":"tom","age":21},
            {"name":"jack","age":22}
        ]
    }
}

第一步：在html页面引入axios的js文件，包含vue的js文件

es6 前端封装json数据 web前端es6_赋值_11