Vue 模板的功臣 · 指令

Vue 模板中,「指令」犹如一条命令,让 Vue 干啥就干啥,Vue 总是哈腰点头,为模板服务着。

1v-if、v-else-if、v-else活要挑着干

某个 HTML 元素要在指定的条件下才能渲染,v-if、v-else-if 需要指定一个条件,这个条件是一个表达式或者是计算属性,但是不能是过滤器,只有在 truthy 的时候才会渲染。

在 JavaScript 中,truthy(真值)指的是在布尔值上下文中,转换后的值为真(true)的值。所有值都是真值,除非它们被定义为 假值(即除 false、0、""、null、undefined 和 NaN 以外皆为真值)

Vue虚拟实验室 · @ivan

<body>
    <div id="app">
        <!-- <div v-if="state | showState">下载状态:{{ state }}</div> -->
        <div v-if="state === 0">下载</div>
        <div v-else-if="state === 1">正在下载</div>
        <div v-else-if="state === 2">已下载</div>
        <div v-else="state === 3">下载失败</div>
        <!-- 计算属性 -->
        <div v-if="invalid">下载状态异常</div>
    </div>
    <script>
        const obj = {
            el: '#app',
            data: function () {
                return {
                    title: '前端小课',
                    state: 5
                }
            },
            computed: {
                invalid() {
                    return this.state < 0 || this.state > 3;
                }
            },
            filters: {
                showState(state) {
                    return !(this.state < 0 || this.state > 3);
                }
            }
        }
        const vm = new Vue(obj);
</script>
</body>

2遇到重复劳动,聪明点,要想到 v-for

即可渲染数组,也可渲染对象。在数组渲染中有一个 key,可以避免元素复用时数据错误。

<body>
    <div id="app">
        <!-- 数组 -->
        <p v-for="(title, index) in list" :key="index">{{ title }}</p>
        <!-- 对象 -->
        <p v-for="(v, k, i) in me">{{ i }} - {{ k }}: {{ v }}</p>
    </div>
<script>
        const obj = {
            el: '#app',
            data: function () {
                return {
                    list: ['前端小课','Vue 虚拟实验室','素燕'],
                    me: {
                        fe: '前端小课',
                        vue: 'Vue 虚拟实验室',
                        name: '素燕'
                    }
                }
            }
        }
        const vm = new Vue(obj);
</script>
</body>

3显示隐藏一把好手 v-show

图来自 vue.js 官方:

4一次就够 v-once

title 变化不会引起 div 元素内容的改变。

<!-- v-once 只更新一次 -->
<div v-once>{{ title }}</div>

5我想显示 HTML, v-html

有时候想把 HTML 字符串当做普通的字符串,而有时候却想让 HTML 字符串直接渲染,咋么办?

<!-- html 会被当做普通的问题 -->
<p>{{ rawHtml }}</p>
<!-- html 会被解析 -->
<span v-html="rawHtml"></span>


<script>
    const obj = {
        el: '#app',
        data: function () {
            return {
                rawHtml: '<span style="color:red">我是 HTML</span>'
            }
        }
    }
    const vm = new Vue(obj);
</script>

6彼此含情脉脉,形影不离 v-model

双向绑定离不开 v-model,比如输入框输入文字,并实时显示到屏幕上。下面的例子来自:「Vue虚拟实验室 · @两块牛排

<div id="app">
  <input v-model="message">
  <p>{{ message }}</p>
</div>


<script>
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello'
  }
})
</script>

7要显示啥交给我,v-text

<span v-text="msg"></span>
<!-- 和下面的一样 -->
<span>{{msg}}</span>

8你要是想动,请告诉我 v-bind

如果想给 HTML 元素动态绑定属性,需要通过 v-bind 指令来实现。比如这节内容 让 Class 与 Style 动起来 提到的 :class,:style,其实使用的都是 v-bind 指令,如果想动态修改 HTML 元素属性,请使用 v-bind 指令。

<a v-bind:href="link">前端小课</a>
// 也可以使用缩写:
<a :href="link">前端小课</a>

9最近发生了大事,赶快听听 v-on

v-on 主要负责监听事件,事件发生后可以调用 methods 中定义的方法。可以监听到哪些事件呢?通常 HTMLElement 所支持的事件,都能够监听,比如 touchstart、onscroll、load 等事件。如果想阻止事件冒泡,可以使用指令的修饰符。

<div v-on:click="clickMe">点击</div>
// 也可以缩写
<div @click="clickMe">点击</div>

总结

本文概括性地说明了各个指令的使用。这些指令都是 Vue 框架自身提供的,其实也可以自定义 Vue 指令。

大家加油!


推荐阅读:

动静结合 · Vue 模板
让 Class 与 Style 动起来

发布了141 篇原创文章 · 获赞 1 · 访问量 2725
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 数字20 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览