vue 基础

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第27天，点击查看活动详情

vue 基础

指令绑定

• vue 使用 v-bind 绑定属性，表示该属性内容从 vue-data 中加载。可以用 : 代替。
• vue 使用 v-on 绑定事件，表示该事件从 vue-methods 中加载。可以用 @ 代替。

<input type=button value="按钮" v-bind:title="message" v-on:click="show">

<!-- img 标签的 src 属性使用插值表达式绑定 -->
<img class="box" src="{{url}}" >

<!-- 判断是否使用 textColor 和 textSize 类 -->
<div class="box" :class="{'textColor':isColor, 'textSize':isSize}">Copy to clipboardErrorCopied

JS 默认属性均为字符串，但 vue 绑定属性能自动识别数据为数值、布尔型、数组或对象。

可绑定事件

@click 点击事件

事件修饰符

当父级元素和子级元素被同一个事件触发指令时，会先执行子级元素的指令，再执行父级元素的指令。

• .prevent 阻止事件默认行为（比如超链接点击跳转，表单点击提交）。
• .stop 阻止冒泡调用，不再执行父级的指令。
• .capture 捕获调用，先执行父级的指令再执行子级的指令。
• .self 该指令只有元素本身被点击才执行，不会被子级的指令冒泡调用。
• .once 事件只触发一次，被触发后该指令无效。

表单输入绑定

Vue 使用单向绑定机制：后台数据发生改变后，页面显示会自动同步；但如果页面中表单输入发生变化，后台数据不会发生更新。

vue 使用 v-model 实现双向绑定。运用于表单输入元素，输入发生变化后台数据也会实时更新。

<input v-model="age" type="number">Copy to clipboardErrorCopied

表单域修饰符

• number 转化为数值
• trim 去掉首尾空格
• lazy 鼠标离开输入元素后才更新（验证用户名是否已被使用时常用）

条件渲染

对于 布尔数据

<script>
  new Vue({
    el:'#app',
    data:{
      existA:false,
      existB:true,
      surface:true
    }
  });
</script>Copy to clipboardErrorCopied

<p v-if="existA">你好，我是A</p>
<p v-else-if="existB">你好，我是B</p>  
<p v-else v-show="surface">不好意思，A和B都不在</p>Copy to clipboardErrorCopied

• v-if: boolean 数据判断是否绘制元素
• v-show: boolean 数据判断是否显示 / 隐藏元素

列表渲染

对于 数组数据

<script>
  var vm = new Vue({
    el:'#app',
    data:{
      list:[1,2,3,4,5,6],
      user:{
        id:1,
        name:'王东浩'
      },
      userList:[
        {id:1, name:'zs1'},
        {id:2, name:'zs2'},
        {id:3, name:'zs3'}
      ]
    }
  });
</script>Copy to clipboardErrorCopied

• v-for: 迭代显示列表(List)元素

  • 普通数组：<p v-for="(item,index) in list">索引值是{{i}}，内容为{{item}}</p>
  • 对象键值对：<p v-for="(val,key,index) in user">键是{{key}}，内容为{{val}}</p>

数组 (item,index) 第一个属性为内容；第二个属性为索引。 键值 (val,key,index) 第一个属性为内容；第二个属性为键名；第三个属性为索引。

<!--对象数组-->
<tr :key='user.id' v-for='user in userList'>
  <td>{{user.id}}</td>
  <td>{{user.name}}</td>
</tr>Copy to clipboardErrorCopied

为方便管理元素，一般需要为每项绑定一个唯一的 key 属性： <p v-for="item in user" :key="item.id">用户的名字为{{item.name}}</p>

可以用于循环固定次数：<p v-for="count in 10">这是第{{count}}次循环</p>

数组数据更新操作(API)

• push
• pop

以上操作直接对原有数组进行修改，页面也会随数据变化实时更新。

• filter

以上操作会产生新的数组，返回值需要重新赋值去更新页面。

Vue.set(vm.list,1,'new data') 或者 Vm.$set(vm.list,1,'new data')

响应式修改数组元素