vue3.0的学习笔试，持续更新，
笔记，跟着 coderwhy老师的 vue3.0+TS 课程来整理的，有兴趣可以购买一下哦 购买地址
5-12 邂逅Vue
1、认识 vue
一套用于构建用户界面的渐进式框架
渐进式：表示我们可以在项目中一点点来引入和使用Vue，而不一定需要全部使用Vue来开发整个项目
2、 vue3.0 带来了哪些变化？
性能方面
- 使用Proxy进行数据劫持
- 删除了一些不必要的API 如实例上的 $on $off #once ，移除了一些特性 如 filter
- 编译方面的优化，slot编译优化、diff算法优化
新的api
- 由Options API 到 Composition API，
- Options API包括data、props、methods、computed、生命周期等等这些选项
- 存在比较大的问题是多个逻辑可能是在不同的地方，比如created中会使用某一个method来修改data的数据，代码的内聚性非常差
- Composition API可以将 相关联的代码 放到同一处 进行处理，而不需要在多个Options之间寻找
- Hooks函数增加代码的复用性
- 在Vue2.x的时候，我们通常通过mixins在多个组件之间共享逻辑
- 但是有一个很大的缺陷就是 mixins也是由一大堆的Options组成的，并且多个mixins会存在命名冲突的问题
- 在Vue3.x中，我们可以通过Hook函数，来将一部分独立的逻辑抽取出去，并且它们还可以做到是响应式的
3、vue3.x 的引入
1、CDN 引入
<div id="app">
div>
<script src="https://unpkg.com/vue@next">script>
<script>
const app = Vue.createApp({
template: 'Hello world'
})
// 表示挂载到什么地方
app.mount('#app')
script>
2、本地引入
拷贝下来 源代码 然后 自己 新建个 .js 文件
5-14 vu3 基础-模板语法
1、methods 里面的方法 为什么不能写成箭头函数？
写成箭头函数以后，就会找上层的作用域，上层的作用域就是 script 指向的就是 window
vue3.x 中，this不再是指向的 实例，而是一个 proxy
2、vscode 新建代码片段
1、复制要生成的代码片断
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
head>
<body>
<div id="app">div>
<template id="my-app">
<h2>{{message}}h2>
template>
<script src="https://unpkg.com/vue@next">script>
<script>
const App = {
template: '#my-app',
data() {
return {
message: 'Hello World'
}
}
}
Vue.createApp(App).mount('#app')
script>
body>
html>
2、打开https://snippet-generator.app/ ，为了方便，我们要把想要生成的代码片段，放进这里面来，进行一点操作
3、打开 vscode ，选择 文件 => 首选项 => 用户片段 => 新建全局片段文件
注意，新建全局片段文件，是一个 json文件，最外面要保证有一个双大括号，然后把我们在网站上，弄好的代码，拷贝，复制到 片段文件，即可
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-liY0zlVx-1621042767488)(coderwht-vue3.0.assets/coderwhy-vue3.0-网站生成代码片段.jpg)]
4、新建一个 html 文件，输入 vueapp 按 tab 键即可
3、Mustache 双大括号语法
<div id="app">div>
<template id="my-app">
<h2>{{message}} - {{message}}h2>
<h2>{{number * 10}}h2>
<h2>{{ message.split(" ").reverse().join(" ")}}h2>
<h2>{{getReverseMessage()}}h2>
<h2>{{ isShow ? "显示" : "不显示" }}h2>
<button @click="toggle">切换button>
template>
<script src="https://unpkg.com/vue@next">script>
<script>
const App = {
template: '#my-app',
data() {
return {
message: 'Hello World',
number: 100,
isShow: true
}
},
methods: {
getReverseMessage() {
return this.message.split(" ").reverse().join(" ")
},
toggle() {
this.isShow = !this.isShow
}
}
}
Vue.createApp(App).mount('#app')
script>
4、基本指令
4.1 v-once
v-once 用于指定元素 或者 组件 只渲染一次
- 当数据发生变化的时候，元素或者组件以及其所有的子元素，都不会重新渲染
- 该指令可用于 性能优化
<div id="app">div>
<template id="my-app">
<h2>{{message}}h2>
<h2>{{number}}h2>
<div>下面是加了 v-once 的div>
<div v-once>
<h2>{{number}}h2>
<h2>{{message}}h2>
div>
<button @click="handle">+1button>
template>
<script src="https://unpkg.com/vue@next">script>
<script>
const App = {
template: '#my-app',
data() {
return {
message: 'Hello World',
number: 10
}
},
methods: {
handle() {
this.number = this.number + 1
this.message = "我改变了"
}
}
}
Vue.createApp(App).mount('#app')
script>
4.2 v-text 指令
<span v-text="msg">span>
<span>{{msg}}span>
这个指令 ， 我在做项目的时候，没用过
4.3 v-html
如果我们展示的内容 本身 是 html 的，那么 vue 并不会进行 特殊的解析，
如果我们希望解析这个内容，则可以 给他加一个 v-html 指令
<div id="app">div>
<template id="my-app">
<div>{{msg}}div>
<div v-html="msg">div>
template>
<script src="../js/vue.js">script>
<script>
const App = {
template: '#my-app',
data() {
return {
msg: '<span style="color:red; background: blue;">哈哈哈span>'
}
}
}
Vue.createApp(App).mount('#app');
4.4 v-pre
v-pre用于跳过元素和它的子元素的编译过程，显示原始的Mustache标签
<template>
<div v-pre>{{message}}div>
template>
4.5 v-clock
有时候，会加载慢的时候，可能会显示 原始的 mustache 语法，为了美观，我们可以给他加一个 v-clock 这个指令，就是先让他隐藏，编译完成后，再显示出来
4.6 v-bind
可以通过 这个指令 动态的绑定 一些内容
动态的绑定 一个或者多个 属性，也是可以的
<template id="my-app">
<img v-bind:src="imgUrl" alt="">
<a v-bind:href="link">百度一下a>
<img :src="imgUrl" alt="">
<img src="imgUrl" alt="">
template>
4.7 动态绑定 class
对象语法
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Documenttitle>
<style>
.active {
color: red;
}
style>
head>
<body>
<div id="app">div>
<template id="my-app">
<div :class="className">哈哈哈哈div>
<div :class="{'active': isActive}">呵呵呵呵div>
<button @click="toggle">切换button>
<div :class="{active: isActive, title: true}">呵呵呵呵div>
<div class="abc cba" :class="{active: isActive, title: true}">
呵呵呵呵
div>
<div class="abc cba" :class="classObj">呵呵呵呵div>
<div class="abc cba" :class="getClassObj()">呵呵呵呵div>
template>
<script src="../js/vue.js">script>
<script>
const App = {
template: "#my-app",
data() {
return {
className: "why",
isActive: true,
title: "abc",
classObj: {
active: true,
title: true
},
};
},
methods: {
toggle() {
this.isActive = !this.isActive;
},
getClassObj() {
return {
active: true,
title: true
}
}
},
};
Vue.createApp(App).mount("#app");
script>
数组语法
<template id="my-app">
<div :class="['abc', title]">哈哈哈哈div>
<div :class="['abc', title, isActive ? 'active': '']">哈哈哈哈div>
<div :class="['abc', title, {active: isActive}]">哈哈哈哈div>
template>
<script src="../js/vue.js">script>
<script>
const App = {
template: '#my-app',
data() {
return {
message: "Hello World",
title: "cba",
isActive: true
}
}
}
Vue.createApp(App).mount('#app');
script>
4.8 动态绑定 style
对象语法
<template id="my-app">
<div :style="{color: finalColor, 'font-size': '30px'}">哈哈哈哈div>
<div :style="{color: finalColor, fontSize: '30px'}">哈哈哈哈div>
<div :style="{color: finalColor, fontSize: finalFontSize + 'px'}">哈哈哈哈div>
<div :style="finalStyleObj">呵呵呵呵div>
<div :style="getFinalStyleObj()">呵呵呵呵div>
template>
<script src="../js/vue.js">script>
<script>
const App = {
template: '#my-app',
data() {
return {
message: "Hello World",
finalColor: 'red',
finalFontSize: 50,
finalStyleObj: {
'font-size': '50px',
fontWeight: 700,
backgroundColor: 'red'
}
}
},
methods: {
getFinalStyleObj() {
return {
'font-size': '50px',
fontWeight: 700,
backgroundColor: 'red'
}
}
}
}
Vue.createApp(App).mount('#app');
script>
数组语法
<template id="my-app">
<div :style="[style1Obj, style2Obj]">哈哈哈div>
<img :src="" alt="">
<a :href="">a>
<div :class>div>
template>
<script src="../js/vue.js">script>
<script>
const App = {
template: '#my-app',
data() {
return {
message: "Hello World",
style1Obj: {
color: 'red',
fontSize: '30px'
},
style2Obj: {
textDecoration: "underline"
}
}
}
}
Vue.createApp(App).mount('#app');
script>
4.9 动态绑定 属性
在某些情况下，我们的属性名称 也可能是不固定的，那么我们就可以用 :[属性名]=“值” 来定义
<template id="my-app">
<div :[name]="value">哈哈哈div>
template>
<script src="../js/vue.js">script>
<script>
const App = {
template: '#my-app',
data() {
return {
name: "cba",
value: "kobe"
}
}
}
Vue.createApp(App).mount('#app');
script>
4.10 动态绑定一个对象
<template id="my-app">
<div v-bind="info">哈哈哈哈div>
<div :="info">哈哈哈哈div>
template>
<script src="../js/vue.js">script>
<script>
const App = {
template: '#my-app',
data() {
return {
info: {
name: "why",
age: 18,
height: 1.88
}
}
}
}
Vue.createApp(App).mount('#app');
script>
4.11 v-on 绑定事件
v-on:事件名=“事件函数名或者处理程序”
修饰符
- .stop - 调用 event.stopPropagation()。
- .prevent - 调用 event.preventDefault()。
- .capture - 添加事件侦听器时使用 capture 模式。
- .self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
- .{keyAlias} - 仅当事件是从特定键触发时才触发回调。
- .once - 只触发一次回调。
- .left - 只当点击鼠标左键时触发。
- .right - 只当点击鼠标右键时触发。
- .middle - 只当点击鼠标中键时触发。
- .passive - { passive: true } 模式添加侦听器
基本使用
<style>
.area {
width: 200px;
height: 200px;
background: red;
}
style>
head>
<body>
<div id="app">div>
<template id="my-app">
<button v-on:click="btn1Click">按钮1button>
<div class="area" v-on:mousemove="mouseMove">divdiv>
<button @click="btn1Click">按钮1button>
<button @click="counter++">{{counter}}button>
<div class="area" v-on="{click: btn1Click, mousemove: mouseMove}">div>
<div class="area" @="{click: btn1Click, mousemove: mouseMove}">div>
template>
<script src="../js/vue.js">script>
<script>
const App = {
template: '#my-app',
data() {
return {
message: "Hello World",
counter: 100
}
},
methods: {
btn1Click() {
console.log("按钮1发生了点击");
},
mouseMove() {
console.log("鼠标移动");
}
}
}
Vue.createApp(App).mount('#app');
script>
参数传递
<template id="my-app">
<button @click="btn1Click">按钮1button>
<button @click="btn2Click($event, 'coderwhy', 18)">按钮2button>
template>
<script src="../js/vue.js">script>
<script>
const App = {
template: '#my-app',
data() {
return {
message: "Hello World"
}
},
methods: {
btn1Click(event) {
console.log(event);
},
btn2Click(event, name, age) {
console.log(name, age, event);
}
}
}
Vue.createApp(App).mount('#app');
script>
事件修饰符
<template id="my-app">
<div @click="divClick">
<button @click.stop="btnClick">按钮button>
div>
<input type="text" @keyup.enter="enterKeyup">
template>
<script src="../js/vue.js">script>
<script>
const App = {
template: '#my-app',
data() {
return {
message: "Hello World"
}
},
methods: {
divClick() {
console.log("divClick");
},
btnClick() {
console.log('btnClick');
},
enterKeyup(event) {
console.log("keyup", event.target.value);
}
}
}
Vue.createApp(App).mount('#app');
script>