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>