4.①条件渲染v-if和v-show以及区别②样式style和类绑定的方法③event事件监听④阻止冒泡⑤阻止超链接跳转⑥监听回车事件⑦自动收集表单数据

    <div id="app">
        <p v-if="isok">yes</p>
        <p v-else>no</p>

        <p v-show="isok">成功</p>
        <p v-show="!isok">失败</p>
        <button @click=" isok = !isok">取反</button>
    </div>

    <script>
        new Vue({
            el: '#app',
            data: {
                isok: true
            }
        })
    </script>

二：样式类和style的绑定

注意 :style="{这是js代码，用驼峰font-size变成fontSize}'

    <!-- 绑定样式  绑定类和绑定style样式两种方式-->
    <style>
        .classA {
            background-color: hotpink;
        }

        .classB {
            color: yellowgreen;
        }

        .classC {
            font-size: 80px;
        }
    </style> 
   <div id="app">
        <!-- 绑定类 -->
        <!--第一种情况 我不知道这个元素用的是哪个类，用哪个类是后台数据告诉我的 -->
        <!-- 动态绑定class以后，静态class仍然可以使用 -->
        <p :class="myClass" class="classA">杨杨1</p>

        <!--第二种情况 这个元素绑定的是哪个类或者是哪些个类确定了，但是那个类生效不清除，生效不生效由数据决定 用的最多-->
        <p :class="{classA:isA,classB:isB}">杨杨2</p>

        <!-- 第三种情况 这个元素一下子有好多个确定的类 -->
        <!-- <p class="classA classB  classC">杨杨3</p>  静态数据绑定方式，直接写   v-bind就是动态数据绑定 -->
        <p :class="['classA','classB','classC']">杨杨3</p>

        <!-- 绑定style -->
        <!-- 原样 ： <p style="color:aqua;font-size: 80px;">杨杨4</p>  静态写法-->
        <!-- vue里面用对象{} 并且因为是js代码，用驼峰-->
        <p :style="{color:myColor,fontSize: mySize}">杨杨4</p>

    </div>
    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    myClass: 'classB',
                    isA: true,
                    isB: true,
                    myColor: 'red',
                    mySize: '80px'
                }
            }
        })
    </script>

三：绑定事件监听相关（添加点击事件）

1.event事件的绑定，可以传参也可以不传参

    <div id="app">
        <button @click="btn1">按钮1</button>
        <!-- 传入一个 $event 在vue的模板当中，事件回调函数在调用的时候可以传递$event，名字不能随意改，这个东西就是事件对象 -->
        <button @click='btn1($event)'>按钮2</button>
        <!-- 和楼上相同，此处的参数如果再传入一个字符串，那么如果想添加点击事件就要再传一个参数$event -->
        <button @click="btn2('btn传参',$event)">按钮3</button>
    </div>
    <script>
        new Vue({
            el: '#app',
            methods: {
                btn1(event) {
                    console.log(event.target.innerHTML)       //按钮1
                },
                btn2(str, event) {
                    console.log(str)                          //btn传参
                    console.log(event.target.innerHTML)       //按钮3
                }
            }
        })
    </script>

2.阻止冒泡直接.stop

第一种：@click.stop(参数event，等等)

第二种不建议用，复杂 event.stopPropagation()

    <style>
        .classA {
            width: 200px;
            height: 200px;
            background-color: pink;
        }

        .classB {
            width: 100px;
            height: 100px;
            background-color: skyblue;
        }
    </style>

    <div id="app">
        <div :class="c1" @click="b1">1
            <div :class="c2" @click.stop="b2">2</div>
        </div>
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                c1: " classA",
                c2: "classB"
            },
            methods: {
                b1(event) {
                    console.log("我是大的")
                },
                b2(event) {
                    console.log("我是小的")
                    // 取消冒泡(复杂不建议用)
                    // event.stopPropagation()
                }
            }
        })
    </script>

3.阻止超链接跳转

  <div id="app">      
        <!-- 取消默认跳转 简单的方法-->
        <a href="http://www.baidu.com" @click.prevent> 点我去百度1</a>
        <!-- 取消默认跳转 复杂的方法-->
        <a href="http://www.baidu.com" @click="cancelA"> 点我去百度2</a>
  </div>
          methods: {
               // 第二种复杂的方法
                cancelA(event) {
                    event.preventDefault()      //取消链接跳转
                },
          }

4.键盘事件设置回车监听

        <!-- 键盘事件都用在表单类元素或者document身上 -->
        <input type="text" @keyup.enter="EEnter">

                EEnter() {
                    console.log('我是回车')
                }

四：自动收集表单数据

    <div id="app">
        <label for="1">用户名
            <input type="text" id="1" v-model="userinfo.username">
        </label>

        <label for="2">密码
            <input type="text" id="2" v-model="userinfo.password">
        </label>
        <br>
        性别：
        <label for="A">
            男<input type="radio" id="A" name="sex" value="male" v-model="userinfo.gender">
        </label>
        <label for="B">
            女<input type="radio" id="B" name="sex" value="female" v-model="userinfo.gender">
        </label>
        <br>
        爱好：
        抽烟<input type="checkbox" value="smoke" v-model="userinfo.hobby">
        喝酒<input type="checkbox" value="drink" v-model="userinfo.hobby">
        烫头<input type="checkbox" value="head" v-model="userinfo.hobby">
        <br>
        城市：
        <select v-model="userinfo.cityid">
            <option :value="city.id" v-for="(city,index) in citys" :key="citys.id">
                {{city.id}}——{{city.name}}
            </option>
        </select>
        <br>
        自我介绍：
        <br>
        <textarea cols=" 30" rows="10" v-model="userinfo.desc"></textarea>
        <br>
        <button>提交</button>
    </div>
    <script>
        new Vue({
            el: "#app",
            data: {
                userinfo: {
                    username: '',
                    password: '',
                    gender: '',
                    hobby: [],
                    cityid: '',
                    desc: ''
                },
                citys: [
                    { id: 1, name: '城市1' },
                    { id: 2, name: '城市2' },
                    { id: 3, name: '城市3' },
                    { id: 4, name: '城市4' },
                    { id: 5, name: '城市5' },
                ]
            },
            methods: {
                submit() {
                    axios({
                        url: '后台给的接口地址',
                        method: 'post',
                        data: this.userinfo
                    })
                }
            }
        })
    </script>