什么是Vue？

Vue是JS框架，常用于Web前端，Vue代码会被编译成JS代码。

.Vue语法/SFC

一个Vue文件通常由几部分组成(这也被称为SFC 语法定义 |vuejs.org)：
+ 模板Template，这是前端HTML语言模板用于渲染
+ 脚本Script：JS脚本，用于程序运行
+ 风格Style:用于控制渲染风格

其它不太重要的标签还有自定义和预脚本，这些作为类似于HTML语言的标签语言</>就是Vue，且是最底层的标签，模板template和脚本标签script不能有多个。

Get Started:

main.js或main.ts

import { createApp, ref } from 'vue'

createApp({
  setup() {
    return {
      count: ref(0)
    }
  }
}).mount('#app')

<div id="app">
  <button @click="count++">
    Count is: {{ count }}
  </button>
</div>

第一部分就是script部分,第二部分就是模板部分。前者创建了一个count从0开始的计数器，并挂载在后者的button 上，
Click->count++
Count++->Count is $count
说明html和js是交互作用的。

Vue 的单文件组件会将一个组件的逻辑 (JavaScript)，模板 (HTML) 和样式 (CSS) 封装在同一个文件里。下面我们将用单文件组件的格式重写上面的计数器示例：

<script setup>
import { ref } from 'vue'
const count = ref(0)
</script>

<template>
  <button @click="count++">Count is: {{ count }}</button>
</template>

<style scoped>
button {
  font-weight: bold;
}
</style>

响应式和组合式api：Vue的两种API风格

一个很像类，有状态（暴露的属性/变量）、方法、钩子（调用时间/方式），另一个很像直接的编程,……hard tosay，自己看吧

Vue 的核心Feature

声明式渲染：Vue 基于标准 HTML 拓展了一套模板语法，使得我们可以声明式地描述最终输出的 HTML 和 JavaScript 状态之间的关系。
响应性：Vue 会自动跟踪 JavaScript 状态并在其发生变化时响应式地更新 DOM。
组件化：渐进开发

使用 Vue 的多种方式/常见：

无需构建步骤，渐进式增强静态的 HTML
单页应用 (SPA)
全栈 / 服务端渲染 (SSR)
Jamstack / 静态站点生成 (SSG)
开发桌面端、移动端、WebGL，甚至是命令行终端中的界面

vue中ES模块是什么意思

Vue中的ES模块指的是使用JavaScript的ECMAScript模块系统来组织和加载代码的方式。

ES模块（ECMAScript Modules）是JavaScript官方的模块标准，它允许开发者通过export和import关键字来导出和导入模块。在Vue.js中，使用ES模块可以更有效地组织和管理组件代码，特别是在大型项目中。ES模块的主要特点包括：

模块化: 可以将代码分割成多个文件，每个文件是一个模块，这样可以更好地组织和维护代码。
封装性: 每个模块都有自己的作用域，模块内部的变量、函数和类不会污染全局作用域。
复用性: 可以在多个地方重复使用同一个模块，只需导入即可。
静态加载: ES模块支持静态类型检查，并且import语句必须放在文件的顶部，不能动态加载。

es6是什么？不是elastic而是js，ECMAScript 6，也被称为ES6，是JavaScript语言的一个重要版本。

ES6在2015年正式发布，它引入了许多新特性，以解决ES5中存在的限制和不足。以下是ES6的一些主要特性：

类（Classes）：ES6中引入了类的概念，使得对象原型的写法更加清晰和面向对象。
模块化（Modules）：ES6支持原生的模块化功能，允许开发者使用import和export关键字来导入和导出模块。
箭头函数（Arrow Functions）：提供了更简洁的函数语法，并且this的值在箭头函数中是固定的。
模板字符串（Template Strings）：允许嵌入表达式的字符串文字，使用反引号（`）包围。

在Vue项目中，通常每个.vue文件就是一个单文件组件（SFC），它包含了模板、脚本和样式三部分。在脚本部分，可以使用ES模块语法来定义组件，并使用export default来导出组件。在其他组件或文件中，可以使用import语句来导入和使用这些组件。

安装：

1.到官网下载node.js二进制文件并安装

2.运行下列代码：

npm install -g cnpm #可选，安装cnpm，防止npm连网太慢
cnpm create vue@latest #项目名不应包含大写，后续选项默认选择关，几乎等同于init
cd <项目名>
cnpm install #安装依赖

推荐的 IDE 配置是 Visual Studio Code + Volar 扩展。
要了解构建工具 Vite 更多背后的细节，请查看 Vite 文档。

运行，并设置端口127.0.0.1:5271，默认不暴露

#开发环境
cnpm run dev 
# 生产环境
cnpm run build

语法学习

当我们修改了Vue文件后，立即就会更新到对应的网页，堪称神奇的自动更新编译！

2.1空Vue文件

一个空网页的代码如下：

<template>
<你的html代码>
</template>

<script >
export default{
  data(){
    return{
      <需要导出的以供上面html使用的变量，形式为“变量:值”的字典>
    }
  }
}
</script>

<style >
</style>

数据绑定，js导出变量绑定到前端，模板中需要用双括号来表示变量，即，脚本中需要msg:’神奇的语法’类似的字典形式来输出变量

数据绑定

<template>
<p>{{ msg }}</p>
</template>

<script >
export default{
  data(){
    return{
      msg:'神奇的语法'
    }
  }
}
</script>

<style >
</style>

组件导入

同时导出数据和组件:

<script >

//1、导入组件
import comp_test from "./components/comp_test.vue";

export default{
  data(){
    return{
      msg:'神奇的语法'+'sad',
      
    }
  },
  //2、script导出组件
  components:{comp_test}
}
</script>

<template>
<p>{{ msg}}</p>
<p>{{\n}}</p>
// 前端使用组件
<comp_test/>
</template>

<style >
</style>

常见问题：导入组件时需要做三步，并且import时不能有中括号，即

//正确
import von from "./components/von.vue";
//不显示
import {von} from "./components/von.vue";

style的使用

// 在div中声明，某个标签使用了风格的class，这里是myclassfont1
<template>
<div class="myclassfont1">{{ msg2}}</div>
</template>

<style >
// .class名{内部设置class的style}
.myclassfont1{
  font-size: 12px;
  color:blueviolet
}
</style>

v-if和else、elif：条件语句

条件语句可以选择性渲染html，这三个关键字都容易理解。v-if用法是v-if=”<语句>”，和v-else搭配组成了if-else语句；还可以和
v-else-if搭配组成if-elif语句，比如

<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>类型不是ABC</div>

以上代码利用type判断实现标签的选择性内容显示

v-show

v-show和V-if基本一致，但开销不一样，暂不深究

v-for 循环语句

script setup：免除export，自动暴露

v-on 事件触发

语法：

v-on:<事件>=“<函数或表达式>”

其中v-on等价于@

<template>
<button v-on:click="count++">{{ count }}这里</button>
<div>{{ count }}这里</div>
</template>

<script>
export default{
    data(){
        return{
            count:0
        }
    }
}
</script>

当为函数（或方法）时，使用前需要导出，即

<template>
<button v-on:click="AddCount">{{ count }}这里</button>
</template>

<script>
export default{
    data(){
        return{
            count:0
        }
    },
    methods:{
        AddCount(){
        this.count++
    }
    }
}
</script>

需要注意的是，使用变量要用this.来指定。这里使用的是及时定义的函数

事件读取和网页事件

将上述函数增加参数，就会自动获取到对应的事件，并且这个事件是
原生元素的“引用”，也就是可以直接去修改

<template>
<button v-on:click="AddCount">{{ count }}这里</button>
<button v-on:click="AddCount2">你好</button>
</template>

<script>
export default{
    data(){
        return{
            count:0,
            count2:0
        }
    },
    methods:{
        AddCount(e){
            this.count++
            console.log(e)
    },
        AddCount2(e){
            this.count2++
            console.log(e.target.innerHTML)
            e.target.innerHTML=this.count2
    }
    }
}
</script>

上述代码点击第二个框后，可以直接改变html标签的写法，非常恐怖~

计算属性

计算属性是响应式导出这一类变量，比如data中变量，集中进行计算的位置，并将它们变成“新变量”，这样做是为了防止在双括号中的计算过于复杂、可读性差

<!-- 计算属性 -->
<template>
<h3>{{ msg.name }}</h3>
<p>{{ msg.content.length>0?"Yes":"No" }}</p>
<p>{{ msg_has_content}}</p>

</template>

<script>
export default{
    data(){
        return{
            msg:{
                name:"这是一个类似于类的东西",
                content:["Python","Java","C"]
            }
        }
    },
    computed:{ //标准格式
        msg_has_content(){ //新变量名
            return this.msg.content.length>0?"Yes":"No" // 记得加this.
        }
    }
}
</script>

侦听器 watch

侦听器能够侦听数据改变，一旦数据改变会触发函数

响应式数据可以被侦听，包括data return的数据、被双括号使用的数据。

侦听器的写法：watch:在data同级，后跟对象

1	括号1 函数名(newVaule,oldValue)括号2 括号2 括号1

这个函数名必须要和你侦听的变量同名。oldValue是改变之前的数据,newValue是改变之后的数据

路由

既可以将导航router写成单独的文件导入，如src/router/index.js, 然后在src/main.js中导入import router from ‘./router’，你看不用写index.js。也可以直接把导航写到main中

自闭合标签

以前没系统学，常常会疑惑，原来，在HTML中，<标签名 /> 和 <标签名> </标签名> 是两种不同的标签语法，它们的区别如下：

自闭合标签（Self-closing tag）：
<标签名 /> 是一种自闭合标签的写法。自闭合标签不需要成对出现，它没有内容，也不会包含其他元素。这种语法用于那些不需要结束标签的元素，例如：
1
<img src="image.jpg" alt="图片描述" />
非自闭合标签：
<标签名> </标签名> 是非自闭合标签的写法。非自闭合标签需要成对出现，它有一个开始标签和一个结束标签，并且可以包含文本内容或其他子元素。这种语法用于需要定义内容范围的元素，例如：
1
这是一个段落。

总结来说，自闭合标签使用/来表示标签的结束，而非自闭合标签需要显式地写出结束标签。自闭合标签通常用于那些不需要内容的空元素，如<img>、 等，而非自闭合标签则用于需要包裹内容的元素，如<div>、等。

Vue-1