前端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 起源于 Facebook 的其中项目,因为该商厦本着市场上有所 JavaScript MVC
框架,都非惬意,就决定好写一效仿,用来架设 Instagram
的网站。做出来以后,发现立即套东西好好用,就于2013年5月开头源了。由于 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于2009年颁第一独本子,由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是一个内嵌在Google
Chrome浏览器中之插件,用于更好的调节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/

相关文章