el和data的两种写法
一、el
1、实例化Vue对象时,写在内部
2、实例化Vue对象后,挂载容器
对象.$mount(id选择器)
二、data
1、对象式
2、函数式
注意:写成一般函数(一般函数在对象中可简写),不能写成箭头函数
案例
<!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 type="text/javascript" src="../js/vue.js"></script> </head> <body> <div id="contianer"> <h1>Hello, {{name}}</h1> </div> <script type="text/javascript"> // 第一种,el 实例化对象直接写, data 为对象式 /* new Vue({ el: "#contianer", data:{ name:"jojo" } }) */ // 第二种,el 先实例化Vue,再挂载,data 函数为函数 /* const vm = new Vue({ data:function(){ return{ name:"wt" } } }) */ // 函数简写 const vm = new Vue({ data(){ console.log("abc",this) return { name: "jojo" } } }) vm.$mount("#contianer") console.log(vm) </script> </body> </html>