<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>el和data的两种写法</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!-- 容器 -->
<div id="root">
<h1>Hello, {{name}}</h1>
</div>
<script type="text/javascript">
Vue.config.productionTip = false;
//vue实例
const vm = new Vue({
//el的第一种写法，写在实例里面
//el: "#root",
//data的第一种写法，对象形式
// data: {
// name: "world"
// }
//对象的第二种写法，函数形式
// data: function() {
// return {
// name: "world"
// }
// }
//函数形式还可以这样写
data() {
return {
name: "world"
}
}
})
//el的第二种写法，在实例外面进行挂载
vm.$mount("#root");
</script>
</body>
</html>
el和data的两种写法总结：
el的两种写法：
1.在Vue实例中配置el属性
2.先创建Vue实例，在Vue实例外面利用 实例.$mount(XXX) 方法进行挂载
两种写法的比较：第一种写法是常规的写法，实例在创建的时候就与容器进行了绑定；第二种写法更加灵活多变，可以在需要的时候将实例挂载到容器
data的两种写法：
1.对象式
2.函数式
学到组件时必须使用函数式，需要注意的是，Vue所管理的函数（例如这里的data）不能使用箭头式函数，否则this将不再是Vue实例
（本文仅作个人学习记录用，如有纰漏敬请指正）
标签：el,Vue,name,data,实例,写法 From： https://www.cnblogs.com/jmsstudy/p/17499148.html