VUE模板语法快速入门教程

 

学习一门语言最重要的就是语法,无论是编程语言还是其他语言。每个框架也有自己的语法,所以本章来介绍vue模板语法。废话少说。

一.插值

1、插入文本

Vue.js最常用的是``大括号的形式进行文本插值。 实例:由于绑定了message字段,最终显示出来的信息是data里面对应message信息,html显示文本随message变化而变化。

<div id="app">
    <p></p>
</div>
</body>
<script>
    new Vue({
        el: '#app',
        data: {
            message: 'hello world!'
        }
    })
</script>

2、插入HTML

Html只是本文的另外一种表达形式,既然可以绑定文本,那同行也可以绑定html,vue.js中用到v-html指令来标示绑定的是html格式的文本。

<p v-html="message"></p>
data: {
    message: '<p>亲,上午好</p>'
}

3、插入属性

Vue.js指令以 v- 前缀标示,属性绑定的指令 v-bind:属性名, 简写为 :属性名。 简单的数据绑定是如下:直接绑定字符串

<p v-bind:class="'bg'"></p>

虽然v-bind:class 支持string类型,但是vue.js不建议这样使用,因为string值是固定不变的,无法实现动态改变class的需求。 v-bind:class 支持数据变量,当变量值改变时,将同时更新class。v-bind:class指令的值限定为绑定表达式,如javascript表达式。

<p v-bind:class="bg"></p>

<script>
    new Vue({
        el: '#app',
        data: {
            message: 'vue.js绑定属性',
            bg:'bg-a'
        }
    })
</script>

同样的道理,既然v-bind:class指令绑定的可以是javascript表达式,那也可以是一个对象,一个数组。

4、插入表达式

Vue.js 的核心是一个响应的数据绑定系统,因此Vue.js 都提供了完全的 JavaScript 表达式支持。 例如:

<p :class="classA ? 'class-a' : 'class-b' "></p>

二.指令

在vue.js的语法中,使用v-作为前缀的指令属性,执行vue.js中的特殊命令。指令用于在表达式的值改变时,将某些行为应用到 DOM 上。

<p v-show="seen"></p>
<script>
    new Vue({
        el: '#app',
        data: {
            message: 'vue.js绑定属性',
            seen:false

        }
    })
</script>

1、参数

参数在指令后以冒号指明,用于指明vue.js操作的是哪个DOM操作,以响应地更新 HTML。 例如:属性的绑定

<p v-bind:class="bg"></p>

2、修饰符

Vue.js修饰符是以半角句号 “.” 指明的特殊后缀,用于指出一个指令应该以特殊方式绑定。Vue.js的修饰符可以归纳为有“事件修饰符”和“按键修饰符” 例如:


<!-- 阻止单击事件doThis -->
<a v-on:click.stop="doThis"></a>
<!-- 修饰符可以串联-->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 按键修饰符-->
<input v-on:keyup.13="submit">

三.用户输入

Vue.js可以通过input输入框和v-model异步双向数据绑定。 例如:

<p></p>
<input v-model="message">

当v-model中有输入的时候,p标签中及时更新数据,当p标签中定义了数据时,v-model的值也是p中定义的数据,这就是vue.js的双向数据绑定。v-model 指令用来在表单控件元素上创建双向数据绑定,根据表单上的值,自动更新绑定的元素的值。

四.过滤器

Vue.js过滤器用于双花括号插值和v-bind表达式中。过滤器其实是一个函数名,接收前面的返回值进行相应的操作,过滤器是可以叠加的。比如:

<div id="app">
    
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            message: 'vue.js过滤器'
        },
        filters: {
            capitalize: function (value) {
                if (!value) return ''
                return "1212"
            }
        }
    })
</script>

过滤器函数接收的第一个值,本例中是message,后面过滤器接收前面过滤器的返回值。过滤器接受前面的返回的值后执行函数capitalize 。capitalize 是个带参函数,参数就是message的返回值。本例中的结果是把字符串装换位数字。

五.缩写

Vue.js 为两个最为常用的指令提供了特别的缩写,分别是v-bind缩写 和v-on缩写,在同时进行多个绑定时改写成缩写的形式显得简洁和避免发生冲突。

1、v-bind缩写

例如:


<!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>

2、v-on缩写

例如


<!-- 完整语法 -->
<a v-on:click="doSomething"></a>
<!-- 缩写 -->
<a @click="doSomething"></a>

以上是vue模板语法的基本用例,了解这些即使你没时间看完vue教程文档,也能看懂或者写出。 更多vue知识学习推荐阅读:

vue element-UI实现分页查询

vue之Mixins混入结合图例易理解

前端引入模板的4种方法

vue之计算属性和监听属性——快速入门

vue如何创建路由vue-router

本文为博主原创文章,知识共享,开源精神,转载注明出处。