vue.js 初步学习

时间:2021-05-12 00:18:40

跟着b站上的视频来学

首先什么是vue.js

跟着b站上视频来学:(o゚v゚)ノ

 

vue.js 初步学习vue.js 初步学习
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script src="vue.min.js"></script>
<!--    绑定数据-->
<!--    <div id="app">-->
<!--        <counter heading="Likes" ></counter>-->
<!--        <counter heading="Disliakes" ></counter>-->
<!--    </div>-->


<!--    <template id="counter-template">-->
<!--        <div>-->
<!--            <h1>{{heading}}</h1>-->

<!--            <button @click="count += 1" >Submit {{count}}</button>-->
<!--        </div>-->
<!--    </template>-->
<!--    <script>-->
<!--        Vue.component('counter',{-->
<!--            template:'#counter-template',-->
<!--            props:['heading'],    //代表heading是变量-->
<!--            data:function () {-->
<!--                return{count:0};-->
<!--            }-->
<!--        })-->

<!--        new Vue({-->
<!--            el: '#app',-->
<!--            data:{-->
<!--                mygame:"shsdhjsd"-->
<!--            }-->
<!--        })-->
<!--    </script>-->


<!--    第一步:调用数据-->
<!--    <div id="app">-->
<!--        <p>game you love</p>-->
<!--        <input v-model="mygame">-->
<!--    </div>-->
<!--    <script>-->
<!--        new Vue({-->
<!--            el: '#app',-->
<!--            data:{-->
<!--                mygame:"超级马里奥"-->
<!--            }-->
<!--        })-->
<!--    </script>-->

<!--    v-on 调用不同的事件(简写为@)-->
<!--    <div id="app">-->
<!--        <p>你最喜欢的游戏:{{mygame}}</p>-->
<!--        <button v-on:click="btnclick('我的世界')">我的世界</button>-->
<!--        <button v-on:click="btnclick('塞尔达')">塞尔达</button>-->
<!--        <button v-on:click="btnclick('勇者斗恶龙')">勇者斗恶龙</button>-->
<!--    </div>-->
<!--    <script>-->
<!--        new Vue({-->
<!--            el: '#app',-->
<!--            data:{-->
<!--                mygame:"超级马里奥"-->
<!--            },-->
<!--            methods:{-->
<!--                btnclick:function (pname) {-->
<!--                    this.mygame = pname;-->
<!--                }-->
<!--            }-->
<!--        });-->
<!--    </script>-->

<!-- 组件:-->
<!--    item循环games数组,得到元素,将得到的元素给组件中的变量game进行操作-->
<!--    <div id="app">-->
<!--        <ol>-->
<!--            <game-item v-for="item in games" v-bind:game="item"></game-item>-->
<!--        </ol>-->
<!--    </div>-->
<!--    <script>-->
<!--        Vue.component('game-item',{-->
<!--            props:['game'],-->
<!--            template:'<li>{{game.title}}</li>'-->
<!--            }-->

<!--        )-->
<!--        new Vue({-->
<!--            el: '#app',-->
<!--            data:{-->
<!--                games:[-->
<!--                    {title:'斗地主'},-->
<!--                    {title:'打麻将'},-->
<!--                    {title:'UNO'}-->
<!--                ]-->
<!--            }-->

<!--        });-->
<!--    </script>-->

<!--过滤器:格式化变量内容的输出(日期格式化、字母大小写。。)-->
<!--    <div id="app">-->
<!--        <p>{{message}}</p>-->
<!--        <p>{{message | toupper}}</p>-->
<!--        <hr/>-->
<!--        <p>现在的vue.js的学习进度是{{num | topercentage}}</p>-->
<!--    </div>-->
<!--    <script>-->
<!--        new Vue({-->
<!--            el: '#app',-->
<!--            data:{-->
<!--                message:'hello world!',-->
<!--                num : 0.3,-->
<!--            },-->
<!--            filters:{-->
<!--                toupper:function (value) {-->
<!--                    return value.toUpperCase();-->
<!--                },-->
<!--                topercentage:function (value) {-->
<!--                    return value*100+'%';-->
<!--                }-->
<!--            }-->
<!--        });-->
<!--    </script>-->

<!--    计算属性:处理元数据,便于进行二次利用-->
<!--    <div id="app">-->
<!--        今年发行的游戏的价格是{{price}},含税价格是{{priceInTax}},折合位人民币{{priceChinaRMB}}.-->
<!--    </div>-->
<!--    <script>-->
<!--        new Vue({-->
<!--            el: '#app',-->
<!--            data:{-->
<!--                price:29980,-->
<!--            },-->
<!--            computed:{-->
<!--                priceInTax:function () {-->
<!--                    return this.price*1.08;-->
<!--                },-->
<!--                priceChinaRMB:function () {-->
<!--                    return Math.round(this.priceInTax/16.75);-->
<!--                }-->
<!--            }-->

<!--        });-->
<!--    </script>-->


<!--    监视属性(监视属性是否发生变化):与computed属性类似,用于观察变量的变化,然后进行处理-->
<!--    <div id="app">-->
<!--        今年发行的游戏的价格是{{price}},含税价格是{{priceInTax}},折合位人民币{{priceChinaRMB}}.-->
<!--        <hr/>-->
<!--        <button @click="btnClick(10000)">加价10000</button>-->
<!--    </div>-->
<!--    <script>-->
<!--        new Vue({-->
<!--            el: '#app',-->
<!--            data:{-->
<!--                price:29980,-->
<!--                priceInTax:0,-->
<!--                priceChinaRMB:0,-->
<!--            },-->
<!--            watch:{-->
<!--                price:function (newVal,oldVal) {-->
<!--                    console.log(newVal,oldVal);-->
<!--                    this.priceInTax = Math.round(this.price *1.08);-->
<!--                    this.priceChinaRMB = Math.round(this.priceInTax /16.75);-->
<!--                }-->
<!--            },-->
<!--            methods:{-->
<!--                btnClick:function (newPrice) {-->
<!--                    this.price += newPrice;-->
<!--                }-->
<!--            }-->
<!--        });-->
<!--    </script>-->

<!--    v-bind:为html标记绑定样式单属性-->
<!--        <style>-->
<!--            .active{-->
<!--                color:red;-->
<!--            }-->
<!--        </style>-->

<!--        <div id="app">-->
<!--            <div v-bind:class="{active:isActive}">红色文本1</div>-->
<!--            <div :class="{active:isActive}">红色文本1</div>-->
<!--            <button @click="btnClick">改变文本颜色</button>-->
<!--        </div>-->
<!--        <script>-->
<!--            new Vue({-->
<!--                el: '#app',-->
<!--                data:{-->
<!--                    isActive:true,-->
<!--                },-->
<!--                methods:{-->
<!--                    btnClick:function () {-->
<!--                        this.isActive = false;-->
<!--                    }-->
<!--                }-->
<!--            });-->
<!--        </script>-->


<!--    Class对象绑定:为html绑定class对象-->
    <style>
        .active{
            color:red;
        }
        .big{
            font-weight: bolder;
            font-size: 64px;
        }
    </style>

    <div id="app">
        <div v-bind:class="myClass">红色文本1</div>
        <button @click="btnClick">改变文本大小</button>
    </div>
    <script>
        new Vue({
            el: '#app',
            data:{
                myClass:{
                    active:true,
                    big:true,
                }
            },
            methods:{
                btnClick:function () {
                    this.myClass.big = !this.myClass.big;
                }
            }
        });
    </script>



</body>
</html>
View Code