Vue的基本使用（二）

最新推荐文章于 2024-05-15 10:00:04 发布
最新推荐文章于 2024-05-15 10:00:04 发布
阅读量215 收藏 1
点赞数
文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35947021/article/details/129804304
版权
文章介绍了Vue.js中计算属性和监视属性的概念与用法。计算属性用于基于现有数据生成新属性，提供了缓存机制，提高效率。监视属性则能在数据变化时执行回调，用于响应式更新。此外，还讨论了条件渲染的v-if和v-show的区别及其使用场景。
摘要由CSDN通过智能技术生成

1、计算属性

计算属性：顾名思义这个属性是计算出来的，也就是说它并不是我们data中定义的。

​ 这里使用使用一个简单的案例来演示，各种形式下的实现形式，进而来展现计算属性的好处。

1.1、姓名案例-插值语法实现

<!DOCTYPE html>
<html lang="en">

<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>姓名案例-插值语法实现</title>
  <script src="../js/vue.js" type="text/javascript"></script>
</head>

<body>
  <div id="root">
    姓：<input type="text" v-model="firstName" id=""><br>
    名：<input type="text" v-model="lastName" id=""><br>
    姓名：<span>{{firstName}}-{{lastName}}</span>
  </div>

  <script type="text/javascript">
    new Vue({
      el: '#root',
      data () {
        return {
          firstName: '张',
          lastName: '三'
        }
      },
    })
  </script>
</body>
</html>

使用最原始方法来实现，使用双大括号语法来进行字符的拼接，而且需要注意的是：属性必须用v-model进行数据的双向绑定。

1.2、姓名案例-method实现

<!DOCTYPE html>
<html lang="en">

<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>姓名案例-method实现</title>
  <script src="../js/vue.js" type="text/javascript"></script>
</head>

<body>
  <div id="root">
    姓：<input type="text" v-model="firstName" id=""><br>
    名：<input type="text" v-model="lastName" id=""><br>
    <!-- 在插值语法中使用方法，我们必须给方法加上小括号。但在事件中使用，可以省略（无参数的情况下） -->
    姓名：<span>{{fullName()}}</span><br>
  </div>


  <script type="text/javascript">
    new Vue({
      el: '#root',
      data () {
        return {
          firstName: '张',
          lastName: '三'
        }
      },
      methods: {
        // 只要我们的数据发生改变，我们Vue重新解析一遍代码，同时也就是要重新调用一次我们的fullNmae方法
        fullName () {
          console.log('fullName被调用');
          return this.firstName + this.lastName;
        },
      },
    })
  </script>
</body>

</html>

通过我们调用方法，拿到方法的返回值来实现该功能。

1.3、姓名案例-计算属性实现

<!DOCTYPE html>
<html lang="en">

<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>姓名案例-计算属性实现</title>
  <script src="../js/vue.js" type="text/javascript"></script>
</head>

<body>


  <!-- 
    计算属性:
      1.定义:要用的属性不存在，要通过已有属性计算得来。
      2.原理:底层借助了objcet.defineproperty方法提供的getter和setter.
      3.get函数什么时候执行?
        (1).初次读取时会执行一次。
        (2).当依赖的数据发生改变时会被再次调用。
      4.优势:与methods实现相比，内部有缓存机制（复用），效率更高，调试方便。
      5.备注:
        1.计算属性最终会出现在vm上，直接读取使用即可。
        2.如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生
   -->
  <div id="root">
    姓：<input type="text" v-model="firstName" id=""><br>
    名：<input type="text" v-model="lastName" id=""><br>
    姓名：<span>{{fullName}}</span><br>
  </div>

  <script type="text/javascript">
    const vm = new Vue({
      el: '#root',
      data () {
        return {
          firstName: '张',
          lastName: '三'
        }
      },
      computed: {
        fullName: {
          // get的调用时机：
          // 1. 初次读取fullName时。2. 他所依赖的属性发生变化的时候会调用。
          // computed相较于methods，它有缓存，只有上述条件满足的时候才会被调用。
          get () {
            console.log('get被调用');
            return this.firstName + '-' + this.lastName;
          },
          // set的调用时机：
          // 当fullName被修改的时候会被调用
          set (value) {
            console.log('set');
            var arr = value.split("-");
            this.firstName = arr[0];
            this.lastName = arr[1];
          }
          // 在这里我们需要理解一下，我们的get会根据所依赖的属性来计算出fullName
          // 而我们的set之后改变我们的fullName，不会影响所依赖的属性
        },
      },
    })
  </script>
</body>

</html>

计算属性需要在Vue配置对象中声明computed对象，而且非简写形式下的计算属性也是一个对象。

  1. 定义：要用的属性不存在，要通过已有属性计算得来。

  2. 原理：底层借助了objcet.defineproperty方法提供的getter和setter.

  3. get函数什么时候执行?

    • 初次读取时会执行一次。
    • 当依赖的数据发生改变时会被再次调用。

  4. 优势:与methods实现相比，内部有缓存机制（复用），效率更高，调试方便。

  5. 备注:

    • 计算属性最终会出现在vm上，直接读取使用即可。
    • 如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生

  6. 计算属性的调用很简单：就是在双大括号中写出计算属性的名称（理解：计算属性也是属性嘛！）。

这个案例中没有调用set方法。

1.4、姓名案例-计算属性的简写

<!DOCTYPE html>
<html lang="en">

<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>姓名案例-计算属性的简写</title>
  <script src="../js/vue.js" type="text/javascript"></script>
</head>

<body>

  <div id="root">
    姓：<input type="text" v-model="firstName" id=""><br>
    名：<input type="text" v-model="lastName" id=""><br>
    姓名：<span>{{fullName}}</span><br>
  </div>


  <script type="text/javascript">
    const vm = new Vue({
      el: '#root',
      data () {
        return {
          firstName: '张',
          lastName: '三'
        }
      },
      computed: {
        // 简写的前提：只有读取没有修改（即：只有get没set）
        fullName () {
          console.log('get被调用');
          return this.firstName + '-' + this.lastName;
        }
      },
    })
  </script>
</body>

</html>

​ 计算属性的简写形式只适用于没有**set()**调用的情况下。简写形式是一个方法，返回一个值，这个值就是计算出来的属性。这和非简写形式下的get()很像，只不过方法名是计算属性的名称。

2、监视（侦听）属性

​ 监视（侦听）就是可用用来监视某些数据的变化。进而可以做出相应的相应。

这里同样的用一个案例来演示监视属性的好处。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GjpWTzSi-1679923029855)(Vue学习/image-20230312153907198.png)]

2.1、天气案例_计算属性实现

<!DOCTYPE html>
<html lang="en">

<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>天气案例</title>
  <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>

  <div id="root">
    <h1>今天天气{{info}}</h1>
    <button @click="changeWeather">切换天气</button>
    <button @click="isHot = !isHot">切换天气</button>
  </div>
  <script text="text/script">
    Vue.config.productionTip = false;
    new Vue({
      el: '#root',
      data () {
        return {
          isHot: true
        }
      },
      methods: {
        changeWeather () {
          // 当我们要做的功能很单一的时候，我们可以直接将此表达式写到@click里边。
          this.isHot = !this.isHot;
        }
      },
      computed: {
        info () {
          return this.isHot ? '炎热' : '凉爽';
        }
      }
    })
  </script>
</body>

</html>

使用计算属性可以很简单的实现这个功能，但还有点不足。

2.2、天气案例_监视属性

<!DOCTYPE html>
<html lang="en">

<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>天气案例_监视属性</title>
  <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
  <!-- 
    当监视属性变化的时候，回调函数handler会被调用，进行相关操作
    监视的属性必须存在,才能进行监视
    监视的两种写法:
    (1).new Vue时传入watch配置
    (2).通过vm.$watch监视
   -->
  <div id="root">
    <h1>今天天气{{info}}</h1>
    <button @click="changeWeather">切换天气</button>
  </div>
  <script text="text/script">
    Vue.config.productionTip = false;
    const vm = new Vue({
      el: '#root',
      data () {
        return {
          isHot: true
        }
      },
      methods: {
        changeWeather () {
          this.isHot = !this.isHot;
        }
      },
      computed: {
        info () {
          return this.isHot ? '炎热' : '凉爽';
        }
      },
      // watch: {
      // // 普通属性可以监视，计算属性也可以被监视
      // isHot: {
      //   immediate: true, //初始化时让handler执行一下（默认是只有isHot改变的时候才会被调用） 
      //   // handler调用的时机：当isHot发生改变时
      //   handler (newValue, oldValue) {
      //     console.log('isHot被修改了', newValue, oldValue);
      //   }
      // }
      // }
    })
    // 除了上述使用watch的方式，还有另外一种方式
    vm.$watch('isHot', {
      immediate: true, //初始化时让handler执行一下（默认是只有isHot改变的时候才会被调用） 
      // handler调用的时机：当isHot发生改变时
      handler (newValue, oldValue) {
        console.log('isHot被修改了', newValue, oldValue);
      }
    })
  </script>
</body>

</html>

使用监视属性的两种方式：

  1. 在配置对象中声明watch对象。

  2. 在创建完Vue实例对象之后，使用$watch来挂载。

    例： vm.$watch('被监视属性的名称', {
      immediate: true,
      handler (newValue, oldValue) {
        // 要进行的操作
      }
  })

2.3、深度监视

<!DOCTYPE html>
<html lang="en">

<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>天气案例_深度监视</title>
  <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
  <!-- 
  深度监视:
  (1).vue中的watch默认不监测对象内部值的改变（一层）。
  (2).配置deep:true可以监测对象内部值改变（多层）。
  备注:
  (1).Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以!
  (2).使用watch时根据数据的具体结构，决定是否采用深度监视。
 -->
  <div id="root">
    <h1>今天天气{{info}}</h1>
    <button @click="changeWeather">切换天气</button>
    <hr>
    <h3>a的值是{{numbers.a}}</h3>
    <button @click="numbers.a++">点我让a+1</button>
    <hr>
    <h3>b的值是{{numbers.b}}</h3>
    <button @click="numbers.b++">点我让b+1</button>
  </div>
  <script text="text/script">
    Vue.config.productionTip = false;
    const vm = new Vue({
      el: '#root',
      data () {
        return {
          isHot: true,
          numbers: {
            a: 1,
            b: 1
          }
        }
      },
      methods: {
        changeWeather () {
          this.isHot = !this.isHot;
        }
      },
      computed: {
        info () {
          return this.isHot ? '炎热' : '凉爽';
        }
      },
      watch: {
        isHot: {
          handler (newValue, oldValue) {
            console.log('isHot被修改了', newValue, oldValue);
          }
        },
        // 监视多级结构中某个属性的变化
        // 当我们需要监视对象中的某一个属性的时候，我们需要使用 '对象.属性' 的方式来使用。
        // 因为我们不使用引号是一种简写方式，但这种情况不能使用简写
        /*'numbers.a': {
          handler () {
            console.log("a被改变");
          }
        },*/
        // 当我们想要监视numbers中的任意一个属性变化的时候，我们就进行相关操作
        // 这里我们就需要用到 deep深度监视
        numbers: {
          deep: true,
          handler () {
            console.log('numbers被改变');
          }
        }
      }
    })
  </script>
</body>

</html>

使用监听属性的注意点：

  1. 当监听的属性在第一级的时候，直接就可以监听到，不用开启深度监视。

  2. 当监听的属性是对象中的属性的时候，这里涉及到两种情况：

    • 监听对象中的某个属性。这种情况下，我们不能使用监视属性的简写形式，而且不能直接将 number.a 写成 a。但这种情况下是不用开启深度监视的。

      'numbers.a': {
    handler () {
    	console.log("a被改变");
    }
},

    • 监听的是整个对象中的所有属性。这种情况下监听属性，监听不到数据的变化，必须要开启深度监视。

2.4、天气案例_监视属性简写

<!DOCTYPE html>
<html lang="en">

<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>天气案例_监视属性简写</title>
  <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
  <div id="root">
    <h1>今天天气{{info}}</h1>
    <button @click="changeWeather">切换天气</button>
    <hr>
  </div>
  <script text="text/script">
    Vue.config.productionTip = false;
    const vm = new Vue({
      el: '#root',
      data () {
        return {
          isHot: true,
        }
      },
      methods: {
        changeWeather () {
          this.isHot = !this.isHot;
        }
      },
      computed: {
        info () {
          return this.isHot ? '炎热' : '凉爽';
        }
      },
      watch: {
        // 正常写法
        // isHot: {
        //   // immediate: true, //初始化时让handler执行一下（默认是只有isHot改变的时候才会被调用） 
        //   // handler调用的时机：当isHot发生改变时
        //   handler (newValue, oldValue) {
        //     console.log('isHot被修改了', newValue, oldValue);
        //   }
        // },

        // 简写前提：不需要深度监视，只会使用handler的时候，才能简写
        isHot (newValue, oldValue) {
          console.log("isHot被修改了", newValue, oldValue);
        }
      }
    })
  </script>
</body>

</html>

深度监视的简写形式和它对象形式中写handler()很像，但就是方法名不再是handler而是被监听的属性名。

2.5、 补充：姓名案例-watch实现

<!DOCTYPE html>
<html lang="en">

<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>姓名案例-watch实现</title>
  <script src="../js/vue.js" type="text/javascript"></script>
</head>

<body>
  <!-- 
    computed和watch之间的区别:
      1.computed能完成的功能,watch都可以完成。
      2.watch能完成的功能，computed不一定能完成，例如: watch可以进行异步操作。
    两个重要的小原则:
      1.所被Vue管理的函数，最好写成普通函数，这样this的指向才是vm或组件实例对象。
      2.所有不被Vue所管理的函数（定时器的回调函数、ajax的回调函数等)，最好写成箭头函数，这样this的指向才是vm或组件实例对象。
   -->
  <div id="root">
    姓：<input type="text" v-model="firstName" id=""><br>
    名：<input type="text" v-model="lastName" id=""><br>
    姓名：<span>{{fullName}}</span><br>
  </div>
  <script type="text/javascript">
    const vm = new Vue({
      el: '#root',
      data () {
        return {
          firstName: '张',
          lastName: '三',
          fullName: '张-三'
        }
      },
      watch: {
        firstName (val) {
          this.fullName = val + "-" + this.lastName;
        },
        lastName (val) {
          this.fullName = this.firstName + "-" + val;
        }
      }
    })

    // computed和watch的对比
    // computed不支持异步任务（因为computed依靠的是返回值），但watch可以
  </script>
</body>

</html>

​ 监听属性和计算属性实现 姓名案例 ，两者相比较，计算属性更加的简便。但这并不是说这两种形式一定那种好，只能说它们两个的使用是视情况而定的。

computed和watch的对比：
computed不支持异步任务（因为computed依靠的是返回值），但watch可以。

3、条件渲染

<!DOCTYPE html>
<html lang="en">

<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>条件渲染</title>
  <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
  <div id="root">

    <!-- v-if和v-show的区别：
        1. v-if为false的时候，元素会消失
        2. v-show为false的时候，元素只是隐藏，它使用了display=none
        两者的选用：
        元素使用频率高就用v-show
        元素使用频率低就用v-if
    -->
    <!-- 使用 v-show 做条件渲染 -->
    <h2 v-show="a">欢迎{{name}}</h2>
    <hr>
    <!-- 使用 v-if 做条件渲染 -->
    <h2 v-if="a">欢迎{{name}}</h2>
    <hr>
    <h2>当前的值是{{n}}</h2>
    <button @click="n++">点我n+1</button>

    <div v-show="n===1">Angular</div>
    <div v-show="n===2">React</div>
    <div v-show="n===3">Vue</div>

    <!-- 只要其中一个条件成立，其余的判断就不会去执行。使用这些的时候，不允许打断 -->
    <div v-if="n===1">Angular_1</div>
    <div v-else-if="n===2">React_1</div>
    <div v-esle-if="n===3">Vue_1</div>
    <!-- 当上述条件都不成立的时候，就会执行v-else。v-else不需要写条件 -->
    <div v-else>测试</div>



  </div>
  <script type="text/javascript">
    new Vue({
      el: '#root',
      data () {
        return {
          name: '张三',
          a: true,
          n: 0
        }
      },
      methods: {

      },
    })
  </script>
</body>

</html>

​ 和很多语言中都一样，通过条件的来判断数据是否显示等。

v-if：通过条件的返回值来判断是否显示。

v-show：和v-if的功能一样。

两种的区别：

  1. v-if为false的时候，元素会消失
  2. v-show为false的时候，元素只是隐藏，它使用了display=none

两者的选用：

  1. 元素使用频率高就用 v-show
  2. 元素使用频率低就用 v-if

v-else-if和v-else：使用和其他语言中一样。但需要注意的是：他们之间不允许打断。v-else不用写条件。

艺术留白
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
vue 设置head_第四章：Vue实例
weixin_28717969的博客
01-31 2331
要开始使用VueJS，我们需要创建Vue实例，称为根Vue Instance。句法varapp=newVue({//options})让我们看一个示例，以了解需要成为Vue构造函数一部分的内容。<html><head><title>VueJsInstancetitle><scripttype...
vue-head：管理head标签的元信息，一种简单的方法
02-06
头 操作head标签的元信息，一种简单的方法由激励 有关旧版本的语法， 用法 通过CDN ... < script src =" https://cdnjs.cloudflare.com/ajax/libs/vue/*version*/vue.min.js " > </ script > < script src =" https://cdnjs.cloudflare.com/ajax/libs/vue-router/*version*/vue-router.min.js " > </ script > < script src =" https://cdn.rawgit.com/ktque
vue head（vue-meta编写页面head信息）
林雨的博客
08-10 5483
vue-meta vue-meta可以为单个页面设置head信息 模块安装 npm install vue-meta --save main.js中注册并使用vue-meta模块 import Meta from 'vue-meta' Vue.use(Meta) //注册使用vue-meta模块 使用vue-meta模块 <script> metaInfo: { title: 'vue-meta设计', //设计页面标题 }, </script&g
探索Vue-head：动态管理HTML头部信息的高效工具
最新发布
gitblog_00022的博客
05-15 373
探索Vue-head：动态管理HTML头部信息的高效工具 vue-headManager the meta information of the head tag, a simple and easy way项目地址:https://gitcode.com/gh_mirrors/vu/vue-head 在前端开发中，优化网页元数据（如标题、描述和图标）的管理和更新是一项重要的任务。为此，我们向您...
vue 相关
twenj1616的博客
04-28 288
hello world 知识点：hello world 结构 <!DOCTYPE html> <html lang="en"> <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"
vue布局
fivestar2009的博客
10-02 1022
vue 布局
vue使用二次封装存储localStorage
03-04
在Vue.js开发中，我们经常需要与浏览器的本地存储...通过这样的封装，我们可以更灵活、高效地在Vue应用中管理和使用localStorage，同时保持代码的整洁和模块化。这不仅提高了开发效率，也使得代码更容易理解和维护。
vue基本内容总结学习
07-01
#### 二、Vue 为什么采用异步渲染 Vue 的更新机制是基于组件级别的，这意味着只要组件中的任何一个数据发生变化，整个组件就会被重新渲染。为了提高性能，Vue 采用了异步渲染机制，即它会收集所有的变化，然后在一...
vue二级路由设置方法
08-28
Vue 二级路由设置方法 Vue 二级路由设置方法是 Vue.js 框架中的一种常见的路由配置方法，它...通过本文的介绍，读者可以学习到 Vue 二级路由设置方法的实现步骤和相关知识点，从而更好地理解 Vue 路由的配置和使用。
使用vue中的v-for遍历二维数组的方法
08-27
首先，我们要了解二维数组的基本概念。二维数组可以看作是由多个一维数组组成的数组，每个一维数组之间是并列关系。在JavaScript中，我们可以这样定义一个二维数组： ```javascript let data = [ [元素1, 元素2], ...
Vue基本使用之对象提供的属性功能
11-26
以上就是关于Vue基本使用中对象提供的属性功能的详细介绍，包括过滤器的定义与使用、计算属性和监听属性的应用，以及Vue对象的生命周期。通过这些功能，我们可以更高效地管理数据并实现动态视图更新，构建出响应式的...
vue/html中的head中三行关键代码
zumengbuting的博客
05-23 86
没有的话会导致页面某些内容不显示，格式不能完全显示出来，不能正确跳转等等。
Vue-meta动态管理vue项目HTML中head头部信息（可传变量）
qq_33991007的博客
03-06 2303
1、安装 npm install --save vue-meta plugin 2、引入main.js中 3、在vue文件中进行如下配置 重点注意：其中metaInfo写为一个方法，这样可以接收变量，如果不写为方法的话，无法读取data及computed中的信息。 ...
vue-head 插件设置浏览器顶部 favicon 图标 - 动态管理 html 文档头部标签内容
工作中遇到问题记录
01-29 1375
vue-head 插件设置浏览器顶部 favicon 图标 - 动态管理 html 文档头部标签内容
vue3开发的基础语法
浮游的博客
03-24 1780
认识Vue Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。 全程是Vue.js或者Vuejs； 什么是渐进式框架呢？表示我们可以在项目中一点点来引入和使用Vue，而不一定需要全部使用Vue来开发整个项目； 目前Vue在前端处于什么地位？ 目前前端最流行的是三大框架：Vue、React、Angular。 目前需要学习Vue3吗？ 在2020年的9月19日，万众期待的Vue3终于发布了正式版，命名为“One Piece”。 它也带来了很多新的特性：更好的性能、更小的包
vue-cli构建项目，怎么往页面的head里面添加meta
Tong_Zai_Yuan_Fang的博客
04-24 6953
在项目根目录下有个index.html文件，在里面加就是了。
Vue学习：监视属性-实现天气切换
weixin_47295886的博客
02-07 540
点击按钮。可以实现天气的直接切换。并且在控制台显示切换前后的天气。
vue 中的render函数基本使用
05-25
在使用 render 函数之前，需要先了解 Vue 的虚拟 DOM。虚拟 DOM 是一个 JavaScript 对象，它描述了真实 DOM 树的结构和属性。使用虚拟 DOM 可以提高性能，降低真实 DOM 操作的代价。 下面是一个简单的使用 render ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

艺术留白

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值