vue基础语法小案例

本节课带着大家做个vue小案例，包含很多vue常用语法，简单实用

完成效果如下图，当在input框输入值之后，点击submit按钮，即可添加一个 li标签

<div id="app">
<!--    v-model 表示双向绑定-->
    <input type="text" v-model="ivalue">
<!--    @click 表示点击事件-->
    <button @click="iclick">submit</button>
    <ul>
<!--        v-for 表示循环-->
        <li v-for="item in liList" :key="item.id">{{item}}</li>
    </ul>
</div>
<!--引入vue-->
<script src="vue.js"></script>
<script>
    var app = new Vue({
        el: '#app', // 代表vue生效的html元素
        data: { // 代表vue的数据
            ivalue: '',
            liList: []
        },
        methods: { // 定义触发的方法
            iclick: function () {
                this.liList.push(this.ivalue)
                this.ivalue = ''
            }
        }
    })
</script>