Vue学习之路---No.1(分享心得,欢迎批评指正)

时间:2022-01-29 03:37:50

首先为了打消大家对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!”加上一个输入框,具体效果,大家可以想象一下,这应该不难。
 
什么?你觉得这些太简单了,想来点更有意思的?
 
好的,那我们继续阔步向前,向着新大陆进发.....................
 
直接上图
 
Vue学习之路---No.1(分享心得,欢迎批评指正)
如上图所示,不难发现,在视图和数据的中间,有一个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~