Vue.js入门

Vue.js是一个轻量级的前端框架，让开发者不必在于视图层，更多的在于数据层的展现和交互，减少了Dom的操作；

1.简单入门和讲解

1.1案例1

    
    
    
    


    

        {{message}}
    
    

image.png

讲解：

• {{message}}:定义了一个名为message的变量，值需要在data数据域中确定；
• el:绑定某个id，指定某个控件
• data：数据域，可以在这里进行数据的初始化

1.2：案例2

    
    
    
    


    
        
        提交
        

            

                {{item}}
            
        
    

    

image.png

这个案例是可以在输入框里面，输入数据，然后按提交，这样会在界面里面回显刚刚提交的数据；这里引入几个知识点：

• 双向绑定：v-model,这是vue的一个指令，和元素结合使用；当我们修改input中的值的时候，data中值也会修改，同样的我们修改data里面的值也会影响v-model中的值
• 循环：v-for也是一个vue的指令，用来处理循环的数据，比如我们上面的列表
• methods：我们自定义的一些方法都放在这里，然后配合v:on来绑定事件
• 使用this关键字来获取data中的数据，在app这个作用域里面的话，我们可以通过this来获取到data中的值
• 通过案例我们可以看出，我们更多的是关注数据的变换，DOM的操作我们不必关注

2. MVVM的介绍

我们以前用Jquery的时候，用是MVC架构去写；M：Model，就是数据层，可以简单理解为后台传过来的数据；V：View，就是视图层，就是我们展现在页面上的内容；C:Controller,处理业务逻辑；以前我们写前端的业务代码的时候很多的时候都是操作DOM来改变页面上展示的内容，这使得代码量很大，也难以维护；
MVVM的出现则更多的关注Model:数据层阶段，看下图：

mvvm.png

我们在用vue的时候更多的是关注Model层，至于如何将数据和View进行交互则由中间的VM来解决；而中间这一块则由Vue来实现；至于里面的实现逻辑则要看源码了。

3.组件的入门

什么是组件？来看看下面的图

image.png

假设的主页分为以下三块，这三块就是组件；所以，我们可以认为组件是构建整个页面的一些部分；因此我们在用vue开发的时候，可以将一些页面的内容抽取出来，做成组件的形式，这样如果其他页面要用的话，直接引用就好了，大大减少了我们的代码开发量。下面会通过一个案例展示一下组件的运用；

    
    
    
    


    
        
        提交
        

           

           
        
    

    

image.png

我们每次按提交的时候也会可以实现之前我们看到的效果，来分析一下知识点

• Vue.component:这是全局组件，可以让其他页面也使用，既然有全局的那就有局部的（本页面的），实现我们等会展示
• 我们在命名的时候一定要遵守命名规范，字母开头大写，然后后面的单词也要大写，这样才能在页面的时候使用这个标签来引入，否则是无法使用的

优化

我们从上面的例子可以看到数据出来是出来，但是并不酷，因为他是静态的，我们想让数据动态生成，怎么实现呢？这就要解决一个问题就是，如何从父组件把值传递到子组件中；Vue给我们提供了一个参数"props"；对于上面的代码我们需要做两步操作：
1.在组件定义中，添加参数，并赋值：

image.png

2.用v-bind指令绑定我们刚刚定义的参数名，然后获得item的值

image.png

效果

image.png

从上面的案例中我们进行分析：

• props的运用：props可以获取从父组件中传过来的值，然后可以赋值给模板中的变量名；
• v-bind的应用：v-bind就是将等号右边的值绑定到指定的参数中，如：v-bind:content = “item”就是父组件中的item绑定到了content这个参数中

使用变量的方式创建组件

上面我们说到不是全局组件的组件怎么创建呢，也是非常简单的,下面我们演示一下：
只要将代码改成下面的就好了，效果如上图，图这里就不贴啦~

image.png

优化2

从上面的例子我们可以看到我们已经可以把新增的item添加到子组件了，但是如果我想删除item呢？显示子组件是没法实现的，这个时候我们就要考虑和将子组件的值传回给父组件，让父组件去做操作；下面是实现步骤：
1.给组件绑定一个事件，当我们点击item的时候就可以触发事件；
2.触发点击事件的时候，同事告诉父组件要进行删除操作，并把变量的值传递给父组件中，让父组件去进行操作
具体实现：

1.

image.png

我们在上面定义的组件多定义了一个index值，这个是用来保存下标值的；然后再子组件中添加了一个方法handleDeleteClick同时在Li标签中绑定了这个事件，因此当我们点击item值的时候，就会触发handleDeleteClick这个方法，然后会调用名为声明为"delete"的事件，同时也把index值传过去；

image.png

既然我们新增了参数，我们也一定要在循环的时候获取到index的值
3.

image.png

最后自然的要在父组件里面添加对应的处理方法
4.补充：
我们可以看到我们把v-on直接改成了@，这也是绑定事件~
完整代码

    
    






    
    提交
    

        

        
    

3.总结

看了一下入门教程，这里做一个总结：

• Vue.js是mvvm模式实现的轻量级框架，非常好使，让我们开发的是哦户更多的注重数据的变化，而非频繁的操作DOM；
• v-bind,v-for,v-on指令的操作，记住一点，指令往往是在元素中使用的；
• 组件有全局和本页面的组件之分，全局的话用Vue.component实现。本页面的话直接定义就好了；
• 子组件，父组件之前的数据传递问题：
  父传子的话比较简单，绑定变量同时在props中定义就好了;
  子传父的话，通过触发父组件方法的方式传递