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

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>
    

项目地址

https://github.com/courageSteak/vue-framework

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！