vue.js入门教程之基础语法小结

前端之家收集整理的这篇文章主要介绍了vue.js入门教程之基础语法小结前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

前言

Vue.js是一个数据驱动的web界面库。Vue.js只聚焦于视图层,可以很容易的和其他库整合。代码压缩后只有24kb。

以下代码是Vue.js最简单的例子, 当 input 中的内容变化时,p 节点的内容会跟着变化。

{{message}}

new Vue({ el: '#demo',data: { message: 'Hello Vue.js!' } })

vue.js的基础语法

插入文本

Message: {{ text }}

插入html格式的文本,在页面显示为html的格式

Message: {{{ html }}}

内容不跟随data的变化

Message: {{ * text }}

属性上绑定数据

在{{}}中使用js表达式

在{{}}中使用js语句

if指令

这里 v-if指令将根据表达式 greeting值的真假删除/插入

元素。

href指令

或者

click指令

回车指令

缩略写法

v-bind

v-on

总结

模板中表达式非常便利,但是它们实际上只用于简单的操作。模板是为了描述视图的结构。在模板中放入太多的逻辑会让模板过重且难以维护。这就是为什么 Vue.js 将绑定表达式限制为一个表达式。如果需要多于一个表达式的逻辑,应当使用计算属性。小编会在后面给更新如何使用计算属性。感兴趣的朋友们请继续关注编程之家。

猜你在找的Vue相关文章