提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

vue中el和data的两种写法

Vue Data 两种 写法 el
2023-09-11 14:22:31 时间

首先做一个简单的效果

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>初始vue</title>
    <!-- 引入vue.js -->
    <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
        new Vue({
            el:'#root',
            data:{
                name:'vue'
            }
        })
    </script>
</body>

</html>

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

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

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>初始vue</title>
    <!-- 引入vue.js -->
    <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的第一种写法

在这里插入图片描述

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>初始vue</title>
    <!-- 引入vue.js -->
    <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

        //data的两种写法
        const v=new Vue({
            //第一种写法：对象式
            el:'#root',
            data:{
                name:'vue'
            } 
        }) 
     
     
    </script>
</body>

</html>

el的第二种写法

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

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>初始vue</title>
    <!-- 引入vue.js -->
    <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中写属性
在这里插入图片描述

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>初始vue</title>
    <!-- 引入vue.js -->
    <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

        //data的两种写法
        const v=new Vue({
            //第一种写法：对象式
            el:'#root',
            data:{
                name:'vue'
            } 
        }) 
     
  

    </script>
</body>

</html>

data的第二种写法

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

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>初始vue</title>
    <!-- 引入vue.js -->
    <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:'张三丰'
                }
            }

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

在这里插入图片描述

我们改成普通函数再试试

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

在这里插入图片描述
this就变成了vue实例了
在这里插入图片描述

总结

data和el的两种写法

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

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

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

相关文章