30天学完vue打卡第一天

今天学习了vue的插值表达式以及部分vue简单指令

插值表达式总结：

    1、使用的数据要存在

    2、支持的表达式，不是语句if for

    3、不能在标签属性中使用{{}}

代码段：

 <div id="app">
        <p> {{tangname}}</p>
        <p>{{tangname.toUpperCase()}}</p>
        <p>{{age>18?'成年':'未成年'}}</p>
        <p>{{friend.name}}</p>
        <p>{{friend.age>18?'成年':'未成年'}}</p>
        <p>{{friend.desc}}</p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>

    <script>
        const app = new Vue({
            el: '#app',
            data: {
                tangname: 'tang',
                age: 20,
                friend: {
                    name: 'jake',
                    age: 17,
                    desc: '爱学习'
                }
            }
        })
    </script>

运行结果：

vue简单指令

代码段以及注意事项：

   <!-- v-html -->
    <div id="app">
        <div v-html="msg"></div>
    </div>

    <!-- v-show    v-if  -->
    <div id="app2">
        <!-- 本质切换display -->
        <!-- 适用于 频繁切换显示隐藏场景 -->
        <div v-show="flag" class="box"> v-show控制</div>

        <!-- 根据条件判断元素是否移除 -->
        <!-- 创建或移除元素节点 -->
        <div v-if="flag" class="box"> v-if控制</div>
    </div>
    <hr>
    <!-- v-else v-if-else  -->
    <div id="app3">
        <p v-if="gender === 1">性别：男</p>
        <p v-else>性别：女</p>

        <p v-if="score>=90">成绩判定A:电脑</p>
        <p v-else-if="score>=70">成绩判定B:旅游</p>
        <p v-else-if="score>=60">成绩判定C:零食</p>
        <p v-else>成绩判定D:加班</p>
    </div>

    <hr>
    <!-- v-on 注册事件 -->
    <!-- 1.v-on:事件名=“内联语句”-->
    <!-- 2.v-on:事件名=“methods中的函数名” -->
    <!-- 简写：@事件名 -->
    <div id="app4">
        <!-- <button v-on:click="count--">-</button> -->
        <button @click="count--">-</button>
        <span>{{count}}</span>
        <button v-on:click="count++">+</button>
        <br>

        <button @click="fn">显示隐藏</button>
        <h1 v-show="isShow">黑马</h1>

        <!-- v-on调用传参 -->
        <div class="box5">
            <h1>售货机</h1>
            <button @click="buy(5)">可乐5元</button>
            <button @click="buy(10)">咖啡10元</button>
            <p>余额：{{money}}</p>
        </div>

    </div>



    <!-- js  -->
    <script src="./vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                msg: `
                <a href="#">
                    黑马
                </a>
                `
            }
        })
        // 2
        const app2 = new Vue({
            el: '#app2',
            data: {
                flag: true
            }
        })
        // 3
        const app3 = new Vue({
            el: '#app3',
            data: {
                gender: 3,
                score: 90
            }
        })

        //4
        const app4 = new Vue({
            el: '#app4',
            data: {
                count: 100,
                isShow: true,
                money: 100
            },
            methods: {
                fn() {
                    // 让提供的所有的methods中的函数，this都指向当前实例
                    // console.log("执行了fn", app4.isShow);
                    // app4.isShow = !app4.isShow;
                    this.isShow = !this.isShow;
                },
                buy(price) {
                    console.log(price);
                    this.money -= price;

                }
            }
        })


    </script>

 运行结果图：