【Vue模板语法】

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>

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

【Vue模板语法】

1. 插值

2. 指令

3. 过滤器

4. 插值事件绑定

BLUE

引用和评论

【GIS数学基础】-06圆锥投影

前端如何入门 Go 语言

100个React最佳实践小技巧

前端开发工具

开发插件集合

JS校验身份证号

Jerry和您聊聊Chrome开发者工具