事件

<div id="app">

    <input type="text" v-model="msg">

    <p>{{msg}}</p>

</div>

<script>

    new Vue({

        el:'#app',

        data:{

            msg:'adw'

        }

    })

</script>

image

v-model:="" 双向数据交互，多用于表单

<div id="app">

<button v-on:click="alt">我是按钮</button>

</div>

new Vue({

el:"#app",

data:{

txt:'js'

        },

methods:{

alt:function(){

alert("我是弹窗")
}

})

QQ拼音截图未命名.png
QQ拼音截图未命名.png

v-on:事件="函数名"

<div id="app" v-on:click="an">
    <img v-bind:src="url" alt="">
</div>
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>
<script>
    new Vue({
        el:'#app',
        data:{
            url:'download.jpg',
            flag:true

        },
        methods:{
           an:function(){
               if(this.flag){
                   this.url='1.jpg',
                   this.flag=false
               }else{

                  this.url='download.jpg',
                   this.flag=true
               }
           }
        }
    })
</script>

QQ拼音截图未命名.png

点击图片能够切换图片
v-bind 用于绑定属性

<div id="app">
    <h1 v-show="see" >对</h1>
    <h1 v-show="!see">错</h1>
    <button v-on:click="an">点击切换</button>
    <p v-show="see"></p>
</div>
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>
<script>
    new Vue({
        el:'#app',
        data:{
            see:true
        },
        methods:{
            an:function(){
                /*if(this.see){
                   this.see=false
                }else{
                    this.see=true
                } 方法一*/
                this.see=!this.see    //方法二
            }
        }
    })
</script>

QQ拼音截图未命名.png

点击按钮隐藏红色方块
v-show 显示隐藏，用display:none来隐藏元素

v-if

<div id="app">
    <p v-if="num==0">00000000</p>
    <p v-else-if="num==1">111111111</p>
    <p v-else-if="num==2">22222222</p>
    <p v-else-if="num==3">3333333</p>
    <p v-else-if="num==4">44444444</p>
    <p v-else="num==5">555555</p>
</div>
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.js">
<script>
    new Vue({
        el:'#app',
        data:{
            num:Math.fooor(Math.random()*(5-0+1)+0)//此处为随机数
          //随机数公式为num:Math.floor(Math.random()*(max-min+1)+min)
        }
    })
</script>

v-if控制元素的显示与隐藏，但与v-show不同的是，v-if、v-else、v-else-if是使用visibity:hidden；v-if显示隐藏是将dom元素整个添加或删除
v-if,v-else,v-else-if 于原生js一样

display:none与visibity:hidden的区别：

display:none是将元素完全隐藏，并且元素不占用页面空间，所占空间会被其它元素占用，功能完全消失（不保留物理空间）
visibity:hidden是将元素隐藏，所占用空间不变，只是不显示元素，功能完全消失（保留物理空间）