一、挂载的两种写法
1. 使用el
直接将容器中的{ {}}模板交给vue实例进行解析，解析完成后重新放到{ {}}位置处显示
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<h1>hello,{
{name}}</h1>
</div>
</body>
<script>
const v = new Vue({
el: "#root",
data: {
name: "czc"
}
})
</script>
</html>2. 使用$mount（更灵活）
一开始模板与vue实例不关联，只有当v.$mount()执行时，模板与vue实例才关联起来，使得模板显示实例中的数据
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<h1>hello,{
{name}}</h1>
</div>
</body>
<script>
const v = new Vue({
// el: "#root",
data: {
name: "czc"
}
})
setTimeout(() => {
v.$mount("#root")
}, 1000)
</script>
</html>二、data的两种写法
1. 对象形式
data: {
name: "czc"
}2. 函数形式（√）
data: function () {
return {
name: "czc"
}
}或
data() {
return {
name: "czc"
}
}