一、Vue指令：

• v-on指令:主要用来监听dom事件，以便执行一些代码块。表达式可以是一个方法名。简写为：@
  例子：分别点击“隐藏/显示”按钮可以切换内容的显示

<div id="app">
            <h2 v-if="show">{{name}}</h2>
       <button type="button" v-on:click= "handleClick">隐藏/显示</button>
        </div>
        <script type="text/javascript">
            var app=new Vue({
                el:'#app',
                data:{
                name:'软件1721',
                show: true
                },
                methods: {
                    handleClick: function(){
                        //把当前show属性的值取反
                        if(this.show===true){
                            this.show=false;
                        }else{
                            this.show=true;
                        }
                    }
                    }
                
            })
        </script>

效果如下:

显示

---

隐藏

• v-model:这个指令用于在表单上创建双向数据绑定。v-model会忽略所有表单元素的value、checked、selected特性的初始值。因为它选择Vue实例数据做为具体的值。

<div id="app">
            <form>
                <input type="text" v-model="text" />
       <button type="button" value="提交" v-on:click="handleClick">提交</button>
       </form>
        </div>
        <script type="text/javascript">
            var app=new Vue({
                el:'#app',
                data:{
                text:''
                },
                methods: {
                    handleClick: function(){
                        alert("输出的值为："+this.text);
                    }
                    }
                
            })
        </script>

效果如下：

• v-if:实现条件渲染，Vue会根据表达式的值的真假条件来渲染元素

        <div id="app">
        <p v-if="num===1">Jay</p>
        <p v-else-if="num===2">Chou</p>
        </div>
        <script type="text/javascript">
            var app=new Vue({
                el:'#app',
                data:{
                num:1
                }
                
            })
        </script>

当num=1时，显示Jay，当num=2时，显示Chou

• v-show:也是用于根据条件展示元素。和v-if不同的是，如果v-if的值是false，则这个元素被销毁，不在dom中。但是v-show的元素会始终被渲染并保存在dom中，它只是简单的切换css的dispaly属性

<div id="app">
<p v-show="show1">当点击时显示此行</p>
<button @click="show" type="button">点击</button>
        </div>
        <script type="text/javascript">
            var app=new Vue({
                el:'#app',
                data:{
                show1:false
                },
                methods:{
                    show:function(show1){
                        this.show1=true;
                    }
                }
            })
        </script>

当点击按钮时，显示p标签