- 文本插值Mustach(可在{{}}进行+连接，*数乘)
<body>
<div id="app">{{message}}</div>
</body>
<script>
//定义变量：let（变量）/const（常量）
const app=new Vue({
el:"#app",//用于挂载要管理的元素
data:{//定义数据
message:'hello'
}
})
</script>
- v-html
<div id="app">
<div v-html="message"></div>
</div>
<script>
new Vue({
el:'#app',
data:{
message:'<h1>my教程</h1>'
}
})
</script>
- v-bind
判断class1的值，如果为true使用class1类的样式，否则不使用该类：
<div id="app">
<label for="r1">修改颜色</label>
<input type="checkbox" v-model="use" id="r1">
<div v-bind:class="{'class1':use}">
v-bind:class 指令
</div>
</div>
<script>
new Vue({
el:'#app',
data:{
use:false
}
});
</script>
- 表达式：提了javascript表达式支持
<div id="app">
{{5+5}}<br>
{{ok?'YES':'NO'}}<br>
{{message.split('').reverse().join('')}}
<div v-bind:id="'list-'+id">my教程</div>
</div>
<script>
new Vue({
el:'#app',
data:{
ok:true,
message:'RUNOOB',
id:1
}
})
</script>
- 指令
指令是带有v-前缀的特殊属性，用于在表达式的值改变时，将某些行为应用到DOM上
<div id="app">
<p v-if="seen">现在你看到我了</p>//v-if指令根据seen的值决定是否插入p
</div>
<script>
new Vue({
el:'#app',
data:{
seen:true
}
})
</script>
- 参数
参数在指令后以冒号指明。如：v-bind用于响应地更新HTML属性
<div id="app">
<pre><a v-bind:href="url">my</a></pre>
<a v-on:click="dosomething></a>
</div>
<script>
new Vue({
el:'#app',
data:{
url:'http'
}
})
</script>
- 用户输入
在Input输入框中我们可以使用v-model指令来实现双向数据绑定
<div id="app">
<p>{{message}}</p>
<input v-model="message">
</div>
<script>
new Vue({
el:'#app',
data:{
message:'Runoob!'
}
})
</script>
v-model指令用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值。
- 过滤器
在两个大括号中：
{{message|capitalize}}
在v-bind指令中：
<div id="app">
{{message|capitalize}}
</div>
<script>
new Vue({
el:'#app',
data:{
message:'runoob'
},
filters:{
capitalize:function(value){
if(!value) return ''
value=value.toString
return value.charAt(0).toUpperCase()+value.slice(1)
}
}
}
})
</script>
- v-for:创建列表
<div id="list">
<ul>
<li v-for="item in movies">{{item}}</li>
</ul>
</div>
<script>
const list=new Vue({
el:"#list",
data:{
movies:['QQ','VX','WB']//数组
}
})
</script>
