vue系列基础篇（一）

vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

这里我们引用官方推荐的开发库，下面是一个基础的vue开发环境。

  
  {{ test }}

Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统。这里解释一下，可以在页面上使用this（vue）对象上的变量和函数，可以使用原生js方法，js表达式，一切符合js语法的单行js都能运行。下面的例子进行一些举例。

html部分：

  
  {{ Math.random(test + 1) }}
  
  试着点击我
  
  试着点击我
  
  

js部分：

var app = new Vue({    el: '#app',    data: {      count:5
    },    methods:{              //所有挂载在this对象上的方法，可以在页面上使用
      clickCount(){        this.count -= 1
      }
    }
  })

最后运行结果：

结果

当我们点击按钮5次以后，按钮就不能被点击。 说明disabled属性启到了作用，也说明，vue的变量绑定的特性。

vue内置了多个指令，指令能直接作用到页面上，而且能使用上面讲到的所有语法。v-text、v-html、v-if、v-show、v-for、v-model是常用的内置指令，指令还可以使用自定义指令，后面会讲到。

html:

  v-html测试
  

  
  v-if,v-else测试
   2">
    
我不显示
  
  
    
我显示了
  
  
  v-show测试
   2">我显示了

  
  v-for测试
  

    {{i}}
  
  
  
    v-model测试:  
  输入count的值：

js部分：

var app = new Vue({    el: '#app',    data: {      count:5,      template:"我是测试"
    },    methods:{              //所有挂载在this对象上的方法，可以在页面上使用
      clickCount(){        if(this.count < 2){          return
        }        this.count -= 1

      }
    }
  })

最后看一下运行效果：

结果

可以看到，上面所有的指令，都会被cout变量影响或者改变，这里提一下，v-if和v-show的区别，v-if可以作用在template这个内置组件上，可以不对html结构产生影响，并可以结合v-else-if和v-else使用。v-show就是一段thml的显示和隐藏。他们的渲染顺序不一样，v-if是在需要的时候才开始渲染，而v-show是一开始就渲染了里面的html。

v-mode指令，一般是绑定在表单上，如input、testarea、radio、select等可以让用户输入或改变的demo上。这种变量就具有双向绑定，意思是用户输入的，能马上被js捕获到，而js改变的，就能马上展现在页面上。上面的count变量就具有着一特性。

class和style的绑定在vue里面比较特殊，但是比较常用，这里具体讲一下。
html代码：

   2,'active1':getCount,'test':1}">:class测试
  
  :style测试

js部分：

data: {      count:5,      styleObj:{        'font-size':'20px',        'color':'red'
      },
    },    methods:{              //所有挂载在this对象上的方法，可以在页面上使用
      getCount(){        return true
      }
    }

最后我们看一下渲染的html代码：

结果

可以看到，:class和:style支持对象语法和数组语法，能否拿到对应的样式和class都觉得表达式后面的值是true还是false。语法里面完全支持vue的基础语法，能执行函数，能支持单行表达式，根据表达式结果渲染html.

组件是vue的核心功能，这里做基础讲解，后面会单独出一片详细的组件。组件：意思是说，我把一段公共的模块提出处理，封装在一起，然后在多个页面去引用这个模块，从而达到避免写重复代码的目的。

html代码：

  组件示例：
  
    
  
  
    
  

js代码：

// 注册一个全局组件
  var clickTimes = {    data: function () {      return {        myCount: 0
      }
    },    template: 'You clicked me {{ myCount }} times.'
  }

结果

可以看到，我们在box1和box2中都引用了组件button-counter，然后可以发现他们独立运行，并且相互不影响。后面会专门讲一下，组件传参，父子组件相互访问等问题。这里就简单讲一下。

作者：伊泽瑞尔灬
链接：https://www.jianshu.com/p/8d3559e3aaa3