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~