当前位置: 首页 > news >正文

学习Vue.js的五个小例子

前言

最近在学习vue.js,学着写了几个小例子,自己记录一下,例子都比较简单,希望给初学vue.js的小伙伴一些参考。

双向数据绑定

点击查看

数据绑定是vue.js的基础。本例中就是利用了vue.js的v-model指令在表单元素上创建双向数据绑定。

<!--这是我们的View-->
<div id="app">
    <p>{{ message }}</p>
    <input type="text" v-model="message"/>
</div>

<script>
    // 这是我们的Model
    new Vue({
        el: '#app',
        data: {
            message:'Hello World!'
        }
    })
</script>

将message绑定到文本框,当更改文本框的值时,<p>{{ message }}</p> 中的内容也会被更新。

导航切换

点击查看

这里主要应用了vue.js的v-for指令来渲染一个列表、v-bind指令来绑定class以及v-on指令来处理事件

即时搜索

链接描述

这个例子主要应用了vue.js的自定义过滤器,可以通过Vue.filter()注册一个全局过滤器,具体用法可以参考这里,vue.js也提供了一些内置过滤器。

布局转换

链接描述

本例应用了vue.js的v-if指令进行了条件渲染,以及v-bind绑定class和v-on处理事件

合计总价

链接描述

这个例子类似购物车那种选中合计总价的功能,也是对各种指令以及数据绑定的综合应用吧。

后记

文章可能比较简单,只是分享了几个小例子,没有对vue.js的用法进行详细说明,大家可以看官方文档。有时间后面我也会分享更多vue.js的学习笔记。
参考资料
vue.js中文文档
五个小案例带你学习火热的Vue.js

相关文章:

  • 执行 set-ExecutionPolicy RemoteSigned 失败解决方法
  • UVA11729 Commando War【贪心】
  • 根据 选中行数据状态进行按钮的展示和置灰功能
  • 视频编解码学习之五:差错控制及传输
  • Git安装和项目中常用的git命令,
  • php发送邮件(正解!!!)
  • 开发项目时,分支新建和合并保留
  • linux备份文件和数据库脚本
  • 远程操作分支
  • ansible 运维工具简单整理
  • 循环遍历数组中的每一项,并根据每一项的某个值进行判断 every 、forEach ,some
  • 杭电 1231 最大连续子序列
  • 实例,用computed 计算属性,来进行全选和反选
  • 当div自适应的高度超过预设的高度的时候出现滚动条的办法
  • 浮动相关
  • 网络传输文件的问题
  • 分享的文章《人生如棋》
  • Angular 4.x 动态创建组件
  • happypack两次报错的问题
  • HTTP传输编码增加了传输量,只为解决这一个问题 | 实用 HTTP
  • iOS | NSProxy
  • java中的hashCode
  • MySQL主从复制读写分离及奇怪的问题
  • SSH 免密登录
  • SwizzleMethod 黑魔法
  • Travix是如何部署应用程序到Kubernetes上的
  • 快速构建spring-cloud+sleuth+rabbit+ zipkin+es+kibana+grafana日志跟踪平台
  • 理解 C# 泛型接口中的协变与逆变(抗变)
  • 码农张的Bug人生 - 见面之礼
  • 你真的知道 == 和 equals 的区别吗?
  • 前端相关框架总和
  • 如何实现 font-size 的响应式
  • 使用Envoy 作Sidecar Proxy的微服务模式-4.Prometheus的指标收集
  • 移动端解决方案学习记录
  • ​软考-高级-信息系统项目管理师教程 第四版【第14章-项目沟通管理-思维导图】​
  • #14vue3生成表单并跳转到外部地址的方式
  • #Lua:Lua调用C++生成的DLL库
  • #快捷键# 大学四年我常用的软件快捷键大全,教你成为电脑高手!!
  • $ git push -u origin master 推送到远程库出错
  • (16)UiBot:智能化软件机器人(以头歌抓取课程数据为例)
  • (LNMP) How To Install Linux, nginx, MySQL, PHP
  • (二)linux使用docker容器运行mysql
  • (非本人原创)史记·柴静列传(r4笔记第65天)
  • (教学思路 C#之类三)方法参数类型(ref、out、parmas)
  • (考研湖科大教书匠计算机网络)第一章概述-第五节1:计算机网络体系结构之分层思想和举例
  • (蓝桥杯每日一题)平方末尾及补充(常用的字符串函数功能)
  • (牛客腾讯思维编程题)编码编码分组打印下标(java 版本+ C版本)
  • (十八)三元表达式和列表解析
  • (十一)手动添加用户和文件的特殊权限
  • (一)硬件制作--从零开始自制linux掌上电脑(F1C200S) <嵌入式项目>
  • (转) SpringBoot:使用spring-boot-devtools进行热部署以及不生效的问题解决
  • (转)iOS字体
  • ****Linux下Mysql的安装和配置
  • .libPaths()设置包加载目录
  • .NET Core IdentityServer4实战-开篇介绍与规划