前面几期整理，详见博客 现在来续写第四期—Vue.js的表单和组件基础 这节我们为大家介绍 Vue.js 表单上的应用。 我们可以用 v-model 指令在表单控件元素上创建双向数据绑定。 v-model 会根据控件类型自动选取正确的方法来更新元素。 你应该通过 JavaScript 在组件的 基本表单标签这里就不一一介绍了，有HTML基础的基本都懂 直接上一段表单双向绑定的典型案例的代码演练 Vue.js的用法写在注释上 看一下运行效果 模块化：是从代码逻辑的角度进行划分的； 组件化：是从UI界面的角度进行划分的。 组件（Component）是 Vue.js 最强大的功能之一，组件可以扩展 HTML 元素，封装可重用的代码。 组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树，如下图所示： 这里有一个 Vue 组件的示例： 组件是可复用的 Vue 实例，且带有一个名字：在这个例子中是 可以看到页面可以渲染出一个button组件 因为组件是可复用的 Vue 实例，所以它们与
一、表单输入绑定
v-model 会忽略所有表单元素的 value、checked、selected attribute 的初始值而总是将 Vue 实例的数据作为数据来源。data 选项中声明初始值。v-model 在内部为不同的输入元素使用不同的属性并抛出不同的事件：
value 属性和 input 事件；checked 属性和 change 事件；value 作为 prop 并将 change 作为事件。代码演练
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="vue.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div id="app"> <div id="example-2"> <div class="text"> <p> 姓名：<input v-model="name" placeholder="请输入您的姓名"> <!-- 创建双向绑定的v-model值为name --> </p> <p> 学号：<input v-model="num" placeholder="请输入您的学号" /> <!-- 创建双向绑定的v-model值为num --> </p> </div> <div class="text"> <p>性别</p> <input type="radio" id="one" value="男" v-model="sex"> <!-- 单选框radio，创建双向绑定的v-model值为sex --> <label for="one">男</label> <br> <input type="radio" id="two" value="女" v-model="sex"> <label for="two">女</label> </div> <div class="text"> <p>请选择你要选择的科目</p> <!-- 创建复选框 --> <input type="checkbox" id="语文" value="语文" v-model="kemu"> <label for="语文">语文</label> <input type="checkbox" id="数学" value="数学" v-model="kemu"> <label for="数学">数学</label> <input type="checkbox" id="英语" value="英语" v-model="kemu"> <label for="英语">英语</label> <input type="checkbox" id="物理" value="物理" v-model="kemu"> <label for="物理">物理</label> <input type="checkbox" id="化学" value="化学" v-model="kemu"> <label for="化学">化学</label> <input type="checkbox" id="生物" value="生物" v-model="kemu"> <label for="生物">生物</label> </div> <div class="text border"> <div style="padding-left: 10px;"> <p>您的信息如下</p> <!-- 数据双向绑定后，可以再次渲染对应model的值 --> <p>姓名：{{name}}</p> <p>学号：{{num}}</p> <p>性别：{{sex}}</p> <p>科目：{{kemu}}</p> </div> </div> <!-- 创建提交事件submit --> <button type="button" @click="submit">提交</button> </div> </div> <script type="text/javascript"> var vm = new Vue({ el:"#example-2", data :{ // data数据初始化赋值 name:"", num:"", sex:"", kemu:[], }, methods:{ // 编写提交事件submit函数 submit:function(){ // 这里可以声明一个对象obj，把表单的值进行打包 var obj ={ name:this.name, num:this.num, sex:this.sex, kemu:this.kemu, } console.log(obj); /* 控制台打印出obj对象的值 */ } } }); </script> <style type="text/css"> .text{ margin-top:10px; } .border { border-style:solid; border-width:1px; } </style> </body> </html> 
二、组件基础
1、组件简介
// 定义一个名为 button-counter 的新组件 Vue.component('button-counter', { data: function () { return { count: 0 } }, template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>' })<button-counter>。我们可以在一个通过 new Vue 创建的 Vue 根实例中，把这个组件作为自定义元素来使用：
<div id="demo"> <button-counter></button-counter> //也可以创建很多个button-counter组件，因为组件是可以复用的 </div>
new Vue({ el: '#demo' })
new Vue 接收相同的选项，例如 data、computed、watch、methods 以及生命周期钩子等。仅有的例外是像 el 这样根实例特有的选项。关于组件的具体使用方法下期会详细介绍~~~~
本网页所有视频内容由 imoviebox边看边下-网页视频下载, iurlBox网页地址收藏管理器 下载并得到。
ImovieBox网页视频下载器 下载地址: ImovieBox网页视频下载器-最新版本下载
本文章由: imapbox邮箱云存储,邮箱网盘,ImageBox 图片批量下载器,网页图片批量下载专家,网页图片批量下载器,获取到文章图片,imoviebox网页视频批量下载器,下载视频内容,为您提供.
阅读和此文章类似的: 全球云计算
官方软件产品操作指南 (170)
