vue学习笔记,自用

包含很多东西。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>form表单提交</title>
</head>

<body>
    <div style="margin: 50px;">
        <form action="#" method="get" autocomplete="off">
            <!-- for属性的值必须和对应的input标签的id的值一致,表示label标签用来描述input的信息 -->
            <!-- checked属性表示默认选中 -->
            <fieldset>
                <legend>
                    基本信息
                </legend>
                <label for="username">账 号:</label>
                <input type="text" autofocus name="username" placeholder="请输入用户名" id="username"><br>
                <label for="password">密 码:</label>
                <input type="password" name="password" placeholder="密码" id="password"><br>
                <label for="">性 别:</label>
                <input type="radio" name="gender" value="male" checked><input type="radio" name="gender" value="female"><br>
            </fieldset>
            <fieldset>
                <legend>
                    兴趣信息
                </legend>
                <label for="">爱 好:</label>
                <input type="checkbox" name="hobby" value="A">A
                <input type="checkbox" name="hobby" value="B" checked>B
                <input type="checkbox" name="hobby" value="C">C
                <br>
                生日:<input type="datetime-local"><br>
                现在日期:<input type="datetime"><br>
                邮箱:<input type="email" name="email" autocomplete="on"><br>
                年龄:<input type="number" min="1" max="100">
                <br>
                省份:<select name="provice" id="">
                    <optgroup label="第一组">
                        <option value="">请选择</option>
                    </optgroup>

                    <optgroup label="第二组">
                        <option value="1">北京</option>
                        <option value="2">上海</option>
                        <option value="3">广州</option>
                    </optgroup>

                </select><br>
            </fieldset>

            <label for="">图 片:</label>
            <input type="file" name="file"><br>
            <label for="">隐藏域:</label>
            <input type="hidden" name="id" value="111"><br>
            <input type="image" src="../d9e1d8d00dd71cf75406b5a2081bef6a.jpg"><br>
            取色器:<input type="color"><br>

            <input type="submit" value="登录">
            <input type="button" value="按钮">

        </form>

        <div>
            <div id="app">
                {{ message }}
                <h2>
                    <label for="">学校:</label>
                    {{school.name}}

                </h2>
                <h2>
                    <label for="">电话:</label>
                    {{school.mobile}}
                </h2>
                <h3>
                    {{campus[0]}}
                    {{campus[1]}}
                </h3>
            </div>
            <div id="vueName">
                <h2 v-text="'++++++'+message+'----!'">hshashud</h2>
                <h2>您好,{{message+"!"}}</h2>
                <h2>{{info+"!!!!"}}</h2>
                <p v-html="content"></p>
            </div>
            <div id="learn_on">
                {{message}}
                <input type="button" value="单击弹框" v-on:click="dolt">
                <input type="button" value="单击弹框" @click="dolt">
                <br>
                <input type="button" value="双击事件" v-on:dblclick="dolt">
                <input type="button" value="双击事件" @dblclick="dolt">
                <h2 @click="changeData">{{message}}</h2>
            </div>
        </div>

    </div>
</body>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/lib/index.css">

<!-- 引入 Vue 和 Vant 的 JS 文件 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/vant.min.js"></script>
<script>
    var lis = document.getElementsByTagName('input')
    console.dir(lis)
    var liss = document.getElementsByTagName('option')
    console.log(liss[1])


    var app = new Vue({
        el: '#app', //id选择器
        // el:'div',
        data: {
            message: 'hello Vue!',
            school: {
                name: "河北大学工商学院",
                mobile: '400-012-1211',
            },
            campus: ["河北省保定市校区", "北京校区"]
        }
    })
    var vueName = new Vue({
        el: "#vueName",
        data: {
            message: "这是vue指令的文本",
            info: "我最棒",
            content: "百度"
        },
    })
    var learn_on = new Vue({
        el: "#learn_on",
        data: {
            message: "这是按钮",
        },
        methods: {
            dolt: function () {
                alert("dhusadusahsahdhsa")
            },
            changeData: function () {
                this.message += "--->"
            }
        },
    })
</script>

</html>

你可能感兴趣的:(前端,vue)