Vue基础（一）

最新推荐文章于 2024-11-01 17:01:39 发布

欧阳方超

最新推荐文章于 2024-11-01 17:01:39 发布

阅读量129

点赞数

分类专栏： Vue 前端文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/u012288582/article/details/121198240

版权

前端同时被 2 个专栏收录

12 篇文章 0 订阅

订阅专栏

Vue

3 篇文章 0 订阅

订阅专栏

本文详细介绍了Vue实例与DOM关联的两种方式，包括通过el属性直接指定和使用$mount()方法挂载。同时，讨论了data属性的不同写法，包括对象式和函数式，并提醒在使用函数式写法时避免使用箭头函数以确保this的正确指向。通过实例代码展示了具体应用。

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

一、概述

通过Vue产生的实例需要与页面上的DOM进行管理，在关联时有两种方式：一种是通过el属性，另一种是通过$mount()函数；Vue配置对象中data的写法也不一而足，下面将展开说明。

二、Vue实例关联DOM的两种方式

DOM与Vue实例产生关联的两种方式：
第一种是创建Vue实例时配置el属性，即直接指定Vue实例与哪个DOM元素关联；
第二是通过创建的Vue实例调用$mount()方法，将Vue实例挂载到DOM上

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <link rel="icon" href="../images/icon/motor.ico" type="image/x-icon"/>
   <script src="../js/vue.js"></script>
   <title>el和data不同写法</title>
</head>
<body>
   <div id="demo">
       <h1>{{name}}</h1>
   </div>
   <script>
       const a = new Vue({
           //el第一种写法
           //el: '#demo',
           data: {
               name: 'test'
           }
       });
       console.log(a);
       //el第二种方式
       a.$mount('#demo');
   </script>
</body>
</html>

三、Vue配置对象中data两种写法

data的两种写法
第一种是对象式写法；
第二种是函数式写法，函数式的写法在ES6中又可以衍生出一种新写法；
需要注意的是，函数式写法不要写成箭头函数的形式，因为由Vue管理的函数，写成箭头函数时this就不再指向Vue实例了，而是指向window，与我们的意愿不符。

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <link rel="icon" href="../images/icon/motor.ico" type="image/x-icon"/>
   <script src="../js/vue.js"></script>
   <title>el和data不同写法</title>
</head>
<body>
   <div id="demo">
       <h1>{{message}}</h1>
   </div>
   <script>
       const a = new Vue({
           el: '#demo',
           //data的第一种写法，对象式写法
           // data: {
           //     message: 'how are you'
           // }
           //data的第二种写法，函数式写法
           // data: function() {
           //     return {
           //         message: 'how are you'
           //     }
           // }
           //ES6中函数式的新写法
           data() {
               return {
                   message: 'how are you'
               }
           }
       });
   </script>
</body>
</html>