Vue入门以及ES6新特性讲解

最新推荐文章于 2023-08-30 15:40:50 发布

唯有代码不会骗人

最新推荐文章于 2023-08-30 15:40:50 发布

阅读量995

点赞数

分类专栏： vue 文章标签： vue 前端框架 es6新特性

本文链接：https://blog.csdn.net/weixin_44248000/article/details/103316800

版权

vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1.前端技术发展史简介

1.1 前端技术发展史

（1）1990年，HTML（超文本标记语言）诞生，主要用来做静态网页，由一些标签+css等组成。
（2）1995年，JSP、PHP、ASP的相继出现，可以使用它们来完成动态网页，但是后台非常臃肿。
（3）Ajax（Asynchronous Javascript And XML，即异步Javascript和XML，也称为局部刷新技术）成为主流。
（4）2008年，HTML5出现了，也标志着前端的春天来了。
（5）2010年，NodeJs出现，它的出现吸引了很多前端开发人员开始用 JavaScript 开发服务器代码，其异步编程风格也深受开发人员的喜爱。Node.js 的伟大不仅在于拓展了 JavaScript 在服务器端的无限可能，更重要的是它构建了一个庞大的生态系统。在这之后，一大批前端框架涌现，其中就包含Vue，Vue的最初发布时间为2014年7月。

1.2 MVVM架构

我们之前用过的SpringMVC框架基于MVC架构，而MVC的意思是：Model (模型)、 View(视图) 、Controller(控制器)。
前端框架Vue则基于MVVM框架，意思为：Model(模型) 包括数据和一些基本操作、View (视图) 页面渲染结果、 ViewModel(视图模型)模型与视图间的双向操作。其中Vue框架最具特色的为可以实现数据的双向绑定，需要v-model指令来实现，只要我们Model发生了改变，View上自然就会表现出来。当用户修改了View，Model中的数据也会跟着改变。
把开发人员从繁琐的DOM操作中解放出来，把关注点放在如何操作Model上。具体流程如图：
在这里插入图片描述

2.NodeJS&NPM环境

NPM是Node提供的模块管理工具，可以非常方便的下载安装很多前端框架，包括Jquery、AngularJS、VueJs都有。为了后面学习方便，我们需要先安装node及NPM工具.
NodeJs下载：https://nodejs.org/en/download/
（1）安装nodejs工具包，安装非常简单，一直下一步即可。安装完毕之后可以在cmd控制台输入以下指令查看及完成相应操作。
node -v 查看node版本信息
在这里插入图片描述
npm -v 查看npm的版本信息

npm install npm@latest -g 升级为最新版(需要升级)
（2）在idea工具上，安装nodejs插件，

安装完毕之后，重启即可。
（3）创建一个static web项目
（4）在Terminal控制台输入npm init -y（相当于是创建了一个maven项目）
在这里插入图片描述
（5）安装vue，有如下指令：
npm install -g vue 全局安装vue（所有项目都可以使用）

npm install vue 局部安装vue（当前项目使用，推荐）

npm uninstall vue 卸载vue

npm update vue 更新vue

3.ECMAScript6

3.1 什么是ECMAScript

web1.0时代：
最初的网页以HTML为主，是纯静态的网页。网页是只读的，信息流只能从服务的到客户端单向流通。开发人员也只关心页面的样式和内容即可。
web2.0时代：

1995年，网景工程师Brendan Eich 花了10天时间设计了JavaScript语言。
1996年，微软发布了JScript，其实是JavaScript的逆向工程实现。
1997年，为了统一各种不同script脚本语言，ECMA（欧洲计算机制造商协会）以JavaScript为基础，制定了ECMAscript标准规范。JavaScript和JScript都是ECMAScript的标准实现者，随后各大浏览器厂商纷纷实现了ECMAScript标准。
所以，ECMAScript是浏览器脚本语言的规范，可以狭义理解是javascript的规范。

3.2 ECMAScript历史

1997年而后，ECMAScript就进入了快速发展期。
1998年6月，ECMAScript 2.0 发布。
1999年12月，ECMAScript 3.0 发布。这时，ECMAScript 规范本身也相对比较完善和稳定了，但是接下来的事情，就比较悲剧了。
2007年10月，ECMAScript 4.0 草案发布。这次的新规范，历时颇久，规范的新内容也有了很多争议。在制定ES4的时候，是分成了两个工作组同时工作的。
一边是以 Adobe, Mozilla, Opera 和 Google为主的 ECMAScript 4 工作组。
一边是以 Microsoft 和 Yahoo 为主的 ECMAScript 3.1 工作组。
ECMAScript 4 的很多主张比较激进，改动较大。而 ECMAScript 3.1 则主张小幅更新。最终经过 TC39 的会议，决定将一部分不那么激进的改动保留发布为 ECMAScript 3.1，而ES4的内容，则延续到了后来的ECMAScript5和6版本中
2009年12月，ECMAScript 5 发布。
2011年6月，ECMAScript 5.1 发布。
2015年6月，ECMAScript 6，也就是 ECMAScript 2015 发布了。并且从 ECMAScript 6 开始，开始采用年号来做版本。即 ECMAScript 2015，就是ECMAScript6。
ES6就是javascript用的最多语言规范.被浏览器实现了.

3.3 ES6常用的一些新特性

（1)let与const
let相较于var，它是块级的（相当于局部变量）

for(var j = 0;j < 10;j++){
            console.log(j)
        }
        console.log(j);

        for(let i = 0;i<10;i++){
            console.log(i);
        }
        console.log(i);

const声明常量不能修改（相当于final）
在这里插入图片描述
（2）解构表达式
数组解构：

//数组解构
        var arr = [1,2,3];
        var [a1,a2,a3] = arr;
        console.log(a1,a2,a3);

对象解构：

//对象解构
        var obj = {"name":"小困困","age":25}
        var {name,age} = obj;
        console.log(name,age);

（3）箭头函数

// 以前：
    eat: function (food) {
        console.log(this.name + "在吃" + food);
    },
    // 箭头函数版：
    eat2: food => console.log(person.name + "在吃" + food),// 这里拿不到this
    // 简写版：
    eat3(food){
        console.log(this.name + "在吃" + food);
    }

箭头函数+解构表达式写法：

//箭头表达式+解构表达式
        //以前写法
        var person = {
            name:"小憨憨"
        }
        let a = function (person) {
            console.log(person.name);
        }
        a(person);
        //箭头表达式+解构表达式写法
        var b = ({name}) =>{
            console.debug(name);
        }
        b({"name":"小憨憨"});

（4）Promise对象
Promise是异步编程的一种解决方案，比传统的解决方案（回调函数+事件）更加合理和强大。
所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。Promise 提供统一的 API，各种异步操作都可以用同样的方法进行处理。过Promise的构造函数来创建Promise对象，并在内部封装一个异步执行的结果。
案例：

//(4)promise
        const p = new Promise((resolve, reject) =>{
            // 这里我们用定时任务模拟异步
            setTimeout(() => {
                const num = Math.random();
                // 随机返回成功或失败
                if (num < 0.5) {
                    resolve("成功！num:" + num)
                } else {
                    reject("出错了！num:" + num)
                }
            }, 300)
        }).then(function (msg) {
            console.log(msg);
        }).catch(function (msg) {
            console.log(msg);
        })

（5）模块化
模块化是一种思想,这种思想在前端有多种规范常见的规范有commonJs(nodeJS),cmd/amd(可以在浏览器中使用),es6(可以在浏览器中使用).
模块化就是把代码进行拆分，方便重复利用。类似java中的导包：要使用一个包，必须先导包。而JS中没有包的概念，换来的是模块。es6模块功能主要由两个命令构成：export和import。

export命令用于规定模块的对外接口，
import命令用于导入其他模块提供的功能。
导出：

也可简写为：

注意：
1.可以导出任何东西
2.可以省略名字
导入：

4.Vue介绍及使用

4.1 什么是Vue

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
Vue渐进式的理解:http://www.bslxx.com/a/vue/2017/1205/1490.html
Vue只关注视图层。
Vue通过新的属性（自定义）和{{表达式}}扩展了 HTML。
Vue的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
Vue学习起来非常简单。
官网：https://cn.vuejs.org/

4.2 Vue的特性

轻量
Vue.js库的体积非常小的，并且不依赖其他基础库。
数据绑定
对于一些富交互、状态机类似的前端UI界面，数据绑定非常简单、方便。
指令
内置指令统一为(v—*)，也可以自定义指令，通过对应表达值的变化就可以修改对应的DOM。
插件化
Vue.js核心不包含Router、AJAX、表单验证等功能，但是可以非常方便地根据需要加载对应插件。
组件化
组件可以扩展 HTML 元素，封装可重用的代码。允许我们使用小型、自包含和通常可复用的组件构建大型应用

4.3 Vue的入门

Vue是一个 JavaScript 框架。它是一个以 JavaScript 编写的库。
Vue是以一个 JavaScript 文件形式发布的，可通过 script 标签添加到网页中：
下载Vue文件到本地，官方提供两个版本：
https://cn.vuejs.org/v2/guide/installation.html
引入vue.js

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

4.3.1 Vue实例挂载(el)的标签

每个Vue实例通过el配置挂载的标签，该标签可以通过id或者是class挂载。实例上的属性和方法只能够在当前实例挂载的标签中使用。

<body>
<div id="app">
    {{ message }}
</div>
<script>
    //  创建一个vue对象
    /**
     *  el:挂载
     *  data:数据
     *
     */
    var app = new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue!',
        }
    })
</script>

</body>

4.3.2 Vue中的数据(data)详解

Vue实例的数据保存在配置属性data中, data自身也是一个对象.
通过Vue实例直接访问和修改data对象中的数据,及时同步的页面上

4.3.3 Vue中的方法(methods)详解

Vue实例的方法保存在配置属性methods中,methods自身也是一个对象. 该对象中值都是方法体
方法都是被Vue对象调用,所以方法中的this代表Vue对象

4.4 Vue的生命周期

每个 Vue 实例在被创建时都要经过一系列的初始化过程：创建实例，装载模板，渲染模板等等。Vue为生命周期中的每个状态都设置了钩子函数（监听函数）。每当Vue实例处于不同的生命周期时，对应的函数就会被触发调用。
在这里插入图片描述

4.5 Vue的表达式

支持算术运算：

  <!--简单表达式  -->
    <h1>{{5+5}}</h1>
    <!-- +:运算，字符串连接 -->
    <h1>{{5+"v5"}}</h1>
    <h1>{{5+"5"}}</h1>
    <!-- -：减法 自动给你转-->
    <h1>{{"5"-"5"}}</h1>
    <h1>{{5*5}}</h1>
    <h1>{{"a"-"b"}}</h1>
    <!-- *:乘 -->
    <h1>{{"5"*"5"}}</h1>
    <!-- / 除-->
    <h1>{{5/5}}</h1>

    <!-- 三目运算-->
    {{show?"男":"女"}}

字符串操作：

<!--字符串操作-->
    {{"一点寒芒先到，随后抢出如龙"}}<br/>
    {{"一点寒芒先到，随后抢出如龙".length}}<br/>
    {{"一点寒芒先到，随后抢出如龙".substring(2,6)}}<br/>
    {{"abcdefg".toUpperCase()}}<br/>

对象数组操作：

<body>
<div id="app">
    <!--如果有toString这个方法会自动调用-->
    {{user}}<br/>
    <!--转为Json格式-->
    {{JSON.stringify(user)}}<br/>
    {{user.name}}<br/>
    {{user.age}}<br/>
    {{user.fight()}}<br/>

    {{hobbys}}<br/>
    {{hobbys[0]}}<br/>
    {{hobbys.length}}<br/>
    {{hobbys.toString()}}<br/>
    {{hobbys.join("------")}}<br/>
</div>
<script>
    var user = {
        name:"吕布",
        age:180,
        fight(){
            console.log("神挡杀神，佛挡杀佛");
        },
        toString(){
            return this.name+"的年龄是"+this.age;
        }
    }
    //  创建一个vue对象
    var app = new Vue({
        el: '#app',
        data: {
            user:user,
            hobbys:["c","t","r","l"]
        }
    })
</script>
</body>

4.6 Vue的指令

(1)v-text（类似于innerText）
语法:
<标签名 v-text=“表达式”></标签名>
作用:
通过data中的数据更新标签标签中的textContent属性的值.(标签中的文本内容)
注意事项:

如果值是html的值,会作为普通的文本使用。
标签中的属性值必须是data中的一个属性.
(2)v-html（类似于innerHTML）
语法:
<标签名 v-html=“表达式”></标签名>
作用:
通过data中的数据更新标签标签中的innerHTML属性的值.(标签中的HTML内容)
注意事项:
如果值是html的值,不会作为普通的文本使用,要识别html标签。
{{表达式}} 可以插入的标签的内容中
v-text和v-html更改标签中的所有内容

<body>
<div id="app">
    <span v-text="text"></span>
    <br/>
    <span v-html="user.name"></span>

</div>
<script>
    //  创建一个vue对象
    var app = new Vue({
        el: '#app',
        data: {
            text:"我于杀戮之中绽放 亦如黎明中的花朵",
            user:{
                name:"<font color='red'>你是谁</font>"
            }
        }
    })
</script>
</body>

(3)v-for 循环
语法:
<标签 v-for=“元素 in 数据源”></标签>
数据源: 数组,
元素: 数组中的一个元素,
数据源: 对象
元素: 对象中的一个属性名
<标签 v-for="(元素,索引|键) in 数据源"></标签>
当数据源是数组时, ()的第二个参数值索引
当数据源是对象时, ()的第二个参数值键
<标签 v-for="(元素,键,索引) in 对象"></标签>
作用:
基于数据源多次循环达到多次渲染当前元素.

<body>
<div id="app">
    <ul>
        <li v-for="text in texts">
            {{text}}
        </li>
    </ul>
    <ul>
        <li v-for="v in user">
            {{v}}
        </li>
    </ul>
    <ul>
        <li v-for="(text,index) in texts">
            {{index}}===={{text}}
        </li>
    </ul>
    <ul>
        <li v-for="(value,key,index) in user">
            {{value}}===={{key}}====={{index}}
        </li>
    </ul>
    <table>
        <thead>
            <tr>
                <th>序号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="tea in persons">
                <td>{{tea.id}}</td>
                <td>{{tea.name}}</td>
                <td>{{tea.age}}</td>
                <td>{{tea.sex}}</td>
            </tr>
        </tbody>
    </table>
</div>
<script>
    //  创建一个vue对象
    var app = new Vue({
        el: '#app',
        data: {
            texts:["史","前","巨","鳄"],
            user:{
                name:"小明",
                age:25,
                sex:true
            },
            persons:[
                {id:1,name: "红领巾", age: 29, sex: "男"},
                {id:2,name: "儿童节", age: 30, sex: "男"},
                {id:3,name: "小学生", age: 31, sex: "女"}
            ]
        }
    })
</script>
</body>

(4)v-bind 将data中的数据绑定到标签上,作为标签的属性. 比如 :
语法:
为一个标签属性绑定一个值
<标签 v-bind:标签属性名字=“表达式”></标签>
简写形式:
<标签 :标签属性名字=“表达式”></标签>
为一个标签绑定一个对象作为该标签的多个属性
<标签 v-bind=“对象”></标签>
注意事项
将一个对象键和值作为标签的属性的名字和值时, 在v-bind后不需要指定属性的名字

<body>
<div id="app">
    <img v-bind:src="imgsrc">
    <img v-bind:title="title">
    <input v-bind="props">
</div>
<script>
    //  创建一个vue对象
    var app = new Vue({
        el: '#app',
        data: {
            imgsrc:'img/timg.jfif',
            title:"xxx",
            props:{
                type:"text",
                name:"username"
            }
        }
    })
</script>
</body>

(5)v-model 在表单控件上创建双向绑定
表单的值被修改时, 基于dom监听机制, 就会自动修改data中的数据中,
当data中的数据被修改时,基于数据绑定机制, 自动会把新的内容自动更新到value属性上. 页面视图也发生了改变. 双向绑定
需要注意：

如果单行文本的表单元素被绑定一个数据时, 该表单的默认值不是value属性决定而是有data中的数据决定.
绑定在复选框上数据必须是一个数组, 当绑定的数据和复选框的value值一致时会自动选中-回显
v-model只作用于以下表单:input select textarea
(6)v-show
语法:
<标签名 v-show=“表达式”></标签名>
作用:
根据表达式之真假值，切换元素的 display CSS 属性。当条件变化时该指令触发过渡效果。
当v-show的值为假时, 会在标签的css中添加 display: none :
注意事项:
当表达式中的值是false时, 该标签仅仅是被隐藏了,而没有被从页面上删除
标签的值会自动转换为boolean类型的值
(7)v-if
语法:
<标签名 v-if=“表达式”></标签名>
作用:
根据表达式的值的真假条件渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建。
注意事项:
当表达式中的值是false时, 是从页面上删除.
标签的值会自动转换为boolean类型的值
(8)v-else
语法:
<标签名 v-if=“表达式”></标签名>
<标签名 v-else></标签名>
作用:
当v-if表达式不成立时, v-else执行.
注意事项:
该指令必须也v-if搭配起来使用.
v-else是一个单独的属性, 该属性是不要赋值的.
(9)v-else-if
语法:
<标签名 v-if=“表达式”></标签名>
<标签名 v-else-if=“表达式”></标签名>
<标签名 v-else-if=“表达式”></标签名>
<标签名 v-else></标签名>

<body>
<div id="app">
    <hr>
    <div v-if="m1">你好世界1</div>
    <div v-if="hidden">你好世界2</div>
    <!--当这里判断为false，那么这个div直接就不存在了，不会像v-show一样只是不显示-->
    <div v-if="score>80">你好世界3</div>

    <hr>
    <div v-if="score<60">你成绩还有待提高！</div>
    <div v-else>你成绩还可以嘛！</div>

    <hr>
    <div v-if="score<20">你成绩很差</div>
    <div v-else-if="score>=20 && score<40">你成绩较差</div>
    <div v-else-if="score>=40 && score<60">你差一点就及格了</div>
    <div v-if="score>=60">你及格了，学分到手了</div>

</div>
<script>
    //  创建一个vue对象
    var app = new Vue({
        el: '#app',
        data: {
            m1:true,
            hidden:true,
            score:60
        }
    })
</script>
</body>