手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >Vue表单实例代码
Vue表单实例代码
摘要:什么是Vue.js?Vue.js是用于构建交互式的Web界面的库。Vue.js提供了MVVM数据绑定和一个可组合的组件系统,具有简单、灵活的...

什么是 Vue.js?

Vue.js 是用于构建交互式的 Web 界面的库。

Vue.js 提供了 MVVM 数据绑定和一个可组合的组件系统,具有简单、灵活的 API。

Vue.js 特点

简洁: HTML 模板 + JSON 数据,再创建一个 Vue 实例,就这么简单。

数据驱动: 自动追踪依赖的模板表达式和计算属性。

组件化: 用解耦、可复用的组件来构造界面。

轻量: ~24kb min+gzip,无依赖。

快速: 精确有效的异步批量 DOM 更新。

模块友好: 通过 NPM 或 Bower 安装,无缝融入你的工作流。

gitHub地址:https://github.com/lily1010/vue_learn/tree/master/lesson11

一 vue表单

实在是太简单了,直接来个例子

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Vue表单</title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div> <> <input type="text" v-model="msg"> <br /> <> <input id="mycb1" type="radio" v-model="choose1"> <label for="mycb1">{{choose1}}</label> <> <input id="mycb2" type="checkbox" v-model="choose2"> <label for="mycb2">{{choose2}}</label> <> <select v-model="selected"> <option>A</option> <option>B</option> <option>C</option> </select> <span>选中: {{ selected }}</span> </div> <script type="text/javascript"> var vm = new Vue({ el: ".test", data: { msg: '我是文本', choose1: false, choose2: false, selected:'' } }) </script> </body> </html>

以上所述是小编给大家介绍的Vue表单实例代码,希望对大家有所帮助,如果大家有任何疑问请给我们留言,小编会及时回复大家的。在此也非常感谢大家对查字典教程网的支持!

【Vue表单实例代码】相关文章:

超酷右下浮出广告窗口代码

在页面中输出当前客户端时间javascript实例代码

JQuery中DOM加载与事件执行实例分析

一些有关检查数据的JS代码

Jquery注册事件实现方法

Javascript中With语句用法实例

Jquery中基本选择器用法实例详解

免费空间广告万能消除代码

Ctrl + Enter提交前检测的代码

JQuery中DOM事件冒泡实例分析

精品推荐
分类导航