zoukankan      html  css  js  c++  java
  • vue表单和组件使用

    表单:

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .div1{ 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>
  • 相关阅读:
    AngularJS $http模块POST请求
    thinkphp整合系列之融云即时通讯在线聊天
    Linux 常用命令
    Linux Shell脚本编写规范、例子
    Linux crontab定时执行任务 命令格式与详细例子
    Linux目录详细说明大全, 方便你以后合理规划及管理
    Linux 操作MySQL常用命令行
    SVN服务器搭建和使用(三)
    Linux下的SVN服务器搭建
    python 根据染色体起始终止点坐标来获取碱基序列
  • 原文地址:https://www.cnblogs.com/wwthuanyu/p/9999333.html
Copyright © 2011-2022 走看看