ES6 VUE脚手架快速开发前端

最新推荐文章于 2022-06-25 16:38:29 发布

澄清石灰水t

最新推荐文章于 2022-06-25 16:38:29 发布

阅读量261

点赞数

分类专栏：前端文章标签： es6 vue.js

本文链接：https://blog.csdn.net/chengqingshihuishui/article/details/118404087

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

前言：

本文只是整合全栈开发中的常用前端语句，需要全面学习的，请看专用教程

1、ES6

1.1、简介

ES6是一个规范，就是新一代JavaScript都实现了ES6，简而言之，就是实现了ES6规范的JavaScript，新框架vue，react，angular 等都要用ES6，本文将会介绍常用的新语法。

1.2、新语法

1.2.1 let 和 const

（1）let 与 var

var在{}之外也起作用（var是全局）
let在{}之外不起作用（let有作用域）
var多次声明同一变量不会报错，let多次声明会报错，只能声明一次。
var 会变量提升（打印和定义可以顺序反）。let 不存在变量提升（顺序不能反）

（2）const（常量）

const声明之后不允许改变

（3）案例

<!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>
    

    <script>
       // var 声明的变量往往会越域
       // let 声明的变量有严格局部作用域
//         {
//             var a = 1;
//             let b = 2;
//         }
//         console.log(a);  // 1
//         console.log(b);  // ReferenceError: b is not defined

    // var 可以声明多次
            // let 只能声明一次
//         var m = 1
//         var m = 2
//         let n = 3
//       let n = 4
//         console.log(m)  // 2
//         console.log(n)  // Identifier 'n' has already been declared

        // var 会变量提升
        // let 不存在变量提升
//变量提升后，相当于var x; console.log(x); console.log(x); 
//         console.log(x);  // undefined
//         var x = 10;
//         console.log(y);   //ReferenceError: y is not defined
//         let y = 20;

        // const
        // 1. const声明之后不允许改变
        // 2. 一但声明必须初始化，否则会报错
        const a = 1;
        a = 3; //Uncaught TypeError: Assignment to constant variable.
    
    </script>

</body>
</html>

1.2.2 解构表达式&字符串函数&字符串多行支持&占位符

（1）解构表达式

就是把对象的属性，更快捷的取出来赋值给变量。

说明：服务端传回的json，属性都有一堆。一个一个取值太慢了，因此有了结构表达式

支持let arr = [1,2,3]; let [a,b,c] = arr;这种语法
支持对象解析：const { name: abc, age, language } = person; 冒号代表改名

（2）字符串函数

就是新增了一些字符串的API，增强了字符串的功能

常用的有：sartWith,endsWith,includes

（3）支持一个字符串为多行

避免字符串太长还要用+ 拼接

（4）占位符功能 ${}

直接在字符串中，就可以取值

（5）举例

<!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>

    <script>
        //数组解构
        // let arr = [1,2,3];
        // // let a = arr[0];
        // // let b = arr[1];
        // // let c = arr[2];

        // let [a,b,c] = arr;
        // console.log(a,b,c)

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

        //对象解构
        const { name: abc, age, language } = person;
        console.log(abc, age, language)

        // 字符串扩展
        let str = "hello.vue";
        console.log(str.startsWith("hello"));//true
        console.log(str.endsWith(".vue"));//true
        console.log(str.includes("e"));//true
        console.log(str.includes("hello"));//true

        //字符串模板
        let ss = `<div>
                    <span>hello world<span>
                </div>`;
        console.log(ss);

        // 字符串插入变量和表达式。变量名写在 ${} 中，${} 中可以放入 JavaScript 表达式。

        function fun() {
            return "这是一个函数"
        }

        let info = `我是${abc}，今年${age + 10}了, 我想说： ${fun()}`;
        console.log(info);

    </script>
</body>
</html>

1.3 函数优化

（1）允许函数形参给默认值（如果实参不传参，就用默认值，不会报错）

function add2(a, b = 1) { // b给默认值1

（2）函数不定参数function fun(...values) {

java也有这招

（3）支持箭头函数（lambda表达式），还支持使用{}结构传入对象的成员

java和c中，箭头函数是一种简写方式，如果这个函数只用一次，就不需要为他声明函数名，就可以用匿名函数（lambda表达式），用匿名函数就可以节约很多代码。

ES6中，目前看来就是简写吧

<!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>

    <script>
        //在ES6以前，我们无法给一个函数参数设置默认值，只能采用变通写法：
        function add(a, b) {
            // 判断b是否为空，为空就给默认值1
            b = b || 1;
            return a + b;
        }
        // 传一个参数
        console.log(add(10));


        //现在可以这么写：直接给参数写上默认值，没传就会自动使用默认值
        function add2(a, b = 1) {
            return a + b;
        }
        console.log(add2(20));


        //不定参数
        function fun(...values) {
            console.log(values.length)
        }
        fun(1, 2)      //2
        fun(1, 2, 3, 4)  //4

        //箭头函数
        //以前声明一个方法
        // var print = function (obj) {
        //     console.log(obj);
        // }
        var print = obj => console.log(obj);
        print("hello");

        var sum = function (a, b) {
            c = a + b;
            return a + c;
        }

        var sum2 = (a, b) => a + b;
        console.log(sum2(11, 12));

        var sum3 = (a, b) => {
            c = a + b;
            return a + c;
        }
        console.log(sum3(10, 20))


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

        function hello(person) {
            console.log("hello," + person.name)
        }

        //箭头函数+解构 直接传入对象成员
        var hello2 = ({name}) => console.log("hello," +name);
        hello2(person);

    </script>
</body>
</html>

1.4 对象优化（新增对象API + 简写）

（1）新增一些对象API

Object.keys()、Object.values()、Object.entries()

获取对象键，获取对象值，获取对象键值

Object.assgn(target,source1,source2) 将source对象合并给目标对象target

注意：如果目标对象（target）与源对象（Object）有同名属性，或多个源对象有同名属性，则后面的属性会覆盖前面的属性。

（2）声明对象简写
又一种简写方式，直接看后面的代码

（3）对象拓展运算符

…代表取出该对象所有属性拷贝到当前对象。let someone = { …p1 }，可合并对象（看代码）

<!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>
    <script>
        const 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)]

        const target = { a: 1 };
        const source1 = { b: 2 };
        const source2 = { c: 3 };

       
        Object.assign(target, source1, source2);

        console.log(target);// //{a:1,b:2,c:3}

        // 声明对象简写
        const age = 23
        const name = "张三"
        const person1 = { age: age, name: name }

        const person2 = { age, name }//声明对象简写
        console.log(person2);

        // 对象的函数属性简写
        let person3 = {
            name: "jack",
            // 以前：
            eat: function (food) {
                console.log(this.name + "在吃" + food);
            },
            //箭头函数this不能使用，对象.属性
            eat2: food => console.log(person3.name + "在吃" + food),
            eat3(food) {
                console.log(this.name + "在吃" + food);
            }
        }

        person3.eat("香蕉");
        person3.eat2("苹果")
        person3.eat3("橘子");

        // 对象拓展运算符

        //  拷贝对象（深拷贝）
        let p1 = { name: "Amy", age: 15 }
        let someone = { ...p1 }
        console.log(someone)  //{name: "Amy", age: 15}

        //  合并对象
        let age1 = { age: 15 }
        let name1 = { name: "Amy" }
        let p2 = {name:"zhangsan"}
        p2 = { ...age1, ...name1 } 
        console.log(p2)
    </script>
</body>

</html>

1.5 map 和 reduce （项目中常用api）

（1）map

map()：接收一个函数，将原数组中的所有元素用这个函数（项目中，看到的这个函数一般都是箭头函数）处理后放入新数组返回。

（2）reduce

reduce(回调函数(回调形参1,回调形参2...),【初始值】) 为数组中的每一个元素依次执行回调函数，不包括数组中被删除或从未被赋值的元素，

回调函数中的形参：

① previousValue （上一次调用回调返回的值，或者是提供的初始值（initialValue））

② currentValue （数组中当前被处理的元素）

③ index （当前元素在数组中的索引）

④ array （调用 reduce 的数组）*/

<!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>
    
    <script>
        //数组中新增了map和reduce方法。
        //map()：接收一个函数，将原数组中的所有元素用这个函数处理后放入新数组返回。
         let arr = ['1', '20', '-5', '3'];
         
        //  arr = arr.map((item)=>{
        //     return item*2
        //  });
         arr = arr.map(item=> item*2);

        

         console.log(arr);
        //reduce() 为数组中的每一个元素依次执行回调函数，不包括数组中被删除或从未被赋值的元素，
        //[2, 40, -10, 6]
        //arr.reduce(callback,[initialValue])
        /**
     1、previousValue （上一次调用回调返回的值，或者是提供的初始值（initialValue））
    2、currentValue （数组中当前被处理的元素）
    3、index （当前元素在数组中的索引）
    4、array （调用 reduce 的数组）*/
        let result = arr.reduce((a,b)=>{
            console.log("上一次处理后："+a);
            console.log("当前正在处理："+b);
            return a + b;
        },100);
        console.log(result)

    
    </script>
</body>
</html>

1.6 promise （项目中超常用）

以前嵌套ajax的时候很繁琐。

简化后的流程：把Ajax封装到Promise中，赋值给let p
在Ajax中成功使用resolve(data)，交给then处理，失败使用reject(err)，交给catch处理p.then().catch()

演示：

（1）假设服务端传回的json如下：

corse_score_10.json 得分
{
    "id": 100,
    "score": 90
}

user.json 用户
{
    "id": 1,
    "name": "zhangsan",
    "password": "123456"
}


user_corse_1.json 课程
{
    "id": 10,
    "name": "chinese"
}

（2）promise 使用

<!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>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
    <script>
        //promise之前的繁琐做法
        //1、查出当前用户信息
        //2、按照当前用户的id查出他的课程
        //3、按照当前课程id查出分数
        // $.ajax({
        //     url: "mock/user.json",
        //     success(data) {
        //         console.log("查询用户：", data);
        //         $.ajax({
        //             url: `mock/user_corse_${data.id}.json`,
        //             success(data) {
        //                 console.log("查询到课程：", data);
        //                 $.ajax({
        //                     url: `mock/corse_score_${data.id}.json`,
        //                     success(data) {
        //                         console.log("查询到分数：", data);
        //                     },
        //                     error(error) {
        //                         console.log("出现异常了：" + error);
        //                     }
        //                 });
        //             },
        //             error(error) {
        //                 console.log("出现异常了：" + error);
        //             }
        //         });
        //     },
        //     error(error) {
        //         console.log("出现异常了：" + error);
        //     }
        // });


        //1、Promise可以封装异步操作
        // let p = new Promise((resolve, reject) => { //传入成功解析，失败拒绝
        //     //1、异步操作
        //     $.ajax({
        //         url: "mock/user.json",
        //         success: function (data) {
        //             console.log("查询用户成功:", data)
        //             resolve(data);
        //         },
        //         error: function (err) {
        //             reject(err);
        //         }
        //     });
        // });

        // p.then((obj) => { //成功以后做什么
        //     return new Promise((resolve, reject) => {
        //         $.ajax({
        //             url: `mock/user_corse_${obj.id}.json`,
        //             success: function (data) {
        //                 console.log("查询用户课程成功:", data)
        //                 resolve(data);
        //             },
        //             error: function (err) {
        //                 reject(err)
        //             }
        //         });
        //     })
        // }).then((data) => { //成功以后干什么
        //     console.log("上一步的结果", data)
        //     $.ajax({
        //         url: `mock/corse_score_${data.id}.json`,
        //         success: function (data) {
        //             console.log("查询课程得分成功:", data)
        //         },
        //         error: function (err) {
        //         }
        //     });
        // })

        function get(url, data) { //自己定义一个方法整合一下
            return new Promise((resolve, reject) => {
                $.ajax({
                    url: url,
                    data: data,
                    success: function (data) {
                        resolve(data);
                    },
                    error: function (err) {
                        reject(err)
                    }
                })
            });
        }

        get("mock/user.json")
            .then((data) => {
                console.log("用户查询成功~~~:", data);
                return get(`mock/user_corse_${data.id}.json`);
            })
            .then((data) => {
                console.log("课程查询成功~~~:", data)
                return get(`mock/corse_score_${data.id}.json`);
            })
            .then((data)=>{
                console.log("课程成绩查询成功~~~:", data)
            })
            .catch((err)=>{ //失败的话catch
                console.log("出现异常",err)
            });

    </script>
</body>

</html>

注意：虽然说结尾不写分号确实很爽，但是为了增强代码可读性，减少歧义，最好是在结尾处加上分号。

1.7 模块化（）

（1）简介

模块化就是把代码进行拆分，方便重复利用。类似于java中的导包，而JS换了个概念，是导模块。

模块功能主要有两个命令构成 export 和import

① export用于规定模块的对外接口

`export`不仅可以导出对象，一切JS变量都可以导出。比如：基本类型变量、函数、数组、对象。

② import用于导入其他模块提供的功能

（2）演示

假设写了 user.js 和 hello.js两个模块，main.js来导入这两个模块

user.js
var name = "jack"
var age = 21
function add(a,b){
    return a + b;
}

export {name,age,add}

hello.js
// export const abc = {
//     sum(a, b) {
//         return a + b;
//     }
// }
// export {abc}

export abc {
    sum(a, b) {
        return a + b;
    }
}


//`export`不仅可以导出对象，一切JS变量都可以导出。比如：基本类型变量、函数、数组、对象。


main.js
import abc from "./hello.js"
import {name,add} from "./user.js"

abc.sum(1,2);
console.log(name);
add(1,3);

（3）export default（框架常用）

（3.1）背景

使用import命令的时候，用户需要知道所要加载的变量名或函数名，否则无法加载。但是，用户肯定希望快速上手，未必愿意阅读文档，去了解模块有哪些属性和方法。

为了给用户提供方便，让他们不用阅读文档就能加载模块，就要用到export default命令，为模块指定默认输出。

// export-default.js
export default function () {
  console.log('foo');
}

上面代码的import命令，可以用任意名称指向export-default.js输出的方法，这时就不需要知道原模块输出的函数名。需要注意的是，这时import命令后面，不使用大括号。

本质上，export default就是输出一个叫做default的变量或方法，然后系统允许你为它取任意名字。所以，下面的写法是有效的。

export default add;
// 等同于
export {add as default};



// app.js
import foo from 'modules';
// 等同于
import { default as foo } from 'modules';

2、VUE

2.1 基本思想

MVVM思想

M：model 包括数据和一些基本操作
V：view 视图，页面渲染结果
VM：View-model，模型与视图间的双向操作（无需开发人员干涉）
视图和数据通过VM绑定起来，model里有变化会自动地通过Directives填写到视view中，视图表单中添加了内容也会自动地通过DOM Listeners保存到模型中。

2.2 入门案例

在VSCode中安装vue 2 snippets语法提示插件，在谷歌浏览器中安装vue.js devtools

<!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>
    <!-- 导入依赖 -->
    <script src="./node_modules/vue/dist/vue.js"></script>

    <script>
         //1、创建vue实例，关联页面的模板，将自己的数据（data）渲染到关联的模板，响应式的
        //2、指令来简化对dom的一些操作。
        //3、声明方法来做更复杂的操作。methods里面可以封装方法。
        //step1 ：vue声明式渲染
        let vm = new Vue({ //生成vue对象
            el: "#app",//绑定元素 div id="app"，这个vue对象就处理后面的id为app的html元素，其他元素不干涉
            data: {  //封装数据
                name: "张三",  // 也可以使用{} //表单中可以取出
                num: 1
            },
            methods:{  //封装方法
                cancel(){
                    this.num -- ;
                },
                hello(){
                    return "1"
                }
            }
        });
        还可以在html控制台vm.name

        //2、双向绑定,模型变化，视图变化。反之亦然。
        //3、事件处理

        //v-xx：指令 v-model 双向绑定（模型变化，视图变化反之亦然），v-on:click绑定单击事件

    </script>

    <div id="app">
        <input type="text" v-model="num">
        v-model实现双向绑定
        <button v-on:click="num++">点赞</button>
        v-on:click绑定事件，实现自增
        <button v-on:click="cancel">取消</button>
        回到自定义的方法
        
        <h1> {{name}} ,非常帅，有{{num}}个人为他点赞{{hello()}}</h1>
    </div>

    
</body>

</html>

2.4 VUE指令 v-xx
2.4.1 插值表达式 {{变量}}

花括号：只能写在标签体内，不能用在标签内。用v-bind解决
{{}}必须有返回值

2.4.2 v-text、v-html.html

读取网页内容和原样显示

<!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">
        {{msg}}  {{1+1}}  {{hello()}}<br/>
        用v-html取内容
        <span v-html="msg"></span>
        
        <br/>
        原样显示
        <span v-text="msg"></span>

        
    </div>
   
    <script src="../node_modules/vue/dist/vue.js"></script>

    <script>
        new Vue({
            el:"#app",
            data:{
                msg:"<h1>Hello</h1>",
                link:"http://www.baidu.com"
            },
            methods:{
                hello(){
                    return "World"
                }
            }
        })
    </script>
    
</body>
</html>

2.4.3 单向绑定 v-bind 双向绑定 v-model

特别说明：绑定的值，都是变量（基本变量+对象）。区别下原来HTML中标签的属性值，是写死的字符串

（1）单向绑定 v-bind（对样式，对链接）项目总常常简写为：（冒号）

<!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>

    <!-- 给html标签的属性绑定 -->
    <div id="app"> 

        <a v-bind:href="link">gogogo</a>

        <!-- class,style  {class名：加上？}-->
        <span v-bind:class="{active:isActive,'text-danger':hasError}"
          :style="{color: color1,fontSize: size}">你好</span>


    </div>

    <script src="../node_modules/vue/dist/vue.js"></script>

    <script>
        let vm = new Vue({
            el:"#app",
            data:{
                link: "http://www.baidu.com",
                isActive:true,
                hasError:true,
                color1:'red',
                size:'36px'
            }
        })
    </script>

</body>
</html>

（2）双向绑定 v-model

主要用于表单，前后有关联的变量

<!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">

        精通的语言：
            <input type="checkbox" v-model="language" value="Java"> java<br/>
            <input type="checkbox" v-model="language" value="PHP"> PHP<br/>
            <input type="checkbox" v-model="language" value="Python"> Python<br/>
        选中了 {{language.join(",")}}
    </div>
    
    <script src="../node_modules/vue/dist/vue.js"></script>

    <script>
        let vm = new Vue({
            el:"#app",
            data:{
                language: []
            }
        })
    </script>

</body>
</html>

2.4.4 v-on

绑定各种事件

可以简写为 @

<!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">
                
        <!--事件中直接写js片段-->
        <button v-on:click="num++">点赞</button>
        <!--事件指定一个回调函数，必须是Vue实例中定义的函数-->
        <button @click="cancel">取消</button>
        <!--  -->
        <h1>有{{num}}个赞</h1>


        <!-- 事件修饰符 -->
        <div style="border: 1px solid red;padding: 20px;" v-on:click.once="hello">
            大div
            <div style="border: 1px solid blue;padding: 20px;" @click.stop="hello">
                小div <br />
                <a href="http://www.baidu.com" @click.prevent.stop="hello">去百度</a>
            </div>
        </div>



        <!-- 按键修饰符： -->
        <input type="text" v-model="num" v-on:keyup.up="num+=2" @keyup.down="num-=2" @click.ctrl="num=10"><br />

        提示：

    </div>
    <script src="../node_modules/vue/dist/vue.js"></script>

    <script>
        new Vue({
            el:"#app",
            data:{
                num: 1
            },
            methods:{
                cancel(){
                    this.num--;
                },
                hello(){
                    alert("点击了")
                }
            }
        })
    </script>
</body>

</html>

2.4.5 v-if和v-show

v-if，顾名思义，条件判断。当得到结果为true时，所在的元素才会被渲染。
v-show，当得到结果为true时，所在的元素才会被显示。

<!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>
    <!-- 
        v-if，顾名思义，条件判断。当得到结果为true时，所在的元素才会被渲染。
        v-show，当得到结果为true时，所在的元素才会被显示。 
    -->
    <div id="app">
        <button v-on:click="show = !show">点我呀</button>
        <!-- 1、使用v-if显示 -->
        <h1 v-if="show">if=看到我....</h1>
        <!-- 2、使用v-show显示 -->
        <h1 v-show="show">show=看到我</h1>
    </div>

    <script src="../node_modules/vue/dist/vue.js"></script>
        
    <script>
        let app = new Vue({
            el: "#app",
            data: {
                show: true
            }
        })
    </script>

</body>

</html>

2.4.6 v-else和v-else-if

<!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">
        <button v-on:click="random=Math.random()">点我呀</button>
        <span>{{random}}</span>

        <h1 v-if="random>=0.75">
            看到我啦？！ &gt;= 0.75
        </h1>

        <h1 v-else-if="random>=0.5">
            看到我啦？！ &gt;= 0.5
        </h1>

        <h1 v-else-if="random>=0.2">
            看到我啦？！ &gt;= 0.2
        </h1>

        <h1 v-else>
            看到我啦？！ &lt; 0.2
        </h1>

    </div>


    <script src="../node_modules/vue/dist/vue.js"></script>
        
    <script>         
        let app = new Vue({
            el: "#app",
            data: { random: 1 }
        })     
    </script>
</body>

</html>

& g t ; html的转义字符相当于>

2.4.7 v-for

（1）显示user信息：v-for="item in items"

（2）获取数组下标：v-for="(item,index) in items"

（3）遍历对象：
v-for="value in object"
v-for="(value,key) in object"
v-for="(value,key,index) in object"
说明：value，key，index 都能取出来遍历

<!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">
        <ul>
            <li v-for="(user,index) in users" :key="user.name" v-if="user.gender == '女'">
                <!-- 1、显示user信息：v-for="item in items" -->
               当前索引：{{index}} ==> {{user.name}}  ==>   {{user.gender}} ==>{{user.age}} <br>
                <!-- 2、获取数组下标：v-for="(item,index) in items" -->
                <!-- 3、遍历对象：
                        v-for="value in object"
                        v-for="(value,key) in object"
                        v-for="(value,key,index) in object" 
               输出：当前索引0==>柳岩==>女==>21  遍历所有的
 -->
                对象信息：
                <span v-for="(v,k,i) in user">{{k}}=={{v}}=={{i}}；</span>
                <!-- 4、遍历的时候都加上:key来区分不同数据，提高vue渲染效率 -->
            </li>

            
        </ul>

        <ul>
            <li v-for="(num,index) in nums" :key="index"></li>
        </ul>
    </div>
    <script src="../node_modules/vue/dist/vue.js"></script>
    <script>         
        let app = new Vue({
            el: "#app",
            data: {
                users: [{ name: '柳岩', gender: '女', age: 21 },
                { name: '张三', gender: '男', age: 18 },
                { name: '范冰冰', gender: '女', age: 24 },
                { name: '刘亦菲', gender: '女', age: 18 },
                { name: '古力娜扎', gender: '女', age: 25 }],
                nums: [1,2,3,4,4]
            },
        })
    </script>
</body>

</html>

2.5 计算属性和侦听器

watch: {
xyjNum(newVal,oldVal){ //要侦听的变量（原值，变化后的值）

computed: {
totalPrice(){ //要计算的变量（这些结果是基于之前数据实时计算出来的）

<!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">
        <!-- 某些结果是基于之前数据实时计算出来的，我们可以利用计算属性。来完成 -->
        <ul>
            <li>西游记； 价格：{{xyjPrice}}，数量：<input type="number" v-model="xyjNum"> </li>
            <li>水浒传； 价格：{{shzPrice}}，数量：<input type="number" v-model="shzNum"> </li>
            <li>总价：{{totalPrice}}</li>
            {{msg}}
        </ul>
    </div>
    <script src="../node_modules/vue/dist/vue.js"></script>

    <script>
        //watch可以让我们监控一个值的变化。从而做出相应的反应。
        new Vue({
            el: "#app",
            data: {
                xyjPrice: 99.98,
                shzPrice: 98.00,
                xyjNum: 1,
                shzNum: 1,
                msg: ""
            },
            computed: {
                totalPrice(){
                    return this.xyjPrice*this.xyjNum + this.shzPrice*this.shzNum
                }
            },
            watch: {
                xyjNum(newVal,oldVal){  //要侦听的变量
                    if(newVal>=3){
                        this.msg = "库存超出限制";
                        this.xyjNum = 3
                    }else{
                        this.msg = "";
                    }
                }
            },
        })
    </script>

</body>

</html>

2.6 过滤器

https://cn.vuejs.org/v2/guide/filters.html

过滤器常用来处理文本格式化的操作。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式

<!-- 在双花括号中 -->
{{ message | capitalize }}

<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | formatId"></div>

说明：管道运算符| 左边的message，就是过滤器函数的形参

比如：数据库中常用 1、0表示男，女。下面案例就是通过过滤器将1、0变成男女

<!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>
    <!-- 过滤器常用来处理文本格式化的操作。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 -->
    <div id="app">
        <ul>
            <li v-for="user in userList">
                {{user.id}} ==> {{user.name}} ==> {{user.gender == 1?"男":"女"}} ==>
                {{user.gender | genderFilter}} ==> {{user.gender | gFilter}}
            </li>
        </ul>
    </div>
    <script src="../node_modules/vue/dist/vue.js"></script>

    <script>
        //全局过滤器
        Vue.filter("gFilter", function (val) {
            if (val == 1) {
                return "男~~~";
            } else {
                return "女~~~";
            }
        })

        let vm = new Vue({
            el: "#app",
            data: {
                userList: [
                    { id: 1, name: 'jacky', gender: 1 },
                    { id: 2, name: 'peter', gender: 0 }
                ]
            },
            filters: {
                 filters 定义局部过滤器，只可以在当前vue实例中使用
                genderFilter(val) {
                    if (val == 1) {
                        return "男";
                    } else {
                        return "女";
                    }
                }
            }
        })
    </script>
</body>

</html>

2.7 组件化（项目必用）

在大型应用开发的时候，页面可以划分成很多部分。往往不同的页面，也会有相同的部分。
例如可能会有相同的头部导航。
但是如果每个页面都自开发，这无疑增加了我们开发的成本。所以我们会把页面的不同分拆分成立的组件，然后在不同页面就可以共享这些组件，避免重复开发。
在vue里，所有的vue实例都是组件

组件其实也是一个vue实例，因此它在定义时也会接收：data、methods、生命周期函等
不同的是组件不会与页面的元素綁定，否则就无法复用了，因此没有el属性。
但是组件渲染需要html模板，所以增加了template属性，值就是HTML模板
全局组件定义完毕，任何vue实例都可以直接在HTML中通过组件名称来使用组件了
data必须是一个函数，不再是一个对象。

说明：

全局组件直接 VUE.

局部组件先用变量声明，再注册进VUE

<!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">
        <button v-on:click="count++">我被点击了 {{count}} 次</button>

        <counter></counter>
        <counter></counter>
        <counter></counter>
        <counter></counter>
        <counter></counter>

        <button-counter></button-counter>
    </div>
    <script src="../node_modules/vue/dist/vue.js"></script>


    <script>
        //1、全局声明注册一个组件
        Vue.component("counter", {
            template: `<button v-on:click="count++">我被点击了 {{count}} 次</button>`,
            data() {
                return {
                    count: 1
                }
            }
        });

        //2、局部声明一个组件
        const buttonCounter = {
            template: `<button v-on:click="count++">我被点击了 {{count}} 次~~~</button>`,
            data() {
                return {
                    count: 1
                }
            }
        };

//将局部组件注册进VUE

        new Vue({
            el: "#app",
            data: {
                count: 1
            },
            components: {
                'button-counter': buttonCounter
            }
        })
    </script>
</body>

</html>

2.8 生命周期钩子函数（类似Spring的AOP）

VUE对象是有生命周期的

在生命周期的几个环节，我们可以加入自己代码，增强性能

https://www.jianshu.com/p/410b6099be69

<!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">
        <span id="num">{{num}}</span>
        <button @click="num++">赞！</button>
        <h2>{{name}}，有{{num}}个人点赞</h2>
    </div>

    <script src="../node_modules/vue/dist/vue.js"></script>
    
    <script>
        let app = new Vue({
            el: "#app",
            data: {
                name: "张三",
                num: 100
            },
            methods: {
                show() {
                    return this.name;
                },
                add() {
                    this.num++;
                }
            },
            beforeCreate() {
                console.log("=========beforeCreate=============");
                console.log("数据模型未加载：" + this.name, this.num);
                console.log("方法未加载：" + this.show());
                console.log("html模板未加载：" + document.getElementById("num"));
            },
            created: function () {
                console.log("=========created=============");
                console.log("数据模型已加载：" + this.name, this.num);
                console.log("方法已加载：" + this.show());
                console.log("html模板已加载：" + document.getElementById("num"));
                console.log("html模板未渲染：" + document.getElementById("num").innerText);
            },
            beforeMount() {
                console.log("=========beforeMount=============");
                console.log("html模板未渲染：" + document.getElementById("num").innerText);
            },
            mounted() {
                console.log("=========mounted=============");
                console.log("html模板已渲染：" + document.getElementById("num").innerText);
            },
            beforeUpdate() {
                console.log("=========beforeUpdate=============");
                console.log("数据模型已更新：" + this.num);
                console.log("html模板未更新：" + document.getElementById("num").innerText);
            },
            updated() {
                console.log("=========updated=============");
                console.log("数据模型已更新：" + this.num);
                console.log("html模板已更新：" + document.getElementById("num").innerText);
            }
        });
    </script>
</body>

</html>

3、VUE快速开发

3.1 使用Vue脚手架（vue-cli）

webpack：js的打包工具

webpack打包的作用：最后生成一个或者多个压缩后的js，css文件和一个index.html文件

npm命令的使用：NPM是随同NodeJS一起安装的包管理工具，因此使用npm指令，需要node环境

允许用户从NPM服务器下载别人编写的第三方包到本地使用。
允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。
允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。

打开命令提示符
1、全局安装webpack （-g 代表全局安装）
npm install webpack -g
2、全局安装vue脚手架
npm install -g  @vue/cli

细节：为了命令提示符在安装时不被打断，右键设置命令提示符的属性，去掉“快速编辑模式”

3、初始化vue项目
vue init webpack appname
vue脚手架使用webpack模板初始化一个appname（项目名字随便取）项目
细节：先在一个中意的目录创建一个项目文件夹，然后再文件夹里面打开cmd，执行这个命令。会在你的文件夹下再建一个项目名为appname的文件夹

项目的package.json中有scripts,代表我们能运行的命令

如果只是学习的话，按照下图选择就好：

4 启动vue项目
npm start = npm run dev
启动项目后，访问localhost:8080（端口号可以自己设置），即可访问到首页
端口号在config目录下，index.js可以设置
5 关闭项目
ctrl + C

npm run build:将项目打包

安装成功后，出现vue项目目录

文件夹简介：

build：构建相关

config：配置相关（配置端口号啊什么的）

node_modules: 项目需要的依赖会在这里

src：源码，自己的代码，用的最多的

static: 静态资源

package.json 依赖版本

package-lock.jon 依赖坐标

说明：前端开发都用NPM 安装依赖，安装好以后，相关信息会自动进入package.json，package-lock.json，node_modules

3.2 Vue脚手架项目运行过程：

（1）从index.html页面开始看，只有一个div标签，id是app

（2）进入 src 目录下的 main.js

在这里，新建了vue实例来挂载首页的id为app的div元素

router 是 router:router的简写（Es6规定如果属性和值同名，可以这样简写）

router又来源于 ./router （import router from './router'）相当于导入了当前目录下的router文件夹下的所有.js文件

（2.1）进入router文件夹下的index.js

这里 export导出了一个组件（就是刚刚main导入的），而且没给导出的组件命名。但在上面导入该组件的时候，给他取了名字 router

path:/ 说明当我们在url中访问/的时候，就路由给HelloWorld组件

又可以看到hellworld组件来源于 @（src根目录）/components/HelloWorld

---------------------------------------------------------------------

接着返回 main.js继续看components:{App}，这里也是简写components:{App:App}

根据代码，该组件也是导入进来的 import App from './App'

直接进入同级目录的App.vue

（2.2）进入src目录下的 App.vue

该文件叫做vue的单文件组件：https://cn.vuejs.org/v2/guide/single-file-components.html

Vue 组件构成

（2.2.1）<template> 模板，决定页面怎么显示 //有点像html

<router-view>标签，说明是路由视图，即动态决定img标签下面显示什么（根据路由router里的代码）

动态路由的显示规则，去src/router/index.js 中配置

配置规则需要专题学习

（2.2.2）<script> 写vue实例代码 //有点像JavaScript

（2.2.3）<style> template模板的样式 //有点像css

扩展：vscode快速生成vue模板

进入vscode：

文件—首选项—用户片段

3.3 使用element-ui

功能样式比bootstrap丰富的多，快速完成前端布局。

安装、import（导入）、使用 Vue.use 三个环节

推荐使用 npm 的方式安装，它能更好地和 webpack 打包工具配合使用。
npm i element-ui -S
i是install的缩写

安装成功以后，package.json，和package-lock.json会自动生成相关依赖版本即坐标，node_modules文件夹里面会有依赖实体。

安装完成以后，在main.js中

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';


Vue.use(ElementUI);

在main中导入，整个项目的任何组件都能使用这个ElementUI了

澄清石灰水t

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
ES6 VUE脚手架快速开发前端

前言：本文只是整合全栈开发中的常用前端语句，需要全面学习的，请看专用教程1、ES61.1、简介 ES6是一个规范，就是新一代JavaScript都实现了ES6，简而言之，就是实现了ES6规范的JavaScript，新框架vue，react，angular 等都要用ES6，本文将会介绍常用的新语法。1.2、新语法1.2.1 let 和 const（1）let 与 varvar在{}之外也起作用（var是全局）let在{}之外不起作用（let有作用域）var多次声...
复制链接

扫一扫