vue基础知识（二)

最新推荐文章于 2023-11-11 12:51:32 发布

子命不凡

最新推荐文章于 2023-11-11 12:51:32 发布

阅读量281

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_52981021/article/details/126465363

版权

一、样式绑定

1.绑定class样式

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./vue.js"></script>
  <style>
    .basic {
      width: 200px;
      height: 200px;
      border: 1px solid black;
    }

    .normal {
      background-color: aqua;
    }

    .happy {
      font-size: 30px;
      font-weight: 700;
    }

    .sad {
      background-color: black;
    }

    .a1 {
      font-family: 'Courier New', Courier, monospace;
    }

    .a2 {
      background-color: aquamarine;
    }

    .a3 {
      text-align: center;
    }
  </style>
</head>
<body>
<div id="app">
    <div class="basic" :class="mood" @click="changeMood">{{name}}</div>
    <div class="basic" :class="classArr" @click="changeMood">{{name}}</div>
    <div class="basic" :class="classObj">{{name}}</div>
  </div>
  <script>
const vm = new Vue({
      el: '#app',
      data: {
        name: 'hhh',
        mood: 'normal',
        classArr: ['a1', 'a2', 'a3'],
        classObj: {
          a1: false,
          a2: false
        }
      },
      methods: {
        changeMood() {
          const arr = ['happy', 'sad', 'normal']
          const index = Math.floor(Math.random() * 3)
          this.mood = arr[index]
        }
      },
    })
  </script>
  </body>

2.绑定style样式

 <div id="app">
    <div class="basic" :style="styleObj">{{name}}</div>
  </div>
  <script>
const vm = new Vue({
      el: '#app',
      data: {
        styleObj: {
          fontSize: '40px',
          color: 'red'
        }
      },
    })
  </script>

二、vue渲染

1.条件渲染

<div id="app">
    <h2>当前n的值为:{{n}}</h2>
    <button @click="n++">点我n+1</button>
    <!-- 频率高用v-show，频率低用v-if -->
    <div v-if="n===1">Angular</div>
    <div v-else-if="n===2">Vue</div>
    <div v-else-if="n===3">React</div>
    <div v-else>hhhh</div>
    <!-- 使用v-show做条件渲染 -->
    <!-- <h2 v-show="a">欢迎来到{{name}}</h2> -->
    <!-- 使用v-if做条件渲染 -->
    <!-- <h2 v-if="false">欢迎来到{{name}}</h2>
    <h2 v-if="1===1">欢迎来到{{name}}</h2> -->
     <template v-if="n===1">
      <h2>hello</h2>
      <h2>hello1</h2>
      <h2>hello2</h2>
    </template>
  </div>
  <script>
new Vue({
      el: '#app',
      data: {
        /* name: 'hhhh',
        a: false */
        n: 0
      }
    })
  </script>

v-if和v-show区别

1.手段：v-if是通过控制dom节点的存在与否来控制元素的显隐；v-show是通过设置DOM元素的display样式，block为显示，none为隐藏；
2.编译过程：v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；v-show只是简单的基于css切换；
3.编译条件：v-if是惰性的，如果初始条件为假，则什么也不做；只有在条件第一次变为真时才开始局部编译（编译被缓存？编译被缓存后，然后再切换的时候进行局部卸载); v-show是在任何条件下（首次条件是否为真）都被编译，然后被缓存，而且DOM元素保留；
4.性能消耗：v-if有更高的切换消耗；v-show有更高的初始渲染消耗；

因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

2.列表渲染

<div id="app">
<!-- 遍历数组 -->
    <ul>
      <li v-for="(p,index) in person" :key="index">{{p.name}}-{{p.age}}</li>
    </ul>
    <!-- 遍历对象 -->
    <ul>
      <li v-for="(value,k) in car" :key="k">{{k}}-{{value}}</li>
    </ul>
    <!-- 遍历字符串 -->
    <ul>
      <li v-for="(char,index) in person" :key="index">{{char}}-{{index}}</li>
    </ul>
    <!-- 遍历指定次数 -->
    <ul>
      <li v-for="(num,index) in 10" :key="index">{{index}}-{{num}}</li>
    </ul>
  </div>
  <script>
new Vue({
      el: '#app',
      data: {
        person: [
          { id: '001', name: '张三', age: 18 },
          { id: '002', name: '李四', age: 19 },
          { id: '003', name: '王五', age: 20 }
        ],
        car: {
          name: 'aodi',
          price: '70wan',
          color: 'black'
        },
        str: 'hello world'
      }
    })
  </script>

3.列表过滤

<div id="app">
    <h2>人员列表</h2>
    <input type="text" placeholder="请输入" v-model="keyWord">
    <ul>
      <li v-for="(p,index) in filPerson" :key="index">
        {{p.name}}--{{p.age}}--{{p.sex}}
      </li>
    </ul>
  </div>
  <script>
new Vue({
      el: '#app',
      data: {
        keyWord: '',
        person: [
          { id: '001', name: '马冬梅', age: 18, sex: '女' },
          { id: '002', name: '周冬雨', age: 19, sex: '女' },
          { id: '003', name: '周杰伦', age: 20, sex: '男' },
          { id: '004', name: '温兆伦', age: 21, sex: '男' }
        ],
        filPerson: []
      },
      watch: {
        keyWord: {
          immediate: true,
          handler(val) {
            this.filPerson = this.person.filter((p) => {
              return p.name.indexOf(val) != -1
            })
          }
        }
      }
    })
  </script>

<div id="app">
    <h2>人员列表</h2>
    <input type="text" placeholder="请输入" v-model="keyWord">
    <ul>
      <li v-for="(p,index) in filPerson" :key="index">
        {{p.name}}--{{p.age}}--{{p.sex}}
      </li>
    </ul>
  </div>
  <script>
new Vue({
      el: '#app',
      data: {
        keyWord: '',
        person: [
          { id: '001', name: '马冬梅', age: 18, sex: '女' },
          { id: '002', name: '周冬雨', age: 19, sex: '女' },
          { id: '003', name: '周杰伦', age: 20, sex: '男' },
          { id: '004', name: '温兆伦', age: 21, sex: '男' }
        ],
        filPerson: []
      },
      watch: {
        keyWord: {
          immediate: true,
          handler(val) {
            this.filPerson = this.person.filter((p) => {
              return p.name.indexOf(val) != -1
            })
          }
        }
      }
    })
  </script>

4.列表排序

<div id="app">
    <h2>人员列表</h2>
    <input type="text" placeholder="请输入" v-model="keyWord">
    <button @click="sortType=2">年龄升序</button>
    <button @click="sortType=1">年龄降序</button>
    <button @click="sortType=0">原顺序</button>
    <ul>
      <li v-for="(p,index) in filPerson" :key="p.id">
        {{p.name}}--{{p.age}}--{{p.sex}}
      </li>
    </ul>
  </div>
  <script>
new Vue({
      el: '#app',
      data: {
        keyWord: '',
        sortType: 0,//0原顺序  1降序 2升序
        person: [
          { id: '001', name: '马冬梅', age: 18, sex: '女' },
          { id: '002', name: '周冬雨', age: 35, sex: '女' },
          { id: '003', name: '周杰伦', age: 25, sex: '男' },
          { id: '004', name: '温兆伦', age: 21, sex: '男' }
        ],
        //filPerson: []
      },
      /* watch: {
        keyWord: {
          immediate: true,
          handler(val) {
            this.filPerson = this.person.filter((p) => {
              return p.name.indexOf(val) != -1
            })
          }
        }
      } */
      computed: {
        filPerson() {
          const arr = this.person.filter((p) => {
            return p.name.indexOf(this.keyWord) != -1
          })
          if (this.sortType) {
            arr.sort((p1, p2) => {
              return this.sortType === 1 ? p2.age - p1.age : p1.age - p2.age
            })
          }
          return arr
        }
      }
    })

5.更新时的问题

methods: {
     update() {
         this.filPerson[0] = { id: '001', name: '张三', age: 18, sex: '女' }
        }
      },