三、vue ：定义变量、v-for、v-on示例

一、vue定义变量

• let：定义变量
• const：定义常量
  contst定义常量时，必须赋值。指向的对象不可改变，但是对象中的属性

contst obj = {name: '张三'}
obj.name = '李四'

二、vue循环 v-for

<div id="app" >
   <ul>
   	<li v-for="name in names"></li>
   </ul>
</div>
<script src="./js/vue.js"></script>
<script>
    const app = new Vue({
        el: "#app", //用户挂载要管理的元素 
        data:{ //定义数据
            name: ['张三','李四','赵高']
        }
    })

</script>
</body>

三、事件绑定 v-on

<div id="app" >
    <h1>当前计数：{{counter}}</h1>
    <!--绑定单击事件 -->
    <button v-on:click="add">+</button>
    <button v-on:click="sub">-</button>
    <!-- 语法糖：简写：@click是v-on:click的简写，也称语法糖，意味：简单，给一些甜头 --》
    <!-- <button @click="add">+</botton> -->
</div>
<script src="./js/vue.js"></script>
<script>
    const app = new Vue({
        el: "#app", //用户挂载要管理的元素 
        data:{ //定义数据
            counter: 0
        },
        //用户定义vue对象中的方法
        methods: {
            add: function(){
                console.log("add执行");
                this.counter++;
            },
            sub: function(){
                console.log("sub执行");
                this.counter--;
            }
        }
    })
</script>
</body>