三个小案例来感受一下Vuejs的魅力

  使用三个小案例来感受一下Vuejs的魅力。

1、Hello Vuejs

{
    {message}}

  可以看到，我们首先创建了一个Vue对象。并且在创建对象的时候，我们传入了一些options：{}。

• el属性：该属性决定了我们所创建的Vue对象挂载到哪一个元素中。这里，我们是挂载到了id为app的元素上；
• data属性：该属性通常会存储一些数据。这些数据可以是我们自定义出的，也可以是从服务器上加载的。

2、Vue列表显示

  现在我们使用Vue来展示一个更加复杂的数据：数据列表。

  

    
{
    {item}}
  

  可以看到，我们在data属性中定义了一个数组movies，用来存储电影列表。在HTML代码中我们通过v-for指令对数组进行遍历。

3、计数器

  计数器:{
    {counter}}
  

  +
  -

  该案例中，options中使用了新的指令和属性。

• 新的属性：methods，该属性用于在Vue对象中定义方法；
• 新的指令：v-on:click，该指令用于监听某个元素的点击事件，并且需要制定当发生点击时所执行的方法，执行的方法通常在methods中定义。