vue学习笔记（4）——el与data的两种写法

最新推荐文章于 2024-06-19 15:46:35 发布

weixin_54763080

最新推荐文章于 2024-06-19 15:46:35 发布

阅读量40

点赞数

分类专栏： vue学习笔记文章标签： vue.js Powered by 金山文档

本文链接：https://blog.csdn.net/weixin_54763080/article/details/128761751

版权

vue学习笔记专栏收录该内容

19 篇文章 1 订阅

订阅专栏

data与el的2种写法

el有两种写法

（1）new Vue时要配置el属性

（2）先创建vue实例，随后再通过vm.$mount('#root')指定el值

data有2种写法

（1）对象式

（2）函数式

如何选择：在组件当中，data必须使用函数式，否则会报错

一个重要原则：

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <title>数据绑定</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>

    <!-- 准备好一个容器 -->
    <div id="root">
       <h1>你好 {{name}}</h1>
      
    </div>


<script type="text/javascript">
    Vue.config.productionTip=false
// el的两种写法
//    const x= new Vue({//x接收到vue实例
//        // el:'#root', //第一种写法
//         data:{
//             name:'12345'
//         }

//     })
//     console.log(x)//输出vue实例
//     // 定时器
//     setTimeout(()=>{
//           x.$mount('#root')//第二种写法，挂载
//     },1000);
 


new Vue({
        el:'#root', 
        // data的第一种写法：对象式
        // data:{
        //     name:'12345'
        // }

         // data的第二种写法：函数式
        data(){
            console.log('@@@',this)//此处的this是vue实例对象
            return{
                name:'12345'//必须有返回值
            }
        }

    })
</script>
</body>
</html>

weixin_54763080

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue学习笔记（4）——el与data的两种写法

由vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不再是vue实例了。（2）先创建vue实例，随后再通过vm.$mount('#root')指定el值。如何选择：在组件当中，data必须使用函数式，否则会报错。（1）new Vue时要配置el属性。data与el的2种写法。
复制链接

扫一扫