Vue学习日记（2）

1.methods和computed

computed比methods缓存更小，computed不带参，只读属性

2.v-on的修饰符

<div id="app">
  <!--1. .stop修饰符的使用-->
  <div @click="divClick">
    aaa
    <button @click.stop="btnClick">按钮</button>
  </div>
<br>
  <!--2. .prevent修饰符的使用-->
  <form action="baidu">
    <input type = "submit" value="提交" @click.prevent="submitClick()">
  </form>

  <!--3.监听某个键盘的按键-->
  <input type="text" @keyup.enter ="keyClick">

  <!--  <cpn @click.native="cpnclick"></cpn>-->

  <!--4. .once修饰符的使用-->
  <button @click.once="btn2Click">按钮2</button>
</div>

3.v-if和v-show

<div id="app">
<!--  v-if：当条件为false时，包含v-if指令的元素，根本不会存在在dom中-->
  <h2 v-if="isShow" id="aaa">{{message}}</h2>
<!--  v-show：当条件为false时，v-show只是给我们的元素添加一个行内样式：display：none-->
  <h2 v-show="isShow" id="bbb">{{message}}</h2>
</div>

多次改变使用v-if，一次改变使用v-show

3.v-for循环遍历

a.遍历数组

<div id="app">
<!--1.在遍历的过程中，没有使用索引值-->
  <ul>
    <li v-for="item in name">{{item}}</li>
  </ul>
<!--2.在遍历的过程中，获取索引值-->
  <ul>
    <li v-for="(item,index) in name">
      {{(index+1)+ " " +item}}
    </li>
  </ul>
</div>

b.遍历对象

<div id="app">
<!--1.在遍历对象的过程中，如果只是获取一个值，那么获取到的是value-->
  <ul>
    <li v-for="item in info">{{item}}</li>
  </ul>
<!--2.获取value和key-->

  <ul>
    <li v-for="(value,key) in info ">{{value}}-{{key}}{</li>
  </ul>

  <!--3.获取value和key,index-->

  <ul>
    <li v-for="(value,key,index) in info ">{{value}}-{{key}}-{{index}}</li>
  </ul>
</div>

c.常用响应式方法

<div id="app">
  <h2 v-for="item in letter">{{item}}</h2>
  <button @click="btnClick">按钮</button>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el:'#app',
    data:{
      letter:['a','b','c','d','e']
    },
    methods:{
      btnClick(){
        //1.push方法
        // this.letter.push('aaa')
        //this.letter.push('aaa','bbb','cvc')

        //注意：不是响应式，通过索引值修改数组中的元素
        //this.letter[0]='bbb'
        //this.letter.splice(0,0,'bbb')

        //2.pop():删除最后一个元素
        //this.letter.pop();

        //3.shift():删除第一个元素
        //this.letter.shift();

        //4.unshift（）：在最前面添加元素
        //this.letter.unshift('111');
        //this.letter.unshift('111','12')

        //5.splice(start,删除几个元素):删除元素，没有传就全删
        // const start = 2
        // this.letter.splice(start,this.letter.length-start)
        //splice(start,替换个数，具体元素):替换元素，
        //this.letter.splice(1,3,'1','2','3','5')
        // splice(start,0，具体元素)插入元素，
        //this.letter.splice(1,0,'x','x','z')

        //6.sort()：排序
        //this.letter.sort()

        //7.reverse()：反转
        //this.letter.reverse()

        //set（修改的对象，索引，修改后的值）
        //Vue.set(this.letter,0,'bbb','ccc')
      }
    }
  })

4.属性增强的写法

  //1.属性的增强写法
  const name = 'why';
  const age = 18;
  const height = 1.80;

  //ES5
  // const obj = {
  //   name: name,
  //   age: age,
  //   height: height
  // }

  const obj = {
    name,
    age,
    height,
  }
  console.log(obj);

  //2.函数的增强写法
  //ES5的写法
  // const obj = {
  //   run: function () {
  //
  //   },
  //   eat: function () {
  //
  //   },
  // }
  const obj = {
    run(){

    },
    eat(){

    }
  }