<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Vue.js</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<!-- vue-app是根容器 -->
<div id="vue-app">
<p>Name:{{ name }}</p>
<p>Job:{{ job }}</p>
</div>
<p>{{name}}</p> <!-- 不在vue-app容器内，不会被识别 -->
<script src="app.js" type="text/javascript"></script>
</body>
</html>在app.js中实例化vue
app.js
// 实例化vue对象
new Vue({
el: "#vue-app",
data: {
name: "吴",
job: "web开发"
}
});
/**
*el: element 需要获取的元素，一定是html中的根容器元素
*data:用于数据（字符串、number、数组、对象...）的存储的一个对象，自定义key和value。value可以是字符串、number、方法、数组、对象...
*methods: 用于存储各种方法的一个对象
**/
8918
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
