目录
插值表达式“{ {}}”
数据绑定最常见的形式就是使用双大括号（Mustache语法）“{ {}}”将动态绑定的数据实时显示出来
<div id="app">
{
{msg}}<br>
{
{5+5}}<br>
{
{ ok ? 'YES' : 'NO' }}<br>
{
{ msg.split('').reverse().join(',') }}
</div>
<script>
new Vue({
el: '#app',
data: {
ok: true,
msg: 'asdfSF',
}
})
</script>
v-html和v-text指令
v-html指令用于输出html代码
v-text指令主要用来更新textContent,将示例中的数据当作纯文本输出
例1
<div id="app">
<div v-html="msg"></div>
<div v-text="msg"></div>
</div>
<script>
new Vue({
el: '#app',
data: {
msg: '<h1>Vue教程</h1>'
}
})
</script>
v-on指令
v-on指令是用来绑定事件监听器的。类似于原生的JavaScript中的onclick的用法，使用此指令可以进行一些交互。" v-on: "可以简写为“ @ ”
例1
<div id="app">
<input type="button" value="点击次数" @click="add"/>
<p>我被按了 {
{count}} 次</p>
</div>
<script>
new Vue({
el:"#app",
data:{
count:0
},
methods:{
add(){
this.count++
}
}
})
</script> 
v-model指令
v-model指令的本质是监听用户输入事件，从而更新数据。同时，v-model指令会忽视所有表单元素的value、checked、selected特性的初始值，他会将Vue实例中的数据作为数据来源。当输入事件发生时，他会实时更新Vue示例中的数据，从而实现数据的双向绑定。
例1
<div id="app">
<p>input元素：</p>
<!-- 使用v-model指令在表单上创建双向数据绑定 -->
<input v-model="message" placeholder="请输入...">
<p>消息是：{
{message}}</p>
</div>
<script>
new Vue({
el:'#app',
data:{
message:'hello',
}
})
</script> 
v-if指令
v-if指令可以实现条件渲染，Vue会根据表达式的值的真假来渲染元素
例1：判断二月份有几天
<div id="app">
<input type="text" v-model="year">
<p v-if="year%4==0 ||year%100==0">{
{show(29)}}</p>
<p v-else>{
{show(28)}}</p>
</div>
<script>
new Vue({
el:"#app",
data:{
year:2023,
},
methods:{
show(num){
return this.year+"年2月份有"+num+"天"
}
}
})
</script>
例2：比较两个数的大小
<div id="app">
请输入第一个数：<input type="text" v-model="num1">
<br>
请输入第二个数：<input type="text" v-model="num2">
<br>
<p v-if="!this.num1||!this.num2">比较结果：{
{show("请输入正确数字")}}</p>
<p v-else-if="num1>num2">比较结果：{
{show("第一个数大于第二个数")}}</p>
<p v-else-if="num1<num2">比较结果：{
{show("第一个数小于第二个数")}}</p>
<p v-else="num1==num2">比较结果：{
{show("第一个数等于第二个数")}}</p>
</div>
<script>
new Vue({
el:'#app',
data:{
num1:'',
num2:'',
result:''
},
methods:{
show(da){
return da
},
}
})
</script>
v-show指令
v-show指令和v-if指令作用还差不多,以下面的例子来区分一下
例1
<div id="app">
<div v-if="isTrue">v-if</div>
<div v-show="isTrue">v-show</div>
</div>
<script>
new Vue({
el:"#app",
data:{
},
computed:{
isTrue(){
return false;
}
}
})
</script>
v-if和v-show的区别
v-if没有显示是因为对页面进行注释
v-show没有显示是因为CSS中的display的值为none
v-if的原理：每次动态创建或移除元素，来实现元素的显示或隐藏
v-show的原理：动态为元素添加或移除display:none样式，来实现元素的显示和隐藏
如果要频繁的切换元素的显示状态，用v-show性能更好
v-for 指令
v-for用来遍历数组、对象的，其表达式需要结合in来使用
遍历数组
<div id="app">
<ul>
<li v-for="cloth in clothes">{
{cloth.name}}:${
{cloth.price}}</li>
</ul>
</div>
<script>
new Vue({
el:'#app',
data:{
clothes:[
{
name:'衬衫',
price:'180'
},
{
name:'外套',
price:'200'
},
{
name:'裤子',
price:'380'
}
]
}
})
</script>
遍历对象
<div id="app">
<ul>
<li v-for="(value,key,index) in user">{
{index}}-{
{key}}:{
{value}}</li>
</ul>
</div>
<script>
new Vue({
el:"#app",
data:{
user:{
name:"张三",
age:"30",
sex:"男"
}
}
})
</script>