栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > Web开发 > JavaScript

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

JavaScript 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

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表达式

{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}

在{{}}中使用js语句

{{ var a = 1 }}
{{ if (ok) { return message } }}

if指令

Hello!

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

元素。

href指令


或者

click指令



回车指令

缩略写法

v-bind







v-on




总结

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

转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/94486.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号