Vue基础-day02

动态绑定Class控制样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box {
            width: 100px;
            height: 100px;
            border: 2px solid #333;
        }

        .pink {
            background-color: pink;
        }

        .orange {
            color: orange;
        }
    </style>
</head>
<body>
<div id="app">
    <!--    语法::class="对象/数组"-->
    <!--    对象形式: :class="{类名1:true/false,类名2:true/false}"-->
    <!--    如果类名后面的值是true,代表给该元素加上类名,如果是false,则不加-->
    <div class="box" :class="{pink:isPink}"></div>
    <button @click="isPink=!isPink">切换颜色</button>

    <!--    数组形式: :class="[类名1,类名2]"-->
    <!--    如果数组中有该类名,就给该元素加上这个类-->
    <!--    可以使用三元表达式动态控制是否添加类-->
    <div class="box" :class="[isPink ? 'pink' : '' ,'orange']">aaaa</div>
</div>
<script src="./lib/vue.js"></script>
<script>
    const vm = new Vue({
        el: '#app',
        data: {
            isPink: true
        }
    })
</script>

</body>
</html>

动态绑定Style控制样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box {
            width: 100px;
            height: 100px;
            border: 2px solid #333;
        }
    </style>
</head>
<body>
<div id="app">
    <!--    语法::style="对象/数组"-->
    <!--    对象形式: :style="{样式属性值1:样式值,样式属性值2:样式值}"-->
    <div class="box" :style="{backgroundColor:bgc}"></div>
    <button @click="bgc='red'">改变颜色</button>

    <!--    数组形式: :style="[{样式属性值1:样式值,样式属性值2:样式值}]"-->
    <div class="box" :style="[{backgroundColor:bgc}]">aaaa</div>
</div>
<script src="./lib/vue.js"></script>
<script>
    const vm = new Vue({
        el: '#app',
        data: {
            bgc: 'pink'
        }
    })
</script>

</body>
</html>

过滤器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <!--    2.使用过滤器-->
    <!--    语法: {{要转换的数据|过滤器的名字}}-->
    <!--    |: 管道符-->
    <h3>{{money|dollar}}</h3>
</div>
<script src="./lib/vue.js"></script>
<script>
    <!--    1.定义过滤器(必须在new Vue({})之前声明-->
    //语法: Vue.filter('过滤器的名字',fn)
    //fn: (要转换格式的数据)=>{return 转换后的结果}
    Vue.filter('dollar', money => {
        return '$' + money
    })

    new Vue({
        el: '#app',
        data: {
            money: 100
        }
    })
</script>

</body>
</html>

监听器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<body>
<div id="app">
    <input type="text" v-model="username">
</div>

<script src="./lib/vue.js"></script>
<script src="./lib/axios.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            username: 'zhangsan'
        },
        methods: {},
        //监听器:它可以监听到数据的变化,从而做一些特定的事
        watch: {
            //watch选项中声明监听器
            //要监听那个数据就以哪个数据为名字声明一个函数
            async username(newVal, oldVal) {
                //在这里就可以监听到数据的变化
                //第一个参数是数据变化后的新值,第二个参数是数据变化前的旧值
                //发请求
                const {data} = await axios.get('https://www.escook.cn/api/finduser/' + newVal)
                console.log(data)
            }
        }
    })
</script>

</body>
</html>

监听器的对象用法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<body>
<div id="app">
    <input type="text" v-model="username">

    <hr>

    <input type="text" v-model="user.name">
</div>

<script src="./lib/vue.js"></script>
<script src="./lib/axios.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            username: 'zhangsan',
            user: {
                name: 'zhangsan'
            }
        },

        watch: {
            //函数写法
            // async username(newVal, oldVal) {
            //     console.log('监听到了变化')
            // }

            //对象写法
            username: {
                //immediate:true  在页面初始化时加载,让监听器立即执行一次
                immediate: true,
                //当数据变化时,会执行handler函数
                handler(newVal, oldVal) {
                    console.log('监听到了变化')
                }
            },
            // user(){
            //     console.log('监听到了变化')
            // }

            //如果想监听一个对象下面属性的变化,可以配置deep:true
            // user:{
            //     deep:true,
            //     handler(){
            //         console.log('监听到了变化')
            //     }
            // }

            //监听单独某个属性的变化
            'user.name'(newVal,oldVal) {
                console.log('监听到了变化')
            }

        }
    })
</script>

</body>
</html>

计算属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <input type="text" v-model="n1">*<input type="text" v-model="n2">={{multi}}
    <div>通过计算属性计算n1*n2的结果是{{multi}}</div>
    <div>通过计算属性计算n1*n2的结果是{{multi}}</div>
    <div>通过计算属性计算n1*n2的结果是{{multi}}</div>

    <hr>

    <div>通过计算方法计算n1*n2的结果是{{multiByMethod()}}</div>
    <div>通过计算方法计算n1*n2的结果是{{multiByMethod()}}</div>
    <div>通过计算方法计算n1*n2的结果是{{multiByMethod()}}</div>
</div>
<script src="./lib/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            n1: 1,
            n2: 2
        },
        //computed用于声明计算属性
        computed: {
            //计算属性具有缓存性,性能更高
            //计算属性定义的时候是一个函数
            multi() {
                console.log('执行了计算属性')
                //计算函数内部必须有一个返回值
                return this.n1 * this.n2
            }
        },
        methods: {
            multiByMethod() {
                console.log('执行了计算方法')
                return this.n1 * this.n2;
            }
        }
    })
</script>

</body>
</html>

Q.E.D.