Vue案例入门列表展示计数器

原创

有勇气的牛排

发布于 2023-06-25 15:24:26

1400

1 案例一

<div id="app">{{ message }}</div>

<script src="../js/vue.js"></script>
<script>
    // 编程范式：声明式编程
    const app = new Vue({
        el: '#app', // 用于关在要管理的元素
        data: {     // 定义数据
            message: "你好，有勇气的牛排"
        }
    })

    // 元素js的做法（编程范式：命令式编程）
    // 1. 创建div元素，设置id属性
    // 2. 定义一个变量叫message
    // 3 将message变量放在前面的div元素中显示
</script>

2 列表展示

<div id="app">
    <ul>
        <li v-for="item in movies">{{ item }}</li>
    </ul>
</div>

<script src="../js/vue.js"></script>
<script>

    const app = new Vue({
        el: '#app', // 用于关在要管理的元素
        data: {     // 定义数据
            message: "你好，有勇气的牛排",
            movies: ['灰太狼', '有勇气的牛排', '九万里']
        }
    })

    // 响应式：在浏览器console中调式
    // app.movies.push('666')

</script>

3 计数器

methods：该属性用于在Vue对象中定义方法
@click：用于监听某个元素的点击事件，并且需要指定当前发生点击时，执行的方法(方法通常是methods中定义的方法)

<div id="app">
    <h2>当前计数：{{ counter }}</h2>
<!--    <button v-on:click="counter++">+</button>-->
<!--    <button v-on:click="counter&#45;&#45;">-</button>-->

    <button v-on:click="add">+</button>
    <button v-on:click="sub">-</button>
</div>

<script src="../js/vue.js"></script>
<script>

    const app = new Vue({
        el: '#app',
        data: {
            counter: 0
        },
        methods:{
            add: function () {
                console.log('add被执行')
                this.counter++
            },
            sub:function () {
                console.log('sub被执行')
                this.counter--
            }
        }
    })

</script>