当你了解这个是怎么用的,是干嘛的,就可以了,更多,更具体的信息可以去vue的官网去看文档;
这里只是用更为直观的方式让你了解一下vue;
---------------------------------------------------------------------------------------------------------------
在上一篇中,我们使用了 v-on 这个指令,这一篇我们来看看 v-bind ,
首先我们写一下基本内容:
<!DOCTYPE html>
<
html
lang=
"en">
<
head>
<
meta
charset=
"UTF-8">
<
title>vue2基础</
title>
<
script
src=
"vue.js"></
script>
</
head>
<
body>
<
div
id=
"main">
<
span>{{message}}</
span>
</
div>
<
script>
new
Vue({
el:
"#main",
data:{
message:
"数据又放到里面来了"
}
});
</
script>
</
body>
</
html>
上面我们将数据渲染到 <span> 中了,我们可以清楚的看到<span>中没任何属性,下面我尝试使用 v-bind 给这个<span>
添加一个属性 nb="123";
你可能会这样做:
<!DOCTYPE html>
<
html
lang=
"en">
<
head>
<
meta
charset=
"UTF-8">
<
title>vue2基础</
title>
<
script
src=
"vue.js"></
script>
</
head>
<
body>
<
div
id=
"main">
<
span
nb=
"123">{{message}}</
span>
</
div>
<
script>
new
Vue({
el:
"#main",
data:{
message:
"数据又放到里面来了"
}
});
</
script>
</
body>
</
html>
这样确实是可以添加上,但是我们没有使用到 v-bind ,
我们看看 v-bind 是怎么绑定的;
<!DOCTYPE html>
<
html
lang=
"en">
<
head>
<
meta
charset=
"UTF-8">
<
title>vue2基础</
title>
<
script
src=
"vue.js"></
script>
</
head>
<
body>
<
div
id=
"main">
<
span
v-bind:nb=
"nbvalue">{{message}}</
span>
</
div>
<
script>
let abc
={
message:
"我数据又出来了",
nbvalue:
123
}
new
Vue({
el:
"#main",
data:abc
});
</
script>
</
body>
</
html>
我使用 v-bind 命令成功的绑定了属性;
在这个地方 ,v-bind 是可以简写的,只要写个冒号就行了 :
我们改写一下:
<!DOCTYPE html>
<
html
lang=
"en">
<
head>
<
meta
charset=
"UTF-8">
<
title>vue2基础</
title>
<
script
src=
"vue.js"></
script>
</
head>
<
body>
<
div
id=
"main">
<
span :
nb=
"nbvalue">{{message}}</
span>
</
div>
<
script>
let abc
={
message:
"我数据又出来了",
nbvalue:
123
}
new
Vue({
el:
"#main",
data:abc
});
</
script>
</
body>
</
html>
在前面我们也是用 v-on 这个指令,也是可以简写的 @
请自己尝试吧;
总结:(1) v-bind 如何实现数据绑定的 ;
(2) v-bind 和 v-on 的简写形式;