（1）vue基础——1.5 el与data的两种写法

el与data有两种写法

1.el的两种写法

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

2.data的两种写法

对象式
函数式

如何选择：学习到组件时，data必须使用函数式，否则会报错。

3.重要原则

有Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不再是Vue实例了，而是全局window

<!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>
<!-- el与data有两种写法
    1.el的两种写法
        new Vue时配置el属性
        先创建Vue实例，随后再通过vm.$mount('#root')指定el的值
    2.data的两种写法
        对象式
        函数式
        如何选择：学习到组件时，data必须使用函数式，否则会报错。
    3.重要原则
        有Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不再是Vue实例了。 -->
   
    <!-- 准备好一个容器 -->
    <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') //第二种写法,挂载到页面
    //使用场景:比如
    // setTimeout(()=>{
    //     v.$mount('#root')
    // },1000);

    new Vue({
       el:'#root',
    //data的两种写法
    //    data:{
    //      name:'才疏学浅',  //data的第一种写法：对象式
    //   }
    //不能写箭头函数
        data:function(){
            console.log('@@@',this) //此处的this是vue实例对象
            return{
                name:'才疏学浅',  //data的第二种写法：函数式
            }
        }
    })
</script>
</html>

 

posted @ 2022-07-08 21:08  陈晓猛  阅读(62)  评论(0)  编辑  收藏  举报