[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教程]模板语法
正在学vue,哈哈
互相交流