vue day-04

一、计算属性

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
    <!--    <input type="text" v-model="name"> -&#45;&#45;》》 {{// name.slice(0, 1).toUpperCase() + name.slice(1)}}-->
    <input type="text" v-model="name"> ---》》 {{handleUpper()}}

    <hr>
    <input type="text" v-model="name2">--->{{upper}}
</div>
</body>

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            name: '',
            name2: ''
        },
        methods: {
            handleUpper() {
                // 只要页面刷新就会变化
                console.log('我执行了')
                return this.name.slice(0, 1).toUpperCase() + this.name.slice(1)
            }//这里首字母大写用函数不好，因为当我们写第二个input框，且没有使用这个函数的时候，我们执行代码会发现，
            // 只要输入内容，函数就执行一次，非常的浪费资源，以此我们引出了计算属性
        },
        computed: {
            upper() {  // 以后使用upper不需要加括号，直接当属性来使用
                // 只有涉及到计算属性中使用的变量发生变化，它才重新运算
                console.log('计算属性我执行了')
                return this.name2.slice(0, 1).toUpperCase() + this.name2.slice(1)
            }
        }
    })
</script>
</html>

二、监听属性

    1、功能：发生变化干一个事，发生变化就干一个事

    2、使用场景：

      ① 路飞项目中有一个分页功能，规定五条一页还是还是一页，每到下一页信息都需要刷新

      ② 有这么几个导航条，男生、女生、未知；如果点击男生，那么筛选出来的都是男生信息，如果我一点击到女生，向后端发请求，那么就会触发一个函数，改为女生的信息

 

三、组件介绍和定义

 

四、父子通信之父传子

 

五、父子通信之子传父

 

六、ref属性

 

七、动态组件

 

八、插槽

 

九、vue-cli

 

posted @ 2022-10-31 14:44  W-Y-N  阅读(31)  评论(0)    收藏  举报