一、el简介
el提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标。可以是 CSS 选择器，也可以是一个 HTMLElement 实例。
二、data的简介
Vue 实例的数据对象。data本身是一个函数，但是返回是一个对象。
三、el和data综合案例如下:
①index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<title>Vue CDN</title>
</head>
<body>
<div id="vue-app">
<!-- 后面el指定的就是这个vue-app -->
<h1>Hello, {{ name }}</h1>
<p>你的微信是: {{ wechat }}</p>
<p>{{ greet('morning') }}</p>
<p>{{ haveLunch() }}</p>
</div>
</body>
<script src="app.js"></script>
</html>
②app.js
// 实例化vue对象
new Vue({
el: '#vue-app', //element,是vue实例要操作的元素对象,比如这里这样是要操作这个容器。如果写的是class就是.vue-app
//data本身是一个函数，但是返回是一个对象
data() {
return {
name: '小蒋',
wechat: 'taoyanlxq'
};
},
methods: {
//写法一：
// greet: function() {
// return 'Good night' + this.name;
// }
//写法二：es6语法,建议用这种写法
greet(time) {
// return 'Good night ' + this.name; //这是es5写法
//es6写法的return是用反引号 ``,而且不需要拼接，直接用${}能获取内容
//只要想识别属性变量 ，都要用${}
return `Good ${time} ${this.name}`;//这个time是形参
},
haveLunch() {
return `吃过午饭了吗?`;
}
}
});
显示效果如图：
