vue初体验

案例1 展示简单数据

vue就类似一个构造函数，用构造函数构造出一个实例，并往构造函数中传入参数，而vue中的参数是一个对象

定义一个变量接收Vue构造函数构造出的实例，并且传入的参数是一个对象

const app = new Vue({});

这个对象参数中的一些属性也有特定的作用。

        const app = new Vue({
            el : '#app',
            data : {
                message : 'hello vue'
            }
        })

1.el ：该属性决定了Vue对象挂载到哪个元素上，也就是用来告诉Vue，他需要管理的对象是谁，而el的属性值就是需要被管理的元素的id
2.data：data的属性值是一个对象，被管理的元素可以根据需要，获取data中的数据

通过{{ }}的语法，将Vue对象中的数据传到h1中

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

image.png

可以在控制台动态修改h1中的内容

image.png

在这可以明显的感受到，通过Vue管理的元素，他的样式和数据是相分离的，动态修改数据的过程完全没有影响页面的结构。

案例2 展示列表

展示ul列表
通过上一个案例，可以在每个li中，用{{ }}的语法，将需要的数据传入特定的li中，但是这种写法过于冗余。

    <div id="app">
       <ul>
           <!-- <li v-for = "items in movies">{{items}}</li> -->
           <li>{{movies[0]}}</li>
           <li>{{movies[1]}}</li>
           <li>{{movies[2]}}</li>
           <li>{{movies[3]}}</li>
       </ul>
    </div>
        const app = new Vue({
            el : '#app',
            data : {
                message : 'hello vue',
                movies : ['one','two','three','four']
            }
        })

可以借助v-for的指令，items in movies的意思是，用for循环遍历movies数组，将获取的数据都赋给变量items，最后在li中用{{ }}的语法展示items，这样就可以自动的生成li结构，并往li中添加items数据。

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

在控制台操作movies数组，数组也会动态的改变

image.png

案例3 计数器

点击+按钮数字增加，点击-按钮数字减少

image.png

v-on指令可以用来添加事件，
v-on:click，就是添加click事件，
在指令中让counter++和counter--，
vue实例会动态监测到counter的变化，在点击后将改变的counter值添加到h1中

    <div id="app">
        <h1>当前的数字：{{counter}}</h1>
        <button v-on:click="counter++">+</button>
        <button v-on:click="counter--">-</button>
    </div>

        const app = new Vue({
            el : '#app',
            data : {
                counter : 0
            }
        })

但是，当我们使用的点击事件是比较复杂的，比添加console.log的语句，继续在行间编写会导致页面混乱，这时就可以利用函数来简化代码。
methods也是Vue实例中的属性，用来存储函数。

    <div id="app">
        <h1>当前的数字：{{counter}}</h1>
        <button v-on:click="add">+</button>
        <button v-on:click="sub">-</button>
    </div>

        const app = new Vue({
            el : '#app',
            data : {
                counter : 0
            },
            methods : {
                add : function() {
                    this.counter++; //this指针指向当前Vue实例app,用this找到app下的counter
                    console.log("计数器加1");
                },
                sub : function(){
                    this.counter--;
                    console.log("计数器减1");
                }
            }
        })

image.png