Vue基础 el挂载点、data数据对象

富士康质检员张全蛋

已于 2023-11-29 18:09:52 修改

阅读量472

点赞数

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

于 2023-06-29 14:42:29 首次发布

本文链接：https://blog.csdn.net/qq_34556414/article/details/131455531

版权

Vue.js 专栏收录该内容

38 篇文章 1 订阅

订阅专栏

文章详细介绍了Vue实例的创建，包括通过`newVue()`构造函数的不同参数配置，如`el`和`data`的两种写法。`el`用于指定Vue实例管理的DOM元素，而`data`可以以对象或函数形式定义初始数据。Vue实例与DOM元素的一对一绑定以及模板语法的使用也在讨论范围内，强调了数据变化时页面自动更新的特性。此外，文章还提醒了在组件开发中应使用函数式的`data`选项。

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

Vue实例的几种写法

输出vue实例，所有红色框里面以$开头的都是都是可以直接使用的，给程序员使用的。其他的不带$的不是给程序员使用的，这些是vue底层自身在使用的。

<body>  

    <div id="app">
        <p>{{name}}</p>
    </div>
         
    <script type="text/javascript"> 

    Vue.config.productionTip = false     
     const v = new Vue({      
          data:{ 
            name: "lucas",
          }
       })
       console.log(v)
   
       setTimeout(() => {
         v.$mount("#app")
       }, 1000);
      
    </script>
 
</body>

之前使用el去指定容器，现在使用$mount也能够指定容器。这个就可以回头进行关联，并不需要一开始就关联上。

//el的两种写法
/*const v =new Vue({
//el:'#root',//第一种写法
 data:{
   name:'xxx’
 }
})
console.log(v)
v.$mount('#root')//第二种写法*/

//data的两种写法

new Vue({
el:'#root',
//data的第一种写法：对象式/*
data:{
name:'xxxx'
}*/

//data的第二种写法：函数式
  data:function(){
     return{
         name:'xxx'
})

第一种写法简单粗暴，你需要就直接写一个对象里面配数据。

第二种就是里面写一个函数，这个函数有返回值，返回值是你真正想要的对象。

挂载的写法随意哪种都行，等后面学到组件就必须得使用data麻烦的函数方式写法，而不能使用对象式。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <!--引入vue,这里引入vue那么这里就多了vue构造函数-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
 
<body>  

    <div id="app">
        <p>{{name}}</p>
    </div>
         
    <script type="text/javascript"> 

    Vue.config.productionTip = false     
       new Vue({      
          data(){ 
            //此处的this是vue实例对象
            console.log(this)
           return{
             name: 'lucas'
           }
          }
       })
       console.log(v)
   
       setTimeout(() => {
         v.$mount("#app")
       }, 1000);
      
    </script>
 
</body>
</html>

组件的 data 选项是一个函数（data里面是有return的）。Vue 会在创建新组件实例的过程中调用此函数（将里面定义的变量都放到实例里面去，你就可以使用this点出来，包括HTML里面就能够使用这些变量的）。

data与el的2种写法
1.el有2种写法
(1)new Vue时候配置el属性
(2)先创建Vue实例，随后再通过vm.$mount('#root')指定el的值。

2.data有2种写法
(1)对象式
(2)函数式
如何选择：目前哪种写法都可以，以后学习到组件时，data必须使用函数式，否则会报错。

3.一个重要的原则：由vue管理的函数(data其实就是一个)，一定不要写箭头函数，一且写了箭头函数，this就不再是Vue实例了。

第一步导入vue，第二步在html里面写一点东西，第三步在js里面写一点东西。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <link href="" type="text/css" rel="stylesheet"/>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <style type="text/css">
    </style>
</head>

<body>    
<div id="app">
    {{message}}
</div>
         
    <script type="text/javascript">
        var app = new Vue({
             el:"#app",
             data:{
                message: "hello vue!"
             }
        })
    </script>

</body>
</html>

new Vue()是构造函数，构造vue实例。data是vue实例当中的使用到的数据，你需要使用什么就写什么。

{{message}} 是模板的语法，作用是使用数据和页面结构关联起来。

vue是如何知道要去操作那个元素的呢？el:"#app"这里有el的属性，在css当中#是id选择器，这样就可以让vue去管理id为app的元素。（其实就是将vue实例和容器之间就建立起来了关系，之后vue实例就要将工作成果放在div里面去）

有两种写法，你给选择器让它去找去

       const app = new Vue({
          el: "#app",

亲自找到这个元素，给其配置到el里面，一般使用上面简洁写法！

       const app = new Vue({
          el: document.getElementById('root'),

你只负责将数据维护好，用到数据的地方自然而然就变了，这就省去了你自己操作dom。

data和el之间使用逗号分隔，不同的key value。data是一个对象可以存入许多信息。在html里面{{}}是插值语法。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <link href="" type="text/css" rel="stylesheet"/>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <style type="text/css">
    </style>
</head>
 
<body>  
    <!--准备一个容器-->  
<div id="app">
    {{ name }}
</div>
         
    <script type="text/javascript">
        //创建Vue实例，要想使用vue就必须创建，否则免谈，是一切的开端
        //在创建vue的时候，传不传参数，传几个，分别是什么数据类型，只传一个参数，参数类型是对象
        //这个对象叫做配置对象，比如axios({url:'http://xxxx'})要发请求也要配置对象，配置对象key是不能够乱修改的
      new Vue({   //不需要使用 const app = new Vue.....多此一举
          el: "#app",   //指定为当前vue实例为哪个容器服务，值通常为css选择器字符串
          data:{ //data用于存储数据，数据供el所指定的容器去使用，容器之外的不管
            name: "lucas123456"
          }
       })
        
    </script>
 
</body>
</html>

el:挂载点

在创建vue实例的时候传入的对象当中有两个属性，分别是el和data。

el属性就是挂载点，通过css选择器设置vue实例管理的元素，设置完毕之后，el命中的元素内部使用两个大括号修饰的部分就会被data当中同名的数据替换。

在外部的元素是不会被渲染的。el命中元素的内部是被vue所管理，可以被任意的嵌套其他的标签。

默认使用的是id选择器，同时也可以是class选择器。

<body>    
<p>{{message}}</p>
<div id="app" class="app">
    {{message}}
    <span>{{message}}</span>
</div>
         
    <script type="text/javascript">
        var app = new Vue({
             el:".app",
             data:{
                message: "hello vue!"
             }
        })
    </script>

</body>

或者是标签选择器都行

             el:"div",

实际开发的时候是建议选择id选择器，在开发当中会去约定id选择器唯一，而类选择器和标签选择器都可以命中多个元素会造成语义的不清晰，所以建议使用的是id选择器。

<p id="app" class="app">
    {{message}}
    <span>{{message}}</span>
</p>
         
    <script type="text/javascript">
        var app = new Vue({
             el:"#app",
             data:{
                message: "hello vue!"
             }
        })
    </script>


<h1 id="app" class="app">
    {{message}}
    <span>{{message}}</span>
</h1>

注意：不要将你的vue挂载到html标签或者body的上面，建议使用div作为挂载点，因为div没有额外的样式，但是向p h1标签都有独立的样式，不建议使用。

总结

1.想让Vue工作，就必须创建十个Vue实例，且要传入一个配置对象

2.div容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法

3.div容器里的代码被称为【Vue模板】(所谓的模板就是混着很多的写法，这个就是vue的模板)

容器两个作用，一个是为vue提供模板，其次就是将vue的工作成果往哪放。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <link href="" type="text/css" rel="stylesheet"/>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <style type="text/css">
    </style>
</head>
 
<body>  
    <!--准备一个容器-->  
<div id="app">
    {{ name }}
</div>
         
    <script type="text/javascript">
        //创建Vue实例，要想使用vue就必须创建，否则免谈，是一切的开端
        //在创建vue的时候，传不传参数，传几个，分别是什么数据类型，只传一个参数，参数类型是对象
        //这个对象叫做配置对象，比如axios({url:'http://xxxx'})要发请求也要配置对象，配置对象key是不能够乱修改的

      new Vue({   //不需要使用 const app = new Vue.....多此一举
          el: "#app",   //指定为当前vue实例为哪个容器服务，值通常为css选择器字符串
          data:{ //data用于存储数据，数据供el所指定的容器去使用，容器之外的不管
            name: "lucas123456"
          }
       })
        
    </script>
 
</body>
</html>

注意

一个vue实例不能同时去接管两个容器。

<body>  
<div class="app">
   <p>{{ msg }}</p>
</div>

<div class="app">
  <p>{{ msg }}</p>
</div>
         
    <script type="text/javascript">
        
      new Vue({   
          el: ".app",   
          data:{ 
            msg: "vue"
          }
       }
)
        
    </script>
 
</body>
---------------------------
vue

{{ msg }}

vue实例确实只有一个，但是有两个容器，由于上面的vue实例接管了容器，下面部分的vue实例没有任何作用。所以一个容器只能被一个vue实例去接管。

<body>  
<div id="app">
  <p>{{ msg }} {{ address }}</p>
</div>
         
    <script type="text/javascript">
        
      new Vue({   
          el: "#app",   
          data:{ 
            msg: "vue"
          }
       }
)

    new Vue({   
              el: "#app",   
              data:{ 
                address: "vue"
              }
          }
    )
        
    </script>
 
</body>

容器和vue实例之间的关系只能是1对1关系。

双花括号里面，包着的代码，必须写成js里面的表达式，注意区分：js表达式和js代码(语句)

1.表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方：

a
a+b
demo(1)
x=== y?'a':'b’

2.js代码(语句)

if(){}
for(){}

<div id="app">
  <p>{{ msg }} {{ address.toUpperCase() }} {{ Date.now()}} {{ 1 + 1 }}</p>
</div>

将动态的数据交给了vue实例，以后通过某种办法数据变化了，那么页面上使用到这部分数据的地方就自动更新了，不需要你去操作dom了。它们之间仿佛有隧道连接了，这边一边，另外一边就自动变。

初识Vue:

1.想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象

2.root容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法

3.root容器里的代码被称为【Vue模板】

4.Vue实例和容器是一一对应的

5.真实开发中只有一个Vue实例，并且会配合着组件一起使用；

6.{{xxx}}中的xxx要写js表达式，且xxx可以自动读取到data中的所有属性

7.一旦data中的数据发生改变，那么模板中用到该数据的地方也会自动更新

富士康质检员张全蛋

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
Vue基础 el挂载点、data数据对象

vue是如何知道要去操作那个元素的呢？el:"#app"这里有el的属性，在css当中#是id选择器。这样就可以让vue去管理id为app的元素。第一步导入vue，第二步在html里面写一点东西，第三步在js里面写一点东西。{{message}} 是模板的语法，作用是使用数据和页面结构关联起来。data是vue实例当中的使用到的数据，你需要使用什么就写什么。
复制链接

扫一扫

专栏目录