码云笔记提示:你现在浏览的网站是镜像网站

请访问原网站:www.mybj123.com
声明:码云笔记唯一指定网址为:mybj123 .com,其他网址均为冒充,望周知!!!前端技术交流群:565733884

[Vue教程]模板语法

Vue教程 码云 294℃ 0评论

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

<div id="app">
    <div class="bg">
        Hello World!
        {{msg}}
    </div>
    <div class="bg">
        {{msg}}
        {{count}}
    </div>
</div>

javascript代码

new Vue({
    el:'#app',
    data: {
        msg: 'Hello Vue!',
        count: 0
    }
})

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

新传入了一个变量count

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

<div id="app">
    <div class="bg">
        Hello World!
        {{msg}}
    </div>
    <div class="bg">
        {{msg}}
    </div>
    {{count}}
</div>

效果展示:

[Vue教程]模板语法

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

对count做一些运算

来些更复杂的运算:

{{ (count + 1) * 10}}

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

<div id="app">
    <div class="bg">
        Hello World!
        {{msg}}
    </div>
    <div class="bg">
        {{msg}}
    </div>
    {{ (count + 1) * 10}}
    {{template}}
</div>

Javascript代码:

new Vue({
    el:'#app',
    data: {
        msg: 'Hello Vue!',
        count: 0,
        template: '
hello template
' } })

效果如下:

javascript中的运算表达式

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

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

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

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

完整输出template内容

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

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

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

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

Javascript代码:

new Vue({
    el:'#app',
    data: {
        msg: 'Hello Vue!',
        count: 0,
        template: '<div>hello template</div>',
        url: 'http://www.mybj123.com/'
    }
})

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

HTML代码:

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

Javascript代码:

new Vue({
    el:'#app',
    data: {
        msg: 'Hello Vue!',
        count: 0,
        template: '<div>hello template</div>',
        url: 'http://www.mybj123.com/'
    },
    methods: {
        submit: function () {
            this.count ++
        }
    }
})

我们来看一下效果:

click事件对应一个submit方法

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

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

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

总结

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

转载请注明:码云笔记 » [Vue教程]模板语法

喜欢 (3)or分享 (0)
发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(2)个小伙伴在吐槽
  1. 正在学vue,哈哈
    July2019-01-14 10:01 回复