【Vue】el与data的两种写法

厦门德仔

已于 2023-04-11 15:46:43 修改

阅读量274

点赞数

分类专栏： # Vue 文章标签： Vue 前端

于 2023-04-11 08:05:30 首次发布

本文链接：https://blog.csdn.net/david_520042/article/details/130074101

版权

Vue 专栏收录该内容

48 篇文章 3 订阅

订阅专栏

data与el的2种写法

el有两种写法

new Vue时配置el属性。
先创建Vue实例。随后再通过vm.$mount(‘root’)指定el的值。

data有2种写法

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

一个重要的原则：

由Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数.this就不再是Vue实例了。

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>el与data的两种写法</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <!--准备好一个容器-->
    <div id="root">
        <h1>Hello.{{name}}</h1><!--插值语法-->     
    </div>
    <script type="text/javascript">
        Vue.config.productionTip =false //阻止生产环境的提示信息
        //el的两种写法
        /*
        const v=new Vue({
           // el:'#root', //第一种写法
            data:{ 
                name:'david'
            }
        });
        console.log(v);

        v.$mount('#root')//第二种写法
        */
       //data的两种写法
       new Vue({
            el:'#root', //第一种写法
            //data的第一种写法：对象式
            /*data:{ 
                name:'david'
            }
            */
           data(){
            console.log('@@@',this)
            return{
                name:'david'
            }
           }
        });
    </script>
</body>
</html>