Vue基础（二）

何时能脱坑

已于 2022-07-29 09:22:51 修改

阅读量240

点赞数 2

文章标签： vue.js javascript 前端

于 2022-07-27 20:10:14 首次发布

本文链接：https://blog.csdn.net/weixin_59675867/article/details/126021246

版权

本文介绍了Vue的基础知识，包括v-bind指令的使用，如动态绑定class，v-for循环，特别是v-for与v-bind结合实现tab切换。接着讲解了计算属性的基本用法、setter和getter，以及如何通过计算属性合并姓名。最后讨论了侦听器watch的运用，包括深度监听和获取旧值。

摘要由CSDN通过智能技术生成

1. v-bind指令

1.1 v-bind的基本使用

1.2 v-bind动态绑定class(对象语法)

2. v-for的基本使用

3. v-for和v-bind结合使用（tab切换）

4. 计算属性

4.1 计算属性的基本使用

4.2 计算属性的setter和getter

5. 侦听器watch

5.1 侦听器的基本使用

5.2 监听引用数据类型（深度监听）

5.3 监听引用数据类型如何获取旧值(不常用)

1. v-bind指令

1.1 v-bind的基本使用

<body>
  <div id="app">
    <!-- 错误的做法这里不能使用Mustache语法 -->
    <!-- <img v-bind:src="{
  {imgURL}}" alt=""> -->
    <!-- 正确的做法使用v-bind指令 -->
    <img v-bind:src="imgURL" alt="">
    <a v-bind:href="aHerf"></a>
    <!-- 语法糖写法 --> <!-- 就是在不改变原有结构和功能下简化写法 -->
    <img :src="imgURL" alt="">
    <a :href="aHerf"></a>

  </div>
  <script src="vue.js"></script>
  <script>
    const app = new Vue({
      el:"#app",
      data:{
        message:"你好啊",
        imgURL:"https://blog.csdn.net",
        aHerf:"http://www.baidu.com"
      }
    })
  </script>
</body>

1.2 v-bind动态绑定class(对象语法)

<body>
  <div id="app">
    <!-- <h2 class="active">{
  {message}}</h2>
    <h2 :class="active">{
  {message}}</h2> -->

    <!-- 动态绑定class对象用法  -->
    <!-- <h2 :class="{key1:value1,key2:value2}">{
  {message}}</h2>
    <h2 :class="{类名1:true,类名2:boolean}">{
  {message}}</h2> -->
    <!-- :class="{active:isActive}" isActive为true类名才生效 -->
    <h2 class="title" :class="{active:isActive}">{
  {message}}</h2>
    <h2 class="title" :class="getClasses()">{
  {message}}</h2>
    <button @click="change">点击变色</button>

  </div>
  <script src="vue.js"></script>
  <script>
    const app = new Vue({
      el:"#app",
      data:{
        message:"你好啊",
        active:"active",
        isActive:true
      },
      methods: {
        change(){
          this.isActive = !this.isActive
        },
        getClasses(){
          return {active:this.isActive}
        }
      },
    })
  </script>
</body>