前者MVC Vue二学习计算(壹)——MVC与vue二概要、模板、数据绑定与综合示范

 一、前端MVC概要

1.1、库与框架的分别

图片 1

框架是四个软件的半成品,在全局范围内给了大的牢笼。库是工具,在单点上给我们提供效用。框架是依靠库的。Vue是框架而jQuery则是库。

1.2、AMD与CMD

在观念的非模块化JavaScript开发中有无数题目:命名争执、文件注重、跨环境共享模块、质量优化、任务单一、模块的版本管理、jQuery等前端库见怪不怪,前端代码日益膨大

英特尔规范及其代表:RequireJS
异步模块定义(Asynchronous Module Definition),它是依靠前置(因为依靠必须1开端就写好)会先急迅地实施(正视)模块 ,
也就是全体的require都被提前了

CMD规范及其代表:SeaJS
(Common Module Definition)模块定义规范
1个模块正是1个文书;它侧重依赖就近想如何时候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 起点于 推特(Twitter)(Facebook) 的中间项目,因为该集团对市集上全部 JavaScript MVC
框架,都不令人满足,就控制自个儿写一套,用来架设 推文(Tweet)的网址。做出来未来,发现那套东西很好用,就在20一三年四月开源了。由于 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于二〇〇9年公告第3个版本,由谷歌(Google)进行维护,压缩版九肆k。

 图片 5

1.3版后不复支持IE八
一.三版后不支持全局控制器
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?登时阅读指交大始营造利用!
灵活
大约小巧的大旨,渐进式技术栈,足以应付任何规模的应用。
性能
一柒kb min+gzip 运营大小、超快虚拟 DOM 、最省事的优化

近年来三大前端MVC框架的自己检查自纠:

图片 9

图片 10

1.5.1、Vue2.JS简介

Vue (读音 /vjuː/,类似于 view)
是壹套用于营造用户界面的渐进式框架。与任何大型框架差异的是,Vue
被规划为能够自底向上逐层应用。Vue
的主旨库只关心视图层,不仅不难上手,还便宜与第一方库或既有档次整合。另1方面,当与
现代化的工具链以及种种
帮忙类库重组使用时,Vue
也完全可以为复杂性的单页应用提供驱动。

只要你已经是有经历的前端开发者,想精晓 Vue
与别的库/框架有怎么样差别,请查看
比较其余框架

不适合SEO、交互频仍的,如游戏之类交互体验网址

图片 11

浏览器援助:

图片 12

Vue.js 不协理 IE八 及其以下版本,因为 Vue.js 使用了 IE八 无法模仿的
ECMAScript 伍 性情。Vue.js 协理具有 相称 ECMAScript 五的浏览器

一.陆、vue二入门示例

小说中的许多内容都以来自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

壹.陆.二、注解式渲染

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 已经拓展了更新。

我们曾经打响创设了第3个 Vue
应用!看起来那跟渲染二个字符串模板相当周围,可是 Vue
在幕后做了大量做事。现在数量和 DOM
已经被确立了涉嫌,全部东西都以响应式的。我们要怎么确认呢?打开你的浏览器的
JavaScript 控制台
(就在那么些页面打开),并修改 app.message 的值,你将看到上例相应地换代。

 一.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

其1例子演示了笔者们不光能够把数量绑定到 DOM 文本或特色,还是能绑定到
DOM 结构。别的,Vue 也提供贰个强劲的接入效果系统,可以在 Vue
插入/更新/移除元素时自动应用
对接效果

一.6.4、事件、处理用户输入与总计

为了让用户和您的应用进行互动,大家能够用 v-on
指令添加2个风浪监听器,通过它调用在 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
的另叁个最主要概念,因为它是1种浮泛,允许我们利用小型、独立和壹般性可复用的零部件构建大型应用。仔细想想,差不多任意档次的使用界面都得以抽象为2个零部件树:

图片 16

二.一、普通组件

在 Vue 里,1个组件本质上是2个兼有预约义选项的贰个 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

贰.二、带属性的零件

也就那样会为每一个待办项渲染同样的文本,那看起来并不炫酷。大家应有能从父成效域将数据传到子组件才对。让我们来修改一下组件的概念,使之力所能及经受3个 
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> 组件,提供更为复杂的模版和逻辑,而不会潜移默化到父单元。

在八个特大型应用中,有须求将壹切应用程序划分为组件,以使开发更易管理。

二.三、与自定义成分的涉嫌

您恐怕早已注意到 Vue 组件非常周边于自定义元素——它是  Web
组件规范
的一部分,那是因为 Vue
的零部件语法部分参考了该规范。例如 Vue 组件落成了  Slot
API
 与 is 本性。不过,依然有多少个基本点差异:

  1. Web
    组件规范依旧处在草案阶段,并且未被所有浏览器原生完结。相比较之下,Vue
    组件不需求其余 polyfill,并且在装有支持的浏览器 (IE玖 及更加高版本)
    之下表现同样。须要时,Vue 组件也能够打包于原生自定义成分之内。

  2. Vue
    组件提供了纯自定义成分所不具有的有的要害意义,最特出的是跨组件数据流、自定义事件通讯以及构建筑工程具集成。

3、综合示范

经过多少个归纳示范来一点也不慢领会Vue二,会选取到模板、过滤器、总结,表明式、组件等等,须求落实2个简便的购物车,运营时的效益如下:

图片 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.三、添法郎素

将七个或三个新因素添加到数组未尾,并回到数组新长度

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、删除

移除最终2个因素并赶回该成分值

arrayObj.pop();

移除最前1个因素并再次回到该成分值,数组兰秋素自动前移

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

四.八、合并成字符

回去字符串,这些字符串将数组的每2个成分值连接在联合署名,中间用 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); 

再次回到值为对数组的引用

伍.二、不难排序

比方调用该措施时并未有利用参数,将按字母逐1对数组中的成分进行排序,说得更加精确点,是依据字符编码的1壹进行排序。要促成那或多或少,首先应把数组的成分都转换来字符串(如有供给),以便实行比较。

示例:

<!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.三、简单数组自定义排序

假定想奉公守法其余标准进行排序,就需求提供比较函数,该函数要相比较七个值,然后重临二个用于评释那五个值的相持顺序的数字。比较函数应该有着八个参数
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.四、简单对象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

伍.五、封装通用的排序函数

假设排序的规则要时时刻刻变更,将反复写简单的排序函数,封装能够推动有利:

<!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)、请达成二个购物车

  • 一、双向绑定集合中的数据
  • 2、执行移除事件
  • 三、隔行换色、使用vue2达成
  • 四、点击数据与小计时进行排序(选作)
  • 5、完成实时总计成效
  • 陆、实现增加与编辑成效
  • 七、达成排序功效

图片 35

图片 36

8、示例下载

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

九、视频

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

相关文章