前言
Vue内的el，data属性
一、el，data简单介绍
（1）el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串（而这里所谓的容器就是带有id选择器的div的DOM对象，当然也可以用其他选择器）
（2）Vue要想工作，肯定要实例一个Vue对象，且传入一个配置对象，而这个配置对象就是要制定的容器，这个对象配置也就是挂载，挂载之后Vue对象就可以和容器相关联
（3）data用于储存数据，数据供el所指定的容器去使用
二、el，data的两种写法
（1）第一种
<!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> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <div id="app"> <h1>hello，我是{{name}},{{age}}岁了</h1> </div> <script> new Vue({ el: '#app', data: { name: '王五', age: 20 } }) </script> </body> </html>
（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>Document</title> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <div id="app"> <h1>hello，我是{{name}},{{age}}岁了</h1> </div> <script> var vm = new Vue({ data: function() { return { name: "王五", age: 20 } } }) vm.$mount("#app"); </script> </body> </html>
这里的两种写法并不是只能配套使用，el，data的两种写法可以两两混用
总结
上述图片中如果用到的是class=“app”，那么挂载的时候就写成el:" .app "，之只不过我们习惯于用id。
