T O P

[资源分享]     Vue基础语法 ->(个人学习记录笔记)

  • By - 楼主

  • 2021-07-27 14:00:07
  • @

    Vue

    1. 指令

    1.1 mustache

    • 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>
    <script src="../js/vue.js"></script>
    <script>
      const app = new Vue({
        el: '#app',
        data: {
          message: '你好啊!',
          firstName: 'kobe',
          lastName: 'bryant',
          counter:100,
        }
      })
    </script>
    

    1.2 v-once

    • v-once
      • 该指令后边不需要跟任何表达式
      • 该指令表示元素和组件只渲染一次,不会随着数据的改变而改变
    <div id="app">
      <h2>{{message}}</h2>
      <h2 v-once>{{message}}</h2>
    </div>
    <script src="../js/vue.js"></script>
    <script>
      const app = new Vue({
        el: '#app',
        data: {
          message: '你好啊!'
        }
      })
    </script>
    

    在这里插入图片描述

    1.3 v-html

    • v-html
      • 该指令后边往往会跟上一个string类型
      • 会将string的html解析出来并且渲染
    <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="https://www.baidu.com">百度一下<a/>'
        }
      })
    </script>
    

    在这里插入图片描述

    1.4 v-text

    • v-text
      • 该指令和Mustache比较相似:都是用于将数据显示在界面中
      • 该指令通常情况下,接受一个string类型
    • 相对不灵活,不容易拼接内容,一般不用
    <div id="app">
      <h2>{{message}},slience_me!</h2>
      <h2 v-text="message">,slience_me!</h2>
    </div>
    <script src="../js/vue.js"></script>
    <script>
      const app = new Vue({
        el: '#app',
        data: {
          message: '你好啊!'
        }
      })
    </script>
    

    在这里插入图片描述

    1.5 v-pre

    • v-pre:
      • 该指令用于跳过这个元素和它的子元素的编译过程,用于显示原本的Mustache语法
      • 原封不动的显示出来
    <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: '你好啊!'
        }
      })
    </script>
    

    在这里插入图片描述

    1.6 v-cloak

    cloak:斗篷

    • v-cloak:
      • 该指令防止不友好的{{message}}被看到
      • 不会看到{{}}内容
    <!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>
    

    在这里插入图片描述在这里插入图片描述

    1.7 v-bind

    1.7.1 基本使用

    • v-bind:
      • 作用:动态绑定属性
      • 缩写::
      • 预期:any(with argument) | Object (without argument)
      • 参数:attrOrProp(optional)
    • 例子:<img :src="imgURL" alt="">
    <div id="app">
      <!--错误的语法:这里不可以使用mustache语法-->
      <!--<img src="{{imgURL}}" alt="">-->
      <!--正确的做法:使用v-bind指令-->
      <img v-bind:src="imgURL" alt="">
      <a v-bind:href="aHref">百度一下</a>
      <!--  <h2>{{}}</h2>-->
      <br>
      <!--语法糖的写法-->
      <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://cn.vuejs.org/images/logo.svg',
          aHref: 'https://www.baidu.com'
        }
      })
    </script>
    

    1.7.2 动态绑定class

    对象语法
    <div id="app">
    <!--  <h2 class="active">{{message}}</h2>-->
    <!--  <h2 :class="active">{{message}}</h2>-->
    <!--  <h2 :class="{key1: value1,key2:value2}">{{message}}</h2>-->
    <!--  <h2 :class="{类名1: boolean,类名2:boolean}">{{message}}</h2>-->
    <!--  <h2 class="title" :class="{active: isActive,line:isLine}">{{message}}</h2>-->
      <h2 class="title" :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: true
        },
        methods:{
          btnClick:function (){
            this.isActive = !this.isActive
          },
          getClasses:function () {
            return {active: this.isActive,line: this.isLine}
          }
        }
      })
    </script>
    

    在这里插入图片描述在这里插入图片描述

    数组语法
    <div id="app">
      <!-- 字符串 -->
      <h2 class="title" :class="['active', 'line']">{{message}}</h2>
      <!-- 变量 -->
      <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: 'aaaa',
          line: 'bbbbbb'
        },
        methods: {
          getClasses: function () {
            return [this.active, this.line]
          }
        }
      })
    </script>
    

    在这里插入图片描述

    案例
    • 点击哪个那个变红
    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Title</title>
      <style>
        .active{
            color: red;
        }
      </style>
    </head>
    <body>
    <div id="app">
      <ul>
        <li v-for="(m, index) in movies" 
         	@click="liClick(index)" 
         	:class="{active:currentIndex===index}"> {{index}}-{{m}}</li>
      </ul>
    </div>
    <script src="../js/vue.js"></script>
    <script>
      const app = new Vue({
        el: '#app',
        data: {
          movies:['海王','海尔兄弟','火影忍者','进击的巨人'],
          currentIndex: 0
        },
        methods:{
        	liClick(index){
    			this.currentIndex = index;
    		}
        }
      })
    </script>
    </body>
    </html>
    

    在这里插入图片描述在这里插入图片描述

    1.7.3 动态绑定style

    对象绑定
    • :style="{fontSize:finalSize + 'px',color:finalColor}"
    • style后边跟的是一个对象类型
      • 对象的keyCSS属性名称
      • 对象的value是具体赋的值,值可以来自于data中的属性
    <div id="app">
      <!--  <h2 :style="{key(属性名): value(属性值)}">{{message}}</h2>-->
      <!--  '50px'必须加上单引号,否则是当作一个变量去解析-->
      <!--<h2 :style="{fontSize: finalSize}">{{message}}</h2>-->
      <!-- finalSize当成一个变量使用 -->
      <h2 :style="{fontSize:finalSize}">{{message}}</h2>
      <h2 :style="{fontSize:finalSize + 'px',color: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: '100px'
          finalSize: 100,
          finalColor: 'red'
        },
        methods:{
          getStyles:function () {
            return {fontSize:this.fontSize + 'px',backgroundColor: this.finalColor}
          }
        }
      })
    </script>
    

    在这里插入图片描述

    数组绑定
    • <div v-bind:style="[baseStyles, overridingStyles]"></div>
    • style后边跟的是一个数组类型
      • 多个值以逗号,分割即可
    <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: '你好啊!',
          baseStyle:{backgroundColor:'red'},
          baseStyle1:{fontSize:'100px'},
        }
      })
    </script>
    

    在这里插入图片描述

    1.8 v-on

    • 作用:绑定事件监听器
    • 缩写:@
    • 预期:Function|Inline Statement |Object
    • 参数: event

    1.8.1 基本使用

    <div id="app">
      <h2>{{counter}}</h2>
      <!--  <button v-on:click="counter++">+</button>-->
      <!--  <button v-on:click="counter&#45;&#45;">-</button>-->
      <!--<button v-on:click="increment()">+</button>
      <button v-on:click="decrement()">-</button>-->
      <button @click="increment()">+</button>
      <button @click="decrement()">-</button>
    
    </div>
    <script src="../js/vue.js"></script>
    <script>
      const app = new Vue({
        el: '#app',
        data: {
          counter: 0
        },
        methods: {
          increment() {
            this.counter++;
          },
          decrement() {
            this.counter--;
          }
        }
      })
    </script>
    

    1.8.2 参数问题

    • 情况一:如果该方法不需要额外参数,那么方法后的()可以不添加
      • 但是注意:如果方法本身中有一个参数,那么会默认将原生事件event参数传递进去
    • 情况二:如果需要同时传入某个参数,同时需要event时,可以通过$event传入事件
    <div id="app">
      <!--事件调用的方法没有参数-->
      <button @click="btn1Click()">按钮1</button>
      <button @click="btn1Click">按钮1</button>
    
      <!--在事件定义时,写函数时省略了小括号,但是方法本身是需要参数的,这个时候,
      Vue会默认将浏览器生产的event事件参数传入到方法中-->
      <!--<button @click="btn2Click(123)">按钮2</button>-->
      <!--<button @click="btn2Click()">按钮2</button>-->
      <button @click="btn2Click">按钮2</button>
    
      <!--方法定义时,我们需要event对象,同时又需要其他参数-->
      <!--在调用方法时,如何手动的获取到浏览器参数的event对象:-->
      <button @click="btn3Click(abc,$event)">按钮3</button>
      <button>按钮4</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('btn2Click',event);
          },
          btn3Click(abc,event){
            console.log('btn3Click',abc,event);
          },
        }
      })
    </script>
    

    在这里插入图片描述

    1.8.3 修饰符

    • Vue提供了修饰符来帮助我们方便的处理一些事件:
      • .stop 调用 event.stopPropagation() 避免事件冒泡
      • .prevent 调用 event.preventDefault() 阻止默认事件
      • .{keyCode|keyAlias} 只是事件从特定键触发时才触发回调 监听键盘的某个键帽的点击
      • .native 监听组件根元素的原生事件
      • .once 只触发一次回调

    在这里插入图片描述

    1.9 v-if & v-else

    <div id="app">
      <h2 v-if="score>=90">优秀</h2>
      <h2 v-else-if="score>=80">良好</h2>
      <h2 v-else-if="score>=60">及格</h2>
      <h2 v-else>不及格</h2>
      ------------------------------------
      <h2>{{result}}</h2>
    </div>
    <script src="../js/vue.js"></script>
    <script>
      const app = new Vue({
        el: '#app',
        data: {
          score: 88
        },
        computed:{
          result(){
            let showMessage = ''
            if (this.score>=90){
              showMessage = '优秀';
            }else if(this.score>=80){
              showMessage = '良好';
            }else if(this.score>=60){
              showMessage='及格';
            }else{
              showMessage='不及格';
            }
            return showMessage;
          }
        }
      })
    </script>
    

    在这里插入图片描述

    条件渲染案例
    <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>
    

    1.10 v-show

    • v-ifv-show都可以决定一个元素是否渲染,区别是:
      • v-if当条件为false时,压根不会有对应的元素在DOM中
      • v-show当条件为false时,仅仅是将元素的display属性设置为none而已
    • 开发中需要在显示与隐藏之间切片很频繁时建议选择v-show
    • 只有一次切换时,建议使用v-if
    <div id="app">
      <!--v-if:当条件为false时,包含v-if指令的元素,根本就不会存在dom中-->
      <h2 v-if="isShow" id="aaa">{{message}}</h2>
      <!--v-show:当条件为false时,v-show只是给我们的元素添加一个行内样式:display:none-->
      <h2 v-show="isShow" id="bbb">{{message}}</h2>
    
    </div>
    <script src="../js/vue.js"></script>
    <script>
      const app = new Vue({
        el: '#app',
        data: {
          message: '你好啊!',
          isShow:true
        }
      })
    </script>
    

    在这里插入图片描述

    1.11 v-for

    • v-for的语法类似于javaScript中的for循环
    • 格式如下:item in items的形式

    • 如果便利的过程不需要索引值
      • v-for="movie in movies"
      • 依次从movies中取出movie,并且在元素中,我们可以使用Mustache语法,来使用movie
    • 如果在遍历的过程中,我们需要拿到元素在数组中的索引值
      • 语法格式:v-for=(item, index) in items
      • 其中的index就代表了去除的item在原数组的索引值

    • 官方推荐我们在使用v-for时,给对应的元素或组件添加上一个:key属性
    • key的主要作用是为了高效的更新虚拟DOM
    遍历数组
    • 响应式的相关方法
      • push() 在数组最后面添加元素
      • pop() 删除数组最后面的元素
      • shift() 删除数组的第一个元素
      • unshift() 在数组最前面添加元素
      • splice() 删除元素/插入元素/替换元素(start,num,value)
      • set() (要修改的对象,索引值,修改后内容)
      • sort() 数组排序
      • reverse() 数组反转
        在这里插入图片描述
    <div id="app">
      <!--1. 在遍历的过程中,没有使用索引值(下标值)-->
      <ul>
        <li v-for="item in names">{{item}}</li>
      </ul>
      <!--2. 在遍历的过程中,获取索引值(下标值)-->
      <ul>
        <li v-for="(item,index) in names">{{index+1}}. {{item}}</li>
      </ul>
    </div>
    <script src="../js/vue.js"></script>
    <script>
      const app = new Vue({
        el: '#app',
        data: {
          names:['why','kobe','james','curry']
        }
      })
    </script>
    
    遍历对象
    <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,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>
    

    • 绑定唯一key
    <div id="app">
      <ul>
        <li v-for="item in letters" :key="item">{{item}}</li>
      </ul>
    </div>
    <script src="../js/vue.js"></script>
    <script>
      const app = new Vue({
        el: '#app',
        data: {
         letters:['A','B','C','D','E']
        }
      })
    </script>
    

    1.12 v-model

    原理
    <div id="app">
    <!--  <input type="text" v-model="message">-->
    <!--  <input type="text" :value="message" @input="valueChange">-->
      <input type="text" :value="message" @input="message = $event.target.value">
      {{message}}
    </div>
    <script src="../js/vue.js"></script>
    <script>
      const app = new Vue({
        el: '#app',
        data: {
          message: '你好啊!'
        },
        methods:{
          valueChange(event){
            console.log('-----');
            console.log(event);
            this.message = event.target.value;
          }
        }
      })
    </script>
    
    基本使用
    <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:radio
    <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
    <div id="app">
      <!--1. 单选框-->
      <label for="agreement">
        <input type="checkbox" id="agreement" v-model="isAgree">同意协议
      </label>
      <h2>您选择的是:{{isAgree}}</h2>
      <button :disabled="!isAgree">下一步</button>
    
      <br>
      <!--2.多选框-->
      <label>
        <input type="checkbox" v-model="hobbies" value="篮球">篮球
        <input type="checkbox" v-model="hobbies" value="足球">足球
        <input type="checkbox" v-model="hobbies" value="乒乓球">乒乓球
        <input type="checkbox" v-model="hobbies" value="羽毛球">羽毛球
      </label>
      <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
    <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>
    
      <br>
      <!--2. 选择多个-->
      <select name="abc" v-model="fruits" multiple>
        <option value="苹果">苹果</option>
        <option value="香蕉">香蕉</option>
        <option value="西瓜">西瓜</option>
        <option value="菠萝">菠萝</option>
      </select>
      <h2>您选择是:{{fruits}}</h2>
    
      <label v-for="item in originFruits" :for="item">
        <input type="checkbox" :value="item" :id="item" v-model="balls">{{item}}
      </label>
      <h2>您选择是:{{balls}}</h2>
    
    </div>
    <script src="../js/vue.js"></script>
    <script>
      const app = new Vue({
        el: '#app',
        data: {
          message: '你好啊!',
          fruit: '香蕉', //单选框
          fruits:[], //多选框
          originFruits:['篮球','足球','乒乓球','羽毛球','台球','高尔夫球'],
          balls:[],
        }
      })
    </script>
    

    在这里插入图片描述

    修饰符
    • lazy修饰符:
      • 默认情况下,v-model默认是在input事件中同步输入框的数据的
      • 一旦有数据发生改变对应的data中的数据就会自动发生改变
      • lazy修饰符可以让数据失去焦点或者回车时才更新
    <div id="app">
      <!--修饰符:lazy-->
      <input type="text" v-model.lazy="message">
      <h2>{{message}}</h2>
    
      <!--修饰符:number-->
      <input type="number" v-model.number="age">
      <h2>{{typeof age}}</h2>
    
      <!--修饰符:trim-->
      <input type="text" v-model.trim="name">
      <h2>{{name}}</h2>
    
    </div>
    <script src="../js/vue.js"></script>
    <script>
      const app = new Vue({
        el: '#app',
        data: {
          message: '你好啊!'
        }
      })
    </script>
    
    • number修饰符:

      • 默认情况下,在输入框中无论输入字母还是数字,都被认为字符串处理
      • 如果希望是数字类型,最好直接将内容数字处理
      • number修饰符可以让输入框中的内容转成数字类型
    • trim修饰符:

      • trim修饰符可以去除两侧空格

    -------------------------------

    2.计算属性

    2.1 基本使用

    <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:{
          fullName: function () {
            return this.firstName + ' ' + this.lastName;
          }
        },
        methods: {
          getFullName() {
            return this.firstName + ' ' + this.lastName;
          }
        }
      })
    </script>
    

    2.2 复杂操作

    <div id="app">
      <h2>总价格:{{totalPrice}}</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) {
            //   result += this.books[i].price
            // }
            //
            // for (let book of this.books) {
            //
            // }
    
    
          }
        }
      })
    </script>
    

    在这里插入图片描述

    2.3 setter和getter

    • 很好理解的settergetter
    • 一般只是用getter来读取,而setter不常用
    <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;
          //   }
        }
      })
    </script>
    

    2.4 缓存

    • methodscomputed都可以实现功能
    • 计算属性会进行缓存,如果多次使用时,计算属性只调用一次
    • computed效率高
    <div id="app">
      <!-- 1. 直接拼接 : 语法过于繁琐3-->
      <h2>{{firstName}} {{lastName}}</h2>
    
      <!-- 2. 通过定义methods -->
      <h2>{{getFullName()}}</h2>
      <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>
      <h2>{{fullName}}</h2>
    </div>
    <script src="../js/vue.js"></script>
    <script>
      const app = new Vue({
        el: '#app',
        data: {
          firstName: 'kobe',
          lastName: 'Bryant'
        },
        methods: {
          getFullName() {
            console.log('getFullName');
            return this.firstName + ' ' + this.lastName;
          }
        },
        computed: {
          fullName: function () {
            console.log('fullName');
            return this.firstName + ' ' + this.lastName;
          }
        }
      })
    </script>
    

    在这里插入图片描述

    3. ES6补充

    3.1 let/var

    • 事实上var的设计可以看成JavaScript语言设计上的错误,但是这种错误多半不能修复和移除,以为需要向后兼容

      • 大概十年前,Brendan Eich 就决定修复这个问题,于是他添加了一个新的关键词:let
    • 块级作用域

      • JS中使用var来声明一个变量时,变量的作用域主要是和函数的定义有关
      • 针对于其他块定义来说是没有作用域的,比如if/for等,这在我们开发中往往会引起一些问题
    • ES5之前因为if和for都没有块级作用域的概念,所以在很多时候,我们都必须借助于function的作用域来解决应用外面变量的问题

    <script>
      // 1.变量作用域:变量在什么范围内是可用的
      // {
      //   var name = 'why'
      //   console.log(name);
      // }
      // console.log(name);
    
      //2.没有块级作用域引起的问题 if 的块级
      // var func;
      // if (true){
      //   var name = 'why';
      //   func = function () {
      //     console.log(name);
      //   }
      //   func()
      // }
      // console.log(name);
    
      //2.没有块级作用域引起的问题 for 的块级
      var btns = document.getElementsByTagName('button');
      for (var i = 0; i < btns.length; i++) {
        (function (i) {
          btns[i].addEventListener('click', function () {
            console.log('第' + (i + 1) + '个按钮被点击');
          })
        })(i)
      }
      const btns = document.getElementsByTagName('button');
      for (let i = 0; i < btns.length; i++) {
          btns[i].addEventListener('click', function () {
            console.log('第' + (i + 1) + '个按钮被点击');
          })
      }
    </script>
    

    3.2 const的使用

    • const关键字
      • 将某个变量变为常量
      • 在js中,使用其标识后,不可再次赋值
    • 不可修改
    • 定义必须赋值

    4. 购物车案例

    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">
        <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}}</h2>
      </div>
      <h2 v-else>购物车为空</h2>
    </div>
    <script src="../js/vue.js"></script>
    <script src="main.js"></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: '2006-10',
            price: 39.00,
            count: 1
          },
          {
            id: 4,
            name: '《代码大全》',
            date: '2006-3',
            price: 128.00,
            count: 1
          }
        ]
      },
      computed: {
        totalPrice() {
          // 1.普通for循环
          let totalPrice = 0;
          // for (let i = 0; i < this.books.length; i++) {
          //   totalPrice += this.books[i].count * this.books[i].price;
          // }
          // return totalPrice;
    
          //2. for(let i in this.books)
          // for (let i in this.books) {
          //   totalPrice += this.books[i].count * this.books[i].price;
          // }
          // return totalPrice;
    
          // for(let i in/of this.books)
          for(let item of this.books){
            console.log(i);
            totalPrice += item.count * item.price;
          }
          return totalPrice;
        },
      },
      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)
        }
      },
      filters: {
        showPrice(price) {
          return '¥' + price.toFixed(2);
        }
      }
    })
    

    style.css

    table{
        border: 1px solid #e9e9e9;
        border-collapse: collapse;
        border-spacing: 0;
    }
    
    th,td{
        padding: 8px 16px;
        border: 1px solid #e9e9e9;
        text-align: left;
    }
    
    th{
        background-color: #f7f7f7;
        color: #5c6b77;
        font-weight: 600;
    }
    

    效果图

    在这里插入图片描述
    在这里插入图片描述
    如果为空
    在这里插入图片描述

    5. JavaScript高阶函数

    filter()

    const nums=[10,20,30,40,50,222,50,15]
    let newNums = nums.filter(function (n) {
      return n>=100;
    })
    //newNums = [10, 20, 40, 50]
    

    map()

    const newNums = [10, 20, 40, 50]
    let new2Nums = newNums.map(function (n) {
      return n*2;
    })
    //new2Nums= [20, 40, 80, 100]
    

    reduce()

    new2Nums= [20, 40, 80, 100]
    let total = new2Nums.reduce(function (preValue,n) {
      return preValue + n;
    }, 0)
    //240
    

    综合

    const nums=[10,20,111,222,444,40,50]
    
    let total = nums.filter(function (n) {
      return n < 100;
    }).map(function (n) {
      return n*2;
    }).reduce(function (preValue,n) {
      return preValue + n;
    }, 0)
    
    console.log(total);
    

    简化

    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);
    

    本帖子中包含资源

    您需要 登录 才可以下载,没有帐号?立即注册