vue新手教程1

新手向的vue教程
0 前言
本文主要是对vue官网的文档进行解读，方便新手入门，高手勿喷，我个人认为官网的文档对于前端新手极其不友好，很多人学习vue之前并没有学习过相关的前端知识，但是又很急切的想写项目，跟着我，就能在最短时间写出一个东西，在之后写得更多了再去回头看官方文档或许对你的帮助会比之间看帮助大得多。应该不是只有我一个人htmlcss都没学的明白就想靠着vue写项目的吧哈哈

首先应该尝试启动一个vue项目，很简单，安装了nodejs之后只需要按照官网的教程就可以完成了

1 应用实例
在/src/main.js中会看到这些内容
import { createApp } from 'vue'
const app = createApp(App)
这样一个vue项目就算是开始了，其中App是一个根组件，可以说是一个必要的东西，就像刚刚学c语言的时候提到过include，main之类的。暂时不需要知道是什么，就按照这样写就好了，这样就算是启动了一个应用实例了

2 根组件
实际上的应用结构可能像是
App (root component)
├─ TodoList
│  └─ TodoItem
│     ├─ TodoDeleteButton
│     └─ TodoEditButton
└─ TodoFooter
   ├─ TodoClearButton
   └─ TodoStatistics
App就是这棵树的根，学过java的应该能很好理解，这里很类似于 继承 ，这样可以为程序员节省很多代码量。很多组件构成了一个完整的应用。我并不推荐新手按照这种树的结构去写，因为项目都不大一个页面写一个.vue就行了，当功能要求更高再去按照这种树去写可能更好。

3 挂载
main.js中有这样一段app.mount('#app')
这其实就是挂载，这里app是刚刚创建好的应用实例，学过css的可能会猜测#app的意思，就是id为app，其实大概也就是这样，我们能在index.html中看到body里这样一段
    <div id="app"></div>
这其实就是挂载
将我们的vue代码转换为静态的html，css，js。有点类似于java的转化为字节码，有兴趣的可以看看生成的质量怎么样。

4 开始
其实已经可以开始写代码了，但是文档中并没有介绍如何开始，首先先观察index.js中的内容，可以很明显的发现是怎么回事，我们只需要按照它给出的格式照葫芦画瓢就能写出自己的页面。但是是怎么能一个应用完成多个路由的。！！！这里就有一个不起眼的东西:App.vue的最后一行中有一个  <RouterView />，这里可以试试把这个删除了会发生什么，所有的页面设置都失效了，任何路由都只看得到App.vue的内容了，也就是说，路由功能实际上就是index.js配合  <RouterView />实现的。
所以现在开始，按照格式可以新建一个文件夹比如pages，并在里面开始编写自己的页面，并且在默认路由也就是"/"访问。

5 配置
一般使用vite.config.js or vue.config.js 但是对于新手来说这是没有必要的，当水平逐渐提高自然就有需要用到这些的时候。我推荐使用传统的config.js的模式，具体来说就是创建一个文件命名为config.js(或者你喜欢的都行)
const config={
    server:"http://localhost:8080"
}
export default config;
export之后调用很简单
<script setup>
import config from '../config.js'
const server= config.server
</script>
这样就能使用了

5.9 说明
!!!! 官方文档并没有解释一个.vue文件的结构，我来解释一下，template就是模板，语法基本类似html，style就是css，script就是放置脚本的地方，函数和变量等等都可以放在这里。另外值得注意的是<script>和<script setup>有比较大的不同，我推荐用setup这个不会有各种大括号，一眼看过去更舒服，当然你写过vue2就用script就好了，不过最好是用官方也推荐的setup，我讲的也都是setup格式的vue3

现在你大概知道一个vue项目是怎么回事了，删除你觉得不重要的.vue文件，让屏幕上是空的。

6 “Mustache”语法 (即双大括号)
变量的使用
<p>Using text interpolation: {{ rawHtml }}</p>
当rawHtml的值改变之后，就会在文本中直接改变。
在这个里面双大括号就是变量，在原始的js中，rawHtml的值的改变是依靠dom，这也是vue的底层实现
另外有一个奇技淫巧，原始html，没什么用，感兴趣可以去官网看一看，可以让变量作为html去解析。普通的双括号内的都是作为纯文本展示，有时候爬虫爬到的东西是一段html，而你需要去展示可以用到这个技巧。新手几乎没有使用场景
另外，在{{}}里面实际上是可以写入简单的js语句的，比如可以在里面做一些简单的运算，但也仅限于此了，作用不大

7 v-bind
这里一直到8都可以看一看，不用实践，可以看一遍之后看完9回头来再试试
v-bind:id 可以简写为:id,这是一个绑定语句，用来绑定比如id
  <div :id="color">颜色</div>
像这种情况下，载style中就可以去定义好不同的颜色，比如
<style>
#blue{
  color:blue
}
</style>
这样color变量为bule的时候就会被赋予id为blue，并且会被渲染上蓝色
也就是说：id能动态的修改元素的id，来完成很多炫酷的操作。这里的底层也是DOM操作，但是很明显跟优雅简单了。
我们可以利用这个完成很多很多炫酷的动画操作，这里大有可为
并且对于比如输入框，按钮，有一个css属性disable，我们可以设置
  <button :disabled=isTeacher>是老师</button>
  <button :disabled=!isTeacher>不是老师</button>
这样如果isTeacher的值为false的时候“是老师”就不能按下去，我们可以实现，比如没有注册的用户不能填写到文本框信息，按下按钮。
:href 可以用来改变按下之后跳转到的链接，比如不同的用户去不同的链接
总之所有的attribute都可以使用v-bind来使用，大大增加了灵活性

8 其他指令
除了v-bind 之外，还有很多有用的指令
v-if,v-on
<p v-if="seen">Now you see me</p>
这里，v-if 指令会基于表达式 seen 的值的真假来移除/插入该 <p> 元素。
v-on能监听时间，比如按钮的click等等
v-model 之后会讲清楚

9 实时响应
ref 要想使用能在比如双括号内实时更新的功能，就要用到ref
这里导入ref
import {ref} from 'vue'
记得要带上{ref} not ref
这两个是不同的 {ref}的解释: 这种语法使用了 ES6 的解构导入（Destructuring Import）语法。
使用的时候count=ref(0),这个时候count就是一个对象，count.value就是0，在<template>使用的时候可以直接使用count，修改值在script中使用count.value
换句话说，ref可以使count.value具有响应性
ref()的这个参数也可以是一个对象，也就是说count.value也可以是一个对象（冷知识）

reactive 这个可以使对象具有响应性
import { reactive } from 'vue'
const state = reactive({ count: 0 })
这样，reactive接受到了一个对象，并把state具有了响应性，我修改state.count就会实时响应在屏幕上
比如<button @click="state.count++">
  {{ state.count }}
</button>
每一次按下就会让按钮上的值+1

两者的对比
这两个都能实现实时响应，但是无脑选择ref就好了，看起来reactive好像更简单实用，但是js的世界里这种好东西代价都很大，具体的解释可以看官方文档，小白直接使用ref，肯定不会出错

10 计算属性
有些时候，有些变量的值通常是计算得来的，并且这个计算并不是简单的+1，求和，并且还要求随着参数的变化而变化，这个时候就可以使用计算属性。
这个可以参考官网的例子，因为实际上我比较倾向于给后端服务器来计算复杂的内容，golang，java 的效率比js高太多了，搞得用户一卡一卡的很不好。

奇技淫巧赏析
<div :class="{ active: isActive }"></div>
这个的意思是，如果isActive是true，那这个div的class就是active。

这里是第一个版本，等我睡一觉，醒了再给出第二个版本吧