学习Vue.js时，你需要掌握以下基础知识：
HTML、CSS和JavaScript基础：Vue.js 是一个 JavaScript 框架，因此你需要对 HTML、CSS 和 JavaScript 有一定的了解。
Vue.js的核心概念：理解 Vue.js 的核心概念包括：
数据绑定：Vue.js 使用双向数据绑定，可以实时更新页面的数据。
指令：Vue.js 提供了一系列的指令，用于操作 DOM 元素。
组件：Vue.js 是组件化开发的，你可以将一个页面拆分成多个独立的组件，提高代码的可维护性和复用性。
生命周期钩子：Vue.js 组件有一系列的生命周期钩子函数，可以在组件的不同阶段执行特定的逻辑。
计算属性和监听器：Vue.js 提供了计算属性和监听器来监听数据的变化并做出响应。
事件处理：Vue.js 支持事件处理，可以监听 DOM 事件并做出相应的处理。
Vue CLI：Vue CLI 是 Vue.js 的脚手架工具，用于快速搭建 Vue.js 项目。
Vue Router：Vue Router 是 Vue.js 的官方路由管理器，用于构建单页面应用（SPA）。
Vuex：Vuex 是 Vue.js 的官方状态管理库，用于管理应用中的数据状态。
下面是一个简单的 Vue.js 代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue.js Example</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
<body>
<div id="app">
<h1>{{ message }}</h1>
<button @click="changeMessage">Change Message</button>
</div>
<script>
// 创建一个 Vue 实例
var app = new Vue({
el: '#app', // 将 Vue 实例挂载到 id 为 app 的元素上
data: {
message: 'Hello, Vue.js!' // 定义数据
},
methods: {
changeMessage: function() {
this.message = 'Vue.js is awesome!'; // 修改数据
}
}
});
</script>
</body>
</html>
这个例子中，我们创建了一个 Vue 实例，定义了一个数据 message，然后在页面中使用 {{ message }} 插值将数据显示在页面上。同时，我们还定义了一个按钮，当点击按钮时，会调用 changeMessage 方法来修改 message 的值，从而实现了页面数据的动态更新。