**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