【前端Vue】——初识Vue.js
<!DOCTYPE html>
<html>
<head>
<title>初识Vue.js</title>
<!-- 引入Vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.5/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 使用Vue.js指令v-text来显示数据 -->
<p v-text="message"></p>
</div>
<script>
// 创建Vue实例,传入配置对象
new Vue({
// 绑定到页面上的元素
el: '#app',
// 数据对象
data: {
message: 'Hello Vue.js!'
}
});
</script>
</body>
</html>
这段代码展示了如何在HTML页面中引入Vue.js,并创建一个Vue实例,该实例绑定到页面上id为app
的元素,并在其内部使用v-text
指令显示一条消息。这是学习Vue.js的基本步骤之一。
评论已关闭