05-Vue核心-el与data的两种写法
el与data的两种写法
el的两种写法
1) 创建 Vue 实例对象的时候配置 el 属性
2) 先创建 Vue 实例,随后再通过 v.$mount('#root) 指定 el 的值
// el的两种写法 const v = new Vue({ // el 第一种写法 // el:"#root", data:{ name:"马铃薯" } }) // el 第二种写法 // 先创建Vue实例对象,通过v.$mount("#root")指定el的值 v.$mount("#root")
data的两种写法
1) 对象式,data:{ }
2) 函数式,data(){ return{} }
// data的两种写法 const v = new Vue({ el:"#root", // data 第一种写法:对象式 // data:{ // name:"马铃薯" // } // data 第二种写法:函数式 data(){ //此处的this是Vue实例对象 console.log("123",this) return{ name:"马铃薯" } } })
这里需要注意,如何选择目前哪种写法都可以,以后到组件时, data 必须使用函数,否则会报错
完整代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>el与data的两种写法</title> <!-- 引入Vue --> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <!-- 准备好一个容器 --> <div id="root"> <h1>你好,{{name}}</h1> </div> <script type="text/javascript"> // 阻止 vue 在启动时生成生产提示 Vue.config.productionTip = false; // // el的两种写法 // const v = new Vue({ // // el 第一种写法 // // el:"#root", // // data:{ // name:"马铃薯" // } // }) // // el 第二种写法 // // 先创建Vue实例对象,通过v.$mount("#root")指定el的值 // v.$mount("#root") // data的两种写法 const v = new Vue({ el:"#root", // data 第一种写法:对象式 // data:{ // name:"马铃薯" // } // data 第二种写法:函数式 data(){ //此处的this是Vue实例对象 console.log("123",this) return{ name:"马铃薯" } } }) // 向 Web 控制台输出一条信息 console.log(v) </script> </body> </html>