Vue学习笔记03：指令：v-xxx

阿飞非
212 阅读3分钟

常用指令v-xxx

条件渲染

v-if

v-if="value"指令用于条件性地渲染一块内容。这块内容在当v-if的值为真时被渲染。

<div id="app">
    <h1 v-if="isTrue">{{message}}</h1>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            message: '看着我了吗？',
            isTrue: true
        }
</script>

v-else

使用v-else指令表示v-if的else块：

<div id="app">
    <h1 v-if="isTrue">{{message}}</h1>
    <h2 v-else>你指定没找到h1吧</h2>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            message: '找着h1了吗？',
            isTrue: true
        }
</script>

v-else-if

v-else-if充当v-if的else-if块。

<div id="app">
    <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>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            type: 'A'
        }
</script>

v-show

另一个用于根据条件展示元素的选项是 v-show 指令。
用法大致跟v-if一样，当v-show的值为真时，才会渲染元素。

<div id="app">
    <h1 v-show="ok">Hello!</h1>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            ok: true
        }
</script>

v-if vs v-show

  1. v-if是真正的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和组件会被适当地销毁与重建。
  2. v-if是懒惰的。如果初始渲染时条件为假，则什么也不做———直到条件第一次变为真时，才会开始渲染条件块。
  3. 带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS property display。

v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

列表渲染

如果要渲染一组数据，那么在Vue中可以使用v-for指令

v-for渲染数组

以<child> in <parent>的形式，child为数组的每一项子元素，也就是要被遍历的每一项；parent为数组本身。如item in list，那么，list就是一个数组，而item就是list数组里面的每一个子元素。item = list[0]、list[1]、list[2]...list[n]。

<ul id="example-1"> 
    <li v-for="item in items" :key="item.message"> 
        {{ item.message }} 
    </li> 
</ul>
<script>
var example1 = new Vue({
    el: '#example-1', 
    data: { 
        items: [ { message: 'Foo' }, { message: 'Bar' } ] 
    }
})
</script>

可以用of替代in作分隔符：

<div v-for="item of items"></div>

v-for渲染对象

<ul id="v-for-object" class="demo"> 
    <li v-for="value in object"> {{ name }}: {{ value }} </li> 
</ul>
<script>
    new Vue({ 
        el: '#v-for-object', 
        data: { 
            object: { 
                title: 'How to do lists in Vue', 
                author: 'Jane Doe', 
                publishedAt: '2016-04-10' 
            } 
        } 
    })
</script>

维护状态

当 Vue 正在更新使用 v-for 渲染的元素列表时，它默认使用“就地更新”的策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序，而是就地更新每个元素，并且确保它们在每个索引位置正确渲染。
这个默认的模式是高效的，但是只适用于不依赖子组件状态或临时DOM状态（例如表单输入值）的列表渲染输出。
为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key attribute：

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

事件监听

v-on指令用于监听dom事件，可以触发表达式或函数。 v-on的语法糖形式：@

调用方法

v-on除了可以调用表达式（@click="count++"）之外，还可以调用方法（@click='add()'）

按键修饰符

按键修饰符可以添加在事件名的后面，以.进行分隔@<事件名>.<修饰符>。

v-bind

v-bind指令用于动态地绑定一个或多个特性。

调用方法

调用方法就是在一个属性前面添加v-bind:或者:（简写）。 示例：

  1. 绑定一个图片src属性
<img :src="imgSrc" />
<!-- 拼接 -->
<img :src="http://www.xxx.com/ + 'imgSrc" />
  1. 绑定一个a标签的href链接
<a :href="aHref"> 这是一个链接 </a>

<script>
  data () {
    return {
      aHref: 'xxxxx'
    }
  }
</script>
  1. 绑定一个对象
<img :src="img.url" />

<a :href="img.url"> 这是一个链接 </a>

<script>
  return {
    img: {
      url: 'xxxx'
    }
  }
</script>
  1. 绑定一个数组
<!-- 0 为角标 代表第一项 -->
<img :src="img[0].url" />

<a :href="img[1].url"> 这是一个链接 </a>

<script>
  return {
    img: [
      {
        url: 'imgUrl.com'
      },
      {
        url: 'a.com'
      }
    ]
  }
</script>

v-model

v-model用来绑定

- <input>
- <select>
- <textarea>
- components

用法

v-model用来创建双向数据绑定，可以监听表单的输入，并自动更新数据，所以叫双向数据绑定。

修饰符

  1. .lazy：默认情况下，每次监听到输入值后通过input事件，v-model都会自动同步更新。而使用.lazy后，v-model会改为使用change事件，变为失去焦点后，进行同步。
  2. .number：该修饰符可以让用户输入的值转换为数值类型。.number修饰符需要搭配<input>标签的 type="number"属性一起使用！
  3. .trim：可以自动过滤用户输入的首尾空白字符。

其它的参考官网

avatar
文章
阅读
粉丝