介绍
Vue.js只负责UI的构建，而不会做其他事情，比如路由，发出HTTP请求等。这些额外的功能在Vue生态环境中由其他组件完成，比如：
- Vuex：状态管理
- Vue router： 路由
- Vuetify：UI组件
Vue可以用来创建可以复用的组件（Widgets），也可以用来创建SPA，所有的路由在客户端完成，而不是在服务器端。
Vue 3的新特性：
- 支持TypeScript。
- 允许多个根组件：通过这种方式可以减少一些不必要的HTML代码。
- Composition API: 提高了代码的可重用性，可读性，及代码组织。通过使用setup()函数来实现。
- Suspense组件：通过这种方式，可以更好的使用异步组件，也可以提供一个fall-back组件，比如一个spinner。
- Teleport组件：可以在DOM的不同位置来渲染一个组件。可以用于一些特殊场景，比如：模式对话框中。
- 性能优化
- 对reactivity的改进
- 在自定义组件中的多个v-model
awesome-vue这个项目列举了很多和Vue相关的信息：https://github.com/vuejs/awesome-vue
推荐安装Chrome插件：Vue.js devtools
Vue的优势
Vue的学习/使用门槛较低
- 只需要了解基本的HTML/CSS/JS
- 在页面中可以添加一个script标签后就开始使用Vue.js
- 好用的Vue Devtools和命令行工具
- 基于组件的架构：可以使用Vue创建一个可复用的Widget，然后在页面中重复使用。
- 声明式语法：开发者只需要声明想要做什么，Vue会负责维护复杂的UI
Vue的适用面非常广
- 可以使用工具从开始创建一个应用
- 也可以在现有项目中引入Vue，逐步引入Vue
Vue的超强性能
- 在运行时，gzipped后的库只有20K左右大小。
- 通过虚拟DOM大幅提升性能。
环境设置
VS Code插件
- Live Server：实时更新浏览器中的页面
- Vetur：协助Vue代码编写
- Vue 3 Snippets: Vue代码片段
关于代码风格：在Vue中不使用分号，因此很多开发人员也选择和Vue保持一致，不使用分号。当然，这要看个人喜好。
在线环境
如果不想在本地安装/配置Vue，可以使用stackblitz：
https://stackblitz.com/edit/vitejs-vite-vydt79?file=index.html&terminal=dev
创建SPA
通过这种方式开发SPA的优势：
- 使用更新的JS/TS语言特性
- 有一个即时开发服务器
- 针对生产环境优化代码
安装Vue CLI
npm i -g @vue/cli
vue -V生成项目：
vue create vue-demo可以看到任何一个Vue组件(.vue为扩展名的文件)都由三部分组成：
- tempalte: 这部分是必须提供的。
- script：JS代码，可选
- style：CSS样式，可选
Vue组件叫做Single File Component (SFC)。
这样就可以在script中定义属性，方法，组件等等，然后在template中访问他们。
<template>
<h1>{{ title }}</h1>
</template>
<script>
export default {
name: "App",
data() {
return {
title: "Welcome to my site",
};
},
};
</script>使用Vite
Vite是新一代的前端构建工具（相对于webpack），其优点包括：
- 在开发模式下，无需打包操作，可快速冷启动
- 超级快速的热加载
- 按需编译
传统的构建过程(比如：webpack)：先进行打包，再响应请求
Vite的工作模式：先响应请求，再按需加载：
npm init vite-app <project-name>
cd <project-name>
npm install
npm run dev通过script引入Vue并创建一个简单APP
这种方式适合在现有Web项目中的部分页面中使用Vue。
首先在HTML中引入CDN：
<script src="https://unpkg.com/[email protected]"></script>或者使用最新的vue版本：
<script src="https://unpkg.com/vue@next"></script>然后在body中需要引入Vue代码，并同时定义Vue控制的一个根节点：
<body>
<div id="app">
ID: {{ id }}<br/>
Name: {{ name }}<br/>
Score: {{ score }}
</div>
<script src="./main.js"></script>
</body>对应的Vue代码在main.js中，在这里定义一个data函数，函数返回的JSON将能在HTML代码中通过变量方式访问，比如后面的, 等。
const app = Vue.createApp({
data() {
return {
id: '9901',
name: 'Lucas',
score: '80'
}
}
})
app.mount('#app')Vue中的目录组织
- src/components
- src/assets
- public
- node_modules
数据/属性绑定
由于任何放于href属性中的值都会被当作字符串处理，因此无法获取动态数据。如果想要解决这个问题，需要使用v-bind:属性名。
比如：想要使用在data中定义的your_url属性：
data() {
return {
yourUrl: 'https://www.lcoding.club'
}
},那么在HTML中就可以这样：
<a v-bind:href="yourUrl">go</a>但一般情况下，我们会使用其简写形式：
<a :href="yourUrl">go</a>应用动态类
根据student.registered属性值来决定是否应用’tick-block’这个类：
<li v-for="student in students" :class="{ tick-block: student.registered }">template ref
在template中声明一个元素时，可以添加ref属性：
<input type="text" ref="name">
<button @click="handleClick">Click me</button>之后就可以通过this.$refs来访问这些元素：
export default {
name: 'App',
methods: {
handleClick() {
console.log(this.$refs.name);
this.$refs.name.classList.add('your_css_class');
this.$refs.name.focus();
}
}
}
