data与el的两种写法

data与el的两种写法

• el有两种写法

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

• data有两种写法

  • 对象式
  • 函数式：组件模式下data必须使用函数式，否则会报错

• 重要原则

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

  <script type="text/javascript">
            Vue.config.productionTip = false // 设置为 false 以阻止 vue 在启动时生成生产提示
  
            //el的两种写法
            const vm = new Vue({
                // el:'#root', // 第一种写法
                // el:document.getElementById(root)
                data:{ 
                    name:'山东大学',
                    address:"青岛"
                }
            })
            // // 第二种写法
            // console.log(v)
            // setTimeout(() => {
            //     v.$mount('#root')
            // },1000);
  
            // data的两种写法
            const v = new Vue({
                el:'#root', // 第一种写法
                // el:document.getElementById(root)
                // data的第一种写法 对象式
                // data:{ 
                //     name:'山东大学',
                //     address:"青岛"
                // }
                // data的第一种写法 函数式 vue调用 不用箭头函数
                data:function(){
                    console.log('!!',this) // 此处this是Vue实例对象
                    return{
                        name:"山东大学"
                    }
                }
            })
        </script>