Vue(Vue2+Vue3)——7.el和data的两种写法

2023-06-20 124

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： Vue(Vue2+Vue3)——7.el和data的两种写法

7 el和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
        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>

7.1 el的第一种写法

new vue的时候配置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>

7.2 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>

7.3 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>

7.4 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>

7.5 注意事项

由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:'张三丰'
       }
   }