[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。