<!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>el与data的两种写法</title> <script src="../js/vue.js"></script> </head> <body> <div id="root"> <h1>Hello,{{name}}!</h1> </div> <script> Vue.config.productionTip = false //el的两种写法： // const vm = new Vue({ // // el:'#root', //第一种写法 // data:{ // name:'JOJO' // } // }) // vm.$mount('#root')//第二种写法 //data的两种写法： new Vue({ el:'#root', //data的第一种写法：对象式 // data:{ // name:'JOJO' // } //data的第二种写法：函数式 data(){ return{ name:'JOJO' } } }) </script> </body> </html>
总结：
el有2种写法：
1创建Vue实例对象的时候配置el属性
2先创建Vue实例，随后再通过vm.$mount('#root')指定el的值
data有2种写法：
1对象式
2函数式
●如何选择：目前哪种写法都可以，以后学到组件时，data必须使用函数，否则会报错由
由Vue管理的函数，一定不要写箭头函数，否则this就不再是Vue实例了
