Vue 条件渲染 列表渲染 事件处理 表单输入绑定

#条件渲染

v-if 指令用于条件性的渲染一块内容.这块内容只会在指令的表达式返回truthy值的时候被渲染.

h1 v-if="awesome">Vue is awesome!</h1>

也可以使用v-else 添加一个 'else' 块

<h1 v-if="awesome">Vue is awesome!</h1>
<h1 v-else>Oh no 😢</h1>

指令概括:

v-if

v-else-if

v-else-if

v-else

用法:

<div v-if="type === 'A'">
  A
</div>
<div v-else-if="type === 'B'">
  B
</div>
<div v-else-if="type === 'C'">
  C
</div>
<div v-else>
  Not A/B/C
</div>

v-if 与v-show的区别:

v-if:真干活,真渲染,不满足条件,html 树上,就没有该 节点.

v-show:假干活,真偷懒,只是简单地 控制元素的 display 属性,在html树上是 可以看到的.

如果,html 上的某个模块很重要,不满足条件,不显示的话,请用 v-if,这样就能保证不会通过 调试方式 拿到 越权信息.

如果信息不重要,且切换频繁,可以用 v-show,这方便显示,减少渲染开销.

v-if 与v-for的 使用:

v-if 与v-for 不要同时使用在 同一个元素 节点上.

如果控制某个列表显示与否,可以将 v-if 用在 v-for 节点的上一个节点,或者更上层节点上.

 

#列表渲染

用v-for 来渲染列表,这是最常用的 操作,没有之一.

语法形式:

v-for ='item in items '  :key='item.message'

例:

<ul id="example-1">
  <li v-for="item in items" :key="item.message">
    {{ item.message }}
  </li>
</ul>

var example1 = new Vue({
  el: '#example-1',
  data: {
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]
  }
})

在 v-for 块中，我们可以访问所有父作用域的 property。v-for 还支持一个可选的第二个参数，即当前项的索引。

<ul id="example-2">
  <li v-for="(item, index) in items">
    {{ parentMessage }} - {{ index }} - {{ item.message }}
  </li>
</ul>

var example2 = new Vue({
  el: '#example-2',
  data: {
    parentMessage: 'Parent',
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]
  }
})

这里面的parentMessage 是父作用域的 property.

在 v-for 里使用对象:使用 v-for 来遍历一个对象的 property(属性)。

v-for 的状态维护,使用key 完成,

<div v-for="item in items" v-bind:key="item.id">
  <!-- 内容 -->
</div>

建议尽可能在使用 v-for 时提供 key attribute，除非遍历输出的 DOM 内容非常简单，或者是刻意依赖默认行为以获取性能上的提升。

 

在v-for里使用值范围, v-for 也可以接受整数。在这种情况下，它会把模板重复对应次数。

<div>
  <span v-for="n in 10">{{ n }} </span>
</div>

在<template>上使用v-for

可以使用使用v-for 来渲染一段包含多个元素的 <template>元素.

<ul>
  <template v-for="item in items">
    <li>{{ item.msg }}</li>
    <li class="divider" role="presentation"></li>
  </template>
</ul>

 

#事件处理

可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。

<div id="example-1">
  <button v-on:click="counter += 1">Add 1</button>
  <p>The button above has been clicked {{ counter }} times.</p>
</div>

var example1 = new Vue({
  el: '#example-1',
  data: {
    counter: 0
  }
})

说明:示例中的 counter +=1 是一个JavaScript语句,counter 是通过vue实例化的 响应变量.

事件处理方法

一般事件会包含复杂的处理逻辑,向上面的例子直接将 JavaScript代码写在v-on的指令中是不可行的,

处理方法: v-on 指令可以接收一个 调用的方法名称

<div id="example-2">
  <!-- `greet` 是在下面定义的方法名 -->
  <button v-on:click="greet">Greet</button>
</div>

var example2 = new Vue({
  el: '#example-2',
  data: {
    name: 'Vue.js'
  },
  // 在 `methods` 对象中定义方法
  methods: {
    // 定义的方法
　　　greet: function (event) {
      // `this` 在方法里指向当前 Vue 实例
      alert('Hello ' + this.name + '!')
      // `event` 是原生 DOM 事件
      if (event) {
        alert(event.target.tagName)
      }
    }
  }
})

// 也可以用 JavaScript 直接调用方法 
example2.greet() // => 'Hello Vue.js!'

内联处理器中的方法

除了直接使用方法名调用以外,可以在内联JavaScript语句中调用方法:

<div id="example-3">
  <button v-on:click="say('hi')">Say hi</button>
  <button v-on:click="say('what')">Say what</button>
</div>

new Vue({
  el: '#example-3',
  methods: {
    say: function (message) {
      alert(message)
    }
  }
})

注意区别:

上面调用say('hi') 方法的根本方式是,使用了JavaScript 语句的 执行,实现了方法的调用.

并通过上述方式,实现了函数调用时 的传值的目的.

函数不能不需要传值的,传值是一个很重要的需求.

在内联语句中处理原始的DOM时间,可以使用特殊变量$event把它传入方法:

<button v-on:click="warn('这是一句警告贴提示', $event)">
  Submit
</button>

// ...
methods: {
  warn: function (message, event) {
    // 现在我们可以访问原生事件对象
    if (event) {
      event.preventDefault()
    }
    alert(message)
  }
}

 

#表单输入绑定

可以使用v-model指令在表单<input> <textare> <select>  等元素上创建元素双向数据绑定.

#文本

<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>

v-model 的作用是干嘛的呢?

表单数据的双向绑定有啥用呢?

 这个后面在回答这个问题!