【Vue模板语法】

0

Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML ,所以能被遵循规范的浏览器和 HTML 解析器解析。


1. 插值

插值也就是将数据插入到html文档中,包含 文本、html元素、元素属性等

1.1 文本插值
文本插值中用得最多的就是用双大括号的形式。

<body>
    <div id="app">
        <h1>{{msg}}</h1>
    </div>
</body>

<script>
    let vm = new Vue({
        el: "#app",
        data: {
            msg: "BLUE"
        }
    })
</script>

上面代码中的 msg 会与实例中的【data】中的属性绑定在一起,并且数据实现同步,也就是说当【data】中的值更新之后我们不需要操作html,页面中会自动更新数据。

我们也可以让数据只绑定一次,在以后更新【data】中的属性时不再更新页面数据

<body>
    <div id="app">
        <h1 v-once>{{msg}}</h1>
    </div>
</body>

<script>
    let vm = new Vue({
        el: "#app",
        data: {
            msg: "BLUE"
        }
    })
</script>

上面代码中页面只会呈现“BLUE”,当我改变【data】中的 msg 属性值时,页面将不再刷新。

【注意】上面以双大括号的形式进行的插值都会被转换成字符串,如果要插入的是html元素,使用下面这样的方式。

1.2 HTML插值
在 Vue1.0 中HTML插值使用的是三个大括号的形式,但是在 Vue2.0 中这样的形式不能使用了,需要使用 v-html 指令

<body>
    <div id="app">
        <h1 v-html="msg"></h1>
    </div>
</body>

<script>
    let vm = new Vue({
        el: "#app",
        data: {
            msg: "<span style='color:blue'>BLUE</span>"
        }
    })
</script>

上面代码将 msg 属性值作为html元素插入到了 h1 标签的子节点中,页面呈现如下
图片描述

【注意】在页面上动态的渲染html是一件很危险的事情,因为它很容易导致 XSS 攻击 (跨站脚本攻击)

1.3 属性插值
要将属性绑定到html元素中,使用文本插值的形式是行不通的,但是类似 HTML插值,属性插值也有自己的指令 【v-bind:】

<body>
    <div id="app">
        <h1 v-bind:id="did"></h1>
    </div>
</body>

<script>
    let vm = new Vue({
        el: "#app",
        data: {
            did: "name"
        }
    })
</script>

上面代码使用了【v-bind:】实现了对属性的插值运算,最终的结果也就是 h1 标签中有了一个id=name,我们几乎可以对所有的html属性按照这样的方式进行插值运算。

<body>
    <div id="app">
        <h1 v-bind:id="did" v-bind:name="dname" v-bind:title="dname"></h1>
    </div>
</body>

<script>
    let vm = new Vue({
        el: "#app",
        data: {
            did: "name",
            dname: "Blue"
        }
    })
</script>

上面的代码都会按照我们的预期进行页面渲染。

【提示】由于我们对属性的插值使用得相当的多,所以Vue考虑到了书写的方便,为我们提供了简写形式,也就是直接只写一个冒号 【:】进行插值运算

<body>
    <div id="app">
        <h1 :id="did" :name="dname" :title="dname"></h1>
    </div>
</body>

<script>
    let vm = new Vue({
        el: "#app",
        data: {
            did: "name",
            dname: "Blue"
        }
    })
</script>

上面这段代码和之前使用的【v-bind:】的运行结果是一样的。

1.4 插值中使用Javascript表达式
插值运算如果只是进行值的插入那我们就想得太简单了,在插值运算中我们还可以应用Javascript表达式对插入的值进行处理。

<body>
    <div id="app">
        <h1 :id="'id-'+did">{{name.toUpperCase()}}</h1>
        <!-- <h1 id="id-name">BLUE</h1> -->
    </div>
</body>

<script>
    let vm = new Vue({
        el: "#app",
        data: {
            name: "blue",
            did:"name"
        }
    })
</script>

上面代码在插值中使用Javascript表达式对插值进行了处理。
【注意】这里运用的只能是单个表达式或者链式调用,但是不能是语句

<body>
    <div id="app">
        <h1>{{var a=1}}</h1>
    </div>
</body>

上面代码是会报错的,因为插值中使用的是语句,而不是表达式。


2. 指令

指令其实在上面我们已经使用过了【v-bind:】和【v-html】,指令就是值这些带有 v- 前缀的特殊属性。指令属性的值预期是单一 JavaScript 表达式(除了 v-for)。指令的职责就是当其表达式的值改变时相应地将某些行为应用到 DOM 上。

2.1 指令参数
一些指令时能够接收参数的,比如我们用于属性绑定的【v-bind】

<body>
    <div id="app">
        <h1 v-bind:id="did"></h1>
    </div>
</body>

上面代码中 id 就是 v-bind 指令的参数,告知v-bind指令将id 和 did 的值绑定到一起。

2.2 修饰符
修饰符(Modifiers)是以半角句号 . 指明的特殊后缀,用于指出一个指令应该以特殊方式绑定。例如,.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault():

<form v-on:submit.prevent="onSubmit"></form>

关于【v-on】指令,待会儿再说。


3. 过滤器

我们知道可以在插值运算中使用表达式,但是表达式能力毕竟有限,有时我们需要对插值进行更复杂的处理之后呈现在html中,那么我们就需要使用到过滤器了。

过滤器有两个使用的地放【插值】和【v-bind】中

<body>
    <div id="app">
        <h1>{{name | myfilter}}</h1>
        <!-- <h1>EULB</h1> -->
    </div>
</body>

<script>
    let vm = new Vue({
        el: "#app",
        data: {
            name: "BLUE"
        },
        filters: {
            myfilter(value) {
                let _arr = [...value];
                return _arr.reverse().join('');
            }
        }
    })
</script>

上面代码中定义了一个myfilter的过滤器,将值进行反转输出。

在构造函数 Vue 的参数对象中有一个【filters】属性,该属性是一个对象,对象中以方法的形式定义过滤器,方法名也就是过滤器名称,方法的参数也就是插值的值,在过滤器中队值进行处理后返回。

过滤器还可以串联,在一个插值中使用多个过滤器。

<body>
    <div id="app">
        <h1>{{name | touppercase | myfilter}}</h1>
        <!-- <h1>EULB</h1> -->
    </div>
</body>

<script>
    let vm = new Vue({
        el: "#app",
        data: {
            name: "blue"
        },
        filters: {
            myfilter(value) {
                let _arr = [...value];
                return _arr.reverse().join('')
            },
            touppercase(value) {
                return value.toUpperCase();
            }
        }
    })
</script>

上面代码插值中使用了两个串联的过滤器,过滤器左至右依次执行,先转换成了大写,然后再进行了反向的操作。


4. 插值事件绑定

上面我们提到可以使用指令的方式绑定属性,其实事件我们也可以通过一个特殊的指令进行绑定,这个指令就是【v-on】,他和原生Javascript的事件前缀 on 是一个意思。

<body>
    <div id="app">
        <input type="button" value='单击' v-on:click="doSomething">
    </div>
</body>

<script>
    let vm = new Vue({
        el: "#app",
        methods: {
            doSomething() {
                //单击事件业务
            }
        }
    })
</script>

原生Javascript中的所有事件都可以通过这样的方式进行绑定,由于【v-on】的使用频率非常高,所以Vue为我们提供了简写形式,用【@】代替【v-on】,于是下面代码和上面一段代码是等效的。

<body>
    <div id="app">
        <input type="button" value='单击' @click="doSomething">
    </div>
</body>

<script>
    let vm = new Vue({
        el: "#app",
        methods: {
            doSomething() {
                //单击事件业务
            }
        }
    })
</script>

上面代码也就是使用了简写【@】进行事件绑定,建议使用简写的形式,提高开发效率。


如果觉得我的文章对你有用,请随意赞赏

你可能感兴趣的

载入中...