vue2.5入门

• 简介

       对于很多刚接触Vue的同学，最难做到的就是编程思路的切换，这篇博客，带大家快速的上手Vue的基础开发。安装这里就不具体介绍了，大概就是去官网下载vue源码包，在本地保存下来，让后通过script标签引入vue源码库，然后就可以使用了。

• 创建第一个vue实例

    
    
    


{{msg}}

首先我们通过script标签引入vue，那么我们就可以创建一个vue实例了，在vue实例中，我们可以传入一个大参数，参数里面包含几个部分，首先是el参数，el的意思是让vue这个对象去接管页面上的一个element(元素），让这个vue实例和具体的dom节点作绑定；而data参数则是存放了vue里面所有的数据。让我们来看下页面运行效果：

这样，一个简单的vue实例就完成了，是不是so easy！

• 挂载点，模板与实例

如果el元素和div标签中的id对应上，那么div标签就是这个vue实例的挂载点，vue只会处理挂载点下面的内容，在挂载点内部的内容，我们都称为模板内容。模板内容不仅可以写在挂载点内，还可以写到vue实例里面，代码如下：

效果如下：

• vue中的数据，事件和方法

如上图代码中，我们通过'{{‘开始 ’}}' 结束，中间加个‘msg’的语法，我们叫做插值表达式。我们把msg的值插入到

标签中，

除了这样的写法，我们还有v-text 和v-html指令，代码如下

    
    
    



    

    

    
{{context}}
 

运行效果：

通过效果展示，就能知道v-text 会转义，v-html不会转义，"{{}}"其实是v-text的简写形式，那么如何给模板上的一个标签绑定一个事件呢，假设我们希望页面上的内容被点击了后，由hello变成world。该怎么做呢，那么就来讲下v-on:click指令,代码直接附上

    
    
    



    
    
{{content}}

我们在挂载点下的div标签中加入v-on:click指令，当指令被执行的时候，后面要跟一个函数，定义为click，在vue实例中，要引入函数方法，我们就要定义methods参数，并在里面定义具体的函数方法

此外v-on:click 可以简写为@click，那么vue中的数据，事件和方法就介绍完了

• vue中的属性绑定和双向数据绑定

首先我们来看个简单的实例：

    
    
    



    
hello world

title是html的一个属性，当鼠标放在hello world上，会有一个‘this is hello world’提示语，如果我们希望这个提示语可变，该怎么做呢，那么我们就来介绍下v-bind指令代码如下

    
    
    



    
hello world

通过v-bind属性，将当前的title属性和当前的数据项title进行绑定另外，v-bind:title 可以简写为 :title

接下来我们来讲解下双向数据绑定，在讲双向数据绑定之前，我们先来了解一下单项数据绑定，单项数据绑定的意思是，数据决定页面的显示，但页面无法更改数据的内容。比如：

    
    
    



    
hello world
    
    
{{content}}

效果：

改变输入框的内容，div里面的内容并没有发生改变。运用双向数据绑定指令v-model，改变输入框里的值，让div的内容也发生改变。

    
    
    



    
hello world
    
    
{{content}}

• v-if、v-show、v-for指令

啥也不多说了，直接上代码解释：

    
    
    



    
hello world
 
     
    toggle
    

        
        
        
{{item}}
    

点击toggle，隐藏hello world，可以通过v-if或者v-show实现

v-if 和 v-show 的区别：

     v-if 为false的时候，dom元素会清除

     v-show为false的时候，元素不会清除，只是加了html标签display:none

页面循环展示数据使用v-for，加入:key,可以提升渲染的效率，key要求值都不同，假如循环的数据有相同，则可以加入index，代表每一项的下标。能保证唯一性。