表单、组件
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .div1{ width: 300px; height: 300px; margin: 0 auto; background: skyblue; } </style> <script src="js/vue.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div id="app"> <h2>输入框</h2> <input type="text" v-model='inputText' name="" id="" value="" /> <p>{{inputText}}</p> <hr /> <h2>单选框</h2> <input type="radio" v-model='sex' name="sex" id="" value="男" /> <input type="radio" v-model='sex' name="sex" id="" value="女" /> <p>{{sex}}</p> <hr /> <h2>复选框</h2> <input type="checkbox" v-model='fx' name="man" id="" value="男" /> <input type="checkbox" v-model='fx' name="girl" id="" value="女" /> <p>{{fx}}</p> <hr /> <h2>选项</h2> <select name="city" v-model='city'> <option value="广州">广州</option> <option value="深圳">深圳</option> <option value="上海">上海</option> </select> <p>{{city}}</p> <hr /> <textarea v-model='longtext' name="txt" rows="" cols=""></textarea> <p>{{longtext}}</p> </div> <script type="text/javascript"> var app = new Vue({ el:'#app', data:{ inputText:'', sex:'', fx:[], city:'', longtext:'123' }, compute:{ } methods:{ } }) </script> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="js/vue.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div id="app"> <headnav user='xx'></headnav> <indexmain @send='changeChild'></indexmain> <indexfooter></indexfooter> <headnav :user='username'></headnav> <h1>{{childContent}}</h1> </div> <script src="js/indexComponent.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> Vue.component('headnav',{ template:'<div><h1>欢迎{{user}}</h1></div>', props:['user'], data:function(){ return { msg:'headnav' } } }) var app = new Vue({ el:'#app', data:{ username:'隔壁老王', childContent:'' }, methods:{ changeChild:function(value){ console.log(value) this.childContent = value } } }) //组件：要想父组件传递数据给子组件，那么需要使用props //如果想要子组件将数据传递给父父组件，那么需要使用自定义事件，$emit(事件名称，事件内容)，进行触发，监听：@事件名称=‘要执行的函数’ </script> </body> </html>