vue基础语法二

式微式微胡不归

已于 2022-10-05 01:30:26 修改

阅读量329

点赞数

分类专栏： Vue基础文章标签： javascript 开发语言 ecmascript

于 2022-09-18 17:17:47 首次发布

本文链接：https://blog.csdn.net/zhangli33/article/details/126901791

版权

Vue基础专栏收录该内容

9 篇文章 1 订阅

订阅专栏

一、v-for-----for循环

1.vue基本使用

语法一：v-for="(元素值,索引值) in 目标结构"

语法二：v-for="元素值 in 目标结构"

语法三: v-for="(值, 键) in 目标结构"

语法四: v-for="值 in 整数"

<template>
  <div id="app">
    <!-- v-for 把一组数据, 渲染成一组DOM -->
    <!-- 口诀: 让谁循环生成, v-for就写谁身上 -->
    <!-- 语法一 
     v-for="(元素值,索引值) in 目标结构"
     -->
    <p>学生姓名</p>
    <ul>
      <li v-for="(item, index) in arr" :key="item">{{ index }} - {{ item }}</li>
    </ul>

    <!-- 语法二
     v-for="元素值 in 目标结构"
     -->
    <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遍历对象(了解) -->
    <!-- 语法三:v-for="(值, 键) in 目标结构" -->
    <p>老师信息</p>
    <div v-for="(value, key) in tObj" :key="value">
      {{ key }} -- {{ value }}
    </div>

    <!-- v-for遍历整数(了解) - 从1开始 -->
    <!-- 语法四: v-for="值 in 整数" -->
    <p>序号</p>
    <div v-for="i in count" :key="i">{{ i }}</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,
    };
  },
};
</script>

<style lang="less"></style>

2.vue更新检测

⚫让原数组内容改变的方法, 就会导致v-for更新, 页面更新

⚫不能让原数组内容改变的方法, 返回新数组, 就不会导致v-for更新

解决方法：

可采用覆盖数组或this.$set()

<template>
  <div id="app">
    <!-- v-for -->
    <ul>
      <li v-for="index in arr" :key="index">
        {{ index }}
      </li>
    </ul>
    <button @click="revBtn">数组翻转</button>
    <button @click="sliceBtn">截取数组前三个</button>
    <button @click="updateBtn">更新第一个元素值</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      arr: [5, 2, 4, 1, 8, 7],
    };
  },
  methods: {
    revBtn() {
      // 1.数组翻转可以让v-for更新
      this.arr.reverse();
    },
    sliceBtn() {
      // 2.slice不会更新原数组，所以不会造成v-for更新

      // 解决v-for更新 -- 覆盖原始数组
    let newArr = this.arr.slice(0, 3);
      this.arr = newArr 
    },
    updateBtn() {
      //3.更新某个值的时候，v
      // this.arr[0] = 1000;

      // 解决----this.$set()
      this.$set(this.arr, 0, 1000);
    },
  },
};
</script>

<style lang="less"></style>

让原数组内容改变的方法：

不能让原数组内容改变的方法：

3.key的值作用

⚫key值确保唯一,这里的唯一指的是key值不能随着原数据新增或者删除而发生改变

⚫如果key值给的是索引,虽然不影响使用,但是起不到优化效果

<template>
  <div>
    <ul>
      <li v-for="obj in arr" :key="obj.id">
        {{ obj.name }}
        <input type="text" />
      </li>
    </ul>
    <button @click="btn">点击</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      arr: [
        {
          name: "老大",
          id: 50,
        },
        {
          name: "老二",
          id: 31,
        },
        {
          name: "老三",
          id: 10,
        },
      ],
    };
  },

  methods: {
    btn() {
      this.arr.splice(1, 0, {
        id:19,
        name:"新来的"

      });
    },
  },
};
</script>

<style lang="scss" scoped></style>

结果比较

key值为索引值：

key值为id号，不随数据增加而改变时：

二、动态style和class

1.动态class

语法：:class="{类名：布尔值}"

布尔值为true时显示指定的class类,可以设置多个class属性

<template>
  <div>
    <!-- 语法：:class="{类名：布尔值}" -->
    <div :class="{red_str:bool,bgc:bool}">class类名</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      bool:true
    };
  },
};
</script>
<style>
.red_str{
  color: red;
}
.bgc{
  background-color: pink;
}，
</style>

2.动态style

语法：:style="{css属性名：值}

<template>
  <div>
    <p :style="{ color: colorStr, backgroundColor: bgcColor }">动态style</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      colorStr: "red",
      bgcColor: "pink",
    };
  },
};
</script>

<style>
.bgc {
  background-color: pink;
}
</style>

三、过滤器

方式一：全局--过滤器

任意.vue文件内直接使用

语法：vue.filter("过滤器名",值 => 处理结果)

Vue.filter("reverse", (val) => val.split("").reverse().join(""));

方式二：局部--过滤器与data同级

只能在当前.vue文件中使用

语法：filter:{

过滤器名字(val){

return 处理后的值

}

 filters: {
    toUp(val) {
      return val.toUpperCase();
    }
  }
};

过滤器使用：{{ 原本的值 | 过滤器名 }}

 <p>原来的样子：{{ msg }}</p>
    <!-- 过滤器使用：{{ 原本的值 | 过滤器名 }} -->
    <p>使用翻转过滤器:{{ msg | reverse }}</p>
    <p :title="msg | toUp">鼠标长停</p>

四、计算属性-computed

1.基本使用

场景：一个变量的值，需要用另外变量计算而的来

语法：

computed:{

计算属性名(){

return 值

}

注意：计算属性名和data属性都是变量---不能重名

<template>
  <div>
    <p>{{ num }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      a: 10,
      b: 20,
    };
  },
  computed: {
    num() {
      return this.a + this.b;
    },
  },
};
</script>

2.计算属性缓存特性

计算属性优势：带缓存

计算属性执行后，会把return值缓存起来，

依赖项（变量）不变，多次调用都是从缓存取值，此时不会执行计算属性

当依赖项发生变化，函数会“自动”重新执行，并缓存新的值

<template>
  <div>
    <p>{{ reverseMessage }}</p>
    <p>{{ reverseMessage }}</p>
    <p>{{ reverseMessage }}</p>
    <p>{{ getMessage() }}</p>
    <p>{{ getMessage() }}</p>
    <p>{{ getMessage() }}</p>
 
  </div>
</template>

<script>
export default {


  data() {
    return {
      msg: "Hello World",
    };
  },

  methods: {
    getMessage() {
      console.log("函数执行了");
      return this.msg.split("").reverse().join("");
    },
  },
  
  computed: {
    reverseMessage() {
      console.log("计算属性执行力");
      return this.msg.split("").reverse().join("");
    },
  },
};
</script>

<style lang="scss" scoped></style>

3.计算属性完整写法

使用场景:给计算属性变量赋值时,通过v-model绑定时

语法:

computed:{

"计算属性名":{

set(值){

get(){

return 值

}

set()通过v-model对应的表单控制计算属性时使用

get()给计算属性赋值

<template>
  <div>
    <span>姓名</span>
    <input type="text" v-model="full" />
  </div>
</template>

<script>
export default {
  /*  计算属性完整写法
  使用场景:给计算属性变量赋值时

  语法:
  computed:{
    "计算属性名":{
      set(值){

      },
      get(){
        return 值
      }
    }
  }
  
  */
  computed: {
    full: {
      // 给full赋值触发set方法
      set(val) {
        console.log(val);
      },
      //使用full值触发get方法
      get() {
        return "无名氏";
      },
    },
  },
};
</script>

<style lang="scss" scoped></style>

4.全选、反选案例

<template>
  <div>
    <span>全选:</span>
    <input type="checkbox" v-model="isAll" />
    <span>反选:</span>
    <input type="checkbox" v-model="isSwitch" />

    <ul>
      <li v-for="obj in arr" :key="obj.name">
        <input type="checkbox" v-model="obj.c" />
        <span>{{ obj.name }}</span>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      arr: [
        {
          name: "猪八戒",
          c: false,
        },
        {
          name: "孙悟空",
          c: false,
        },
        {
          name: "唐僧",
          c: false,
        },
        {
          name: "白龙马",
          c: false,
        },
      ],
    };
  },
  computed: {
    isAll: {
      set(flag) {
        // 通过v-model对应的表单控制计算属性时使用
        return this.arr.forEach((item) => (item.c = flag));
      },
      get() {
        // 给计算属性赋值
        return this.arr.every((item) => item.c === true);
      },
    },
    isSwitch: {
      set(flag) {
        return this.arr.forEach((item) => (item.c = !flag));
      },
      get() {
        return this.arr.every((item) => item.c === false);
      },
    },
  },
};
</script>

五、侦听器

1.基础侦听

newVal:当前的值

oldVal:上一刻的值

watch:{

变量名(newVal, oldVal) {

//变量名对应值改变这里自动触发

console.log(newVal, oldVal);

}

<template>
  <div>
    <input type="text" v-model="name" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: "",
    };
  },

  watch: {
    name(newVal, oldVal) {
      console.log(newVal, oldVal);
    },
  },
};
</script>

<style lang="scss" scoped></style>

2.深度侦听

<template>
  <div>
    <input type="text" v-model="user.name" />
    <input type="text" v-model="user.age" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      user:{
        name:"",
        age:0
      }
    };
  },

  watch: {
    user:{
      handler(newVal, oldVal){
       console.log(newVal, oldVal);
      },
      deep:true,//深度侦听(对象里面层的值改变)
      immediate:true //立即侦听(网页打开handler执行一次)
  },
 }
}
</script>

<style lang="scss" scoped></style>