11.5 Vue

目录

1.概述

2.简单结构

3.常用指令

1).v-model 数据双向绑定

2).v-on 页面元素绑定事件 

3).v-for指令实现对数组、对象的遍历

4).v-if(v-else)

5).v-show

4.数组操作方法

---

1.概述

一套用于构建用户界面的渐进式JavaScript框架

2.简单结构

<div id="app">
{{msg}}
</div>
<script>
  new Vue({
    el:"#app",
    data:{
       msg:'hello'
    },
    methods:{}
  })
</script>

{{}}页面获取data中显示数据 

3.常用指令

1).v-model 数据双向绑定

 {{message}} 会根据输入框 input 的改变而改变 

<div id="app">
  <p>{{ message }}</p>
  <input v-model="message">
</div>
<script>
  new Vue({
    el:"#app",
    data:{
       message: 'hello'
    },
    methods:{}
  })
</script>

2).v-on 页面元素绑定事件 

v-on:事件名="函数名"  简写形式==> @事件名="函数名"

例：v-on:click="open",点击事件； @blur="open",失去焦点时触发的事件

方法写在methods中

3).v-for指令实现对数组、对象的遍历

1）遍历数组

        语法:v-for="item in items"

items:要遍历的数组,需要在vue中data定义

item:循环变量

2）遍历对象

<div v-for="user in users">
  {{user.name}}
  {{user.age}}
  {{user.gender}}
</div>

​​​​​​​<div v-for="(user,index) in users">//index为下标
  {{index+1}}
  {{user.name}}
  {{user.age}}
  {{user.gender}}
</div>

4).v-if(v-else)

<div v-for="user in users" v-if="user.gender=='男'" style="background: orange">
    {{user.name}}
  </div>
  <div v-else="user.gender=='女'" style="background: palegreen">
    {{user.name}}
  </div>

5).v-show

v-show作用与v-if类似

区别：v-if在条件不满足的时候元素不会存在；v-show条件不满⾜的时候只是对元素进行隐藏。

4.数组操作方法

1.push():添加元素

2.pop():删除元素，删除最后的元素

3.splice(index,1):根据index删除数组中⼀个元素

4.sort():排序元素

5.reverse():反转元素