VUE2快速学习(必看)

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小帅学习VUE</title>
    <style>
        [v-cloak] {
            display: none;
        }
    </style>
</head>

<body>
    <div id="app" v-cloak>
        <h1>v-model</h1>
        <p>用于表单的双向绑定</p>
        <input type="text" v-model="val" />
        {{val}}
        <p>
        <h2>表单演示</h2>
        <h3>问卷调查</h3>
        </p>
        <p>
            <span>姓名:</span>
            <input type="text"  name="name" v-model="name" />
        </p>
        <p>
            <span>性别:</span>
            <input type="radio" name="sex" value="男" v-model="sex" />男
            <input type="radio" name="sex" value="女" v-model="sex" />女
        </p>
        <p>
            <span>爱好:</span>
            <input type="checkbox" name="hobby" value="打篮球" v-model="hobby" />打篮球
            <input type="checkbox" name="hobby" value="打足球" v-model="hobby" />足球
        </p>
        <p>
            <span>籍贯</span>
            <select name="address" v-model="address">
                <option value="请选择">请选择</option>
                <option value="陕西">陕西</option>
                <option value="山西">山西</option>
                <option value="北京">北京</option>
            </select>
        </p>
        <B>你的姓名是:{{name}},性别为:{{sex}},爱好是:{{hobby}},籍贯是:{{address}}
        </B>
        <button @click="submitForm">提交</button>
        <h1>v-bind</h1>
        <p>绑定属性,动态的加载资源v-bind: 可以简写成 :</p>
        <h2>轮播图效果展示:</h2>
        <img :src="'../image/'+url+'.png'" alt="效果展示"></img>
        <button @click="imgAdd">下一张</button>
        <button @click="imgReduce">上一张</button>
        <h1>v-on
        </h1>
        <p>给元素添加事件监听,可以简写为@</p>
        <span>如果有一样的方法名,最后面的方法会覆盖前面的方法,也就说会执行最后一个方法</span>
        <h1>v-pre</h1>
        <span v-pre>{{a}}</span>
        <p>不会进行编译代码,相当于写啥,展示啥</p>
        <h1>v-once学习</h1>
        <p v-once>{{a}}</p>
        <button @click="add">加一</button>
        <button @click="reduce">减一</button>
        <p>该作用是只会更新一次数据,适用于一些静态资源的展示</p>
        <h1>v-cloak学习</h1>
        <p>有v-cloak选择器的元素进行隐藏,不会显示渲染之前的样式代码,也就是编译前的代码,渲染以后才会加载,通常是配合css样式为none配合来使用</p>
        <h1>v-if</h1>
        <p>v-if 效果是会加载dom元素标签,不是通过style去控制显示和隐藏</p>
        <!-- 是值的话 不是0的话 就是 true  是0的话就是false -->
        <p v-if="boo">1--非0</p>
        <p v-if="!boo">2</p>
        <p v-if="true">3--true</p>
        <p v-if="false">4</p>
        <h1>v-show 学习</h1>
        <p>不会加载dom元素标签,是通过标签的样式去控制是否显示</p>
        <p v-show="true">5</p>
        <p v-show="false">6</p>
        <p v-show="false">6</p>
        <h1>v-for 学习</h1>
        <h2>循环</h2>
        <ul v-for="item in arr">
            <li v-for="(item,index) in arr" :key="index">
                {{index}} {{item}}
            </li>
        </ul>
        <h2>json数组对象遍历</h2>
        <table>
            <td>序号</td>
            <td>姓名</td>
            <td>性别</td>
            <td>年龄</td>
            <tr v-for="(item,key,index) in obj" :key="index">

                <td>{{index}}</td>
                <td>{{key}}</td>
                <td>{{item.name}}</td>
                <td>{{item.sex}}</td>
                <td>{{item.age}}</td>
                <td><button @click="select(item.name)">操作</button></td>
            </tr>
        </table>
        <h2>json对象遍历</h2>
        <ul>
            <li v-for="(item,key,index) in person">
                {{index}}={{key}}={{item}}
            </li>
        </ul>

        <h2>九九乘法表</h2>
        <table>
            <tr v-for="i in number">
                <td v-for="j in i">
                    {{j}}X{{i}}={{i*j}}
                </td>
            </tr>
        </table>
    </div>
    <script src="../js/vue.js"></script>
    <script>
        new Vue({
            el: "#app",//挂载元素
            data: {//数据
                name: "",
                sex: "",
                hobby: [],
                address: "请选择",
                val: "123",
                url: 0,
                a: 100,
                boo: "1",
                message: "1",
                arr: [
                    "苹果",
                    "橘子",
                    "香蕉"
                ],
                number: [1, 2, 3, 4, 5, 6, 7, 8, 9],
                obj: [
                    { name: '小高', age: "25", sex: '男' },
                    { name: '小公', age: "23", sex: '红' },
                    { name: '小帅', age: "24", sex: '男' }
                ],
                person: {
                    name: "小帅",
                    age: 25,
                    sex: "男",
                    hight: "178"
                }

            },
            methods: {//方法
                add() {
                    this.a++,
                        alert(this.a)
                },
                reduce() {
                    this.a--,
                        alert(this.a)
                },
                select(sysId) {
                    alert(sysId)
                },
                imgAdd() {
                    this.url++
                    if (this.url > 2) {
                        this.url = 0
                    }

                },
                imgReduce() {
                    this.url--
                    if (this.url < 0) {
                        this.url = 2
                    }
                },
                submitForm() {
                    let obj={
                        name:this.name,
                        sex:this.sex,
                        hobby:this.hobby,
                        address:this.address
                    }
                console.log(obj);
                }
            }
        });
    </script>
</body>

</html>

  • 3
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小高求学之路

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值