vue自学基础，vue的基础常用命令大全，包括v-for的使用|遍历方法

VUE基础常用大全命令大全

1. v-bind ：<img v-bind:src="xxx">
   缩写：<img :src="xxx">
   作用：直接在标签里是用变量

2. v-on ：<button v-on:click="函数名"></buttton>
   缩写：<button @:click="函数名"></buttton>
   作用：直接在标签里调用方法函数

3. $even： <a @click="two(10, $event)" href="http://www.baidu.com">xxxx</a>

​ 缩写：无缩写

​ 作用：获取当前函数事件对象

4. stop - 阻止事件冒泡

`<button @click.stop="btn">.stop阻止事件冒泡</button>`

5. prevent - 阻止默认行为

`<a href="http://www.baidu.com" @click.prevent="btn">.prevent阻止默认行为</a>`

6. once - 程序运行期间, 只触发一次事件处理函数

`<button @click.once="btn">.once程序运行期间, 只触发一次事件处理函数</button>`

7. @keydown.xxx按键修饰符 监听键盘事件

    <input type="text" @keydown.enter="enterFn">
    <hr>
    <input type="text" @keydown.esc="escFn">

8. v-model =xxx 表单元素绑定

   <select name="" id="" v-model="bestlove">
         <option value="tiaowu">跳舞</option>
         <option value="changge">唱歌</option>
         <option value="dayouxi">打游戏</option>
       </select>
       <div>
         <span>你喜欢谁：</span>
          <input type="checkbox" value="刘德华" v-model="lovepeople"/>刘德华
         <input type="checkbox"  value="张学友" v-model="lovepeople"/>张学友 
         <input type="checkbox"  value="王明" v-model="lovepeople"/>王明
       </div>
   

   v-model的修饰符 v-model.修饰符=“vue数据变量”

   • .number 以parseFloat转成数字类型
   • .trim 去除首尾空白字符
   • .lazy 在change时触发而非inupt时

9. v-text||v-html 更新DOM对象的innerText/innerHTML

     <p v-text="str"></p>
     <p v-html="str"></p>  
   //注意 如果在标签内添加了v-text||v-html   那么该标签的插值表达式{{}就会被覆盖掉
   

10. v-show||v-if 控制标签的隐藏或出现

    • v-show 用的display:none隐藏 (频繁切换使用)
    • v-if 直接从DOM树上移除
    • v-else||v-else if使用 在v-if的条件不成立时则调用v-else标签

    <template>
      <div>
        <h1 v-show="isOk">v-show的盒子</h1>执行后如果isOk的值为true的话，用的display:none隐藏
        <h1 v-if="isOk">v-if的盒子</h1>//执行后如果isOk的值为true的话，就直接删除此标签
    
        <div>
          <p v-if="age > 18">我成年了</p>
          <p v-else>还得多吃饭</p>
        </div>
      </div>
    </template>
    
    <script>
    export default {
      data() {
        return {
          isOk: true,
          age: 15
        }
      }
    }
    </script>
    

阶段练习，结合目前所学，练习一个折叠面板案例

目标: 点击展开或收起时，把内容区域显示或者隐藏

此案例使用了less语法, 项目中下载模块

yarn add less@3.0.4 less-loader@5.0.0 -D

只有标签和样式

<template>
  <div id="app">
    <h3>案例：折叠面板</h3>
    <div>
      <div class="title">
        <h4>芙蓉楼送辛渐</h4>
        <span class="btn" >
          收起
        </span>
      </div>
      <div class="container">
        <p>寒雨连江夜入吴,</p>
        <p>平明送客楚山孤。</p>
        <p>洛阳亲友如相问，</p>
        <p>一片冰心在玉壶。</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {

    }
  }
}
</script>

<style lang="less">
body {
  background-color: #ccc;
  #app {
    width: 400px;
    margin: 20px auto;
    background-color: #fff;
    border: 4px solid blueviolet;
    border-radius: 1em;
    box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5);
    padding: 1em 2em 2em;
    h3 {
      text-align: center;
    }
    .title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      border: 1px solid #ccc;
      padding: 0 1em;
    }
    .title h4 {
      line-height: 2;
      margin: 0;
    }
    .container {
      border: 1px solid #ccc;
      padding: 0 1em;
    }
    .btn {
      /* 鼠标改成手的形状 */
      cursor: pointer;
    }
  }
}
</style>

11. v-for ※※重点※※ 列表渲染, 所在标签结构, 按照数据数量, 循环生成

• 语法

  • v-for="(值, 索引) in 目标结构"
  • v-for=“值 in 目标结构”

• 目标结构:

  • 可以遍历数组 / 对象 / 数字 / 字符串 (可遍历结构)

• 注意:

  v-for的临时变量名不能用到v-for范围外

  <template>
    <div id="app">
      <div id="app">
        <!-- v-for 把一组数据, 渲染成一组DOM -->
        <!-- 口诀: 让谁循环生成, v-for就写谁身上 -->
        <p>学生姓名</p>
        <ul>
          <li v-for="(item, index) in arr" :key="item">
            {{ index }} - {{ item }}
          </li>
        </ul>
  
        <p>学生详细信息</p>
        <ul>
          <li v-for="obj in stuArr" :key="obj.id">
            <span>{{ obj.name }}</span>
            <span>{{ obj.sex }}</span>
            <span>{{ obj.hobby }}</span>
          </li>
        </ul>
  
        <!-- v-for遍历对象(了解) -->
        <p>老师信息</p>
        <div v-for="(value, key) in tObj" :key="value">
          {{ key }} -- {{ value }}
        </div>
  
        <!-- v-for遍历整数(了解) - 从1开始 -->
        <p>序号</p>
        <div v-for="i in count" :key="i">{{ i }}</div>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        arr: ["小明", "小欢欢", "大黄"],
        stuArr: [
          {
            id: 1001,
            name: "孙悟空",
            sex: "男",
            hobby: "吃桃子",
          },
          {
            id: 1002,
            name: "猪八戒",
            sex: "男",
            hobby: "背媳妇",
          },
        ],
        tObj: {
          name: "小黑",
          age: 18,
          class: "1期",
        },
        count: 10,
      };
    },
  };