1.易忘点：
1.1 什么时候用 {{ }}
取data中的数据，如{{message}}
new Vue({
el:'#app',
data:{
message:'你好，世界!',
msg:'我要吃饭'
}
});
1.2 什么时候用{}:
<p :style="{color:fontColor}">{{msg}}</p>
new Vue({
el:'#app',
data:{
msg:'今天的天气很好',
fontColor:'red'
}
})
1.3 什么时候用v-bind
绑定数据data
:src="imgSrc"
1.4 什么时候用v-on
绑定函数
@click="changeContentColor()"
2.指令：
2.1 v-model作用：
改变input的值，<p>里的值也改变
<p>{{message}}</p>
<input type="text" v-model="message"/>
new Vue({
el:'#app',//视图
data:{
message:'你好，世界!'
}
});
2.2 v-once作用：
v-once使得原始值不改变,即无论怎么改变input的值，依然只显示最原始的值
<p v-once>原始值：{{msg}}</p>
<p>后面的:{{msg}}</p>
<input type="text" v-model="msg"/>
2.3 v-if作用：
满足if条件的话,显示执行该条语句，否则不显示
不满足条件，显示为注释掉那种
<p v-if="show">要显示出来</p>
<p v-if="height > 1.55">小明的身高:{{height}}m</p>
new Vue({
el:'#app',//视图
data:{
show: true,
height:1.68
}
});
2.4 v-show作用：
不满足条件创建，显示为display:none
<p v-show="height > 1.55">小明的身高:{{height}}m</p>
2.5 v-else作用：
v-else不能单独使用，必须与v-if v-else-if使用
v-if与v-else之间不要存在其他标签，会识别不了v-else的
2.6 v-else-if作用：
v-if---------> v-else-if------------>v-else-if--------------->v-else
2.7 v-for作用：
v-for优先执行与v-if
<div id="app">
<!--遍历数组-->
<p v-for="(score, index) in scores">
{{index + ':' +score}}
</p>
<!--遍历对象-->
<p v-for="d in dog">
{{d}}
</p>
<!--遍历字符串-->
<p v-for="str in name">
{{str}}
</p>
<!--遍历数字-->
<p v-for="p in phone">
{{p}}
</p>
</div>
<script src="../js/vue.min.js"></script>
<script>
new Vue({
el:'#app',
data:{
scores:[100, 87, 88, 80],
dog:{name:'旺财', age:6, height:1.44},
name:'zhangsan',
phone:'1888882'
}
})
</script>
2.8 v-text,v-html作用：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<p>{{msg}}哈哈哈</p>
<!--v-text不能够往标签里添加新东西
呵呵呵呵显示不出来-->
<p v-text="msg">呵呵呵呵</p> <!--只显示Vue中msg的内容-->
<div v-html="html"> <!--只显示Vue中html的内容-->
哈哈哈哈! <!--显示不出 -->
<input type="text"> <!--显示不出 -->
</div>
</div>
<script src="../js/vue.min.js"></script>
<script>
new Vue({
el:'#app',
data:{
msg:'今天的天气很好',
html:'<input type="date"><input type="color">'
}
})
</script>
</body>
</html>
2.9 v-bind作用：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--给属性动态绑定数据用v-bind或者:-->
<div id="app">
<img v-bind:src="imgSrc" alt="">
<!--可以省略v-bind 但要保留 : -->
<img :src="imgSrc1" :alt="alt">
</div>
<script src="../js/vue.min.js"></script>
<script>
new Vue({
el:'#app',
data:{
imgSrc:'img/slide.jpg',
imgSrc1:'img/slide.jpg',
alt:'我是美女'
}
})
</script>
</body>
</html>
2.9 v-on作用：
v-on里面放表达式或者函数methods中定义
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<p :style="{color:fontColor}">{{msg}}</p>
<button v-on:click="msg='今天好热啊！'">改变内容</button>
<button @click="changeContent()">改变内容1</button>
<button @click="changeContentColor()">改变颜色1</button>
</div>
<script src="../js/vue.min.js"></script>
<script>
new Vue({
el:'#app',
data:{
msg:'今天的天气很好',
fontColor:'red'
},
methods:{//实例的所有函数实现
changeContent(){
// alert(0);
this.msg = '测试改掉没有！'
},
changeContentColor(){
this.fontColor = 'green'
}
}
})
</script>
</body>
</html>
网友评论