个性化阅读
专注于IT技术分析

Vue.js框架快速入门简明教程(一):模板语法和实例详解

Vue.js的模版语法是基于HTML的模版语法,允许开发者将声明了的DOM绑定到vue.js底层并渲染DOM结构。这篇文章让我们结合例子更加深入学习vue.js的模版语法内容。

一. 插值

1、插入文本

Vue.js最常用的是{{…}}大括号的形式进行文本插值。

实例:由于绑定了message字段,最终显示出来的信息是data里面对应message信息,html显示文本随message变化而变化。

<div id="app">
    <p>{{message}}</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'">{{message}}</p>
vue插入表达式

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

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

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

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

4、插入表达式

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

例如:

<p :class="classA ? 'class-a' : 'class-b' ">{{5*3}}</p>
vue插入属性图例2

二. 指令

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

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

        }
    })
</script>
vue指令图例

1、参数

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

例如:属性的绑定

<p v-bind:class="bg">{{message}}</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>{{ message }}</p>
<input v-model="message">

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

四. 过滤器

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

<div id="app">
    {{ message | capitalize }}
</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.js前端框架中的模版语法的详细教程了解析,在整理这份教程的过程中我也重新学习了很多,对vue.js有个新的认识。希望这篇文章可以带给你思考。

赞(0) 打赏
未经允许不得转载:srcmini » Vue.js框架快速入门简明教程(一):模板语法和实例详解
分享到: 更多 (0)

评论 抢沙发

评论前必须登录!

 

觉得文章有用就打赏一下文章作者

微信扫一扫打赏