# Day01 官方文档地址：https://cn.vuejs.org/guide/quick-start.html --- ## 创建项目使用 vite 构建工具进行创建项目 > vite：基于原生 ES 模块，不进行打包。在开发服务启动的时候只会进行必要的编译，当浏览器在请求到某个模块的时候才会继续按需编译（利用了原生浏览器对原生 ESM 的支持） >webpack：也是一个构建工具，但是它是在启动开发服务之前就对整个项目进行了打包和编译，因此在项目庞大的时候会非常的耗时
在 cmd 输入 `npm create vue@latest` 进行创建项目，这边的 `latest` 是指最新稳定的一个版本，也可以更换进行指定版本号： `npm create vue@3.12.0` 在构建项目完成之后，输入 `npm install` 进行项目依赖的下载在项目的 `package.json` 文件中查看运行项目的短命令是什么
虽然说 `index.html` 文件才是入口文件，但是这个入口文件中引入了 `main.ts` 文件，所以直接解读 `main.ts` 文件 ``` ts // 引入了 css 样式 import './assets/main.css' // 从 vue 包中导入 createApp 函数，用来创建应用实例的方法 import { createApp } from 'vue' // 导入根组件 App.vue import App from './App.vue' /* * 使用 createApp 函数创建了根组件的实例，并且挂载到 id 为 app 的 DOM 元素上 * 就好像你在一个编号为 app 的地基上搭建了一个叫做 App 的房子框架出来 * */ createApp(App).mount('#app') ``` 在 `mian.ts` 文件中创建了 `App.vue` 组件的实例，所以重写这个组件，让页面的内容被我指定 ``` html ``` --- ## 模板指令如果想要==控制 HTML 元素的属性==，可以使用 v-bind 它有一个简写形式 `:` ``` html ``` 如果想要通过条件==显示或者隐藏==DOM 元素，可以使用 `v-if\v-else-if\v-else` 或者 `v-show` 通过创建、销毁的形式 ``` HTML ``` 通过 display 进行控制 ``` html ``` ==遍历数组或者对象中的数据==，通过 `v-for` ``` html ``` 想要==双向数据绑定==，比如说表单输入的时候数据也会发生变化，使用 v-model 如果是在`

Hello World

v-bind：绑定类和属性

v-for：列表渲染

水果列表

用户信息

v-model：表单双向绑定

v-on：事件绑定

点击事件

鼠标事件

键盘事件

{{ sum }}

{{ person.name }}

{{ person.age }}

{{ sum }}

{{ person.name }}

{{ person.age }}

{{ person.name }}

{{ person.age }}

Hello world

{{ person.id }}---{{ person.name }}---{{ person.age }}

{{ person.id }}---{{ person.name }}---{{ person.age }}

sum:{{ sum }}

我是News

我是News

我是News

我是News

我是News

我是News

我是News

{{ countStore.sum }}

{{ countStore.sum }}

{{ sum }}

{{ bigSum }}

{{ upperName }}

{{ sum }}

{{ bigSum }}

{{ upperName }}

{{ toy }}

我是父组件

{{ a }}

{{ b }}

{{ c }}

{{ d }}

孙子给的玩具{{ toy }}

我是子组件

我是孙组件

c1的玩具：{{ toy }}

c2的电脑:{{ toy }}

私房钱：{{ money }}

c1的玩具：{{ toy }}

养老钱:{{ money }}

有一辆{{ car.name }}，价值：{{ car.price }}

{{title}}

我是a

{{params.title}}

{{params.title}}

{{params.title}}

{{ item.name }}

{{person.name}}

{{sum}}

{{person.name}}

{{person.info.age}}

{{ msg }}

{{ msg }}