一、IDEA中打开项目
1.IDEA中安装Vue基本插件
2.项目结构
项目根目录
node_modules : npm 加载的项目依赖模块
public : 存放静态资源，如图片、视频等。
src : 项目源码目录，包含主要的开发文件。
index.html : 首页入口文件，可以添加 meta 信息或统计代码。
package.json : 项目配置文件，定义了项目所需的各种模块及配置信息。
README.md : 项目的说明文档， markdown 格式。
.gitignore : 忽略上传到 git 的文件，如 node_modules 和 build 打包文件。
.eslintrc.js : ESlint 语法检查，代码格式化，优化代码。
babel.config.js : 转 ES5 语法和配置一些插件。
3.双向绑定 —— data
data 是组件的核心概念之一，用于定义组件的 响应式数据 。以下是其关键作用及语法详解：
作用
1. 响应式数据容器
data 中定义的数据会被 Vue 自动转换为响应式（通过 Object.defineProperty 劫持数据变
化），当数据变化时，视图会自动更新。
2. 组件状态隔离
通过 data 函数返回新对象，确保每个组件实例拥有独立的数据副本，避免多实例间数据污染。
3. 初始化数据入口
是组件创建时初始化数据的唯一推荐位置。
示例代码
// 正确写法：必须是函数，返回对象data () {return {message : 'Hello Vue!' ,count : 0 ,isVisible : true ,user : { name : 'Alice' , age : 25 }}}
methods
methods 是用于定义组件 可复用逻辑 的核心选项，主要用于处理用户交互、数据操作和业务逻辑。以下
是其作用与语法详解：
// 正确写法：必须是函数，返回对象data () {return {message : 'Hello Vue!' ,count : 0 ,isVisible : true ,user : { name : 'Alice' , age : 25 }}}
作用
1. 事件处理
绑定 DOM 事件（如 @click ）或自定义事件（如 $emit 触发的事件）。
2. 逻辑封装
将复杂操作（如数据计算、 API 调用）封装成可复用函数。
3. 状态修改
通过 this 访问并修改 data 中的响应式数据（需遵循响应式规则）。
4. 组件通信
通过 this.$emit 向父组件传递事件，或调用子组件的引用方法。
入门案例（双向绑定） - 计数器
二 . vue 基本语法
1. Vue 指令
指令的概念
指令（ Directives ）是 vue 为开发者提供的模板语法，用于辅助开发者渲染页面的基本结构，指令是 vue 开发中最基础、最常用、最简单的知识点。
vue 中的指令按照不同的用途可以分为 6 大类：
内容渲染指令
属性绑定指令
事件绑定指令
双向绑定指令
条件渲染指令
列表渲染指令
（1）内容渲染指令
内容渲染指令用来辅助开发者渲染 DOM 元素的文本内容。常用的内容渲染指令有如下 2 个：
{{ }}v-html
{{ }}
vue 提供的 {{ }} 语法，用于文本内容的渲染，称之为插值表达式
<span>Message: {{ msg }}</span>v-html
插值表达式只能渲染纯文本内容。如果要把包含 HTML 标签的字符串渲染为页面的 HTML 元素，则需要
用到 v-html 这个指令 :
<p>Using mustaches: {{ rawHtml }}</p>
<p>Using v-html directive: <span v-html="rawHtml"></span></p>在站点上动态渲染任意的 HTML 是非常危险的，因为它很容易导致 XSS 攻击 。请只对可信内容使用
HTML 插值， 绝不要 将用户提供的内容作为插值。
（2）属性绑定指令
{{}} 语法不能在 HTML 属性中使用，可以使用 v-bind 指令：
<div v-bind:id="dynamicId"></div>
如果绑定的值是 null 或 undefined ，那么该属性将不会被包含在渲染的元素上。
由于 v-bind 指令在开发中使用频率非常高，因此， vue 官方为其提供了简写形式（简写为英文的 : ）
<!-- 完整语法 -->
<a v-bind:href="url"> ... </a>
<!-- 缩写 -->
<a :href="url"> ... </a>（3）事件绑定指令
可以使用 v-on 指令 ( 通常缩写为 @ 符号 ) 来监听 DOM 事件，并在触发事件时执行一些 JavaScript 。用
法为 v-on:click="methodName" 或使用快捷方式 @click="methodName"
原生 DOM 对象有 onclick 、 oninput 、 onkeyup 等原生事件，替换为 vue 的事件绑定形式后，分别为：
v-on:click 、 v-on:input 、 v-on:keyup
<div id = "basic-event" ><button @click = "counter += 1" > Add 1 </button><p> The button above has been clicked {{ counter }} times. </p></div>
Vue . createApp ({data () {return {counter : 0}}}). mount ( '#basic-event' )
然而许多事件处理逻辑会更为复杂，所以直接把 JavaScript 代码写在 v-on 指令中是不可行的。因此 v-on 还可以接收一个需要调用的方法名称。
<div id="event-with-method">
<!-- `greet` 是在下面定义的方法名 -->
<button @click="greet">Greet</button>
</div>Vue.createApp({
传递参数
有时也需要在传递参数同时访问原始的 DOM 事件。可以用特殊变量 $event 把它传入方法：
事件修饰符
data() {
return {
name: 'Vue.js'
}
},
methods: {
greet(event) {
// `methods` 内部的 `this` 指向当前活动实例
alert('Hello ' + this.name + '!')
// `event` 是原生 DOM event
if (event) {
alert(event.target.tagName)
}
}
}
}).mount('#event-with-method')（4）双向绑定指令
vue 提供了 v-model 双向数据绑定指令，用来在不操作 DOM 的前提下，快速获取表单的数据。
文本 (Text)
<input v-model="message" placeholder="edit me" />
<p>Message is: {{ message }}</p>复选框 (Checkbox)
单个复选框，绑定到布尔值：
<input type="checkbox" id="checkbox" v-model="checked" />
<label for="checkbox">{{ checked }}</label>（5）条件渲染指令
条件渲染指令用来按需控制 DOM 的显示与隐藏。条件渲染指令有如下两个：
v-ifv-show
v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染。
<h1 v-if="awesome">Vue is awesome!</h1>也可以用 v-else 添加一个 “else 块 ” ：
<h1 v-if="awesome">Vue is awesome!</h1>
<h1 v-else>Oh no 😢</h1>v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。
<div v-if="type === 'A'">
A
</div>
<div v-else-if="type === 'B'">
B
</div>
<div v-else-if="type === 'C'">
C
</div>
<div v-else>
Not A/B/C
</div>v-else-if ，顾名思义，充当 v-if 的“else-if 块”，并且可以连续使用：
<h1 v-show="ok">Hello!</h1>（6）列表渲染指令
我们可以用 v-for 指令基于一个数组来渲染一个列表。 v-for 指令需要使用 item in items 形式的
特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的 别名 。
<ul id = "array-rendering" ><li v-for = "item in items" >{{ item.message }}</li></ul>
Vue . createApp ({data () {return {items : [{ message : 'Foo' }, { message : 'Bar' }]}}}). mount ( '#array-rendering' )
在 v-for 块中，我们可以访问所有父作用域的 property 。 v-for 还支持一个可选的第二个参数，即当
前项的索引。
<ul id = "array-with-index" ><li v-for = "(item, index) in items" >{{ parentMessage }} - {{ index }} - {{ item.message }}</li></ul>
Vue . createApp ({data () {return {parentMessage : 'Parent' ,items : [{ message : 'Foo' }, { message : 'Bar' }]}}}). mount ( '#array-with-index' )
2.数组更新检测
Vue 将被侦听的数组的变更方法进行了包裹，所以它们也将会触发视图更新。这些被包裹过的方法包括：
push()
pop()
shift()
unshift()
splice()
sort()
reverse()