Vue入门

1、入门案例：

    <div id="app">
        {{message}}
        <h1>{{msg}}</h1>
        <ul>
            <li v-for="item in movies">{{item}}</li>
        </ul>
    </div>
</body>
<script type="text/javascript">
    let app = new Vue({
        el:'#app',   //将该Vue对象挂载到id为app的元素上
        data:{
            message: 'hello world',
            msg: 'vue' ,
            movies: ['大话西游','少年的你','庆余年']
        }
    });
</script>

创建Vue对象的时候，传入了一些options：{}
    1){}中包含了el属性：该属性决定了这个Vue对象挂在到哪一个元素上
    2){}中包含了data属性：该属性通常会存储一些数据(这些数据可能是我们直接定义出来的，也可能来自服务器)

上述代码使用了v-for指令，当数组发生改变时，界面也会自动改变，是响应式的
 

2、入门案例2：

<!--方案1-->
<div id="app">
  <h1>目前数字为：{{counter}}</h1>

  <!--button中的counter对应data中的counter-->
  <!--v-on:click监听某个元素的点击事件-->
  <button v-on:click="counter++">+</button>
  <button v-on:click="counter--">-</button>
</div>

<!--方案2-->
<div id="app1">
  <h1>目前数字为：{{counter}}</h1>
  <!--@click是v-on:click的语法糖(简化)-->
  <button @click="add">+</button>
  <button @click="sub">-</button>
</div>

<script src="js/vue.js"></script>
<script>
  let app=new Vue({
    el:'#app',
    data: {
        counter :0
    }
  });

  let app1 =new Vue({
    el:'#app1',
    data: {
        counter:0
    },
    methods:{
        add:function(){
            console.log("增加事件");
            //以下语句等效于：app1.counter++; app1.$data.counter++;
            this.counter++;
        },
        sub:function(){
            console.log("减少事件");
            this.counter--;
        }
    }
  });

</script>

上述两种方案实现点击按钮使得counter大小的改变
新的属性：methods，该属性用于在Vue中定义方法
新的指令：v-on:click，@click，这两个指令等价，=后可以直接跟表达式，也可直接跟方法[方法可加()]