【学习笔记】前端（I）—— Vue2（Ⅱ）

最新推荐文章于 2024-07-19 12:58:53 发布

贺一航【Niki】

最新推荐文章于 2024-07-19 12:58:53 发布

阅读量849

点赞数 19

文章标签：前端学习笔记 vue.js

本文链接：https://blog.csdn.net/Eddie_hyh/article/details/138359275

版权

Vue2（Ⅱ）

3、基础篇
- 3.8、样式绑定
- - 3.8.1 class
  - 3.8.2 style
- 3.9、列表渲染
- - 3.9.1 列表过滤
  - 3.9.2 列表排序
  - 3.9.3 列表更新
- 3.10、数据劫持
- 3.11、收集表单数据
- 3.12、过滤器 filters
- 3.13、自定义指令
- 3.14、模板 template
- 3.15、生命周期
- 3.16、组件
- - 3.9.1 非单文件组件
  - 3.9.2 重要的内置关系
  - 3.9.3 单文件组件

3、基础篇

3.8、样式绑定

3.8.1 class

绑定class样式要使用’ :class=“xxx” ‘的写法，其不影响’ class=“xxx” '的使用，也就是两者可以共存

写法	适用
字符串	类名不确定，要动态获取
数组	要绑定多个样式，要使用的类名明确
对象	要绑定多个样式，要使用的类名不明确

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8" />
      <title>Title</title>
      <script type="text/javascript" src="js/vue_dev.js"></script>
      <style>
         .basic {
     
            width: 400px;
            height: 100px;
            border: 1px solid black;
         }
         .happy {
     
            border: 4px solid red;
            background-color: rgba(255, 255, 0, 0.644);
            background: linear-gradient(30deg, yellow, pink, orange, yellow);
         }
         .sad {
     
            border: 4px dashed rgb(2, 197, 2);
            background-color: gray;
         }
         .normal {
     
            background-color: skyblue;
         }
         .hyh1 {
     
            background-color: yellowgreen;
         }
         .hyh2 {
     
            font-size: 30px;
            text-shadow: 2px 2px 10px red;
         }
         .hyh3 {
     
            border-radius: 20px;
         }
      </style>
      <script src="../js/vue.js"></script>
   </head>
   <body>
      <div id="root">
         <!--:class 绑定class样式字符串写法 适用于样式的类名不确定需要动态琢磨的状况-->
         <div class="basic" :class="mood" @click="changeMood">{
  { name }}</div>
         <hr />
         <!--:class 绑定class样式数组写法 适用于要绑定的样式个数不确定，名字也不确定的状况-->
         <div class="basic" :class="classArr">{
  { name }}</div>
         <hr />
         <!--:class 绑定class样式对象写法 适用于要绑定的样式个数确定，名字确定，但动态决定要不要用的状况-->
         <div class="basic" :class="classObj">{
  { name }}</div>
      </div>
      <script type="text/javascript">
         new Vue({
     
            el: '#root',
            data: {
     
               name: 'test',
               mood: null,
               classArr: ['hyh1', 'hyh2', 'hyh3'],
               classObj: {
     
                  hyh1: false,
                  hyh2: true,
                  hyh3:false
               }
            },
            methods: {
     
               changeMood() {
     
                  const moodsArr = ['normal', 'happy', 'sad']
                  const random = Math.floor(Math.random() * moodsArr.length)
                  this.mood = moodsArr[random]
               }
            }
         })
      </script>
   </body>
</html>

3.8.2 style

绑定style样式要使用’ :style=“xxx” ‘的写法，其不影响’ style=“xxx” '的使用，也就是两者可以共存

写法	描述
对象	样式的键值对，例如 {background: ‘green’ }
数组	多个对象的集合

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8" />
      <title>Title</title>
      <script type="text/javascript" src="js/vue_dev.js"></script>
      <style>
         .basic {
     
            width: 400px;
            height: 100px;
            border: 1px solid black;
         }
      </style>
      <script src="../js/vue.js"></script>
   </head>
   <body>
      <div id="root">
         <!--绑定style样式 对象写法-->
         <div class="basic" :style="styleObj">{
  { name }}</div>
         <hr />
         <!--绑定style样式 数组写法-->
         <div class="basic" :style="[styleObj, styleObj2]">{
  { name }}</div>
         <hr />
         <div class="basic" :style="styleArr">{
  { name }}</div>
      </div>
      <script type="text/javascript">
         new Vue({
     
            el: '#root',
            data: {
     
               name: 'test',
               styleObj: {
     
                  fontSize: '40px',
                  color: 'red'
               },
               styleObj2: {
     
                  background: 'green'
               },
               styleArr: [{
      color: 'orange' }, {
      background: 'grey' }]
            }
         })
      </script>
   </body>
</html>

3.9、列表渲染

3.9.1 列表过滤

筛选：arr.filter((每个元素)=>{被筛选的元素条件})

<div id="root1">
   <h2>computed实现列表过滤</h2>
   <input type="text" placeholder="请输入名字" v-model="keyword" />
   <ul v-for="p in filPersons" :key="p.id">
      <li>{
  { p.name }} - {
  { p.age }} - {
  { p.sex }}</li>
   </ul>
</div>
<div id="root2">
   <h2>watch实现列表过滤</h2>
   <input type="text" placeholder="请输入名字" v-model="keyword" />
   <ul v-for="p in filPersons" :key="p.id">
      <li>{
  { p.name }} - {
  { p.age }} - {
  { p.sex }}</li>
   </ul>
</div>
<script type="text/javascript">
   //computed实现
   new Vue({
     
      el: '#root1',
      data: {
     
         keyword: '',
         persons: [
            {
      id: '001', name: '周冬雨', age: 20, sex: '女' },
            {
      id: '002', name: '马冬梅', age: 19, sex: '女' },
            {
      id: '003', name: '周杰伦', age: 21, sex: '男' },
            {
      id: '004', name: '温兆伦', age: 22, sex: '男' }
         ]
      },
      computed: {
     
         filPersons() {
     
            return this.persons.filter(
               (p) => p.name.indexOf(this.keyword) !== -1
            )
         }
      }
   })
   //watch实现
   new Vue({
     
      el: '#root2',
      data: {
     
         keyword: '',
         persons: [
            {
      id: '001', name: '周冬雨', age: 20, sex: '女' },
            {
      id: '002', name: '马冬梅', age: 19, sex: '女' },
            {
      id: '003', name: '周杰伦', age: 21, sex: '男' },
            {
      id: '004', name: '温兆伦', age: 22, sex: '男' }
         ],
         filPersons: []
      },
      watch: {
     
         keyword: {
     
            immediate: true,
            handler(newV) {
     
               //初始时newV是''
               this.filPersons = this.persons.filter(
                  (p) => p.name.indexOf(newV) !== -1
               )
            }
         }
      }
   })
</script>

Tip
1、对字符串 / 空串进行indexOf(‘’)，得到的都是0，而只有indexOf(‘不存在的子串’)时才会得到 -1
2、当computed和watch能够实现相同的功能时，优先选择computed，原因依然是计算属性有缓存的效果，只要所依赖的data数据没有发生变动，就可以直接取计算属性身上的值，而监视属性，每次都需要调用handler函数，涉及到函数调用，效率比较低

3.9.2 列表排序

排序：arr.sort((后面的元素，前面的元素)=>{符合特定排序方式下每个前面的元素和后面的元素要符合的条件})

<div id="root">
   <h2>人员列表</h2>
   <input type="text" placeholder=

最低0.47元/天解锁文章