vue中的el和data(){}简介及综合案例
一、el简介
el提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标。可以是 CSS 选择器，也可以是一个 HTMLElement 实例。
二、data的简介
Vue 实例的数据对象。data本身是一个函数，但是返回是一个对象。
三、el和data综合案例如下:
①index.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 `吃过午饭了吗?`;
}
}
});
显示效果如图：
