Vue 是一个渐进式的 JavaScript 框架，它用于构建用户界面，尤其是单页面应用程序。Vue 的核心语法主要涉及以下几个部分：模板语法、指令、事件绑定、数据绑定、计算属性、生命周期钩子等。
1、Vue实例
Vue的跟实例通常是由new Vue() 创建的，它是 Vue 应用的起点。你可以在 Vue 实例中定义 data、methods、computed、watch 等。
示例：
new Vue({
el: '#app', // 绑定的 DOM 元素
data: {
message: 'Hello, Vue!'
}
});
2、模板语法
Vue使用一种类似于HTML的语法来声明模板，模板是Vue组件渲染内容的基础。模板中可以包含表达式、数据绑定等。
插槽语法
Vue中在模板中使用大括号{{}}进行数据插值，将Vue实例的数据直接插入到DOM中
示例：
<div id="app">
<h1>{{ message }}</h1>
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
});
</script>
指令语法
以 v- 开头的特殊属性，来在模板中做出一些特定的操作
v-bind：绑定 HTML 属性v-model：创建双向数据绑定v-if：条件渲染v-for：列表渲染v-on：事件绑定v-show：控制元素显示与隐藏
示例：
<!-- v-bind -->
<img v-bind:src="imageSrc">
<!-- v-for -->
<ul>
<li v-for="item in items">{{ item }}</li>
</ul>
<!-- v-if -->
<p v-if="isVisible">This is visible</p>
<!-- v-on -->
<button v-on:click="increment">Click Me</button>
3、数据绑定
Vue 提供了数据绑定机制，允许你将 Vue 实例中的数据与 DOM 元素绑定。
单向数据绑定
使用 v-bind 可以将数据绑定到元素的属性上。
<img v-bind:src="imageUrl" alt="image">
双向数据绑定
使用 v-model 可以在输入框等表单元素和 Vue 实例的数据之间创建双向绑定。
<input v-model="message">
<p>The input message is: {{ message }}</p>
这里，message 的值会实时更新到输入框中，反之亦然。
