v-for

v-for=" "（循环）

v-model

v-model (双向数据绑定）主要用于表单元素

<div id="in"><input type="" name="" id="" value="" v-model="meg"/><p>{{meg}}</p></div>      

<script type="text/javascript">
            new Vue({
                el:'#in',
                data:{
                    meg:''
                }
            })
        </script>

v-on

v-on 事件 写法：v-on：事件名=‘函数名’ 简写@click " "

v-bind

v-bind:属性名 绑定一个属性 简写属性名=‘值’

<div id="app">
            <img v-bind:src='url' alt="" v-on:click="art"/>         
        </div>

<script type="text/javascript">
            new Vue({
                el:'#app',
                data:{
                    url:'img/1.jpg',
                    flag:true
                    /*ul:'img/2.jpg',*/
                },
                methods:{
                    art:function(){
                            if(this.flag){
                                this.url='img/2.jpg',
                                this.flag=false;
                            }else{
                                this.url='img/1.jpg',
                                this.flag=true;
                        }
                    },                  
                }
            })
        </script>

v-show

v-show=" " 控制元素的显示或隐藏 display:block;
v-if=" " 控制元素的显示或隐藏 visibility:hidden;

display:none 与 visibility:hidden的区别：

1.display:none是彻底消失，不在文档流中占位，浏览器也不会解析该元素；visibility:hidden是视觉上消失了，可以理解为透明度为0的效果，在文档流中占位，浏览器会解析该元素；

2.使用visibility:hidden比display:none性能上要好，display:none切换显示时visibility，页面产生回流（当页面中的一部分元素需要改变规模尺寸、布局、显示隐藏等，页面重新构建，此时就是回流。所有页面第一次加载时需要产生一次回流），而visibility切换是否显示时则不会引起回流。

逻辑运算符
&&与
|| 或
！非

<div id="app">
            <p>{{meg}}</p>
            <h1 v-show="!see">{{meg}}</h1>
        </div>

    <script type="text/javascript">
            new Vue({
                el:'#app',
                data:{
                    meg:'hello vue',
                    see:true

                }
                
            })
        </script>

v-if、v-else、v-else-if控制元素的显示与隐藏

<div id='app'>
       <p v-if="num==0">0000000000000</p>
       <p v-else-if="num==1">111111111111</p>
       <p v-else-if="num==2">2222222222222</p>
       <p v-else-if="num==3">333333333333</p>
       <p v-else-if="num==4">444444444444</p>
       <p v-else='num==5'>555555555555</p>
   </div>
    <script src='js/vue.js'></script>

    <script>
       new Vue({
           el:'#app',
           data:{
//               num:Math.floor(Math.random()*(max-min+1)+min)
               num:Math.floor(Math.random()*(5-0+1)+0)
           }
       })
    
    
    </script>

复习随机数公式
Math.floor(Math.random()x(max-min+1)+min)
保留小数
toFixed