[Vue教程]模板语法

在上篇文章《[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}}放出来写：

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

效果展示：

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

来些更复杂的运算：

{{ (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
'
    }
})

效果如下：

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

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

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

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

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

<a href="https://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: 'https://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: 'https://mybj123.com/'
    },
    methods: {
        submit: function () {
            this.count ++
        }
    }
})

我们来看一下效果：

每次我们点击加数字按钮，数字相应的都会增加，这就相当于我们点击按钮触发 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教程]模板语法的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。