vue的使用

一、响应式数据和插值表达式

1.创建出Vue的实例

用const 接收创建出Vue的实例，通过el：‘ 选择器’ 选择我们要绑定的组件，

这里绑定了id为app的div， 后续Vue里的所有代码都是针对这个 div进行修改， 不会影响到其他的 

2.响应式数据和插值表达式

插值表达式旁边也可以写内容例如 ： <P> 666 {{ title }} 5666</p>

通过Vue的实例来获取内部的设置

可以通过Vue的实例来获取data的数据

3.methods 函数属性

函数属性里可以设置各种方法

二、计算属性computed

计算属性: 具有缓存性, 是属性(是对methods函数的性能优化), 当第一次计算出结果后, 把结果给保存起来, 后续在调用, 如果发现 data里的数据没有变化, 说明结果也不会变, 那么就直接使用结果,而不会在次计算 ;

三、侦听器 watch

侦听器针对 响应式数据 的修改 ，而做出操作； 当响应数据发生改变时可以，我们可以做一些事情 ；

当 title的值发生改变， 就会执行 侦听器里的操作

四，页面内容表达

内容指令

1. v-text : 给标签插入固定的值

2.v-html : 给标签插入 html内容

v-html 可以解析 html内容, 就和js的 innerHtml一样 ;

渲染指令

1. v-for: 循环遍历, 创建标签

也可以遍历指定的数据

4. v-if :判断 , 标签是否要创建

当 判断为 true , 就创建 出标签 , 如果 为 false 就销毁标签 ;

5.v-show: 判断, 标签隐藏/显示

当判断为 true ,就显示标签, 如果 为 false,就 隐藏标签元素 ;

属性指令

可以设置标签的各个属性 , 包括title,class ,name ....

1.title :标题属性

鼠标放在 <文本> 时, 就会显示出"标题属性",这个信息

属性绑定

方便把属性的值,放在data里, 用来获取

2. v-bind : 属性绑定 , 简写 : 冒号

设置标签的属性时, 属性的值是无法用 data数据的, 通过 v-bind: 进行属性绑定, 这样就可以用data里的值 ;

可以 简写v-bind: ==> : , 直接使用一个 : 冒号 , 就代表 v-bind

使用功能 冒号 , 代替了 v-bind

事件指令

可以给标签进行操作时,指定发生的事件

1. v-on : 指定事件 , 简写: @

针对并且进行的各种操作, 指定事件;

表单指令

1. v-model 专门用于表单元素,可以实现 双向绑定

单向绑定: 就上面的 使用 {{}} 插值表达式 , 显示到页面的操作, 是由 data数据 ==> 页面 , 页面上的内容是由 data数据驱动的, 当data数据改变, 页面才改变, 而改变页面上的数据, 不影响 data数据 ;

双向绑定 : data数据 ==> 页面 , 页面 ==> data数据 , 数据能改变页面 , 页面改变 也能改变数据 ;

五, 修饰符

简化DOM操作, 使用修饰符,可以使用简单的DOM操作 : 两边空格的去除,鼠标按键的点击处理...

修饰符通过 . 点 的方法使用

1. .trim 两端空格的去处

获取当前元素

创建一个vue3项目

// 1. npm create vue@latest

F:\word\java_yan\yunshu\vuepro>npm create vue@latest
Need to install the following packages:
create-vue@3.16.3
Ok to proceed? (y) y


> npx
> create-vue

T  Vue.js - The Progressive JavaScript Framework
|
*  请输入项目名称：
|  vue-project
—
o  请输入项目名称：
|  vue-demo
|
o  请选择要包含的功能： (↑/↓ 切换，空格选择，a 全选，回车确认)
|  none

正在初始化项目 F:\word\java_yan\yunshu\vuepro\vue-demo...
|
—  项目初始化完成，可执行以下命令：

   cd vue-demo
   npm install
   npm run dev

| 可选：使用以下命令在项目目录中初始化 Git：

   git init && git add -A && git commit -m "initial commit"



added 143 packages, and audited 144 packages in 2m

42 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities


// 2. npm install

F:\word\java_yan\yunshu\vuepro\vue-demo>npm install

up to date, audited 144 packages in 7s

42 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities


//3. npm run dev


F:\word\java_yan\yunshu\vuepro\vue-demo> npm run dev

  VITE v6.2.5  ready in 478 ms
 
  ➜  Local:   http://localhost:5173/       // 打开链接能打开就成功
  ➜  Network: use --host to expose 
  ➜  Vue DevTools: Open http://localhost:5173/__devtools__/ as a separate window
  ➜  Vue DevTools: Press Alt(⌥)+Shift(⇧)+D in App to toggle the Vue DevTools
  ➜  press h + enter to show help

项目目录结构

单文件组件

能过将 模版 , 逻辑 , 样式 封装在单个文件里, 就是我们的vue文件

    模板<template>
-使用html语法，描述整个组件的结构和布局，
-在模板中可以使用yue的模板语法进行绑定数据、处理事件以及定义组件的DOM结构等。
每个 *.vue 文件最多可以包含一个顶层<template>块。
    
    脚本<script>
-这部分包含组件的JavaScript或TypeScript代码。定义了组件的行为逻辑。
-每个".vue 文件最多可以包含一个<script>块。(使用<script setup>的情况除外)
​
     <script setup>
-专为组合式api设计的一种特殊的语法糖，它允许你在一个更简洁、更直观的方式下编写组件逻辑。
-每个".vue文件最多可以包含一个<script setup>。(不包括一般的<script>)
    
    样式<style>
-通常使用CSS或CSS预处理器编写样式。定义了组件的样式和布局，用于控制组件的外观和样式
-每个 *.vue 文件可以包含多个 <style>标签。

api

选项式api

就是上面的那些选项: 响应式数据, 方法, ....

组合式api

<script setup>
import { ref, onMounted } from 'vue'
​
// 响应式状态
const count = ref(0)
​
// 用来修改状态、触发更新的函数
function increment() {
  count.value++
}
​
// 生命周期钩子
onMounted(() => {
  console.log(`The initial count is ${count.value}.`)
})
</script>
​
<template>
  <button @click="increment">Count is: {{ count }}</button>
</template>

响应式数据

vue3 通过 ref 定义响应式数据 或 reactive 定义响应式数据

ref: 可以用来定义基本数据类型, (适合用于 基本数据类型)

reactive: 不能用基本的数据类型 , 主要用来定义对象, (适合用于 对象的操作)

ref

需要 .value 来操作value里面的 属性 , 因为 先根据 定义的属性创建 , 在包一层在外面, 让定义的属性成为对象的value

reactive

不需要用. value 而是直接 修改属性, 因为 reactiv 是直接根据 定义的属性来创建对象

Vue Router 路由

服务器路由

客户端路由

单页面应用

多页面应用:点击一个链接,浏览器就会加载一个全新的页面

单页面应用里,进行了什么操作,浏览器都其实只加载了一个页面,就是主页面 ;

但主页面可以有不同的组件,进行操作时,这些部分或组件可以根据我们的需求动态的改变,而不需要加载页面 : 通过vue +客户端路由 实现

客户端路由: 用户通过客户端访问不同的路径时, 路由的映射函数可以通过事件等方法来管理应用当前的视图 ;

可以在不重新加载页面的情况下,根据用户的请求动态的加载和渲染新的数据和组件(不需要发送请求,而调整页面)

RouterLink组件

生成可点击的链接, 通常用于导航栏切换或页面内的跳转

RouterView组件

根据当前路由状态动态渲染匹配的组件,

目录结构

src⽬录结构

1.assets：⽤于存放项⽬中需要导⼊的静态资源，如图⽚、字体⽂件等。
2.views ⽬录： views ⽬录通常⽤于存放那些与路由直接相关的⻚⾯级别的组件。
3.components ⽬录： components ⽬录通常⽤于存放那些可复⽤的、⼩巧的、功能单⼀的组件。这些组件通常不会被直接渲染到路由对应的⻚⾯上，⽽是作为其他组件（可能是 views ⽬录下的组件）的⼀部分被引⽤和渲染。
4.router：⽤于存放Vue Router的配置⽂件。

src下⽂件命名规则

1.项⽬⼯程名：全部采⽤⼩写⽅式，以短横线分隔，例如：vue-pro。
2.⽬录和⽂件夹：全部采⽤⼩写⽅式，以短横线分隔，有复数结构时使⽤复数形式，例如：views、styles、error-log。
3.js⽂件：全部采⽤⼩写⽅式，优先选择单个单词命名，多个单词命名以短横线分隔
4.components、views下⽂件夹/⽂件命名：⽂件夹命名使⽤⼤写字⺟开头PascalBase⻛格(⼤写字⺟开头的驼峰命名法)