1.引入Vue.js文件到项目之中
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
2.定义一个div，为其定义一个id
<!-- 创建一个div，用于绑定下面的vue实例化对象 -->
<div id="app">
</div>3.实例化一个Vue对象,绑定上方div
<script>
// 创建一个vue实例化对象
var app = new Vue({
el: "#app",// 绑定上方div
data: { // 这里存放的是数据
title: "vue学习",
job: "web前端开发工程师"
}
});
</script>4.在div中通过插值表达式对页面进行渲染
<div id="app">
{{title}}
<h1>{{job}}</h1>
</div>5.完整代码
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<head></head>
<body>
<!-- 创建一个div，用于绑定下面的vue实例化对象 -->
<div id="app">
{{title}}
<h1>{{job}}</h1>
</div>
</body>
<script src="js/vue.js"></script>
<script>
// 创建一个vue实例化对象
var app = new Vue({
el: "#app",// 绑定上方div
data: { // 这里存放的是数据
title: "vue学习",
job: "web前端开发工程师"
}
});
// 第二种写法(简单写法)
// new Vue({
// el: "#app",// 绑定上方div
// data: { // 这里存放的是数据
// title: "vue学习",
// job: "web前端开发工程师"
// }
// })
</script>
</html>6.显示效果
