Vue表单实例代码
程序员文章站
2023-11-06 17:06:16
什么是 vue.js?
vue.js 是用于构建交互式的 web 界面的库。
vue.js 提供了 mvvm 数据绑定和一个可组合的组件系统,具有简单、灵活的 api。...
什么是 vue.js?
vue.js 是用于构建交互式的 web 界面的库。
vue.js 提供了 mvvm 数据绑定和一个可组合的组件系统,具有简单、灵活的 api。
vue.js 特点
简洁: html 模板 + json 数据,再创建一个 vue 实例,就这么简单。
数据驱动: 自动追踪依赖的模板表达式和计算属性。
组件化: 用解耦、可复用的组件来构造界面。
轻量: ~24kb min+gzip,无依赖。
快速: 精确有效的异步批量 dom 更新。
模块友好: 通过 npm 或 bower 安装,无缝融入你的工作流。
github地址:
一 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 class="test"> <!--输入框--> <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--> <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表单实例代码,希望对大家有所帮助
上一篇: 有蠢有逗,冷你开心