vue中el和data的两种写法

绝地灬酷狼 2023-09-26 10:15 67阅读 0赞

## 首先做一个简单的效果 ##

查看页面，发现name被插值进去了，控制台也没有错误

![在这里插入图片描述][7d7dcc138c8145678d52028e4b0a0995.png]  
按照我们的写法，是通过el和容器进行关联，其实不用写el属性

<!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="UTF-8">
        <title>初始vue</title>
        
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    
    <body>
        
        <div id="root">
            <h1>你好,{
        {
        name}}!</h1>
        </div>
        <script type="text/javascript">
            // 设置为 false 以阻止 vue 在启动时生成生产提示。
            Vue.config.productionTip = false
            //el的两种写法
            const v=new Vue({
        
                //第一种写法 直接使用eq关联容器
                //el:'#root',
                data:{
        
                    name:'vue'
                } 
            }) 
            //第二种写法使用mount指定容器，相比于第一种写法，这种写法更加的灵活
            //mount意为挂载
             v.$mount("#root")
            console.log(v)
        </script>
    </body>
    
    </html>

### el的第一种写法 ###

![在这里插入图片描述][1e8c981270fa40cf8f828f8ac99726af.png]

### el的第二种写法 ###

先创建vue实例，随后再通过vm.$mount(‘\#root’)指定el的值

<!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="UTF-8">
        <title>初始vue</title>
        
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    
    <body>
        
        <div id="root">
            <h1>你好,{
        {
        name}}!</h1>
        </div>
        <script type="text/javascript">
            // 设置为 false 以阻止 vue 在启动时生成生产提示。
            Vue.config.productionTip = false
            //el的两种写法
            const v=new Vue({
        
                //第一种写法 直接使用el关联容器
                //el:'#root',
                data:{
        
                    name:'vue'
                } 
            }) 
            //第二种写法使用mount指定容器，相比于第一种写法，这种写法更加的灵活
            //mount意为挂载
            v.$mount("#root")
    
          
         
    
    
        </script>
    </body>
    
    </html>

### data的第一种写法 ###

对象式：直接创建对象在data中写属性  
![在这里插入图片描述][0c2a62e1ddca4a989d8ed7f90b0757ac.png]

### data的第二种写法 ###

函数式：编写一个函数且必须返回一个对象，对象里面的数据，就是你所需要的,这种写法虽然麻烦，但是更灵活，通常配合组件使用  
![在这里插入图片描述][8ef18176b64742f895b9d7a3cad73a87.png]

<!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="UTF-8">
        <title>初始vue</title>
        
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    
    <body>
        
        <div id="root">
            <h1>你好,{
        {
        name}}!</h1>
        </div>
        <script type="text/javascript">
            // 设置为 false 以阻止 vue 在启动时生成生产提示。
            Vue.config.productionTip = false
            const v=new Vue({
        
                //第二种写法：函数式，编写一个函数且必须返回一个对象，对象里面的数据，就是你所需要的
                //这种写法虽然麻烦，但是更灵活，通常配合组件使用
                el:'#root',
                data(){
        
                    //此处的this是vue实例对象，想要调用this前提必须是data函数是一个普通的函数，如果写成一个箭头函数，那么这个this就是全局的window，而不是vue实例对象了
                    console.log(111,this)
                    // 这个函数是vue自动帮我们调用的
                    return{
        
                        name:'张三丰'
                    }
                }
                
            }) 
    
        </script>
    </body>
    
    </html>

## 注意事项 ##

由vue管理的对象，一定不要写箭头函数，不然this就不是vue实例了  
比如现在有一个箭头函数，我们打印this对象

data:()=>{
        
                    //此处的this是vue实例对象，想要调用this前提必须是data函数是一个普通的函数，如果写成一个箭头函数，那么这个this就是全局的window，而不是vue实例对象了
                    console.log(111,this)
                    // 这个函数是vue自动帮我们调用的
                    return{
        
                        name:'张三丰'
                    }
                }

![在这里插入图片描述][34d60e9ca6e44bccafe1858d04d61fd1.png]  
控制台显示this是一个全局的window对象，而不是vue实例

![在这里插入图片描述][0fec5952a9654f4392b6c4301b19d8be.png]

我们改成普通函数再试试

data(){
        
          //此处的this是vue实例对象，想要调用this前提必须是data函数是一个普通的函数，如果写成一个箭头函数，那么这个this就是全局的window，而不是vue实例对象了
         console.log(111,this)
         // 这个函数是vue自动帮我们调用的
          return{
        
          name:'张三丰'
           }
       }

![在这里插入图片描述][e53af3f929864d01aa3d553bc91b5a9b.png]  
this就变成了vue实例了  
![在这里插入图片描述][1367faa361e640f48395229307b3949c.png]

## 总结 ##

data和el的两种写法

1 el有两种写法  
(1).new vue的时候配置el属性  
(2).先创建vue实例，随后再通过vm.$mount(‘\#root’)指定el的值

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

3 一个重要的原则  
由vue管理的对象，一定不要写箭头函数，不然this就不是vue实例了

[7d7dcc138c8145678d52028e4b0a0995.png]: https://img-blog.csdnimg.cn/7d7dcc138c8145678d52028e4b0a0995.png
[1e8c981270fa40cf8f828f8ac99726af.png]: https://img-blog.csdnimg.cn/1e8c981270fa40cf8f828f8ac99726af.png
[0c2a62e1ddca4a989d8ed7f90b0757ac.png]: https://img-blog.csdnimg.cn/0c2a62e1ddca4a989d8ed7f90b0757ac.png
[8ef18176b64742f895b9d7a3cad73a87.png]: https://img-blog.csdnimg.cn/8ef18176b64742f895b9d7a3cad73a87.png
[34d60e9ca6e44bccafe1858d04d61fd1.png]: https://img-blog.csdnimg.cn/34d60e9ca6e44bccafe1858d04d61fd1.png
[0fec5952a9654f4392b6c4301b19d8be.png]: https://img-blog.csdnimg.cn/0fec5952a9654f4392b6c4301b19d8be.png
[e53af3f929864d01aa3d553bc91b5a9b.png]: https://img-blog.csdnimg.cn/e53af3f929864d01aa3d553bc91b5a9b.png
[1367faa361e640f48395229307b3949c.png]: https://img-blog.csdnimg.cn/1367faa361e640f48395229307b3949c.png