Vue笔记

      **vite  //  vue-cli**

vscode

Tab 自动补全

1.cdn

vant

2.初始化项目

vue init webpack hello-vue

一路no

跳到项目里

安装vue-router

cnpm install vue-router --save-dev

安装element-ui

cnpm i element-ui -S

安装依赖

cnpm install

安装SASS加载器

cnpm install sass-loader node-sass --save-dev

启动测试

cnpm run dev

有一次报错的提示

/cnpm install --save vue-hot-reload-api/

3.vite创建项目

cnpm create vite@latest

安装element-ui

cnpm i element-ui -S

安装依赖

cnpm install

4.vscode插件

安装插件 win11 win10 右击以管理员身份去打开vscode
    Chinese (Simplified) (简体中文) Language Pack for Visual Studio Code
    Auto Rename Tag
    Code Spell Checker 拼写检查
    Image preview
    indent-rainbow
    koroFileHeader
    Turbo Console Log
    Vetur
    Vue Language Features

5.Vue指令

//设置标签内容
<h2 v-text="message"></h2>message中的值直接覆h2中的东西，也可拼接字符串

//设置元素的innerHTML
<p v-html="content"  />  content:"<a href='#'>百度</a>" 可以解析html中内容

//为元素绑定事件
指令v-on可简写为@
绑定的方法定义在 methods属性中
方法中this.message  可以访问到data中的数据，也可对其进行修改
<input type="button" v-on:click="click">
<input type="button" @click="click">见下“常用事件”不要on

//切换元素的显示状态,本质修改display
<img v-show="布尔值，可以写表达式比如age>18" ...> true 显示

//本质操作dom元素
<p v-if="..."></p>
和v-show展现效果有点像，但它直接控制元素存不存在，v-show一直存在，只是被隐藏了，频繁切换的用v-show，反之用这个

//为元素绑定属性
简写为  :
语法v-bind:属性名=表达式

//
<li v-for="item in arr">{{item}}</li>  相当于forecah  (i : arr)
<li v-for="(item,index) in arr">{{index}} {{item}}</li>

//双向绑定表单元素的值
v-model

常用事件

1）点击事件：

• onclick：单击事件
• ondblclick：双击事件

2）焦点事件

• onblur：失去焦点
• onfocus:元素获得焦点。

3）加载事件：

• onload：一张页面或一幅图像完成加载。

4）鼠标事件：

• onmousedown 鼠标按钮被按下。
• onmouseup 鼠标按键被松开。
• onmousemove 鼠标被移动。
• onmouseover 鼠标移到某元素之上。
• onmouseout 鼠标从某元素移开。

5）键盘事件：

onkeydown 某个键盘按键被按下。
onkeyup 某个键盘按键被松开。
onkeypress 某个键盘按键被按下并松开。
6）选择和改变事件

onchange 域的内容被改变。
onselect 文本被选中。
7）表单事件：

onsubmit 确认按钮被点击。
onreset 重置按钮被点击。

安装axios

yarn add axios

△！△！坑坑坑△！△！

后端接收数据要控制格式@RequestBody

上面是@RestController，后端接收数据要控制格式@RequestBody

@RestController
@RequestMapping("/users")
public class UserController {
    @Autowired
    private UserService userService;
   @PostMapping("/sss")
    public Result save(@RequestBody User user){
       userService.saveUser(user);
       return Result.success();
   }

因为前后端分离了所以要加@RestController而不是Controller

新知

6.练习之组合式

1.reactive() 只适用于对象 (包括数组和内置类型，如 Map 和 Set)。而另一个 API ref() 则可以接受任何值类型。ref 会返回一个包裹对象，并在 .value 属性下暴露内部值。

<script setup>
import { reactive, ref } from 'vue'

const counter = reactive({ count: 1,cc:2 })
const message = ref('Hello World!')
</script>

<template>
  <h1>{{ message }}</h1>
  <p>Count is: {{ counter.cc }}</p>
</template>

7.练习之选项式

<script>
export default {
  data() {
    return {
      message: 'Hello World!',
      counter: {
        count: 0
      }
    }
  }
}
</script>

<template>
  <h1>{{ message }}</h1>
  <p>Count is: {{ counter.count }}</p>
</template>

介绍一个新概念：计算属性。我们可以使用 computed 选项声明一个响应式的属性，它的值由其他属性计算而来：

计算属性会自动跟踪其计算中所使用的到的其他响应式状态，并将它们收集为自己的依赖。计算结果会被缓存，并只有在其依赖发生改变时才会被自动更新。

<script>
export default {
computed: {
    filteredTodos() {
      return this.hideCompleted
        ? this.todos.filter((t) => !t.done)
        : this.todos
    }
  }
}
</script>
  相当于处理数据

8.发现新知

<h1>{{ message.split('').reverse().join('') }}</h1>
split()主要是用于对一个字符串进行分割成多个字符串数组。
reverse()反向排序
join() 方法用于把数组中的所有元素放入一个字符串。
============================================================================================================
placeholder="用户名"
placeholder 属性提供可描述输入字段预期值的提示信息(hint)。
============================================================================================================
JavaScript箭头函数
var res = arr.filter((item,index)=>item>30)
其等价形式为：
var res = arr.filter(function(item,index){
                    return item>30
                })
removeTodo(todo) {
      this.todos = this.todos.filter((t) => t !== todo)
    }
filter()过滤器，意思为展示和该项不相同的项，，，若t==todo就是只展示该项
============================================================================================================
动态定义class
<span :class="{ done: D }"/>
done这个名字是否生效取决于后面D的值，为true生效，false无效
相当于<span :class="D : done  ?  ''  "/>

父组件访问子组件

在组件上加上ref

<UserRegister ref="UserRegister"/>
.......
this.$refs.UserRegister.form={}
就能访问到子组件中的form

疑问this.$refs.UserRegister.data().form={}并不能实现效果
猜测获取的东西中直接.form是获取到的是子组件的form，data().form是当前父组件中的form，子组件没有更改

el-dialog标签

对话框中的内容是懒加载的，这意味着在对话框打开之前，默认插槽（个人理解为el-dialog标签内的内容）不会被渲染到DOM上。因此，如果你需要执行一个DOM操作或通过ref访问组件，可在open事件回调中进行。

.△！△！坑坑坑△！△！

后端接收数据要控制格式@RequestBody

上面是@RestController，后端接收数据要控制格式@RequestBody

@RestController
@RequestMapping("/users")
public class UserController {
    @Autowired
    private UserService userService;
   @PostMapping("/sss")
    public Result save(@RequestBody User user){
       userService.saveUser(user);
       return Result.success();
   }

因为前后端分离了所以要加@RestController而不是Controller