尚硅谷Vue学习——el与data的两种写法

最新推荐文章于 2022-10-06 22:49:28 发布

才疏学浅的小缘同学

最新推荐文章于 2022-10-06 22:49:28 发布

阅读量349

点赞数 1

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

本文链接：https://blog.csdn.net/qq_44790505/article/details/123247156

版权

Vue学习专栏收录该内容

45 篇文章 2 订阅

订阅专栏

el与data有两种写法
1.el的两种写法

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

2.data的两种写法

   对象式
   函数式

   如何选择：学习到组件时，data必须使用函数式，否则会报错。
3.重要原则
   有Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不再是Vue实例了。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <!-- 准备好一个容器 -->
    <div id="root">
    <h1>加油，{{name}}</h1>
    </div>
</body>
<script type="text/javascript">
    Vue.config.productionTip =  false // 阻止 vue 在启动时生成生产提示
    
    // el的两种写法
    // const v = new Vue({
    //     el:'#root',   第一种写法
    //    data:{
    //        name:'才疏学浅'
    //   }
    // })
    // console.log(v)
    // v.$mount('#root') //第二种写法
    new Vue({
       el:'#root',
    //    data:{
    //      name:'才疏学浅',  //data的第一种写法：对象式
    //   }

        data:function(){
            return{
                name:'才疏学浅',  //data的第二种写法：函数式
            }
        }
    })
</script>
</html>

实现效果都是一样的，就不截图了。

才疏学浅的小缘同学

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
尚硅谷Vue学习——el与data的两种写法

el与data有两种写法1.el的两种写法 new Vue时配置el属性先创建Vue实例，随后再通过vm.$mount('#root')指定el的值2.data的两种写法对象式函数式如何选择：学习到组件时，data必须使用函数式，否则会报错。3.重要原则有Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不再是Vue实例了。<!DOCTYPE html><html lang="en">...
复制链接

扫一扫