vue框架的基础语法之方法和事件的绑定，样式绑定，循环渲染，条件渲染

方法和事件的绑定

方法：在methods中写方法,供事件或者别的方法内部调用，而且因为底层是做了es6语法处理的，所以我们学过的所有方式的写法都能在methods里面写

v-on: 和 @ 都是绑定事件的指令
指令后面跟事件类型,值就是methds中的方法,可以加小括号也可以不加

常用的事件修饰符

• .stop 阻止冒泡，阻止从当前元素经过的所有冒泡行为
• .prevent 阻止默认事件
• .capture 添加事件侦听器时让事件在捕获阶段触发
• .self 其他元素的事件触发时 事件链经过它,无论是捕获还是冒泡阶段都不会触发它的事件,只有它自己是目标对象才会触发事件, 虽然它自己不会被别人影响,但是它自己的事件触发的时候还是会生成事件链经过其他元素,并不阻止继续冒泡到其他元素
• .once 事件只触发一次,触发完之后,事件就解绑
• 多修饰符一起使用连点（.）

<style>
  .box1 {
      width: 300px;
      height: 300px;
      background-color: chocolate;
  }

  .box2 {
      width: 200px;
      height: 200px;
      background-color: lightcoral;
  }

  .box3 {
      width: 100px;
      height: 100px;
      background-color: lightblue;
  }
</style>
<div id="app">
  <button @click="fn3" @mouseenter="fn4">多个事件绑定</button>
  <br><br>
  <div @click="fn1" class="box1">1
      <!-- .self既不阻止冒泡也不触发事件，只有当自己是目标对象时才会触发绑定事件，冒泡也不会触发 -->
      <div @click.self="fn2" class="box2">2
          <!-- .stop就阻止了事件冒泡，点击最小的div时就只会打印fn3了 -->
          <div @click.stop="fn3" class="box3">3</div>
          <!-- 没有.prevent就会跳转到百度，但是有了.prevent就会阻止这个默认的跳转事件 -->
          <a @click.prevent="fn3" href="http://www/baidu.com">阻止默认事件</a>
      </div>
  </div>
  <!-- .once只能执行一次，要写在执行只能刷新页面才行 -->
  <button @click.once="fn5">只执行一次</button>
</div>

<script>
  new Vue({
      el: "#app",
      data: {

      },
      methods: {
          fn1() {
              console.log("fn1");
          },
          fn2() {
              console.log("fn2");
          },
          fn3() {
              console.log("fn3");
          },
          fn4() {
              console.log("fn4");
          },
          fn5() {
              alert("倒计时两分钟");
          }
      }
  })
</script>

具体的执行结果这里就不展示了，有兴趣的自己可以去试试

样式绑定

style样式绑定

style的样式绑定一般用于当页面中有样式的改变的时，但是是某一些小的改变，用样式绑定会方便一些

如果是要改变大的样式的时候用class绑定会方便一些

<style>
    .imgbox {
        width: 200px;
        height: 200px;
    }

    .img1,
    .img2 {
        width: 400px;
        height: 200px;
    }
</style>
<div id="app">
    <button @click="changeImg">点击换图</button><br><br>
    <div class="imgbox">
        <img class="img1" :src="imgurl1" :style="{display: s,display: h}">
        <img class="img2" :src="imgurl2" :style="{display: h,display: s}">
    </div>
</div>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            imgurl1: "https://tenfei05.cfp.cn/creative/vcg/800/new/VCG41N1210205351.jpg",
            imgurl2: "https://t7.baidu.com/it/u=963301259,1982396977&fm=193&f=GIF",
            s: "none",
            h: "block",
            flag: false
        },
        methods: {
            changeImg() {

                this.flag = !this.flag;
                if (this.flag) {
                    this.s = "block";
                    this.h = "none";
                    console.log(111);
                } else {
                    this.h = "block";
                    this.s = "none";
                    console.log(222);
                }
            }
        }
    })
</script>

这些都是动态的展示效果，就都不展示效果了

class样式绑定

一般用于大的板块的切换，比如点击某个按钮，整个页面的布局改变等等

<style>
 .box {
        width: 300px;
        height: 400px;
        background-color: lightsteelblue;
    }
    .content1 {
        width: 300px;
        height: 300px;
        color: mediumorchid;
        background-color: mediumpurple;
        margin-top: 25px;
    }
    .content2 {
        width: 300px;
        height: 300px;
        color: mediumseagreen;
        background-color: mediumspringgreen;
        margin-top: 25px;
    }
</style>
<div id="app">
    <button @click="change">{{btn}}</button>
    <br><br>
    <div class="box">box
        <div :class="contents">内容一</div>
    </div>
</div>
<script>
    new Vue({
        el:"#app",
        data:{
            btn:"点击切换板块内容",
            contents:"content1",
            flag:true,
            text:"内容一"
        },
        methods: {
            change(){
                this.flag = !this.flag;
                if (this.flag) {
                    this.contents="content1";
                    this.text="内容一";
                } else {
                    this.contents="content2";
                    this.text="内容二";
                }
            }
        }
    })
</script>

条件渲染

条件渲染一般有两个命令v-if /v-else 或者 v-show
使用的变量为true就显示,false就隐藏
在业务中常常可以通过操作if或者show使用的变量,来达到操作元素显示和隐藏的效果

v-i是删除节点,v-show是操作css的display:none

四种显隐效果的区别

visibility: hidden： 不脱离文档流的
display:none ：脱离文档流
v-if ：删除节点
v-show ： display:none

<div id="app">
    <div>
        <button @click="change">控制文字二的显隐</button>
        <p v-if="flag">文字二</p>
        
    </div>
    <div>
        <br>
        <button @click="change1">控制文字三的显隐</button>
        <p v-show="flag1">文字三</p>
    </div>
</div>
<script>
    new Vue({
        el: "#app",
        data: {
            flag: true,
            flag1: true
        },
        methods: {
            change() {
                this.flag = !this.flag
            },
            change1() {
                this.flag1 = !this.flag1
            }
        }
    })
</script>

循环渲染

如果是嵌套循环，嵌套就写里面

如果循环是平级关系，循环也就是平级关系

如果插值表达式里面没有值，那么这个div是不会渲染上去的

<div id="app">
  <div v-for="(item) in arr">
         <h3>{{item.name}}</h3>
         <h4>{{item.age}}</h4>
         <div v-for="(items) in item.habbt">
             <span>{{items}}</span>
         </div>
     </div>
 </div>
 <script>
     new Vue({
         el: "#app",
         data: {
             arr: [{
                 name: "丽丽",
                 age: 20,
                 habbt: ["运动", "看书"]
             }, {
                 name: "琳达",
                 age: 18,
                 habbt: ["游泳", "看书", "旅游"]
             }, {
                 name: "小明",
                 age: 23,
                 habbt: ["运动", "看书", "旅游","逛街"]
             }, {
                 name: "小红",
                 age: 26,
                 habbt: ["跑步", "画画"]
             }, ]
         }
     })
 </script>