1.Vue指令
v-for="val /value（值） in arr "用来循环数组、对象
v-model=" "双向数据绑定，用于表单元素
v-on: 事件名=“ ” v-on:click="函数名” 绑定事件，还可以写成@click="函数名"
v-bind:属性名 src=“值” 绑定属性
v-show=“ ”控制元素的显示和隐藏 使用display:none来隐藏
v-if=“ ” visibilty:hidden;
v-else=" "
v-else-if=" "
2.JS
JS中可以被new的东西
var arr=[]; var arr=new Array(); var date=new Date();
var reg=/ /; var reg=new RegExp(/ /);
逻辑运算符：
&& 与、且
|| 或
有假且为假，有真或为真
！ 取反
条件语句：
if(){}
if(条件){1}else{2}
else....if多重条件语句
methods方法 、 push() 添加 、 splice（index,1）删除
3.v-bind
<div id="itany">
<img v-bind:src="url" alt="">
</div>
<script src="../js/vue.js"></script>
<script>
new Vue({
el:"#itany",
data:{
url:"../images/1.jpg"
}
})
</script>
4.点击切换图片
<div id="itany">
<img v-on:click="alt" v-bind:src="url" alt="">
</div>
<script src="../js/vue.js"></script>
<script>
new Vue({
el:"#itany",
data:{
url:"../images/1.jpg",
aa:"../images/4.jpg"
},
methods:{
alt:function(){
this.url=this.aa
}
}
})
</script>
5.选项卡
<style>
*{
padding: 0;
margin: 0;
}
li{
list-style: none;
float: left;
border: 1px #000000 solid;
text-align: center;
width: 40px;
cursor: pointer;
}
#itany{
margin-left: 20px;
margin-top: 20px;
}
</style>
<div id="itany">
<img v-bind:src="url" alt="">
<ul>
<li v-for="(val,index) in urll" v-on:click="alt(index)">{{index+1}}</li>
</ul>
</div>
<script src="../js/vue.js"></script>
<script>
new Vue({
el:"#itany",
data:{
url:"../images/1.jpg",
urll:["../images/1.jpg","../images/2.jpg","../images/3.jpg","../images/4.jpg"]
},
methods:{
alt:function(ind){
this.url=this.urll[ind]
}
}
})
</script>
Image 3.png
6.v-show
<div id="itany">
<h1>{{msg}}</h1>
<h3 v-show="!see">{{msg}}</h3>
</div>
<script src="../js/vue.js"></script>
<script>
new Vue({
el:"#itany",
data:{
msg:"hello vue",
see:true
}
})
</script>
7.v-if 、 v-else 、 v-else-if
<div id="itany">
<p v-if="num==0">0000</p>
<p v-else-if="num==1">1111</p>
<p v-else-if="num==2">2222</p>
<p v-else-if="num==3">3333</p>
<p v-else-if="num==4">4444</p>
<p v-else="num==5">5555</p>
</div>
<script src="../js/vue.js"></script>
<script>
new Vue({
el:"#itany",
data:{
num:Math.floor(Math.random()*(5-0+1)+0)
}
})
</script>
8.v-show点击显示隐藏
<div id="itany">
<button v-on:click="chg">点击隐藏</button>
<p></p>
<img v-bind:src="url" alt="" v-show="see">
</div>
<script src="../js/vue.js"></script>
<script>
new Vue({
el:"#itany",
data:{
url:"../images/4.jpg",
see:true
},
methods:{
chg:function(){
this.see=!this.see
/* if(this.see){
this.see=false
}else {
this.see=true
}*/
}
}
})
</script>
