当前位置 : 主页 > 网页制作 > html >

Vue03

来源:互联网 收集:自由互联 发布时间:2021-06-12
1. 样式绑定 ! DOCTYPE html html head meta charset ="utf-8" / title / title script type ="text/javascript" src ="js/vue.js" / script / head style type ="text/css" .cl { font-size : 30px ; } .cl1 { color : red ; } / style body div id ="ap

1. 样式绑定  

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script type="text/javascript" src="js/vue.js"> </script>
    </head>
    <style type="text/css">
        .cl {
            font-size: 30px;
        }

        .cl1 {
            color: red;
        }
    </style>
    <body>

        <div id="app">
            <h1>{{msg}}</h1>
            <h2>1.class绑定</h2>
            <div class="cl">aaa</div>
            <!-- 单个值 -->
            <div :class="cl">bbb</div>
            <!-- 多个值 -->
            <div :class="cls">ccc</div>
            <h2>2.style绑定</h2>
            <!-- 直接使用sytle绑定样式 -->
            <div style="font-size: 30px; color: blue;">hello vue!</div>
            <!-- v-bind -->
            <div :style="{fontSize:fontsize+‘px‘,color:color}">hello vue</div>
            <div :style="style">
                hello
            </div>
        </div>


        <script type="text/javascript">
            var vm = new Vue({
                el: #app,
                data: {
                    msg: new Date().getTime(),
                    cl: cl1,
                    cls: [cl, cl1],
                    fontsize: 30,
                    color: yellow,
                    style: {
                        fontSize: 40px,
                        color: green,
                        fontWeight: bold
                    }
                },


            })
        </script>

    </body>
</html>

 

分享图片

2.事件修饰符

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script type="text/javascript" src="js/vue.js"> </script>
    </head>
    <body>

        <div id="app">
            <h1>{{ts}}</h1>
            <div>{{msg}}</div>
            <h2>1,事件修饰符之消息发送</h2>
            <div>
                <input type="text"  v-model="content"/>
                <button @click="doSend()">发送消息</button>
            </div>
            <h2>2,事件修饰符之发送一次消息</h2>
            <button @click.once="doSend()">只发送一次消息</button>
            <h2>3,事件修饰符之阻止表单提价</h2>
            <form action="bookActio" method="post" @submit.prevent="doSmit">
                <label>书本名称:</label>
                <input type="text" />
                <input type="submit" value="提交" />
            </form>
            <h2>按键发送之回车提交</h2>
            <div>
                <input type="text"  v-model="content" @keyup.enter="doSend"/>
                <button @click="doSend()">发送消息</button>
            </div>
        </div>


        <script type="text/javascript">
            var vm = new Vue({
                el: #app,
                data:{
                    ts: new Date().getTime(),
                    msg:null,
                    content:null,
                    },
                methods:{
                    doSend:function(){
                        console.log("doSend");
                        this.msg=this.content;
                    },
                    doSmit:function(){
                        console.log("doSumit");
                    }
                }

            })
        </script>

    </body>
</html>

 

分享图片

 

 3.自定义指令

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script type="text/javascript" src="js/vue.js"> </script>
    </head>
    <body>

        <div id="app">
            <h1>自定义指令{{msg}}</h1>    
            <h2>1.局部指令</h2>
            <input type="text" v-fos>
            <h2>全局指令</h2>
            <input type="text" v-blr>
            
        </div>


        <script type="text/javascript">
            //全局指令
            Vue.directive("blr",{
                inserted:function(){
                    console.log("blr")
                }
            })
            
            
            
            var vm = new Vue({
                el: #app,
                data: {
                    msg: new Date().getTime(),
                },
                directives:{//局部指令
                    fos:{//自定义指令名称
                        inserted:function(){//钩子函数
                            console.log("inserted");
                        }
                    }
                }

            })
        </script>

    </body>
</html>

 

分享图片

 

 分享图片

 

 4.表单数据和双向绑定

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script type="text/javascript" src="js/vue.js"> </script>
    </head>
    <body>

        <div id="app">
            <h1>表单数据双向绑定{{ts}}</h1>

            <div>
                <label>用户账号</label>
                <input type="text" v-model="username" />
            </div>

            <div>
                <label>用户密码</label>
                <input type="password" v-model="password" />
            </div>

            <div>
                <label>年龄</label>
                <input type="text" v-model.number="age" />
            </div>

            <div>
                <label>爱好</label>
                <div v-for="h in hobbies" style="display: inline;">
                    <input type="checkbox" v-model="hobby" :value="h">{{h}}
                </div>
            </div>

            <div>
                <label>地址</label>
                <select v-model="cityid">
                    <option value="">----请选择----</option>
                    <option v-for="c in city" :value="c.id">
                        {{c.name}}
                    </option>
                </select>
            </div>

            <div>
                <label>备注</label>
                <textarea v-model="remark"></textarea>
            </div>


            <div>
                <input type="checkbox" v-model="flag">同意以上协议

            </div>
            <div>
                <label>性别</label>
                <input type="radio" v-model="sex" value="1" /><input type="radio" v-model="sex" value="0" /></div>



            <div>
                <button @click="doSubmit" :disabled="!flag">提交</button>
            </div>

        </div>


        <script type="text/javascript">
            var vm = new Vue({
                el: #app,
                data: {
                    ts: new Date().getTime(),
                    username: null,
                    password: null,
                    age: null,
                    sex: 0,
                    hobbies: ["吃饭", "睡觉", "打豆豆"],
                    hobby: [],
                    city: [{
                            id: 431101,
                            name: 长沙
                        },
                        {
                            id: 431102,
                            name: 株洲
                        },
                        {
                            id: 431103,
                            name: 岳阳
                        },

                    ],
                    cityid: "",
                    remark: "",
                    flag:false
                },
                methods: {
                    doSubmit: function() {
                        let data = {
                            username: this.username,
                            password: this.password,
                            age: this.age,
                            sex: this.sex,
                            hobbies: this.hobby,
                            cityid: this.cityid,
                            remark: this.remark,
                        };
                        let age=this.age+10;
                        console.log("age"+age);
                        console.log(data);
                    }
                }


            })
        </script>

    </body>
</html>

 

分享图片

 

5. 组件

 分享图片

网友评论