web前端开发个人技术博客
当前位置: JavaScript > [Vue教程]模板语法

[Vue教程]模板语法

2019-01-07 分类:JavaScript 作者:码云 阅读(3568)

在上篇文章《[Vue教程]第一个vue的应用》中介绍了vue的第一个应用,本章内容是关于vue的模板语法的学习,在上节demo中介绍了CDN的去使用vue库,可以让我们很方便的去构建起vue的这样一个应用,接下来我们先认识Vue文件结构(templete、script、style),然后介绍模板语法包含插值、指令写法(包含指令缩写),一起来看一下demo。

1
2
3
4
5
6
7
8
9
10
<div id="app">
    <div class="bg">
        Hello World!
        {{msg}}
    </div>
    <div class="bg">
        {{msg}}
        {{count}}
    </div>
</div>

javascript代码

1
2
3
4
5
6
7
new Vue({
    el:'#app',
    data: {
        msg: 'Hello Vue!',
        count: 0
    }
})

这里我们新传入了一个变量count,在页面上展示效果:

新传入了一个变量count

然后我们也可以将{{count}}放出来写:

1
2
3
4
5
6
7
8
9
10
<div id="app">
    <div class="bg">
        Hello World!
        {{msg}}
    </div>
    <div class="bg">
        {{msg}}
    </div>
    {{count}}
</div>

效果展示:

[Vue教程]模板语法

当然我还可以对count做一些运算,比如{{count + 1}}

对count做一些运算

来些更复杂的运算:

1
{{ (count + 1) * 10}}

在这个运算中可以包含javascript中的运算表达式,它也还能包含什么呢?

1
2
3
4
5
6
7
8
9
10
11
<div id="app">
    <div class="bg">
        Hello World!
        {{msg}}
    </div>
    <div class="bg">
        {{msg}}
    </div>
    {{ (count + 1) * 10}}
    {{template}}
</div>

Javascript代码:

1
2
3
4
5
6
7
8
new Vue({
    el:'#app',
    data: {
        msg: 'Hello Vue!',
        count: 0,
        template: '<div>hello template</div>'
    }
})

效果如下:

javascript中的运算表达式

从上图看出来,页面输出的不是“hello template”这段话,而是整个“hello template”的div元素,如果我们想要在页面上输出这段话而不是代码怎么做呢?
这里有个指令方法“v-html” 。

在vue官网上对它解释的是更新元素的 innerHTML 。
注意:内容按普通 HTML 插入 - 不会作为 Vue 模板进行编译 。如果试图使用 v-html 组合模板,可以重新考虑是否通过使用组件来替代。

1
<div v-html="template"></div>

这样在页面上就可以完整输出template内容了:

完整输出template内容

加入我们页面上有一个链接连接到我们码云笔记。

1
<a href="https://www.mybj123.com/">码云笔记</a>

用vue怎么写呢?这里我们要介绍v-bind指令了。
用法:
动态地绑定一个或多个特性,或一个组件 prop 到表达式。
在绑定 class 或 style 特性时,支持其它类型的值,如数组或对象。可以通过下面的教程链接查看详情。
在绑定 prop 时,prop 必须在子组件中声明。可以用修饰符指定不同的绑定类型。
没有参数时,可以绑定到一个包含键值对的对象。注意此时 class 和 style 绑定不支持数组和对象。
所以我们可以这样写,用v-bind传入一个URL属性,URL属性放到data中。

1
<a v-bind:href="url"></a>

Javascript代码:

1
2
3
4
5
6
7
8
9
new Vue({
    el:'#app',
    data: {
        msg: 'Hello Vue!',
        count: 0,
        template: '<div>hello template</div>',
        url: 'https://www.mybj123.com/'
    }
})

这样做有一个好处就是页面上所有变量都可以包含在vue的data这个对象里面,我们对这些变量做一些管理,后面我们也可以做一些变更,比如说我在页面上加一个按钮,然后往这个按钮上绑定一个事件,这就要用到vue的v-on指令了,我们给它绑定一个click事件,click事件对应一个submit方法,那么在vue里面怎么实现这个方法呢?

HTML代码:

1
<button type="button" v-on:click="submit()"></button>

Javascript代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
new Vue({
    el:'#app',
    data: {
        msg: 'Hello Vue!',
        count: 0,
        template: '<div>hello template</div>',
        url: 'https://www.mybj123.com/'
    },
    methods: {
        submit: function () {
            this.count ++
        }
    }
})

我们来看一下效果:

click事件对应一个submit方法

每次我们点击加数字按钮,数字相应的都会增加,这就相当于我们点击按钮触发click事件,click事件对应的是一个submit方法,这个方法执行的一个过程就是变量count加1,这里的this对应的就是Vue这个对象。

这里的v-on还有一个缩写方法就是“@”符号代替,那么v-bind缩写就是冒号“:”

1
2
<a :href="url"></a>
<button type="button" @v-on:click="submit()">加数字</button>

总结

这篇内容我们将会学到Vue文件结构,然后认识到了Vue的模板语法,插值语法{{msg}}、数据、js表达式,最后演示了一下Vue的指令方法v-bind绑定一些属性和v-on是绑定事件的,以及它们的一些缩写方式,比如绑定属性好、可以用冒号“:”:href,绑定事件缩写方式@click。

「本文为原创文章,版权归码云笔记所有,欢迎分享本文,转载请保留出处!」

赞(3) 打赏

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

支付宝
微信
3

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

支付宝
微信

上一篇:

下一篇:

你可能感兴趣

共有 2 条评论 - [Vue教程]模板语法

  1. July Linux Chrome 62.0.3202.84

    正在学vue,哈哈

    1. 码云 Windows 7 Chrome 69.0.3497.100

      @July互相交流

博客简介

码云笔记: mybj123.com,一个关注Web前端开发技术的博客,主要记录和总结前端工作中常用的知识及我的生活。
更多博客详情请看关于博客

精彩评论