代码部分请下载本文代码阅读，代码均能正常运行并有详细的注释。

概述

无需置疑，Vue之所以能如此之火，主要受益于它是一个MVVM框架和它易学的文档，几乎所有觉得学习Vue有难度的开发者都是觉得组件脚手架等等不太好理解，但是这些都不是Vue的核心，Vue的核心表现在最易学的Vue指令和绑定，学好Vue指令和绑定基本就学好Vue的一大半了，把基础核心的几个知识点说完会做几个完整的demo。

学习方法

学习编程切勿眼高手低，碰到简单的如Vue指令类似的知识千万不要忽略掉，最好能把指令熟记于心，对于新手更是这样，这样在讲解复杂知识点的时候就不用再重述这些简单的知识点了，当你对于简单知识点烂熟于心的时候，你的注意力会集中在少数几个最难的知识点上，更容易学好，所以读者最好能对着下面的代码和官方文档把这些指令多理解多记忆，再学习后面的文章。

Vue指令大杂烩

        
    
        
             插值用法: {
   {demo1}} 
     
        
             v-text用法: 
      
     
        
             v-html用法: 
      
     
        
             v-show用法：
     这是v-show内容，v-show的值控制这个元素显示隐藏 
     
        
             v-if用法：  
     这是v-if的内容
     
        
             v-else用法： 
     这是v-if的内容 
     这是v-else的内容  
     
        
             v-else-if用法：
     这是v-if的内容 
     这是v-else-if的内容 
      这是v-else内容
     
        
             
             
             
             
             v-for用法1： 
     {
   {"这是第"+index + "个" + ":" + item}} 
     
        v-for用法2： 
     {
   {"key:" +key + "|" +"value:" + value + "|" + "index:" + index + "     " }} 
     
        
             v-on用法：  
     
     
        
             v-bind用法：
      
     
     改变input的值并不能修改vue实例中的值，所以另一个input不会修改
     
        
             v-model用法： 
      
     
     改变input的值能修改vue实例中的值，所以另一个input会修改,这叫双向数据绑定
     
        
             v-pre用法：
      {
   {demo10}}
     
        
             v-cloak用法：
     {
   {demo11}} | 
     {
   {demo11}}
     
        
             v-once用法：        
     {
   {demo12}}