首页

# 数组对象的新方法

以下几个数组的方法：vue 用来处理数据很常见。

  1. forEach

  2. map

  3. filter
    过滤：根据条件来过滤数组

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    var arr=[12,18,19,20,21];
    //需求：找出所有大于18的数字
    //找出所有的偶数
    var newarr=arr.filter(function(item,index){
        //只要表达式成立，则会将该数组元素存放在一个新数组中
        return 表达式|条件；
    });
    //
    var newarr=arr.filter(function(item,index){
        //只要表达式成立，则会将该数组元素存放在一个新数组中
        return item>18;
        return item%2==0;
        return true;//不做任何过滤，直接原路返回
        return false;//[]
    });
    //返回的数组：
    newarr=[19,20,21]

  4. find
    也是过滤的意思，区别于 filter 返回所有的元素，它只会返回符合条件的第一个数组元素。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    var arr=[12,18,19,20,21];
    //需求：找出所有大于18的数字
    //找出所有的偶数
    var a=arr.filter(function(item,index){
        //只要表达式成立，则会将该数组元素存放在一个新数组中
        return item>18
    });
    //过滤
    console.log(a);//19,不再是数组了

  5. every
    作用：找假，只要数组元素中有一个是 false，则整个都为 false。（意味着会将每一个数组元素都会转成布尔值再做判断）

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    var arr=[12,18,19,20,21];
    //需求：找出所有大于18的数字
    //找出所有的偶数
    var a=arr.every(function(item,index){
        //只要表达式成立，则会将该数组元素存放在一个新数组中
        return item>18
    });
    console.log(a);//false;
    //使用场景：
    实现全选和反选功能

# vue 的概念

  1. 一款前端框架
    一套解决方案。boostrap

    框架和库：
    框架：强约定，按照开发者的规则来写，我们是被动的。BS，vue

    库：弱约定。JQ。主动权在我们手上，可以只用它的一部分，也可以用它的所有

  2. 是渐进式的前端框架
    渐进式：不是一上来就要使用该框架中所有的内容，而是可以按照自己的需求一点点使用。
    每学一部分就能做对应的应用。
    JS：
    JQ：

  3. 是以数据驱动为核心的（MVVM 设计模式）
    vue 是操作数据，而非操作 DOM。
    网站的本质：数据的流向问题
    前端 —> 后端
    form–> 提交到后端

    后端–> 前端
    数据库输出到前端
    解决这个数据流向本身就比较复杂，有没有一种方案能简化这种操作呢？

    vue 把最难的部分给解决了，用户只需要关系数据和处理数据（json）

  4. 是有中国人开发的全球流行的框架
    尤雨溪–原先在 Google 工作，angular.js

  5. 颠覆了我们对 JS 的认知
    vue.js 也是用 JS 写的。但写法和思想是我们从未遇到过的。

  6. 先用起来再说

总结：vue 是一款以数据驱动为核心的渐进式的前端框架。

https://cn.vuejs.org/

# vue 能做什么

  1. 单页面应用
    将网站做得类似于 tab 切换页。

    好处：能加快网站访问速度。

    理由：静态资源只需要加载一次，后面更新内容时不需要再次加载了
    只刷新数据

  2. webAPP（app）
    可以做各种各样的 webAPP

  3. 像 JQ 那样使用
    最基础的版本（乞丐版的 vue）

    vue 会分两部分学习：前 9 次课，基础部分，乞丐版。
    后面几次课学豪华版（全家桶工具）

# vue 的模版和指令

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

  1. 模板

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    <script src='vue.js'></script>
    <div id="app">
        {{msg}}
    </div>
    <script>
    	new Vue({
            el:"#app",
            data:{
                msg:"hello,vue"
            }
        });
    </script>

  2. 插值运算 - 小胡子语法
    作用：用来在标签内容中展示 data 中的数据

    1
    <div>{{data中的属性名|表达式}}</div>

  3. 指令

    指令：实现数据与视图的交互方式

    理解指令：
    a、指令 (Directives) 是带有 v- 前缀的特殊特性（即就是 HTML 的自定义属性，不过是 v - 开头）
    b、将数据和 DOM 关联，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM
    c、预期的值为单个 JavaScript 表达式

    1. v-bind 指令，控制 HTML 的属性的

      1
      2
      3
      4
      5
      v-bind:属性名="表达式|data中的key值"
      //例子
      <div title="死的数据"></div>
      //title会展示来自于data中的数据
      <div v-bind:title="msg"></div>