Vue.js 允许开发者声明式地将DOM 绑定至底层 Vue 实例的数据。Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。结合响应系统,在应用状态改变时, Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。下面是一些基本的模板语法。
v-html
v-html指令用于输出html代码
<divid="app">
<divv-html="message"></div>
</div>
<script>
newVue({
el:'#app',
data:{
message:'<h1>菜鸟教程</h1>'
}
})
</script>
v-model
我们可以通过v-model指令来进行数据双向锁定
<divid="app">
<p>{{ message }}</p>
<inputv-model="message">
</div>
<script>
newVue({
el:'#app',
data:{
message:'Runoob!'
}
})
</script>
但是,v-model这一命令实际上仅仅是一个语法糖
比如下面这个例子
<divid="app">
<divclass="textbox">
<textareamaxlength="300" @input="countfun"v-model="text"></textarea>
</div >
<divid="count">
<p>您还可以输入{{word}}个字</p>
</div>
</div>
<script>
newVue(
{
el:"#app",
data:{
text:"",
word:"300"
},
methods:{
countfun:function(){
varlen=this.text.length;
this.word=300-len;
}
}
})
</script>
在这个例子当中,v-model绑定了组建text,而组件text从输入文字框中获取变量值,还有一个方法countfun作为input的响应事件(@iuput其实是v-on:input的缩写)这个数据双向绑定才真正起到了作用,它的运行结果是这样子的:
v-bind
v-bind是用来绑定属性和数据的命令
<style>
.class1{
background: #444;
color: #eee;
}
<divid="app">
<labelfor="r1">修改颜色</label><inputtype="checkbox"v-model="flag"id="r1">
<br><br>
<divv-bind:class="{'class1': flag}">
directiva v-bind:class
</div>
</div>
<script>
newVue({
el:'#app',
data:{
flag:false
}
});
</script>
在这段程序代码中,v-model命令将复选框的返回数据与flag进行了绑定,而v-bind命令则是将id=“class1“的代码段与样式绑定起来,而这个id还可以接受布尔值flag,当flag为false的时候,这个属性将被隐藏起来。
运行结果是这样子的:
问题来了,v-model也一样可以绑定数据,那么v-bind和v-model的区别在哪里?
1:如果 id={{xxx}}这种写法,则HTML实际上是这样的:id="{{ xxx}}"2:v-bind用于绑定属性和数据,其缩写为“ : ” 也就是v-bind:id === :id 3:v-model也可以绑定数据,但是他是用在表单控件上的,用于实现双向数据绑定,所以如果你用在除了表单控件以外的标签是没有任何效果的。