vue表单和组件使用
Posted wwthuanyu
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue表单和组件使用相关的知识，希望对你有一定的参考价值。
表单：
<!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>以上是关于vue表单和组件使用的主要内容，如果未能解决你的问题，请参考以下文章