vue.js----基础语法

最新推荐文章于 2024-05-25 11:56:43 发布

置顶 zlppassion

最新推荐文章于 2024-05-25 11:56:43 发布

阅读量324

点赞数

分类专栏：前端 vue.js

本文链接：https://blog.csdn.net/zlppassion/article/details/105752182

版权

前端同时被 2 个专栏收录

44 篇文章 0 订阅

订阅专栏

vue.js

8 篇文章 0 订阅

订阅专栏

MVVM

MVVM最早由微软提出来，它借鉴了桌面应用程序的MVC思想，在前端页面中，把Model用纯JavaScript对象表示，View负责显示，两者做到了最大限度的分离。

把Model和View关联起来的就是ViewModel。ViewModel负责把Model的数据同步到View显示出来，还负责把View的修改同步回Model。

View层：

视图层

在我们前端开发中，通常就是DOM层。

主要的作用是给用户展示各种信息。

Model层：

数据层

数据可能是我们固定的死数据，更多的是来自我们服务器，从网络上请求下来的数据。

在我们计数器的案例中，就是后面抽取出来的obj，当然，里面的数据可能没有这么简单。

VueModel层：

视图模型层视图模型层是View和Model沟通的桥梁。

一方面它实现了Data Binding，也就是数据绑定，将Model的改变实时的反应到View中

另一方面它实现了DOM Listener，也就是DOM监听，当DOM发生一些事件(点击、滚动、touch等)时，可以监听到，并在需要的情况下改变对应的Data。

基本语法

Mustache(也就是双大括号)




<div id="app">
  <h2>{{message}}</h2>
  <h2>{{message}}, 李银河!</h2>

  <!--mustache语法中,不仅仅可以直接写变量,也可以写简单的表达式-->
  <h2>{{firstName + lastName}}</h2>
  <h2>{{firstName + ' ' + lastName}}</h2>
  <h2>{{firstName}} {{lastName}}</h2>
  <h2>{{counter * 2}}</h2>
</div>

v-once

该指令后面不需要跟任何表达式

该指令表示元素和组件(组件后面才会学习)只渲染一次，不会随着数据的改变而改变

<h2 v-once>{{message}}</h2>

v-html

解析出HTML展示

<body>

<div id="app">
  <h2>{{url}}</h2>
  <h2 v-html="url"></h2>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊',
      url: '<a href="http://www.baidu.com">百度一下</a>'
    }
  })
</script>

</body>

v-text

v-text作用和Mustache比较相似：都是用于将数据显示在界面中

v-text通常情况下，接受一个string类型

但它添加东西没那么方便，不能再><间加东西（不起效果）

 <h2 v-text="message"></h2>

v-pre

v-pre用于跳过这个元素和它子元素的编译过程，用于显示原本的Mustache语法

第一个h2元素中的内容会被编译解析出来对应的内容第二个h2元素中会直接显示{{message}}

<div id="app">
  <h2>{{message}}</h2>
  <h2 v-pre>{{message}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: 'Hello world'
    }
  })
</script>

v-cloak

在某些情况下，我们浏览器可能会直接显然出未编译的Mustache标签。

cloak: 斗篷

就是为了避免解析之前显示。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    [v-cloak] {
      display: none;
    }
  </style>
</head>
<body>

<div id="app" v-cloak>
  <h2>{{message}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
  // 在vue解析之前, div中有一个属性v-cloak
  // 在vue解析之后, div中没有一个属性v-cloak
  setTimeout(function () {
    const app = new Vue({
      el: '#app',
      data: {
        message: '你好啊'
      }
    })
  }, 1000)
</script>

</body>
</html>

v-bind介绍

作用：动态绑定属性

缩写：:

v-bind用于绑定一个或多个属性值，或者向另一个组件传递props值(这个学到组件时再介绍)

有哪些属性需要动态进行绑定呢？比如图片的链接src、网站的链接href、动态绑定一些类、样式等等

v-bind有一个对应的语法糖，也就是简写方式。我们通常会使用语法糖的形式，因为这样更加简洁。

<div id="app">
  <!-- 错误的做法: 这里不可以使用mustache语法-->
  <!--<img src="{{imgURL}}" alt="">-->
  <!-- 正确的做法: 使用v-bind指令 -->
  <img v-bind:src="imgURL" alt="">
  <a v-bind:href="aHref">百度一下</a>
  <!--<h2>{{}}</h2>-->

  <!--语法糖的写法-->
  <img :src="imgurl" alt="">
  <a :href="aHref">百度一下</a>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊',
      imgURL: 'https://img11.360buyimg.com/mobilecms/s350x250_jfs/t1/20559/1/1424/73138/5c125595E3cbaa3c8/74fc2f84e53a9c23.jpg!q90!cc_350x250.webp',
      aHref: 'http://www.baidu.com',
      imgurl:'https://cn.vuejs.org/images/logo.png'
    }
  })
</script>

v-bind绑定class

绑定class有两种方式：对象语法、数组语法

①绑定方式：对象语法

对象语法的含义是:class后面跟的是一个对象。

02-v-bind动态绑定class(对象语法)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>

  <style>
    .active {
      color: red;
    }
  </style>
</head>
<body>

<div id="app">
  <!--<h2 class="active">{{message}}</h2>-->
  <!--<h2 :class="active">{{message}}</h2>-->

  <!--<h2 v-bind:class="{key1: value1, key2: value2}">{{message}}</h2>-->
  <!--<h2 v-bind:class="{类名1: true, 类名2: boolean}">{{message}}</h2>-->
  <h2 class="title" v-bind:class="{active: isActive, line: isLine}">{{message}}</h2>
  <h2 class="title" v-bind:class="getClasses()">{{message}}</h2>
  <button v-on:click="btnClick">按钮</button>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊',
      isActive: true,
      isLine: false
    },
    methods: {
      btnClick: function () {
        this.isActive = !this.isActive
      },
      getClasses: function () {
        return {active: this.isActive, line: this.isLine}
      }
    }
  })
</script>

</body>
</html>

对象语法有下面这些用法：

用法一：直接通过{}绑定一个类 <h2 :class="{'active': isActive}">Hello World</h2>

用法二：也可以通过判断，传入多个值 <h2 :class="{'active': isActive, 'line': isLine}">Hello World</h2>

用法三：和普通的类同时存在，并不冲突注：如果isActive和isLine都为true，那么会有title/active/line三个类 <h2 class="title" :class="{'active': isActive, 'line': isLine}">Hello World</h2>

用法四：如果过于复杂，可以放在一个methods或者computed中注：classes是一个计算属性 <h2 class="title" :class="classes">Hello World</h2>

03-v-bind动态绑定class(数组语法)

<body>

<div id="app">
  <h2 class="title" :class="[active, line]">{{message}}</h2>
  <h2 class="title" :class="getClasses()">{{message}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '???',
      active: 'aaaaaa',
      line: 'bbbbbbb'
    },
    methods: {
      getClasses: function () {
        return [this.active, this.line]
      }
    }
  })
</script>

数组语法有下面这些用法：

用法一：直接通过{}绑定一个类

<h2 :class="['active']">Hello World</h2>

用法二：也可以传入多个值

<h2 :class=“[‘active’, 'line']">Hello World</h2>

用法三：和普通的类同时存在，并不冲突注：会有title/active/line三个类

<h2 class="title" :class=“[‘active’, 'line']">Hello World</h2>

用法四：如果过于复杂，可以放在一个methods或者computed中注：classes是一个计算属性

<h2 class="title" :class="classes">Hello World</h2>

v-for与v-bind的结合

实现：点击列表中的哪一项, 那么该项的文字变成粉红色。且最开始默认第一项为粉红色。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
   <style>
     .changePink{
        color:pink;
    }
   </style>
   
</head>
<body>
    <div id="app">
        <ul >
            <li v-for="(item,index) in hobbies" 
                :class="{changePink: index === nowIndex}"
                v-on:click="isCurrent(index)">
                {{item}}
            </li>
        </ul>
    </div>
   
    <script src="../js/vue.js"></script>
    <script>
        const app=new Vue({
            el:'#app',
            data:{
                hobbies:['变瘦','开心','美食','旅游'],
                nowIndex:0
            },
            methods:{
                isCurrent:function(index){
                    this.nowIndex=index;
                }
            }
        })
    </script>
</body>
</html>

v-bind绑定style

我们可以利用v-bind:style来绑定一些CSS内联样式。

在写CSS属性名的时候，比如font-size

我们可以使用驼峰式 (camelCase) fontSize 或短横线分隔 (kebab-case，记得用单引号括起来)

‘font-size’ 绑定class有两种方式：对象语法数组语法

对象法：

'50px'必须加上单引号, 否则是当做一个变量去解析

<h2 :style="{fontSize: '50px'}">{{message}}</h2>

<div id="app">
  <!--<h2 :style="{key(属性名): value(属性值)}">{{message}}</h2>-->

  <!--'50px'必须加上单引号, 否则是当做一个变量去解析-->
  <!--<h2 :style="{fontSize: '50px'}">{{message}}</h2>-->

  <!--finalSize当成一个变量使用-->
  <!--<h2 :style="{fontSize: finalSize}">{{message}}</h2>-->
  <h2 :style="{fontSize: finalSize + 'px', backgroundColor: finalColor}">{{message}}</h2>
  <h2 :style="getStyles()">{{message}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊',
      finalSize: 100,
      finalColor: 'red',
    },
    methods: {
      getStyles: function () {
        return {fontSize: this.finalSize + 'px', backgroundColor: this.finalColor}
      }
    }
  })
</script>

数组法：（用得少）

<div id="app">
  <h2 :style="[baseStyle, baseStyle1]">{{message}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: 'xixi',
      baseStyle: {backgroundColor: 'red'},
      baseStyle1: {fontSize: '100px'},
    }
  })
</script>

什么是计算属性

计算属性的基本使用

<div id="app">
  <h2>{{firstName + ' ' + lastName}}</h2>
  <h2>{{firstName}} {{lastName}}</h2>

  <h2>{{getFullName()}}</h2>

  <h2>{{fullName}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      firstName: 'Lebron',
      lastName: 'James'
    },
    // computed: 计算属性
    computed: {
      fullName: function () {
        return this.firstName + ' ' + this.lastName
      }
    },
    methods: {
      getFullName() {
        return this.firstName + ' ' + this.lastName
      }
    }
  })
</script>

计算属性的复杂操作

<div id="app">
  <!-- <h2>总价格: {{totalPrice}}</h2> -->
  <h2>总价格: {{allPrice}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      books: [
        {id: 110, name: 'Unix编程艺术', price: 119},
        {id: 111, name: '代码大全', price: 105},
        {id: 112, name: '深入理解计算机原理', price: 98},
        {id: 113, name: '现代操作系统', price: 87},
      ]
    },
    computed: {
      totalPrice: function () {
        let result = 0
        for (let i=0; i < this.books.length; i++) {
          result += this.books[i].price
        }
        return result

        // for (let i in this.books) {
        //   this.books[i]
        // }
        //
        // for (let book of this.books) {
        //
        // }
      },
      allPrice:function(){
        return this.books.reduce((total,b)=>{
          return total+b.price
        },0)
      }
    }
  })
</script>

计算属性的setter和getter

set方法是在改变fullName时调用的。

  <div id="app">
    <h2>{{fullName}}</h2>
  </div>

  <script src="../js/vue.js"></script>
  <script>
  
    const app = new Vue({
      el: '#app',
      data: {
        firstName: 'Kobe',
        lastName: 'Bryant'
      },
      computed: {
        // fullName: function () {
        //   return this.firstName + ' ' + this.lastName
        // }
        // name: 'coderwhy'
        // 计算属性一般是没有set方法, 只读属性.
        fullName: {
          set: function (newValue) {
            // console.log('-----', newValue);
            const names = newValue.split(' ');
            this.firstName = names[0];
            this.lastName = names[1];
          },
          get: function () {
            return this.firstName + ' ' + this.lastName
          }
        },

        // fullName: function () {
        //   return this.firstName + ' ' + this.lastName
        // }
      }
    })

计算属性的缓存

计算属性会进行缓存，如果多次使用时，计算属性只会调用一次。（除非改变才会重新调用）

<div id="app">
  <!--1.直接拼接: 语法过于繁琐-->
  <h2>{{firstName}} {{lastName}}</h2>

  <!--2.通过定义methods-->
  <h2>{{getFullName()}}</h2>
  <h2>{{getFullName()}}</h2>
  <h2>{{getFullName()}}</h2>
  <h2>{{getFullName()}}</h2>

  <!--3.通过computed-->
  <h2>{{fullName}}</h2>
  <h2>{{fullName}}</h2>
  <h2>{{fullName}}</h2>
  <h2>{{fullName}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
  // angular -> google
  // TypeScript(microsoft) -> ts(类型检测)
  // flow(facebook) ->
  const app = new Vue({
    el: '#app',
    data: {
      firstName: 'Kobe',
      lastName: 'Bryant'
    },
    methods: {
      getFullName: function () {
        console.log('getFullName');
        return this.firstName + ' ' + this.lastName
      }
    },
    computed: {
      fullName: function () {
        console.log('fullName');
        return this.firstName + ' ' + this.lastName
      }
    }
  })

可以看到控制台：

ES6补充

let/var

块级作用域

JS中使用var来声明一个变量时, 变量的作用域主要是和函数的定义有关.

针对于其他块定义来说是没有作用域的，比如if/for等，这在我们开发中往往会引起一些问题

let

const的使用

在ES6开发中,优先使用const, 只有需要改变某一个标识符的时候才使用let.

1.注意一: 一旦给const修饰的标识符被赋值之后, 不能修改
  const name = 'why';
  name = 'abc';

  2.注意二: 在使用const定义标识符,必须进行赋值
  const name;

  3.注意三: 常量的含义是指向的对象不能修改, 但是可以改变对象内部的属性.

const 指向的是内存地址。

对象增强写法

属性初始化简写：

方法的简写：

事件监听

v-on介绍

绑定事件监听器

缩写：@

v-on:click可以写成@click

v-on参数

情况一：如果该方法不需要额外参数，那么方法后的()可以不添加

但是注意：如果方法本身中有一个参数，那么会默认将原生事件event参数传递进去

情况二：如果需要同时传入某个参数，同时需要event时，可以通过$event传入事件。

<body>

<div id="app">
  <!--1.事件调用的方法没有参数-->
  <button @click="btn1Click()">1按钮1</button>
  <button @click="btn1Click">1按钮2</button>

  <!--2.在事件定义时, 写方法时省略了小括号, 但是方法本身是需要一个参数的, 这个时候, Vue会默认将浏览器生产的event事件对象作为参数传入到方法-->
  <button @click="btn2Click(123)">2按钮1</button>
  <button @click="btn2Click()">2按钮2</button>
  <button @click="btn2Click">2按钮3</button>

  <!--3.方法定义时, 我们需要event对象, 同时又需要其他参数-->
  <!-- 在调用方式, 如何手动的获取到浏览器参数的event对象: $event-->
  <button @click="btn3Click(abc, $event)">1按钮3</button>
 
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊',
      abc: 123
    },
    methods: {
      btn1Click() {
        console.log("无参数btn1Click");
      },
      btn2Click(event) {
        console.log('--------', event);
      },
      btn3Click(abc, event) {
        console.log('++++++++', abc, event);
      }
    }
  })

  
</script>

依次点击的结果：

v-on修饰符

在某些情况下，我们拿到event的目的可能是进行一些事件处理。

.stop - 调用 event.stopPropagation()。

.prevent - 调用 event.preventDefault()

.{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。

.native - 监听组件根元素的原生事件。

.once - 只触发一次回调。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<div id="app">
  <!--1. .stop修饰符的使用-->
  <div @click="divClick">
    aaaaaaa
    <button @click.stop="btnClick">按钮</button>
  </div>

  <!--2. .prevent修饰符的使用-->
  <br>
  <form action="baidu">
    <input type="submit" value="提交" @click.prevent="submitClick">
  </form>

  <!--3. .监听某个键盘的键帽-->
  <input type="text" @keyup.enter="keyUp">

  <!--4. .once修饰符的使用-->
  <button @click.once="btn2Click">按钮2</button>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊'
    },
    methods: {
      btnClick() {
        console.log("btnClick");
      },
      divClick() {
        console.log("divClick");
      },
      submitClick() {
        console.log('submitClick');
      },
      keyUp() {
        console.log('keyUp');
      },
      btn2Click() {
        console.log('btn2Click');
      }
    }
  })
</script>

</body>
</html>

v-if、v-else-if、v-else

v-if的原理：

v-if后面的条件为false时，对应的元素以及其子元素不会渲染。

用户登录切换的小案例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<div id="app">
  <span v-if="isUser">
    <label for="username">用户账号</label>
    <input type="text" id="username" placeholder="用户账号" key="username">
  </span>
  <span v-else>
    <label for="email">用户邮箱</label>
    <input type="text" id="email" placeholder="用户邮箱" key="email">
  </span>
  <button @click="isUser = !isUser">切换类型</button>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      isUser: true
    }
  })
</script>

</body>
</html>

结果：

小问题：如果我们在有输入内容的情况下，切换了类型，我们会发现文字依然显示之前的输入的内容。但是按道理讲，我们应该切换到另外一个input元素中了。在另一个input元素中，我们并没有输入内容。为什么会出现这个问题呢？

问题解答：这是因为Vue在进行DOM渲染时，出于性能考虑，会尽可能的复用已经存在的元素，而不是重新创建新的元素。在上面的案例中，Vue内部会发现原来的input元素不再使用，直接作为else中的input来使用了。

解决方案：如果我们不希望Vue出现类似重复利用的问题，可以给对应的input添加key 并且我们需要保证key的不同。

v-show

v-show的用法和v-if非常相似，也用于决定一个元素是否渲染

v-if当条件为false时，压根不会有对应的元素在DOM中

v-show当条件为false时，仅仅是将元素的display属性设置为none而已。

开发中如何选择呢？

当需要在显示与隐藏之间切片很频繁时，使用v-show

当只有一次切换时，通过使用v-if

循环遍历

v-for遍历数组

①如果在遍历的过程中不需要使用索引值

<ul>
    <li v-for="item in names">{{item}}</li>
  </ul>

②如果在遍历的过程中，我们需要拿到元素在数组中的索引值呢？

<ul>
    <li v-for="(item, index) in names">
      {{index+1}}.{{item}}
    </li>
  </ul>

v-for遍历对象

1.在遍历对象的过程中, 如果只是获取一个值, 那么获取到的是value

2.获取key和value 格式: (value, key)

3.获取key和value和index 格式: (value, key, index)

<body>

<div id="app">
  <!--1.在遍历对象的过程中, 如果只是获取一个值, 那么获取到的是value-->
  <ul>
    <li v-for="item in info">{{item}}</li>
  </ul>


  <!--2.获取key和value 格式: (value, key) -->
  <ul>
    <li v-for="(value, key) in info">{{value}}-{{key}}</li>
  </ul>


  <!--3.获取key和value和index 格式: (value, key, index) -->
  <ul>
    <li v-for="(value, key, index) in info">{{value}}-{{key}}-{{index}}</li>
  </ul>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      info: {
        name: 'why',
        age: 18,
        height: 1.88
      }
    }
  })
</script>

</body>

结果：

组件的key属性

官方推荐我们在使用v-for时，给对应的元素或组件添加上一个:key属性。

当某一层有很多相同的节点时，也就是列表节点时，我们希望插入一个新的节点：即把C更新成F，D更新成C，E更新成D，最后再插入E，是不是很没有效率？

所以我们需要使用key来给每个节点做一个唯一标识。Diff算法就可以正确的识别此节点。找到正确的位置区插入新的节点。

key的作用主要是为了高效的更新虚拟DOM。

检测数组更新

因为Vue是响应式的，所以当数据发生变化时，Vue会自动检测数据变化，视图会发生对应的更新。

Vue中包含了一组观察数组编译的方法，使用它们改变数组也会触发视图的更新

push() pop() shift() unshift() splice() sort() reverse()

注意: 通过索引值修改数组中的元素

this.letters[0] = 'bbbbbb';（这个行不通）

this.letters.splice(0, 1, 'bbbbbb')；（这个可以）

//set(要修改的对象, 索引值, 修改后的值)

Vue.set(this.letters, 0, 'bbbbbb')

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<div id="app">
  <ul>
    <li v-for="item in letters">{{item}}</li>
  </ul>
  <button @click="btnClick">按钮</button>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      letters: ['a', 'b', 'c', 'd']
    },
    methods: {
      btnClick() {
        1.push方法
        this.letters.push('aaa')
        this.letters.push('aaaa', 'bbbb', 'cccc')

        2.pop(): 删除数组中的最后一个元素
        this.letters.pop();

        3.shift(): 删除数组中的第一个元素
        this.letters.shift();

        4.unshift(): 在数组最前面添加元素
        this.letters.unshift()
        this.letters.unshift('aaa', 'bbb', 'ccc')

        5.splice作用: 删除元素/插入元素/替换元素
        删除元素: 第二个参数传入你要删除几个元素(如果没有传,就删除后面所有的元素)
        替换元素: 第二个参数, 表示我们要替换几个元素, 后面是用于替换前面的元素
        插入元素: 第二个参数, 传入0, 并且后面跟上要插入的元素
        splice(start)
        splice(start):
        this.letters.splice(1, 3, 'm', 'n', 'l', 'x')
        this.letters.splice(1, 0, 'x', 'y', 'z')

        5.sort()
        this.letters.sort()

        6.reverse()
        this.letters.reverse()

        注意: 通过索引值修改数组中的元素
        this.letters[0] = 'bbbbbb';
        this.letters.splice(0, 1, 'bbbbbb')
        set(要修改的对象, 索引值, 修改后的值)
        Vue.set(this.letters, 0, 'bbbbbb')
      }
    }
  })



</script>

</body>
</html>

书籍购物车案例

可以实时计算总价，当购买数量为1时，左边的减少数量就不能再减了。点击移除删掉该行。

当所有的都被删除时，那么显示购物车为空。

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

<div id="app">
  <div v-if="books.length>0">
    <table>
      <thead>
      <tr>
        <th></th>
        <th>书籍名称</th>
        <th>出版日期</th>
        <th>价格</th>
        <th>购买数量</th>
        <th>操作</th>
      </tr>
      </thead>
      <tbody>
      <tr v-for="(item, index) in books">
        <td>{{item.id}}</td>
        <td>{{item.name}}</td>
        <td>{{item.date}}</td>
        <td>{{item.price | showPrice}}</td>
        <td>
          <button @click="decrement(index)" :disabled="item.count <= 1">-</button>
          {{item.count}}
          <button @click="increment(index)">+</button>
        </td>
        <td><button @click="removeHandle(index)">移除</button></td>
      </tr>
      </tbody>
    </table>
    <h2>总价格: {{totalPrice | showPrice}}</h2>
  </div>
  <h2 v-else>购物车为空</h2>
</div>

<script src="../js/vue.js"></script>
<script src="main.js"></script>
<script>
</script>
</body>
</html>

main.js

const app = new Vue({
  el: '#app',
  data: {
    books: [
      {
        id: 1,
        name: '《算法导论》',
        date: '2006-9',
        price: 85.00,
        count: 1
      },
      {
        id: 2,
        name: '《UNIX编程艺术》',
        date: '2006-2',
        price: 59.00,
        count: 1
      },
      {
        id: 3,
        name: '《编程珠玑》',
        date: '2008-10',
        price: 39.00,
        count: 1
      },
      {
        id: 4,
        name: '《代码大全》',
        date: '2006-3',
        price: 128.00,
        count: 1
      },
    ]
  },
  methods: {
    // getFinalPrice(price) {
    //   return '¥' + price.toFixed(2)
    // }
    increment(index) {
      this.books[index].count++
    },
    decrement(index) {
      this.books[index].count--
    },
    removeHandle(index) {
      this.books.splice(index, 1)
    }
  },
  computed: {
    totalPrice() {
      let totalPrice = 0
      for (let i = 0; i < this.books.length; i++) {
        totalPrice += this.books[i].price * this.books[i].count
      }
      return totalPrice

      // for (let i in/of this.books)
      // reduce
    }
  },
  filters: {
    showPrice(price) {
      return '¥' + price.toFixed(2)
    }
  }
})

高阶函数js

// 编程范式: 命令式编程/声明式编程
// 编程范式: 面向对象编程(第一公民:对象)/函数式编程(第一公民:函数)
// filter/map/reduce
// filter中的回调函数有一个要求: 必须返回一个boolean值
// true: 当返回true时, 函数内部会自动将这次回调的n加入到新的数组中
// false: 当返回false时, 函数内部会过滤掉这次的n
const nums = [10, 20, 111, 222, 444, 40, 50]

// let total = nums.filter(n => n < 100).map(n => n * 2).reduce((pre, n) => pre + n);
// console.log(total);

let total = nums.filter(function (n) {
  return n < 100
}).map(function (n) {
  return n * 2
}).reduce(function (prevValue, n) {
  return prevValue + n
}, 0)
console.log(total);

1.filter函数的使用
// 10, 20, 40, 50
let newNums = nums.filter(function (n) {
  return n < 100
})
// console.log(newNums);

// 2.map函数的使用
// 20, 40, 80, 100
let new2Nums = newNums.map(function (n) { // 20
  return n * 2
})
console.log(new2Nums);

// 3.reduce函数的使用
// reduce作用对数组中所有的内容进行汇总
let total = new2Nums.reduce(function (preValue, n) {
  return preValue + n
}, 0)
console.log(total);

表单绑定v-model

表单控件在实际开发中是非常常见的。特别是对于用户信息的提交，需要大量的表单。

Vue中使用v-model指令来实现表单元素和数据的双向绑定。

案例的解析：

当我们在输入框输入内容时，因为input中的v-model绑定了message，所以会实时将输入的内容传递给message，message发生改变。当message发生改变时，因为上面我们使用Mustache语法，将message的值插入到DOM中，所以DOM会发生响应的改变。所以，通过v-model实现了双向的绑定。

<div id="app">
  <input type="text" v-model="message">
  {{message}}
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: ''
    }
  })
</script>

当然，我们也可以将v-model用于textarea元素

v-model原理

v-model其实是一个语法糖，它的背后本质上是包含两个操作：

①v-bind绑定一个value属性②v-on指令给当前元素绑定input事件

<input type="text" v-model="message">
等同于
<input type="text" v-bind:value="message" v-on:input="message = $event.target.value">

v-model：radio

加了label的话，点击文字也可以选中

<div id="app">
  <label for="male">
    <input type="radio" id="male" value="男" v-model="sex">男
  </label>
  <label for="female">
    <input type="radio" id="female" value="女" v-model="sex">女
  </label>
  <h2>您选择的性别是: {{sex}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊',
      sex: '女'
    }
  })
</script>

v-model：checkbox

复选框分为两种情况：单个勾选框和多个勾选框

单个勾选框：

v-model即为布尔值。

此时input的value并不影响v-model的值。

多个复选框：

当是多个复选框时，因为可以选中多个，所以对应的data中属性是一个数组。

当选中某一个时，就会将input的value添加到数组中。

<div id="app">
  <!--1.checkbox单选框-->
  <!-- <label for="agree">
    <input type="checkbox" id="agree" v-model="isAgree">同意协议
  </label>
  <h2>您选择的是: {{isAgree}}</h2>
  <button :disabled="!isAgree">下一步</button> -->

  <!--2.checkbox多选框-->
  <input type="checkbox" value="篮球" v-model="hobbies">篮球
  <input type="checkbox" value="足球" v-model="hobbies">足球
  <input type="checkbox" value="乒乓球" v-model="hobbies">乒乓球
  <input type="checkbox" value="羽毛球" v-model="hobbies">羽毛球
  <h2>您的爱好是: {{hobbies}}</h2>

 
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊',
      isAgree: false, // 单选框
      hobbies: [] // 多选框,
     
    }
  })
</script>

v-model：select

和checkbox一样，select也分单选和多选两种情况。

单选：只能选中一个值。

v-model绑定的是一个值。

当我们选中option中的一个时，会将它对应的value赋值到mySelect中

多选：可以选中多个值。

v-model绑定的是一个数组

当选中多个值时，就会将选中的option对应的value添加到数组mySelects中


<div id="app">
  <!--1.选择一个-->
  <select name="abc" v-model="fruit">
    <option value="苹果">苹果</option>
    <option value="香蕉">香蕉</option>
    <option value="榴莲">榴莲</option>
    <option value="葡萄">葡萄</option>
  </select>
  <h2>您选择的水果是: {{fruit}}</h2>

  <!--2.选择多个-->
  <select name="abc" v-model="fruits" multiple>
    <option value="苹果">苹果</option>
    <option value="香蕉">香蕉</option>
    <option value="榴莲">榴莲</option>
    <option value="葡萄">葡萄</option>
  </select>
  <h2>您选择的水果是: {{fruits}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊',
      fruit: '香蕉',
      fruits: []
    }
  })

值绑定

就是动态的给value赋值而已

我们前面的value中的值，可以回头去看一下，都是在定义input的时候直接给定的。

但是真实开发中，这些input的值可能是从网络获取或定义在data中的。

所以我们可以通过v-bind:value动态的给value绑定值。

:for 就是说要和哪一个input对应起来

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<div id="app">
  

  <label v-for="item in originHobbies" :for="item">
    <input type="checkbox" :value="item" :id="item" v-model="hobbies">{{item}}
  </label>
<h2>您的爱好是: {{hobbies}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
     
      hobbies: [], // 多选框,
      originHobbies: ['篮球', '足球', '乒乓球', '羽毛球', '台球', '高尔夫球']
    }
  })
</script>

</body>
</html>