Vue 2.0学习笔记:Vue的模板

特别声明:小站对部分原创文章已开启付费阅读,并开通年费VIP通道,年费价格为 ¥365.00元。如果您喜欢小站的内容,可以点击开通会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!(^_^)

学习Vue 2.0也有一段时间了,从前面的学习过程中,也知道在Vue中使用模板的基础知识。我们知道如何使用字符串插值在Vue中输出数据。其实在Vue的模板中,我们还可以做一些扩展,比如可以在字符串插值语法中使用简单的JavaScript表达式。之所以说简单的JavaScript表达式,是因为只能包含一个表达式,因此,不能使用循环或任何复杂的逻辑。不管怎么说,这样的逻辑不属于我们的模板,在Vue实例中放置一个方法会比较好。这我们后面会深入学习到这方面的知识点。

那么现在,我们系统的来学习一下Vue中的模板。

模板语法

Vue使用了基于HTML的模板语法,允许开发者声明式地将DOM绑定至底层Vue实例的数据。所有Vue的模板都是合法的HTML,所以能被遵循规范的浏览器和HTML解析器解析。

在底层的实现上,Vue将模板编译成虚拟DOM渲染函数。结合响应系统,在应用状态改变时,Vue能够智能地计算出重橷渲染组件的最小代价并应用到DOM操作上。

如果你熟悉虚拟DOM并且偏爱JavaScript的原始力量,你也可以不用模板,直接写渲染函数,使用可选的JSX语法。

比如,我们有这样一个简单的例子。假设我们的数据对象data中有一个包含任意数字的age属性。我们可以在Vue的模板中通过{{ }}age插入进去,这个时候,在页面中就会渲染出age的属性值:

<div id="app">
    <h1>{{ age }}</h1>
</div>

let app = new Vue({
    el: '#app',
    data () {
        return {
            age: 27
        }
    }
})

效果如下所示:

这里我们使用了模板中最简单的文本插值方式,也是数据绑定最常见的形式。这种方法常称为双大括号(Mustache)语法。Mustache标签将会被替代为对应数据对象上age属性的值。无论何时,绑定的数据对象上age属性发生了改变,插值处的内容都会更新。

这种文本插值绑定数据虽然简单,但其也有一点的不足之处,那就是当你的页面渲染慢,或者你的JS失效时。页面会将{{ age }}这样的字符渲染出来,给你的用户造成误解,有种不友好的用户体验。

前面提到过,文本插值绑定数据的方式,只要age发生变化,那么页面渲染出来的数据就会发生变化。但也可以通过v-once指令,让文本插值只执行一次,使用了这个指令,当数据改变时,插值处的内容并不会更新。但请留心这会影响到该节点上所有的数据绑定:

<div id="app">
    <h1>未使用v-once指令:{{ age }}</h1>
    <h1 v-once>使用v-once指令:{{ age }}</h1>
</div>

从上面的效果中可以看出,没有添加v-once指令的文本插值会变化,添加了的则不会再有任何变化:

不管是出于什么原因,我想把这个数字乘以2。在文本插值语法中我们可以在模板内直接添加一个简单的JavaScript表达式来实现:

<div id="app">
    <h1>{{ age * 2 }}</h1>
</div>

这里只是将age属性乘以2,如果运行代码,我们就可以看到期望的数字输出,如上图所示。请记住,我们可以在模板中直接访问age属性,因为Vue代理我们的数据属性,因此不必显式地访问数据对象上的属性。事实上,如果你试着这样做,它就不会起作用了。

接着让我们一起看一下如何在模板中使用布尔逻辑。由于只能使用单个表达式,因此不能使用正常的if语句。然而,你可以做的是使用if的简写语法,三元表达式。假设我们想根据data中的age值进行判断,超过60输出“你老了”,反之输出“你还年轻”。那么我们可以在模板中这样做:

<div id="app">
    <h1>{{ age > 60 ? '你老了' : '你还年轻' }}</h1>
</div>

运行上面的代码,你将看到下面这样的结果:

为了验证我们上面的说法是否正确,咱位可以在浏览器的控制台上修改age的值,比如将age的值修改成80,你将看到的效果如下:

再来看一个表达式的例子。我将在data中添加一个name的属性,并且将我的全名Airen Liao作为name的值。

let app = new Vue({
    el: '#app',
    data () {
        return {
            age: 27,
            name: 'Airen Liao'
        }
    }
})

dataname的值包含了我的第一个和最后一个名字,但是我只想在页面上显示我的第一个名字。我能做的就是通过split方法把

剩余80%内容付费后可查看
* 请输入阅读码(忘记阅读码?

如需转载,烦请注明出处:https://www.w3cplus.com/vue/vue-template.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部