Vue的基本知识

最新推荐文章于 2024-07-25 15:19:10 发布

HebyH_

最新推荐文章于 2024-07-25 15:19:10 发布

阅读量118

点赞数

文章标签： vue.js

本文链接：https://blog.csdn.net/m0_45159572/article/details/117934486

版权

了解什么是vue框架？

vue框架是一个渐进式框架，它可以作为你应用的一部分嵌入其中，其特点是可以不复用组件、状态管理、虚拟DOM还有图层等等。（学习vue要有一定的HTML、CSS、JavaScript基础知识）

创建vue的基本概念

1.了解vue的基本框架:

<html>
<div id="app">{{message}}</div>
</html>

<script>
const app=new Vue({
el:'app',//用于挂载要管理的元素
date:{
message:'HELLO'
}
})
</script>

vue的基本框架分为<html></html>和<script></script>两部分构成。

2.options可以放哪些东西？

el：（这个属性是将vue挂载到哪一个元素上）

date：（date属性中通常是存储一些数据，可自定义，也可以来自网络从服务器中加载）

methos：方法

生命周期主要有八个：beforeCreate->Created->beforeMount->Mounted ->beforeUpdate

->Update->beforeDestory->Destoryed

3.vue列表展示

在html中v-for可以通过一个对象属性来迭代数据。如以下代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
  <ul>
    <li v-for="item in movie">{{item}}</li>//以列表的形式从movie中循环输出

  </ul>
</div>
<script src="../../vue.js"></script>
<script>
  const app=new Vue({
    el:'#app',
    data:{
      message:'Hello',
      movie:  ['HARRY POTTER','QUEEN','MONKEY KING' ]//[]数组
    }
  })
</script>
</body>
</html>

在<li v-for="item in movie">{{item}}</li>中的item是组元素变化的别名，movie是源数组名。

插值操作

1.插值语句的三种表达方法（详细见下面代码例子）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
  <h2>{{message}}</h2>
  <h2>{{message}},李焕英</h2>
  <h2>{{firstName+' '+lastName}}</h2>
  <h2>{{firstName}} {{lastName}}</h2><!--与上一条效果一样-->
</div>
<script src="../../vue.js"></script>
<script>
  const app=new Vue({
    el:'#app',
    data:{
      message:'你好',
      firstName: 'LI',
      lastName: 'Huanying'
    }

  })
</script>
</body>
</html>

效果图如下：

2.插值语句的语法

mustache：就是以上代码的{{}}的双大括号，然后他的数据是响应式

v-once：该指令后面不需要跟任何表达式，但是该指令表示元素和组件只渲染一次，不会随着数据的改变而改变

v-text：通常只显示一个String类型的数据（例如：v-text="message"只会输出message）

v-pre：{{}}显示原本语法（例如：<p v-pre>{{message}}</p> =>显示{{message}}）

v-cloak:在vue解析之前，div中有一个属性v-cloak ，在vue解析之后，div中没有属性v-cloak

3.MVVM

View：视图层（DOM）向用户展示各种信息

Model：数据层（从网络上请求下来）

VueModel：视图模拟层，沟通View和Model，监听对应date

动态绑定属性

1.v-bind的基本使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>$Title$</title>
</head>
<body>
<div id="app">
  <img v-bind:src="imgURL" alt="">
  <a v-bind:href="aHREF">百度一下
  </a>
</div>
<script src="../../vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            imgURL:'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1365571441,2409347385&fm=15&gp=0.jpg',
//从百度上获取图片
             aHREF:'http://www.baidu.com'
        }
    })
</script>
</body>
</html>

2.v-bind动态绑定class（对象语法）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>$Title$</title>
  <style>
        .active {
            font-size:20px;
        }
    </style>
</head>
<body>
<div id="app">
   <h2 :class="active">{{message}}</h2>
</div>
<script src="../../vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            message: 'HELLLO',
            active: 'Heby',
        }
    })
</script>
</body>
</html>

3.v-bind动态绑定class（数组语法）

方法一：直接通过 [ ] 绑定一个类；

<h2 :class="['active']">hello heby</h2>

方法二：也可以通过判断，传入多个值；

<h2 :class="['active'=isAcitve,'line'：isLine]">hello heby</h2>

用法三：和普通的类同时存在，并不冲突；

注：如果isActive和isLine都为true，那么会有title/active/line三个类；

<h2 class="title" :class="['active'=isAcitve,'line'：isLin]">hello heby</h2>

用法四：如果过于复杂，可以放在一个methods或者computed中；

注：classes是一个计算属性；

<h2 class="title" :class="classes">hello heby</h2>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>$Title$</title>
</head>
<body>
<div id="app">
   <h2 class="title" :class="[active,line]">{{message}}</h2>
  <h2 class="title" :class="getClasses()">{{message}}</h2>
</div>
<script src="../../vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            message: 'HELLO',
          active:'AAAA',
          line:'bbbb'
        },
      methods:{
          getClasses:function (){
            return[this.active,this.line]
          }
      }
    })
</script>
</body>
</html>

4.v-bind动态绑定style（对象语法）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>$Title$</title>
</head>
<body>
<div id="app">
   <h2 :style="{fontsize:number+'px',fontcolor:aa}">{{message}}</h2>
    <h2 :style="change()">{{message}}</h2>
</div>
<script src="../../vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            message: '你好',
            number:100,
            aa:'red',
        },
        methods:{
        change:function (){
            return{fontsize:this.number+'px',backgroundColor:this.aa}

        }
        }
    })
</script>
</body>
</html>

5.v-bind动态绑定style（对象语法）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>$Title$</title>
</head>
<body>
<div id="app">
  <h2 :style="[aaa,bbb]">{{message}}</h2>
</div>
<script src="../../vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            message: '你好',
          aaa:{backgroundColor:'red'},
          bbb:{fontSize:'100px'},
        }
    })
</script>
</body>
</html>

注：命名要取得有意义并且可以知道类型，以上代码取名不可取。

6.v-for和v-bind的结合

案例：点击哪个内容哪个内容变红（改变样式），详细代码见下图：

<!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-bind:class="{active:currentIndex === index}"
            v-for="(item,index) in movies" v-on:click="change(index)">{{item}}
            <!--首先下标为0，单点改变下标-->
        </li>
    </ul>
</div>

</div>
<script src="../../vue.js"></script>
<script>
  const app = new Vue({
           el:"#app",
             data:{
               movies:["生化危机","移动迷宫","哈利波特",'移动城堡'],
                 currentIndex:0
         },
        methods:{
                 change: function (index) {
                     console.log(this.currentIndex)
                         this.currentIndex=index

                   }<!-- 先在console弹出上一个原本的下标，
       再把点击的这个下标赋值给currentIndex，改变active属性给哪一行-->
             }
       })
     </script>


</body>
</html>

计算属性

计算属性本质上是一个属性，一般是get（），set（）（一般不使用）。

1.计算属性的基本运用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>$Title$</title>
</head>
<body>
<div id="app">
    <h2>{{fullname}}</h2>
</div>
<script>
    const app = new Vue({
        el: '#app',
        data: {
           firstname:'Liu',
           lastname:'Haoran',

        },
        computed:{
          fullname:function (){
            return this.firstname+' '+this.lastname
          }
        }
    })
</script>
</body>
</html>

2.计算属性的复杂操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>$Title$</title>
</head>
<body>
<div id="app">
  <ul>
    <li v-for="item in books">{{item}}</li>
  </ul>
  <h2>总价格：{{totalPrice}}</h2>
</div>
<script src="../../vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            books:[
              {name:'aaa',price:100},
              {name:'bbb',price:200},
              {name:'ccc',price:300},
              {name:'ddd',price:400},
              {name:'eee',price:500},

            ]

        },
        computed:{
          totalPrice:function (){
            let result=0;
            for(let i=0;i<this.books.length;i++){
              result+=this.books[i].price
            }
            return result
          }
        }
    })
</script>
</body>
</html>

3.计算属性的setter和getter

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>$Title$</title>
</head>
<body>
<div id="app">
   <h2>{{fullName}}</h2>
</div>
<script src="../../vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            firstname: 'Huang',
            lastname:'Heby'
        },
        computed: {
          fullName:{
            //set:function (newValue){
              //console.log('-------',newValue);
              //const name=newValue.splice(' ');
              //this.firstname=name[0];
              //this.lastname=name[1];
            //},
            //计算属性一般只用get，没有set就是只读属性
            get: function () {
              return this.firstname + ' ' + this.lastname
            }
            //get读取数据
          }
        }
    })
</script>
</body>
</html>

4.计算属性和methos方法的对比

computed与methods大致呈现效果是一样的，但是computed是多次使用时只会调用一次因为它是缓存的，methods是方法改变因此打印多次，在大量数据处理时，最好使用computed。

<!DOCTYPE html>
<html lang="en" >
<head>
    <meta charset="UTF-8">
    <title>$Title$</title>
</head>
<body>
<div id="app">
    <!--1.直接拼装：语法过于繁杂-->
    <h2>{{firstname}} {{lastname}}</h2>
  <br>
    <!--2.通过定义method-->//数据不缓存每次都要重新执行
  <h2>{{getFullName()}}</h2>
  <h2>{{getFullName()}}</h2>
  <h2>{{getFullName()}}</h2>
  <h2>{{getFullName()}}</h2>
  <br>
    <!--3.通过computed-->//数据缓存，相同数据只执行一次
  <h2>{{fullName}}</h2>
  <h2>{{fullName}}</h2>
  <h2>{{fullName}}</h2>
  <h2>{{fullName}}</h2>


</div>
<script src="../../vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            firstname:'Huang',
          lastname:'Heby'
        },
        methods:{
          getFullName:function () {
            return this.firstname+' '+this.lastname
          }
        },
      computed:{
          fullName:function (){
            return this.firstname+' '+this.lastname
          }
      }
    })
</script>
</body>
</html>

事件监听

v-on的作用是绑定监听事件，缩写是@..

1.v-on的基本使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>$Title$</title>
</head>
<body>
<div id="app">
    <h2>{{counter}}</h2>
<!--  <button v-on:click="counter++">+</button>-->
<!--  <button v-on:click="couner&#45;&#45;">-</button>-->
  <button v-on:click="increment">+</button>
  <button @click="decrement">-</button>

</div>
<script src="../../vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
          counter:0
        },
      methods:{
          increment(){
            this.counter++
          },
        decrement(){
            this.counter--
        }
      }
    })
</script>
</body>
</html>

2.v-on的参数问题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>$Title$</title>
</head>
<body>
<div id="app">
<!--1.事件调用方法没有参数-->
  <button @click="btn1Click()">按钮1</button>
  <button @click="btn1Click">按钮1</button>
<!--2.在事件定义时，写方法时省略小括号，但是方法本身需要一个参数的，这个时候，
vue会默认将浏览器生产的event事件对象作为参数传入到方法-->
<!--<button @click="btn2Click(123)">按钮2</button>-->
<!--<button @click="btn2Click">按钮2</button>-->
  <button @click="btn2Click">按钮2</button>
<!--3.方法定义时，我们需要event对象，同时又需要其他参数-->
<!--在调用方式，如何手动获取到浏览器参数的event对象:$event-->
  <button @click="btn3Click(abc,$event)">按钮3</button>
</div>
<script src="../../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>
</body>
</html>

当通过methods中定义的方法，以供@click调用时，需要注意参数问题：

情况一：如果该方法不需要额外参数，那么方法后（）可不添加，例：btnClick

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

情况二：如果需要同时传入某个参数，同时需要event时，可以通过$event传入事件，例如btnClick（abc，event)=>$event

3.v-on的修饰符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>$Title$</title>
</head>
<body>
<div id="app">
<!--1..stop修饰符的使用:调用event.stopPropagation()停止冒泡-->
  <div @click="divClick">
       aaaaa
       <button @click.stop="btnClick">按钮</button>
</div>
<!--2..prevent修饰符的使用:调用event.preventDefault()阻止默认行为-->
<form action="baidu">
  <input type="submit" value="提交" @click.prevent="subClick">
</form>
<!--3..监听某个键盘的键帽:按下不算，键帽弹起才算-->
  <input type="text" @keyup="keyUp">
</div>
<script src="../../vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            message: '你好'
        },
      methods:{
          btnClick(){
            console.log("btnClick");
          },
        divClick(){
          console.log("divClick");
        },
        subClick(){
          console.log("subClick");
        },
        keyUp(){
          console.log("keyUp");
        },
      }
    })
</script>
</body>
</html>

事件处理中event.preeventDefault（）或event.stopPropagation()是非常常见的需求

stop：阻止事件冒泡

prevent：阻止默认事件

.enter：监听按键

.once：元素只执行一次

.native：不清楚还没学

<from v-on:submint.prevent="onSubmit"></from>//提交事件不再重载页面

条件判断

1.v-if的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <h2 v-if="isShow">
        <div>abc</div>
        <div>abc</div>
        <div>abc</div>
        <div>abc</div>
        <div>abc</div>
        <div>abc</div>
        <div>abc</div>
    {{message}}
    </h2>
</div>
<script src="../../vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            message: 'HELLO',
            isShow:true
        }
    })
</script>
</body>
</html>

2.v-if和v-else的使用

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <h2 v-if="isShow">
    <div>abc</div>
    <div>abc</div>
    <div>abc</div>
    <div>abc</div>
    <div>abc</div>
    <div>abc</div>
    <div>abc</div>
    {{message}}
  </h2>
  <h1 v-else>isShow为false时，显示我</h1>
</div>
<script src="../../vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: 'HELLO',
      isShow:true
    }
  })
</script>
</body>
</html>

3.v-if和v-else-if和v-else的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<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>
</div>
<script src="../../vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            score:99
        },
        computed:{
            result(){
                let  showMessage='';
                if (this.score>=90){
                    showMessage='优秀'
                }else if(this.score>=80){
                    showMessage='良好'
                }
            //    这是用计算属性的方法来计算的
            }
        }
    })
</script>
</body>
</html>

4.v-show的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<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="../../vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: 'HELLO',
      isShow:true
    }
  })
</script>
</body>
</html>

注：v-show可以使用多次

循环遍历

1.v-for遍历数组

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<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="../../vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      names:['why','book','james','curry']
    }
  })
</script>
</body>
</html>

2.v-for遍历对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
<!--1.在遍历对象的过程中，如果只是获取一个值，那么获取的value-->
  <ul>
    <li v-for="item in info">{{item}}</li>
  </ul>

<!--2.获取key和value 格式（val，key），key是他的变量名-->
  <ul>
    <li v-for="(value,key) in info">{{value}}-{{key}}</li>
  </ul>

<!-- 3.获取key和val和index 格式（value，key，index）-->
  <ul>
    <li v-for="(value,key,index) in info">{{value}}-{{key}}-{{index+1}}</li>
  </ul>
</div>
<script src="../../vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      info:{
        name:'why',
        age:18,
        height:188
      }
    }
  })
</script>
</body>
</html>

3.v-for使用过程添加key

<!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="../../vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            letters:['A','B','C','D']
        },
        methods:{
            btnClick() {
                //1.push方法
                //this.letters.push('aaa');
                //2.通过索引值修改数组中的元素
                this.letters[0]='BBBBBB';
            }
        }
    })
</script>
</body>
</html>

注：在渲染的过程中，key是可以让vue区分需要渲染的地方，一般推荐使用id作为key值来配合v-for使用。

4.哪些数组的方式是响应式

push（）：插入后台数据中

pop（）：删除数组中的最后一个元素

shift（）：删除数组中第一个元素

unshift（）：在数组最前面添加元素

splice（）：删除/插入/替换元素

举例下面代码：

<!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="../../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('aaa'，'bbb','ccc');

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

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

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

        //5.splice作用：删除元素/插入元素/替换元素
        //删除元素：
        //从第二个参数传入你要删除三个元素(如果没有传入，就删除所有的元素) 
        //this.letters.splice(1,3)
        //替换元素：
        //从第二个参数开始替换 
        //this.letters.splice(1,2,'aaa','bbb')
        //插入元素，
        //从第二个参数，传入0，并在后面跟上要插入的元素 
        //this.letters.splice(1,0,'x','y','z')

        //6.sort()

        //7.reverse()

        //通过索引值修改数组中的元素
        //this.letters[0]='BBBBBB';
        //this.letters.splice(0,1,'bbb')
        //set(要修改的对象，索引值，修改后的值)
        //vue.set(this.letters,0,'bbb')
      }
    }
  })
</script>
</body>
</html>

高阶函数

高阶函数的使用：fliter/map/reduce

filter:其中回调函数有个要求：必须返回一个布尔值（true：加；false：过滤）

map：更方便使用计算

reduce：总和

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

<script>
    // 编程范式：命令式对象编程/声明式编程
    // 编程范式：面向对象编程（第一个公民：对象）/函数式编程（第一公民：函数）
    // filter/map/reduce(三个高阶函数)
    // filter中的回调函数有一个要求：必须返回一个布尔值
    //true:当返回true时，函数内部会自动将这次回调的n加入新的数组中
    //false:当返回false时，函数内部会过滤这次的n

    //三个高阶函数合起来用：
    //方法一
    const nums = [10, 20, 30, 4, 2, 333, 99, 45]
    // let total =nums.filter(function (n) {
    //     return n < 50
    // }).map(function (n){
    //     return n * 2
    // }).reduce(function (preValue,n){
    //     return preValue + n
    // },0)
    // console.log(total)

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

    //filter函数的使用
    // const nums = [10, 20, 30, 4, 2, 333, 99, 45]
    // let newNums = nums.filter(function (n) {
    //
    // })
    // console.log(newNums);

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

    // 3.reduce函数的作用
    //  reduce作用对数组中所有的内容进行汇总
    //   new2Nums.reduce(参数一，参数二)，参数一是个函数
    // let total = new2Nums.reduce(function (preValue, n) {
    //     return preValue + n
    // }, 0)
    // console.log(total)
    //  第一次：preValue 0 n 20
    //  第二次：preValue 20 n 40
    //  第三次：preValue 60 n 60
    //  第四次：preValue 120 n 8
    //  第五次：preValue 128 n 4
    //  第六次：preValue 132 n 222

    //  1.需求：取出所有小于50的数字
    //   let newNums = []
    //   for(let n of nums){
    //     if(n<50){
    //       newNums.push(n)
    //     }
    //   }

    //  2.需求:将所有小于100的数字进行转化：全部*2
    // let new2Nums=[]
    //  for (let n of newNums){
    //    new2Nums.push(n*2)
    // }

</script>
</body>
</html>

v-model的使用

1.v-model的基本使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
  <input type="text" v-model="message">{{message}}</div>
<script src="../../vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: 'HELLO'
    }
  })
</script>
</body>
</html>

2.v-model的原理

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
  <input type="text" :value="message" v-on:input="change">
  <h2>{{message}}</h2></div>
<script src="../../vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: 'HELLO'
    },
      methods:{
        change(event){
            this.message=event.target.value;
        }
      }
  })
</script>
</body>
</html>

注：event.target始终指向事件发生时的元素

3.v-model结合radio类型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
  <label for="male">
    <input type="radio" id="male" name="sex" value="男" v-model="aa">男
  </label>
  <label for="female">
    <input type="radio" id="female" name ="sex" value="女" v-model="aa">女
  </label>
<!--  name相同或者绑定相同就是互斥的-->
  <h2>您选择的性别是：{{aa}}</h2>
</div>
<script src="../../vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      aa:''
    }
  })
</script>
</body>
</html>

4.v-model结合checkbox

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
<!--  1.checkbox单选框，只有布尔值-->
<!--  <label for="agree">-->
<!--    <input type="checkbox" id="agree" v-model="isAgree">同意协议-->
<!--disabled自带布尔值-->
<!--  </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">台球
  <input type="checkbox" value="棒球" v-model="hobbies">棒球
  <H2>您的爱好是{{hobbies}}</H2>
</div>
<script src="../../vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: 'HELLO',
      isAgree:false,
      hobbies:[]
    }
  })
</script>
</body>
</html>

5.v-model结合select类型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<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="../../vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: 'HELLO',
      fruit:'苹果',
      fruits:[]
    }
  })
</script>
</body>
</html>

注：radio为单选改变boolean值，多选放入数据；select单选改变初值，多选放入数组但要加multiple。

6.v-model修饰符的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
<!--  1.修饰符：lazy-->
  <input type="text" v-model.lazy="message">
  <h2>{{message}}</h2>

<!--  2.修饰符：number-->
  <input type="number" v-model.number="age">
  <h2>{{age}}-{{typeof age}}</h2>

<!--  3.修饰符：trim-->
  <input type="text" v-model.trim="name">
  <h2>您输入的名字是:{{name}}</h2>
</div>
<script src="../../vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: 'HELLO',
      age:0,
      name:''
    }
  })
</script>
</body>
</html>

lazy（懒加载）：默认是在input事件中同步输入框的数据（一般来说一旦有数据发生变换，对立的data中的数据就会自动发生变化）lazy修饰符可以让数据在失去焦点或者回车时才会更新

number：默认情况下，在输入框中无论我们输入字母还是数字，都会被当成字符串类型进行处理，number就是把它们转换成数字类型

tirm：可以过滤内容两边的空格

以上就是一个星期的学习了