Vue.js基础入门（一）

今天我们来给大家讲一下Vue，以下纯干货~。

什么是Vue？

Vue是一套构建建用户界面的渐进式框架。

那么什么是渐进式框架呢？我在知乎上看到了一个比较好的答案，上面是这么说的：渐进式代表的含义是-主张最少。

每个框架都会自己的一些特点，在使用时会给使用者一些限制。比如说angular，他的两个版本都是强主张。如果你使用它，那么你必须要接受以下东西：-必须使用它的模块化机制-必须使用它们的依赖注入-必须使用它们的特殊形式定义组件（每个框架都会有，难以避免）。

但是Vue是渐进式的，他没有强主张，用起来很灵活，它只关注与视图层，只做该做的事情。

渐进式的含义：没有做职责之外的事情。

好了，接下来介绍一些基本的东西。

Vue起步

创建vue实例

每个Vue应用都是通过Vue函数创建一个新的Vue实例开始的：

var vm = new Vue({
}) //这里vm(ViewModel的缩写)这个变量名就是vue实例

插值

#文本 

数据绑定最常见的形式就是使用“Mustache”双大括号“{{ }}”的形式。

Mustache标签将会被替代为对应数据对象上的message属性的值。无论何时，绑定数据上的属性发生了改变，插值处的值也会发生改变。

<span>{{ message }}</span>

数据与方法

当一个Vue实例被创建时，它向Vue的响应式系统中加入了其data对象中能找到的所有的属性。当这些属性的值发生改变时，视图也会发生改变。

var data = { a:1 }

<div class="active">
     v-bind:class="{ active:isActive, text-danger:hasError}"
</div>


//data
data: {
    isActive:true,
    hasError:false
}

var vm = new Vue ({ data: data})vm.a === data.a //turevm.a=2data.a=2

当这些数据改变时，视图才会进行重渲染。值得注意的是只有当实例被创建时data中存在的属性才是响应式的

比如：vm.b = 'hello'; 这里b的值将不会改变。如果有些属性在一开始并不需要而你之后会用到的话，那就可以想在data属性中

设置一些初始值：

data: {
    message = ' ',
    count = 0 ,
    todos: [],
}

这里唯一例外的就是使用object.freeze();这会阻止修改现有属性，意味着响应式系统无法再追踪变化。

除了数据属性，Vue实例还暴露了一些有用的实例属性和方法。它们都有前缀$,以便和用户自定义的属性区分开来，例如：

<div id="app">
   <span>{{ message }}</span>
</div>
var data = { message:1 }
var vm = new Vue ({
   el: '#app',
   data: data
})

那么这里vm.$el ===document.getElementById("app"); 

             vm.$data ===data;

实例生命周期钩子

每个Vue实例在被创建时都要经过一系列的初始化过程，例如需要设置数据监听、编译模板、将实例挂载到DOM并在数据变化时跟新DOM,这过程中运行了一些叫做生命周期钩子函数，这给了用户在不同阶段添加代码的机会。（上一篇文章关于Vue生命周期和钩子函数的小理解这里就不多说啦）

Vue基本指令

v-bind

对象语法：

我们可以传给 v-bind:class一个对象，以动态的切换class

<div v-bind:class="{ active:isActive }"></div>

上面的语法表示active这个class的存在与否取决于isActive真实与否（truthy或falsy）。

Truthy（真值）指的是在Boolean上下文转换后的值为真的值，所有值都为真值，除非被定义为

falsy（false、0、”“、null、NaN、undefined）。

你也可以在对象中传入更多的属性来动态切换多个class。class和v-bind:class指令可以共存。

<div class="move"

  v-bind:class="{active:isActive,'text-danger':hasError}"></div>

data: {
       isActive: true,
       hasError: false
            }

结果渲染为：

    <div class="move active"></div>

数组语法：

我们也可以把一个数组传给v-bind:class

<div v-bind:class="[activeClass, errorClass]"></div>

绑定内联样式 （v-bind:style）可以传入一个对象，也可以使用数组形式，与上面给用法是一样的。

缩写方式 v-bind:class 与：class是相等的。