版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/TheBestAge/article/details/87559123
1.文本内容
Mustache模板,表现形式{{语法}},不能作用在HTML特性(属性)上,只能存在单行一句
<head>
<meta charset="UTF-8">
<title>vue入门</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="root">
<hl >{{message}}</hl><br>
</div>
<script>
new Vue({
el:"#root",
data:{
message:"hello world",
}
</script>
</body>
2.HTML
双大括号将数据解释为不同文本,可以利用v-html指令输出真正的HTML。
而V-text是用于操作纯文本,会替代显示数据对象上的值,值发生变化,插值出也发生变化,是一个单向绑定的过程,就下面的例子而言,V-text会在标题处直接输出<span>hello world</span>,V-html则会解析未span框。
V-text一般使用{{}}来表示。
<hl v-html='message'></hl>
...
data:{
message:<span>hello world</span>,
}
3.v-bind
Vue最大的特点是具有双向数据绑定:利用V-bind可以实现组件之间的传值,也可以来绑定属性.
v-bind:editable="“可以简写为:editable=”"。在实际项目中会经常使用其来动态地改变属性值。
<DatePicker :editable="false" :value="datavalue" type="date" @on-change="changedate"></DatePicker>
4.V-modal
特点双向绑定,但通常只作用域表单组件的绑定,例如input,select等
<div id="app">
<input v-model="message " />
</div>
var app = new Vue({
el : '#app',
data : {
message : 'hello world'
}