提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

前端框架Vue------＞第三天学习（1）

Vue学习框架前端 ------ 第三天
2023-09-14 09:07:25 时间

`

文章目录

10 、组件基础

10.1 、什么是组件

件是可复用的Vue实例，说白了就是一组可以重复使用的模板

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <title>Vue组件</title>
</head>
<body style="background-color: pink">

<div id="app">
    <ul>
        <my-componenet-list v-for="item in items" v-bind:item="item"></my-componenet-list>
    </ul>

</div>

<script type="text/javascript">
    //定义组件
    Vue.component("my-componenet-list",{
        props:["item"],
        template:'<li>{{item}}</li>'
    })

    var app = new Vue({
        el:"#app",
        data:{
            items:["篮球","足球","羽毛球"]
        }
    })
</script>


</body>
</html>

在这里插入图片描述

11、什么是计算属性

计算属性是用来声明式的描述一个值依赖了其他的值。当你在模板里把数据绑定到一个计算属性上时，Vue会在其依赖的任何值导致该计算属性改变时更新DOM

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script
    <title>计算属性</title>
</head>
<body>

<div id="app">
    <p>当前时间方法：{{getCurrentTime()}}</p>
    <p>当前时间属性：{{getCurrentTime1}}</p>
</div>

<script type="text/javascript">

    var app = new Vue({
        el:"#app",
        methods:{
            getCurrentTime:function () {
                return Date.now();
            }
        },
        //计算属性
        computed:{
            getCurrentTime1:function () {
                return Date.now();
            }
        }
    })
</script>

</body>
</html>

在这里插入图片描述

相关文章