前者MVC Vue2学习总计(一)——MVC与vue2概要、模板、数据绑定与综合示范

 一、前端MVC概要

1.1、库以及框架的区分

图片 1

框架是一个软件之毛坯,在全局范围外给了生之自律。库是工具,在单点上让咱提供效用。框架是凭库的。Vue是框架而jQuery则是仓库。

1.2、AMD与CMD

每当风的非模块化JavaScript开发中来好多问题:命名争辩、文件指、跨环境共享模块、性能优化、职责单一、模块的版本管理、jQuery等前端库数见不鲜,前端代码日益膨胀

AMD规范及其代表:RequireJS
异步模块定义(Asynchronous Module Definition),它是借助前置
(因为靠必须一律起首即形容好)会事先神速地尽(依赖)模块 ,
异常给有的require都吃提前了

CMD规范及其代表:SeaJS
(Common Module Definition)模块定义规范
一个模块就是一个文本;它注重倚重就近想什么时require就什么时加载,实现了
懒加载, 延迟执行 (as lazy as possible)

1.2、前端MVC概要

MVC的要旨理念是:你当把管理数据的代码(Model)、业务逻辑的代码(Controller)、以及为用户展示数据的代码(View)清晰的分离开

  • 范:代表拔取时底状态
  • 视图:用于体现数据,用于接口
  • 控制器:用来保管型与视图之间的干

图片 2

通过MVC框架而衍生出了好多别样的架构,统称MV*,最常见的是MVP与MVVM

MVVM(Model-View-ViewModel)框架的由来便是MVP(Model-View-Presenter)情势与WPF结合的用措施时进化衍变过来的平等种植新颖架构框架。

Vue与Angular就是一个MVVM框架,MVVM与MVC最酷之区别是范和视图实现了双向绑定。

当Vue中用户从定义之实例就是vm,效率及Controller类似

图片 3

1.3、React

图片 4

React 起源于 非死不可 的里边项目,因为该店铺针对市场高达存有 JavaScript MVC
框架,都未乐意,就决定好写一仿照,用来架设 Instagram
的网站。做出来后,发现就套东西相当好用,就以二〇一三年十月始源了。由于 React
的统筹思想最优异,属于革命性立异,性能非凡,代码逻辑却非凡简单。所以,越来越多之人开首关心和用,认为它恐怕是将来Web 开发之主流工具。补助虚拟DOM(Virtual DOM)和组件化的开。

ReactJS官网地址: http://facebook.github.io/react/
Github地址: https://github.com/facebook/react

1.4、AngularJS简介

AngularJS是一个前端MVVM框架。

angular的英文字面意思是:有比的; 用角测量的

AngularJS是扶持搭建单页面工程(SPA)的开源前端框架。它经过MVC情势让开发和测试变得重复爱。

AngularJS试图成为WEB应用中之平等种植端对端的化解方案。它将指引开发总体应用。

AngularJS于二零零六年宣布第一独版,由Google举行珍爱,压缩版94k。

 图片 5

1.3版本后不复补助IE8
1.3本后无扶助全局控制器
2.0版 alpha

git仓库: https://github.com/angular/

官网: https://www.angularjs.org/

http://www.angularjs.cn/中文社区

http://www.apjs.net/ 中文网

a web framework for modern web apps

图片 6

1.5、Vue.js

图片 7

Vue.js是一个轻快、高性能、可组件化的MVVM库,同时所有异常容易上手的API,作者是尤雨溪是礼仪之邦总人口。

官网: http://cn.vuejs.org/

仓库: https://github.com/vuejs

图片 8

易用
曾经会了HTML,CSS,JavaScript?即刻阅读指南开始构建以!
灵活
简小巧的主干,渐进式技术栈,足以应付任何规模的利用。
性能
17kb min+gzip 运行大小、超快虚拟 DOM 、最简便的优化

手上叔非凡前端MVC框架的相比较:

图片 9

图片 10

1.5.1、Vue2.JS简介

Vue (读音 /vjuː/,类似于 view)
是如出一辙拟用于构建用户界面的渐进式框架。与其他大型框架不同的是,Vue
被设计吧好自底向上逐层应用。Vue
的大旨库只关注视图层,不仅易上手,还便宜与第三方库或既来档次做。另一方面,当及
现代化的工具链同各样
支撑类库结合使用时,Vue
也全然会为复杂性的单页应用提供驱动。

倘您早就是生经历的前端开发者,想知道 Vue
与其它库/框架来哪区别,请查看
绝对而言其他框架

切莫符合SEO、交互频繁之,如打之类交互体验网站

图片 11

浏览器襄助:

图片 12

Vue.js 不辅助 IE8 及其以下版本,因为 Vue.js 使用了 IE8 不克模拟的
ECMAScript 5 特性。Vue.js 襄助具备 配合 ECMAScript 5
的浏览器

1.6、vue2入门示例

作品被之累累情都是缘于vue官网,因为没有其他更加方便的科目。

1.6.1、获取vue2

苟要出基于angularJS的型,则先行使添加对angularJS的援,有如下几单办法:

1)、去vue2官网或git下载,地址: https://github.com/vuejs/vue

2)、使用cdn

3)、安装node.js,使用npm获取

切切实实的装细节: https://cn.vuejs.org/v2/guide/installation.html

于本文的示范中一度包含了运行条件及匡助文件chm

1.6.2、注明式渲染

Vue.js 的要旨是一个兴用简单的沙盘语法来声明式地将数据渲染进 DOM
的系统:

示例:

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>vue2介绍</title>
    </head>

    <body>
        <div id="app1">
            {{message}}
        </div>
        <div id="app2">

                把鼠标放到这里试试

        </div>
        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            //vue应用对象
            var app1 = new Vue({
                el: "#app1",
                data: {
                    message: "Hello Vue2!"
                }
            });

            //绑定属性
            var app2 = new Vue({
                el: "#app2",
                data: {
                    message: "页面加载时间是:" + new Date().toLocaleDateString()
                }
            });
        </script>
    </body>

</html>

结果:

图片 13

此地大家相见了好几初东西。你看的 v-bind 特性被叫作指令。指令带有前缀 v-,以表示它是
Vue 提供的非凡性状。可能而都猜到了,它们会在渲染之 DOM
上应用特别之响应式行为。在此地,该令的意思是:“将是元素节点的 title 特性和
Vue 实例的 message 属性保持一致”。

假设您还打开浏览器的 JavaScript
控制台,输入 app2.message = '新消息',就会合重新同不好探望是绑定了 title 特性的
HTML 已经拓展了翻新。

咱俩已经成功创办了第一个 Vue
应用!看起就和渲染一个字符串模板相当相近,不过 Vue
在暗地里做了大气办事。现在多少以及 DOM
已经深受树了涉及,所有东西仍旧响应式的。大家若怎么确认为?打开你的浏览器的
JavaScript 控制台
(就以斯页面打开),并修改 app.message 的价,你将看到上例相应地换代。

 1.6.3、条件和循环

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>vue2介绍</title>
    </head>

    <body>
        <div id="app3">

                isShow为true时你可以看到我

        </div>
        <div id="app4">

                <table border="1" cellspacing="1" cellpadding="1" width="50%">
                    <tr><th>序号</th><th>名称</th><th>价格</th></tr>
                    <tr v-for="(obj,index) in fruits">
                        <td>{{index+1}}</td>
                        <td>{{obj.name}}</td>
                        <td>{{obj.price}}</td>
                    </tr>
                </table>

        </div>
        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            //if指令
            var app3 = new Vue({
                el: "#app3",
                data: {
                    isShow: true
                }
            });

            //循环指令
            var app4 = new Vue({
                el: "#app4",
                data: {
                    isShow:true,
                    fruits: [{
                        name: "苹果",
                        price: "6.8"
                    }, {
                        name: "橙子",
                        price: "3.5"
                    }, {
                        name: "香蕉",
                        price: "2.3"
                    }]
                }
            });
        </script>
    </body>

</html>

结果:

图片 14

这例子演示了大家不光可以管数据绑定到 DOM 文本或特色,还足以绑定到
DOM 结构。此外,Vue 也供一个雄的过渡效果系统,可以当 Vue
插入/更新/移除元素时自动应用
连接效果

1.6.4、事件、处理用户输入与计量

为吃用户以及您的运用举办互动,大家得用 v-on
指令添加一个波监听器,通过她调用在 Vue 实例中定义的方法:

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>vue2介绍</title>
    </head>

    <body>
        <div id="app5">
            <button v-on:click="showMe">{{message}}</button>
            <input v-model="message" />
        </div>

        <p id="app6">
            <button v-on:click="n1+=1">+</button><input v-model="n1"/>+    <input v-model="n2"/>=    <input v-model="sum"/>
        </p>

        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            //事件
            var app5 = new Vue({
                el: "#app5",
                data: {
                    message:"vue2事件"
                },
                methods:{
                    showMe:function(){
                        this.message=this.message.split('').reverse().join('');
                    }
                }
            });

            //计算
            var app6 = new Vue({
                el: "#app6",
                data: {
                    n1:0,
                    n2:0
                },
                computed:{
                    sum:function(){
                        return parseInt(this.n1)+parseInt(this.n2);
                    }
                }
            });


        </script>
    </body>

</html>

结果:

图片 15

小心在 showMe方法被,我们革新了下之状态,但没有触碰 DOM——所有的 DOM
操作都由 Vue 来处理,你编的代码只需要关爱逻辑层面即可。
Vue 还提供了 v-model
指令,它会轻松实现表单输入和以状态里的双向绑定。

亚、组件化应用构建

组件系统是 Vue
的任何一个重要概念,因为其是同种植浮泛,允许我们运用小型、独立与平常只是复用的零件构建大型应用。仔细想,几乎任意档次的运用界面都得以抽象为一个零部件树:

图片 16

2.1、普通组件

在 Vue 里,一个组件本质上是一个拥有预定义选项的一个 Vue 实例。在 Vue
中注册组件很简单:

// 定义名为 todo-item 的新组件
Vue.component('todo-item', {
  template: '<li>这是个待办项</li>'
})

今您可以为此其构建另一个组件模板:

<ol>
  <!-- 创建一个 todo-item 组件的实例 -->
  <todo-item></todo-item>
</ol>

示例:

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>vue2介绍</title>
    </head>

    <body>
        <div id="app1">
            <ol>
                <todo-item></todo-item>
            </ol>
            <ol>
                <todo-item v-for="item in items"></todo-item>
            </ol>
        </div>
        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">

            //在vue中添加一个名为todo-item组件
            Vue.component("todo-item",{
                template:"<li>这是一个li单项</li>"
            });

            //构件
            var app1 = new Vue({
                el: "#app1",
                data:{
                    items:[1,3,5,7,9]
                }
            });

        </script>
    </body>

</html>

结果:

图片 17

2.2、带属性之零件

可那样碰面吗每个待处件渲染同样的文本,这看起连无炫酷。我们该力所能及打父功用域将数据传到子组件才对。让大家来窜一下零部件的定义,使的会承受一个 
prop

Vue.component('todo-item', {
  // todo-item 组件现在接受一个
  // "prop",类似于一个自定义特性。
  // 这个 prop 名为 todo。
  props: ['todo'],
  template: '<li>{{ todo.text }}</li>'
})

本,大家得以使 v-bind 指令以急需处件传到循环输出的每个组件中:

<div id="app-7">
  <ol>
    <!--
      现在我们为每个 todo-item 提供 todo 对象
      todo 对象是变量,即其内容可以是动态的。
      我们也需要为每个组件提供一个“key”,稍后再
      作详细解释。
    -->
    <todo-item
      v-for="item in groceryList"
      v-bind:todo="item"
      v-bind:key="item.id">
    </todo-item>
  </ol>
</div>

js:

Vue.component('todo-item', {
  props: ['todo'],
  template: '<li>{{ todo.text }}</li>'
})

var app7 = new Vue({
  el: '#app-7',
  data: {
    groceryList: [
      { id: 0, text: '蔬菜' },
      { id: 1, text: '奶酪' },
      { id: 2, text: '随便其它什么人吃的东西' }
    ]
  }
})

结果:

1.蔬菜
2.奶酪
3.随便其它什么人吃的东西

示例:

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>vue2介绍</title>
    </head>

    <body>
        <div id="app1">
            <ol>
                <todo-item info="Hello Component"></todo-item>
            </ol>
            <ol>
                <student-item v-for="item in students" v-bind:stu="item" v-bind:key="item.name"></student-item>
            </ol>
        </div>
        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">

            //在vue中添加一个名为todo-item组件
            Vue.component("todo-item",{
                props:["info","vtitle"],
                template:"<li>{{info||'empty'}}</li>"
            });

            Vue.component("student-item",{
                props:["stu"],
                template:"<li>{{stu.name}} - {{stu.age}}</li>"
            });

            //构件
            var app1 = new Vue({
                el: "#app1",
                data:{
                    students:[
                        {"name":"tom","age":18},{"name":"rose","age":80},{"name":"lucy","age":8}
                    ]
                }
            });

        </script>
    </body>

</html>

结果:

图片 18

固然就只是是一个苦心设计之例证,可是咱曾设法以运用细分成了区区个重复粗之单元。子单元通过
prop
接口和大单元举办了美妙的解耦。大家现可更改进 <todo-item> 组件,提供越来越复杂的模版与逻辑,而休会晤潜移默化到大伯单元。

当一个重型应用被,有必不可中将总体应用程序划分为组件,以要出再易保管。

2.3、与于定义元素的涉嫌

君恐怕已注意到 Vue 组件分外类似于由定义元素——它是  Web
组件规范
的平等有,这是为 Vue
的机件语法有参考了拖欠规范。例如 Vue 组件实现了  Slot
API
 与 is 特性。不过,还是暴发几乎单紧要区别:

  1. Web
    组件规范仍然处在草案等,并且不被有着浏览器原生实现。对比之下,Vue
    组件不待外 polyfill,并且于具备协理的浏览器 (IE9 及重新胜似版本)
    之下表现一样。必要通常,Vue 组件为可打包为原生自定义元素中。

  2. Vue
    组件提供了纯自定义元素所不富有的有根本意义,最暴的凡超越组件数据流、自定义事件通信以及构建工具并。

老三、综合示范

透过一个归结示范来飞领悟Vue2,会以及模板、过滤器、统计,表明式、组件等等,要求贯彻一个简易的购物车,运行时的功能如下:

图片 19

 参考代码:

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>购物车</title>
        <style type="text/css">
            .bg{
                background:dodgerblue;
                color:white;
            }
        </style>
    </head>

    <body>
        <div id="app1">
            <h2>购物车</h2>
            <table border="1" cellspacing="0" cellpadding="0" width="100%">
                <tr>
                    <th>序号</th>
                    <th>名称</th>
                    <th>单价</th>
                    <th>数量</th>
                    <th>小计</th>
                    <th>操作</th>
                </tr>
                <tr v-for="(pdt,index) in products" v-bind:class="{bg:index%2==0}">
                    <td>{{index+1}}</td>
                    <td>{{pdt.title}}</td>
                    <td>{{pdt.price}}</td>
                    <td>
                        <button type="button" v-on:click="pdt.quantity<=0?0:(pdt.quantity-=1)">-</button>
                        <input v-model="pdt.quantity" style="width: 80px;" v-on:keyup="pdt.quantity=(pdt.quantity<0?0:pdt.quantity)" />
                        <button type="button" v-on:click="pdt.quantity+=1">+</button>
                    </td>
                    <td>{{pdt.quantity*pdt.price | currency(1)}}</td>
                    <td>
                        <button type="button" v-on:click="remove(index)">移除</button>
                    </td>
                </tr>
                <tr>
                    <td colspan="6" align="right">
                        {{total|currency}}
                    </td>
                </tr>
            </table>
        </div>
        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            Vue.filter("currency", function(v, n) {
                if(!v) {
                    return "";
                }
                return "¥" + v.toFixed(n || 2);
            });
            //实例
            var app1 = new Vue({
                el: "#app1",
                data: {
                    orderby:"",
                    isAsc:true,
                    products: [{
                        title: "paint pot",
                        quantity: 9,
                        price: 3.95
                    }, {
                        title: "polka dots",
                        quantity: 17,
                        price: 12.3
                    }, {
                        title: "pebbles",
                        quantity: 5,
                        price: 6.71
                    }, {
                        title: "Mi Note5",
                        quantity: 8,
                        price: 2985.6
                    }, {
                        title: "iPhone XS",
                        quantity: 10,
                        price: 8906.72
                    }]
                },
                computed: {
                    total: function() {
                        var sum = 0;
                        for(var i = 0; i < this.products.length; i++) {
                            sum += (this.products[i].price * this.products[i].quantity);
                        }
                        return sum;
                    }
                },
                methods:{
                    remove:function(i){
                        if(confirm('您确定要移除吗?')){
                            this.products.splice(i,1);
                        }
                    }
                }
            });
        </script>
    </body>

</html>

 思考:假设这里还要促成排序应该怎样做?

四、javascript数组

坐下面的演示中需要为此到对象数组与排序,这里单独讲说:

4.1、创建

var arrayObj = new Array();
var arrayObj = new Array([size]);
var arrayObj = new Array([element0[, element1[, …[,
elementN]]]]);

示例:

            var array11 = new Array();  //空数组
            var array12 = new Array(5);  //指定长度,可越界
            var array13 = new Array("a","b","c",1,2,3,true,false);  //定义并赋值
            var array14=[];  //空数组,语法糖
            var array15=[1,2,3,"x","y"];  //定义并赋值

4.2、访问与改

var testGetArrValue=arrayObj[1]; 

arrayObj[1]= “值”;

            //4.2、访问与修改
            array12[8]="hello array12";  //赋值或修改
            console.log(array12[8]);   //取值
            //遍历
            for (var i = 0; i < array13.length; i++) {
                console.log("arrayl3["+i+"]="+array13[i]);
            }
            //枚举
            for(var i in array15){ 
                console.log(i+"="+array15[i]);  //此处的i是下标
            }

结果:

图片 20

4.3、添加元素

用一个依然多独新因素添加到数组未尾,并赶回数组新长

arrayObj. push([item1 [item2 [. . . [itemN ]]]]);

拿一个或多独新因素添加到数组先导,数组中的因素自动后变,重临数组新长

arrayObj.unshift([item1 [item2 [. . . [itemN ]]]]);

以一个依然多单新因素插入到数组的指定地点,插入地方的素自动后更换,再次来到给剔除元素数组,deleteCount要去的要素个数

arrayObj.splice(insertPos,deleteCount,[item1[, item2[, . . .
[,itemN]]]])

演示代码:

            //4.3、添加元素
            var array31=[5,8];
            //添加到末尾
            array31.push(9);
            var len=array31.push(10,11);
            console.log("长度为:"+len+"——"+array31);
            //添加到开始
            array31.unshift(4);
            var len=array31.unshift(1,2,3);
            console.log("长度为:"+len+"——"+array31);
            //添加到中间
            var len=array31.splice(5,1,6,7);  //从第5位开始插入,删除第5位后的1个元素,返回被删除元素
            console.log("被删除:"+len+"——"+array31);

运转结果:

图片 21

4.4、删除

移除最终一个元素并回该元素值

arrayObj.pop();

移除最前一个因素并回到该元素值,数组中元素自动前移

arrayObj.shift(); 

抹从指定地方deletePos先导的指定数量deleteCount的要素,数组格局再次来到所移除的要素

arrayObj.splice(deletePos,deleteCount); 

示例:

            //4.4、删除
            var array41=[1,2,3,4,5,6,7,8];
            console.log("array41:"+array41);
            //删除最后一个元素,并返回
            var e=array41.pop();
            console.log("被删除:"+e+"——"+array41);
            //删除首部元素,并返回
            var e=array41.shift();
            console.log("被删除:"+e+"——"+array41);
            //删除指定位置与个数
            var e=array41.splice(1,4);  //从索引1开始删除4个
            console.log("被删除:"+e+"——"+array41);

 

结果:

图片 22

4.5、截取和归并

因数组的款型重回数组的一律有,注意勿包 end 对应的因素,假使简单 end
将复制 start 之后的具备因素

arrayObj.slice(start, [end]); 

以多单数组(也得是字符串,或者是数组和字符串的搅和)连接为一个反复组,重临连接好的新的数组

arrayObj.concat([item1[, item2[, . . . [,itemN]]]]); 

示例: 

            //4.5、截取和合并
            var array51=[1,2,3,4,5,6];
            var array52=[7,8,9,0,"a","b","c"];
            //截取,切片
            var array53=array51.slice(2);  //从第3个元素开始截取到最后
            console.log("被截取:"+array53+"——"+array51);
            var array54=array51.slice(1,4);  //从第3个元素开始截取到索引号为3的元素
            console.log("被截取:"+array54+"——"+array51);
            //合并
            var array55=array51.concat(array52,["d","e"],"f","g");
            console.log("合并后:"+array55);

结果:

图片 23

4.6、拷贝

回来数组的拷贝数组,注意是一个初的累累组,不是乘为

arrayObj.slice(0); 

回到数组的拷贝数组,注意是一个初的数组,不是据于

arrayObj.concat(); 

坐数组是援数据类型,直接赋值并没有达到确实实现拷贝,地址引用,我们要之是深拷贝。

4.7、排序

反转元素(最前的排到最后、最终的排到最前),再次回到数组地址

arrayObj.reverse(); 

针对数组元素排序,再次来到数组地址

arrayObj.sort(); 

arrayObj.sort(function(obj1,obj2){}); 

示例:

            var array71=[4,5,6,1,2,3];
            array71.sort();
            console.log("排序后:"+array71);
            var array72=[{name:"tom",age:19},{name:"jack",age:20},{name:"lucy",age:18}];
            array72.sort(function(user1,user2){
                return user1.age<user2.age;
            });
            console.log("排序后:");
            for(var i in array72) console.log(array72[i].name+","+array72[i].age);

 

结果:

图片 24

4.8、合并成字符

回来字符串,这些字符串将反复组的各样一个处女素值连接于一齐,中间用 separator
隔开。

arrayObj.join(separator); 

示范代码:

            //4.8、合并成字符与将字符拆分成数组
            var array81=[1,3,5,7,9];
            var ids=array81.join(",");
            console.log(ids);

            //拆分成数组
            var text="hello nodejs and angular";
            var array82=text.split(" ");
            console.log(array82);

运行结果:

图片 25

备代码:

图片 26图片 27

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>数组操作</title>
    </head>

    <body>
        <script type="text/javascript">
            //4.1、创建
            var array11 = new Array();  //空数组
            var array12 = new Array(5);  //指定长度,可越界
            var array13 = new Array("a","b","c",1,2,3,true,false);  //定义并赋值
            var array14=[];  //空数组,语法糖
            var array15=[1,2,3,"x","y"];  //定义并赋值

            //4.2、访问与修改
            array12[8]="hello array12";  //赋值或修改
            console.log(array12[8]);   //取值
            //遍历
            for (var i = 0; i < array13.length; i++) {
                //console.log("arrayl3["+i+"]="+array13[i]);
            }
            //枚举
            for(var i in array15){ 
                //console.log(i+"="+array15[i]);  //此处的i是下标
            }

            //4.3、添加元素
            var array31=[5,8];
            //添加到末尾
            array31.push(9);
            var len=array31.push(10,11);
            console.log("长度为:"+len+"——"+array31);
            //添加到开始
            array31.unshift(4);
            var len=array31.unshift(1,2,3);
            console.log("长度为:"+len+"——"+array31);
            //添加到中间
            var len=array31.splice(5,1,6,7);  //从第5位开始插入,删除第5位后的1个元素,返回被删除元素
            console.log("被删除:"+len+"——"+array31);

            //4.4、删除
            var array41=[1,2,3,4,5,6,7,8];
            console.log("array41:"+array41);
            //删除最后一个元素,并返回
            var e=array41.pop();
            console.log("被删除:"+e+"——"+array41);
            //删除首部元素,并返回
            var e=array41.shift();
            console.log("被删除:"+e+"——"+array41);
            //删除指定位置与个数
            var e=array41.splice(1,4);  //从索引1开始删除4个
            console.log("被删除:"+e+"——"+array41);

            //4.5、截取和合并
            var array51=[1,2,3,4,5,6];
            var array52=[7,8,9,0,"a","b","c"];
            //截取,切片
            var array53=array51.slice(2);  //从第3个元素开始截取到最后
            console.log("被截取:"+array53+"——"+array51);
            var array54=array51.slice(1,4);  //从第3个元素开始截取到索引号为3的元素
            console.log("被截取:"+array54+"——"+array51);
            //合并
            var array55=array51.concat(array52,["d","e"],"f","g");
            console.log("合并后:"+array55);

            //4.7、排序
            var array71=[4,5,6,1,2,3];
            array71.sort();
            console.log("排序后:"+array71);
            var array72=[{name:"tom",age:19},{name:"jack",age:20},{name:"lucy",age:18}];
            array72.sort(function(user1,user2){
                return user1.age<user2.age;
            });
            console.log("排序后:");
            for(var i in array72) console.log(array72[i].name+","+array72[i].age);

            //4.8、合并成字符与将字符拆分成数组
            var array81=[1,3,5,7,9];
            var ids=array81.join(",");
            console.log(ids);

            //拆分成数组
            var text="hello nodejs and angular";
            var array82=text.split(" ");
            console.log(array82);

        </script>
    </body>

</html>

View Code

五、JavaScript排序

5.1、概要

javascript内置的sort函数是多排序算法的集,数组在原数组达开展排序,不转副本。

JavaScript实现多维数组、对象数组排序,其实用之就是是原生的sort()方法,用于对反复组的素举行排序。

sort() 方法用于对屡次组的素举办排序。语法如下:

ArrayObject.sort(order); 

再次回到值为对数组的援

5.2、简单排序

比方调整用该格局时没使用参数,将依照字母顺序对数组中的因素举办排序,说得还精确点,是随字符编码的顺序举行排序。要促成这或多或少,首先应把数组的因素都换成字符串(如发生必要),以便举行相比。

示例:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>排序</title>
    </head>
    <body>
        <script>
            var numbers=[2,4,6,8,0,1,2,3,7,9];
            numbers.sort();
            console.log(numbers.join(','));  //默认按升序排列
            numbers.reverse();  //反转
            console.log(numbers.join(','));   //将元素用逗号连接成一个字符串
        </script>
    </body>
</html>

结果:

图片 28

5.3、简单数组由定义排序

尽管想按部就班其他专业开展排序,就需要提供相比函数,该函数要于简单个价值,然后重临一个用以讲明这简单只价的相对顺序的数字。相比较函数应该享有六个参数
a 和 b,其重返值如下:

/*
默认升序: 
a>b 返回1
a=b 返回0
a<b 返回-1
*/

解释:a>b 升序,a<b降序。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>排序</title>
    </head>
    <body>
        <script>
            var numbers=[2,4,6,8,0,1,2,3,7,9];
            //当a>b的结果为正数时则为升序
            numbers.sort(function(a,b){
                if(a>b){return 1;}
                if(a<b){return -1;}
                return 0;
            });
            console.log(numbers.join(','));
            //简化,注意类型
            numbers.sort(function(a,b){
                return a-b;
            });
            console.log(numbers.join(','));

            //降序
            numbers.sort(function(a,b){
                return b-a;
            });
            console.log(numbers.join(','));
        </script>
    </body>
</html>

结果:

图片 29

5.4、简单对象List自定义属性排序

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>排序</title>
    </head>

    <body>
        <script>
            //对象数组
            var pdts = [{
                title: "z-paint pot",
                quantity: 9,
                price: 3.95
            },{
                title: "iPhone XS",
                quantity: 10,
                price: 8906.72
            },{
                title: "polka dots",
                quantity: 17,
                price: 12.3
            }, {
                title: "pebbles",
                quantity: 5,
                price: 6.71
            }, {
                title: "Mi Note5",
                quantity: 8,
                price: 2985.6
            }];

            //按价格升序
            pdts.sort(function(x,y){
                return x.price-y.price;
            });
            document.write(JSON.stringify(pdts));

            document.write("<br/>");
            //按名称排序
            pdts.sort(function(x,y){
                if(x.title>y.title) return 1;
                if(x.title<y.title) return -1;
                return 0;
            });
            document.write(JSON.stringify(pdts));
        </script>
    </body>

</html>

结果:

图片 30

5.5、封装通用的排序函数

若排序的极使持续变化,将反复写简单的排序函数,封装好带有利:

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>排序</title>
    </head>

    <body>
        <script>
            //对象数组
            var pdts = [{
                title: "z-paint pot",
                quantity: 9,
                price: 3.95
            }, {
                title: "iPhone XS",
                quantity: 10,
                price: 8906.72
            }, {
                title: "polka dots",
                quantity: 17,
                price: 12.3
            }, {
                title: "pebbles",
                quantity: 5,
                price: 6.71
            }, {
                title: "Mi Note5",
                quantity: 8,
                price: 2985.6
            }];

            //根据排序关键字与是否为升序产生排序方法
            var sortExp = function(key, isAsc) {
                return function(x, y) {
                    if(isNaN(x[key])) { //如果当前排序的不是数字
                        if(x[key] > y[key]) return 1*(isAsc?1:-1);
                        if(x[key] < y[key]) return -1*(isAsc?1:-1);
                        return 0;
                    }else{
                        return (x[key]-y[key])*(isAsc?1:-1);
                    }
                }
            };

            //按价格升序
            pdts.sort(sortExp("price",true));
            document.write(JSON.stringify(pdts));
            document.write("<br/>------------------------------<br/>");
            pdts.sort(sortExp("price",false));
            document.write(JSON.stringify(pdts));
            document.write("<br/>------------------------------<br/>");
            pdts.sort(sortExp("title",true));
            document.write(JSON.stringify(pdts));
            document.write("<br/>------------------------------<br/>");
            pdts.sort(sortExp("title",false));
            document.write(JSON.stringify(pdts));
        </script>
    </body>

</html>

结果:

图片 31

六、Vue Devtools

当使用 Vue 时,我们引进以于您的浏览器上安 Vue
Devtools,它同意而以一个一发友善的界面被按和调节你的 Vue 应用。

Vue Devtools是一个内嵌在GoogleChrome浏览器被的插件,用于更好之调剂Vue应用程序

源码:https://github.com/vuejs/vue-devtools#vue-devtools

下载:https://files.cnblogs.com/files/best/vuetools_316.zip

安模式:

下载后解压,在chrome地址栏中输入:chrome://extensions/

图片 32

直将crx文件插入浏览器,确认就设置成功了。

图片 33

插件会自动检测当前是否动了vue,假使下了图标会体现起,在开发者工具中爆发一个调剂界面:

图片 34

七、作业

a)、请实现一个购物车

  • 1、双向绑定集合中之数目
  • 2、执行移除事件
  • 3、隔行换色、使用vue2完成
  • 4、点击数据及小计时开展排序(选作)
  • 5、实现实时总计效用
  • 6、实现增长与编辑功能
  • 7、实现排序效率

图片 35

图片 36

八、示例下载

https://git.coding.net/zhangguo5/vue2.git

九、视频

https://www.bilibili.com/video/av17503637/