Vue学习之路---No.1（分享心得，欢迎批评指正）

首先为了打消大家对Vue.js存在的顾虑，先通过大家所熟知的JQ作为对比。

都知道JQ的语法相对简单、清楚、使用方便、功能齐全；

那么Vue.js呢，同样的，Vue.js与JQ在很多地方都是相同之处，JQ能处理的事情，Vue.js同样能处理

但是，令人兴奋的就在于，Vue.js在处理某些需求，完成某些功能的时候，比JQ更简单，更快捷，更方便。

那么，我们首先来了解一下Vue.js的关键句 --- --- --- “数据驱动视图”。

按照通俗一点的解释就是，视图随着数据的改变而改变。

我们再次拿众所周知的 JQ 作一个对比，比如说，我们用JQ创建了一个列表，那么列表的数据，我们是从Laravel获取的

于是，当我们要加上某个数据的时候，我们需要遍历所有数据，再把需要的数据加入到相应数据加入到dom节点中去

那如果我们要删除一行表格，我们就需要在这个列表中找到这个DOM节点的位置，再删除这一个节点。这样一想，其实绕了很多圈子

于是一大堆大牛就一起写了Vue.js这个框架，我们如果用Vue.js来处理这个问题，那就很简单，数据+1，列表+1；数据-1,列表-1

没有中间商赚差价。

废话了这么多，我们进入到代码环节。

首先，我们看一下，Vue的基础语法 如下：

new Vue({

　　el : ' #surprise ',

　　data{

　　　　bigSurprise : 'Hello world !'

}

})

注：  1. el ，一个新鲜的东西，其实很好理解，我们可以把它当作JQ的节点选择器，通过 el:'', 来获取你想拿到的东西

　　  2. data{} 而它，就是我们会经常用到的东西，通常我们在这个花括号里定义某项东西，如上面的代码，我们定义了一个键值对。

　　  3.{{}}里面为数据变量，vue会自动将其解析为HTML

数据定义好了之后，我们开始“驱动”视图，如下：

<div id="surprise" >{{ bigSurprise }}</div>

上述代码就会输出  Hello world！

很简单？好的， 我们进入到下一个环节。

我们给上面的代码添加一个事件，就用我们最常用的点击事件吧；

在添加事件之前，我有必要大致介绍一下，Vue.js最常用的两个基本语法：

 

v-on:click=""

（不用多解释，用来绑定点击事件）

 

v-bind:href="urf"

(这种方法用来绑定HTML已有属性，比如 style,class,src,href等等，所有这些属性的变动都是属于响应式的，即为动态变动)

 

以上，不难发现都是以V开头，以V开头的写法叫做 directive(对dom功能的一个拓展)，是Vue.js数据控制视图的连接点，这一点我想应该很好理解。

 

介绍完了 ，进入代码世界：

 

<div id = " surprise "> {{bigSurprise}} </div>

<button v-on:click="changeBigSurprise">改变bigsurprise</button>

 

new Vue({

　　el:' #surprise ',

　　data:{

　　　　bigSurprise : " Hello world "

}

 

　　method{

　　　　changeBigSurprise : function() {

　　　　　　this.bigSurprise : " Hello World !!! "

}

}

})

 

写到这里，我们就已经利用Vue完成了一个简单的点击事件的绑定，当botton被点击的时候，id为surprise的标签中的元素将被改变

 

这里，我们引入了一些新的东西：

1. method{}, 这个区域里，我们用来定义方法，简单明了

2.changeBigSurprise，而这，就是我们定义的方法

3.this.bigSurprise, 这就是data{}里面的那个数据

4.为什么不用 this.data.bigSurprise？ 恩，我承认你很有想法，但这个地方，我们需要先了解一下比较底层的东西

this为 Vue（）的一个实例，而data则是传入对象参数的一个属性，两则不能混为一谈。

 

还是比较容易？那很棒，我们继续向前探索.........

 

Vue.js里有一个很出名很简单又很好用的东西叫做“双向绑定”，代码如下

new Vue({

　　el:' #surprise ',

　　data{

　　　　bigSurprise : " Hello world！ " 

}

})

<div id=" xiangpiaopiao ">

<div id=" surprise ">{{bigSurprise}}</div>

<input v-model="bigSurprise">

</div>

 

这里又出现了一个陌生的东西：

1.v-model, 这又是一个directive，它的作用为双向绑定，即上面的代码把input与ID为surprise的标签中的HTML元素绑定，所以ID为surprise的标签中的HTML元素就会随着输入框中元素的变化而变化，而这，在JQ中，我们还需要利用onchange()事件,更繁琐更复杂，更多代码，不划算。

 

那么上面的代码，会输出一行字“Hello world！”加上一个输入框，具体效果，大家可以想象一下，这应该不难。

 

什么？你觉得这些太简单了，想来点更有意思的？

 

好的，那我们继续阔步向前，向着新大陆进发.....................

 

直接上图

 

如上图所示，不难发现，在视图和数据的中间，有一个viewModel层；因为光是数据摆在那里是没有任何作用的

而数据对视图的控制，就全都在这一层里面完成，至于完成的具体过程，这个地方先不提

由上图，我们可以这样理解：  数据绑定在视图上，而视图在监听数据的变化，通过绑定与监听来完成数据与视图的同步，即为数据控制视图。

 

而viewModel这一层其实就是：

var vm = new Vue({

　　el:''

　　data{}

})

我们把数据放进VM里面，通过VM处理，再将各种directive放到渲染到视图里，这样就完成了这一伟大的壮举。

 

既然提到了vm，那么不得不说的是，我们可以用vm来读取数据（vm的属性是直接跟数据的key绑定的），利用上面的例子：

vm.bigSurprise == "Hello world!"

而这个数据是响应式（reactive）的，根据我的理解，也就是动态的，如：

 

var data = { a:1 }

var vm = new Vue({

　　data : data　　

})

 

data.a === vm.data    //-> true

 

data.a == 1

vm.a == 1

 

vm.a == 2

data.a == 2

 

//设置vm的数据会让原来的数据发生改变，同样改变原来的数据，也会让vm的数据发生改变，就减少了jQ当中再次赋值的步骤；

 

其实我们还可以用vm获取其他属性：

 

vm.$el === document.getElementId("surprise")

vm.$data === data

vm.$data.bigSurprise === " Hello world "

 

而为了给大家加深印象，下面展示一下大家正常理解的写法（也就是错误的写法）

 

vm.el == "#surprise"

vm.data == {

　　bigSurprise : " Hello world! "

}

vm.data.bigSurprise == " Hello world！ "

 

注：这个地方出现的$,据说代表了vm的真实属性，这一点，我也很蒙逼啊，得有多真实？

 

WTF？上面的你都懂了？那我不得不说，你是难得一见的计算机天才，分分钟年薪百万的节奏啊；

It's no matter ,如果上面的没有完全理解，那我们先消化一下，明天继续。。。。。。  see you later~ good night~