vue学习
箭头函数
function() => {}js地位
JavaScript代码能够间接嵌在网页的任何中央，不过通常咱们都把JavaScript代码放到<head>中；
能够在同一个页面中引入多个.js文件，还能够在页面中屡次编写<script>js代码... </script>，浏览器依照程序顺次执行。
因为浏览器的平安限度，以file://结尾的地址无奈执行如联网等JavaScript代码，最终，你还是须要架设一个Web服务器，而后以http://结尾的地址来失常执行所有JavaScript代码。
js分号
JavaScript并不强制要求在每个语句的结尾加;
数字判断
惟一能判断NaN的办法是通过isNaN()函数
要特地留神相等运算符==。JavaScript在设计时，有两种比拟运算符：
第一种是==比拟，它会主动转换数据类型再比拟，很多时候，会失去十分诡异的后果；
第二种是===比拟，它不会主动转换数据类型，如果数据类型不统一，返回false，如果统一，再比拟。
这不是JavaScript的设计缺点。浮点数在运算过程中会产生误差，因为计算机无法准确示意有限循环小数。要比拟两个浮点数是否相等，只能计算它们之差的绝对值，看是否小于某个阈值：
Math.abs(1 / 3 - (1 - 2 / 3)) < 0.0000001; // true动静语言与动态语言
变量自身类型不固定的语言称之为动静语言，与之对应的是动态语言。
动静参数
<a v-on:[eventName]="doSomething"> ... </a>当eventName的值为"focus"时，v-on:[eventName]将等价于v-on:focus。
v-bind
v-bind:属性，单向绑定？
v-on
事件监听，v-on:click=""，简写@click=""
2.6.0新增动静参数，能够依据条件响应不同的事件
须要留神的是，动静表达式中更不要有引号和空格，因为对于html的attribute名来说这些符号有效，同时浏览器会将attribute名转为小写，所以也不要有大写字符
<!-- 变量模式: --><template> <input @[type?up:down]="event1" id="dynamicParam" name="dynamicParam" type="text"></template><script> export default{ data(){ return { type:false, up:'keyup', down:'keydown' } } }</script><!-- 计算属性模式： --><template> <div class="dynamicParamter"> <label for="dynamicParam">动静参数</label> <input @[type]="event1" id="dynamicParam" name="dynamicParam" type="text"> <button @click="type1=true">按键</button> <button @click="type1=false">键盘抬起</button> </div></template><script> export default{ data(){ return { href:'href', url:'', type1:null, } }, methods:{ event1(){ console.log("触发"+(this.type)+'事件') } }, computed:{ type(){ if(this.type1){ return 'keyup' }else{ return 'keydown' } } } }</script>防抖与节流
有些函数如mousemove触发的函数会在短时间内间断调用屡次，如果要使其在一段事件内只执行一次函数，就须要防抖与节流.
防抖：每隔一段事件才触发一次
节流：间断触发后，每隔一段时间才解决一次
//防抖function debounce(fn, wait) { let timeout = null return function() { if(timeout !== null) clearTimeout(timeout) timeout = setTimeout(fn, wait); }}function handle() { console.log(Math.random())}window.addEventListener('scroll', debounce(handle, 1000))计算属性
一般来说，模板要求简略的、申明性的，如<span>{{label}}</span>，然而有时会过于简单如：
<span>{{ author.books.length > 0 ? 'Yes' : 'No' }}</span>尽管代码能够工作，然而过于简单，举荐应用计算属性来申明
<span>{{ publishedBooksMessage }}</span>computed: { // 计算属性的 getter publishedBooksMessage() { // `this` points to the vm instance return this.author.books.length > 0 ? 'Yes' : 'No' }}计算属性与办法比拟：计算属性在响应式依赖扭转时才会从新求值，而函数在每次调用时都会从新执行
<span>{{ countBooks1() }}</span><span>{{ countBools2 }}</span>methods:{ countBooks1() { return books.length }},computed:{ countBooks2() { return books.length }}计算属性能够设置setter和getter
computed: { fullName: { // getter get() { return this.firstName + ' ' + this.lastName }, // setter set(newValue) { const names = newValue.split(' ') this.firstName = names[0] this.lastName = names[names.length - 1] } }}侦听器watch
能够在响应式数据变动的时候执行函数，相比于计算属性，watch能够执行异步操作如拜访api，然而开销比计算属性大
watch: { // whenever question changes, this function will run question(newQuestion, oldQuestion) { if (newQuestion.indexOf('?') > -1) { this.getAnswer() } }}truthiness真值
在js中，除了false、0、""、null、undefined和NaN之外都为真值。
if (true)if ({})if ([])if (42)if ("foo")if (new Date())if (-42)if (3.14)if (-3.14)if (Infinity)if (-Infinity):class
:class="{ active: isActive }"class为isActive值，当isActive为nul时，没有class。
此外，:class能够与class属性共存，:class内也能够有多个值，或者应用数组来提供class
<div :class="[activeClass, errorClass]"></div>data() { return { activeClass: 'active', errorClass: 'text-danger' }}:style语法
:style的对象语法非常直观——看着十分像CSS，但其实是一个JavaScript对象。CSS property名能够用驼峰式(camelCase)或短横线分隔(kebab-case，记得用引号括起来)来命名
条件渲染
条件渲染有两种：v-if和v-show。v-if只有在条件为真时才渲染条件快，能够和v-else-if和v-else配合应用。v-show总是会被渲染，虚实值变动体现为css的变动
v-for
能够来对应数组，也能够对应对象。
对应数组时，两个参数顺次别离示意值和索引；
对应对象时，三个参数顺次别离示意值、键和索引。
<ul id="array-with-index"> <li v-for="(item, index) in items"> {{ parentMessage }} - {{ index }} - {{ item.message }} </li></ul><li v-for="(value, name, index) in myObject"> {{ index }}. {{ name }}: {{ value }}</li>当v-for对应的数据中的数据项扭转了程序，vue不会挪动DOM元素来匹配数据，而是应用“就地更新”的策略，如果想要对应的DOM元素扭转地位，须要增加:key属性
数组更新检测
数组变更
以下函数能够触发视图更新
push()pop()shift()unshift()splice()sort()reverse()数组替换
以下函数能够保留原来数组，且返回新的数组
filter()concat()slice()
显示过滤、排序数组
能够在v-for中应用计算属性或者办法
在组件上应用v-for
因为组件本人独立的作用域，所以在定义组件的时候要应用props来传递参数。
<div id="todo-list-example"> <form v-on:submit.prevent="addNewTodo"> <label for="new-todo">Add a todo</label> <input v-model="newTodoText" id="new-todo" placeholder="E.g. Feed the cat" /> <button>Add</button> </form> <ul> <todo-item v-for="(todo, index) in todos" :key="todo.id" :title="todo.title" @remove="todos.splice(index, 1)" ></todo-item> </ul></div>const app = Vue.createApp({ data() { return { newTodoText: '', todos: [ { id: 1, title: 'Do the dishes' }, { id: 2, title: 'Take out the trash' }, { id: 3, title: 'Mow the lawn' } ], nextTodoId: 4 } }, methods: { addNewTodo() { this.todos.push({ id: this.nextTodoId++, title: this.newTodoText }) this.newTodoText = '' } }})app.component('todo-item', { template: ` <li> {{ title }} <button @click="$emit('remove')">Remove</button> </li> `, props: ['title']})app.mount('#todo-list-example')事件处理
若在事件处理中要拜访原始的DOM事件，能够用非凡变量$event传入办法
<button @click="warn('Test', $event)">Submit</button>warn(message, event) { if (event) { event.preventDefault() }}一个事件能够有多个办法解决，办法间应用逗号分隔
<button @click="one($event), two($event)">event.preventDefault() 与 event.stopPropagation()
event.preventDefault()阻止事件的默认动作发送，比方点击勾选框不能切换勾选状态、在input框输出非规定内的字符就无奈输出等等。
event.stopPropagation()仍会执行默认动作，然而执行完后事件不再被分派到其余节点。
js冒泡与捕捉
首先咱们须要造成监听器的思维。在不应用任何框架的状况下，咱们在js中通过addEventListener办法给Dom增加事件监听。这个办法直译就是增加事件监听器。咱们对Dom的操作作为事件会从最里面的先人Dom逐渐传递到指标Dom（捕捉过程），而后再从指标的Dom原路传出去（冒泡过程）。通常咱们只监听冒泡过程。在vue中，当咱们增加了事件修饰符capture后，才会变成捕捉监听器。
所以vue中的.stop修饰符的进行流传就容易了解了，一般来说在冒泡监听时，是有内层的子DOM开始到外层的先人DOM，设置了.stop后，在本DOM处理事件后，事件便不再冒泡。
而.self能够了解为跳过冒泡事件和捕捉事件，只有间接作用在该元素上的事件才能够执行。
事件修饰符
.stop执行事件后进行流传.prevent不执行默认动作，相当于执行event.preventDefault().capture由冒泡监听改为捕捉监听.self跳过冒泡事件和捕捉事件，只有间接作用在该元素上的事件才能够执行.once只执行一次.passive不会执行event.preventDefault()
按键修饰符
应用@监听键盘事件
<input @keyup.enter="submit" />.enter.tab.delete(捕捉“删除”和“退格”键).esc.space.up.down.left.right
润饰键
润饰键与惯例按键不同，只有在按住润饰键的状况下开释其它按键，能力触发事件。而单单开释润饰键也不会触发事件。
<!-- Ctrl + Click --><div @click.ctrl="doSomething">Do something</div>键盘润饰键
.ctrl.alt.shift.meta
鼠标润饰键
.left.right.middle
.exact 修饰符
.exact 修饰符容许你管制由准确的零碎修饰符组合触发的事件。
<!-- 即便 Alt 或 Shift 被一起按下时也会触发 --><button @click.ctrl="onClick">A</button><!-- 有且只有 Ctrl 被按下的时候才触发 --><button @click.ctrl.exact="onCtrlClick">A</button><!-- 没有任何零碎修饰符被按下的时候才触发 --><button @click.exact="onClick">A</button>v-model
对于单选按钮，复选框及抉择框的选项，v-model 绑定的值通常是动态字符串 (对于复选框也能够是布尔值)v-model有三种修饰符
.lazy在“change”时而非“input”时更新.number将用户的输出值转为数值类型，如果这个值无奈被 parseFloat() 解析，则会返回原始的值.trim主动过滤用户输出的首尾空白字符
组件根底
因为组件是可复用的组件实例，所以它们与new Vue接管雷同的选项，例如data、computed、watch、methods以及生命周期钩子等。通过component能够进行全局注册。
// 定义一个名为 button-counter 的新全局组件app.component('button-counter', { data() { return { count: 0 } }, template: ` <button @click="count++"> You clicked me {{ count }} times. </button>`})prop
通过prop定义属性并向子组件传递数据
const app = Vue.createApp({})app.component('blog-post', { props: ['title'], template: `<h4>{{ title }}</h4>`})app.mount('#blog-post-demo')监听子组件事件
通过应用$emit来传入内部的事件名称，也能够将外部参数传出。
<div id="blog-posts-events-demo"> <div v-bind:style="{ fontSize: postFontSize + 'em' }"> <blog-post v-for="post in posts" :key="post.id" :title="title" @enlarge-text="postFontSize += $event"></blog-post> </div></div>app.component('blog-post', { props: ['title'], template: ` <div class="blog-post"> <h4>{{ title }}</h4> <button @click="$emit('enlarge-text', 0.1)"> Enlarge text </button> </div> `})实现组件的v-model双向绑定
为了在组件中能够应用v-model，组件须要向外暴露出一个承受的prop，并且向内规定该数据的getter和setter。getter、setter能够通过计算属性实现。
<custom-input v-model="searchText"></custom-input>app.component('custom-input', { props: ['modelValue'], template: ` <input v-model="value"> `, computed: { value: { get() { return this.modelValue }, set(value) { this.$emit('update:modelValue', value) } } }})简略插槽
组件中在须要插入的地位应用<slot>标签，在应用组件时间接用组件名标签包裹。
<alert-box> Something bad happened.</alert-box>app.component('alert-box', { template: ` <div class="demo-alert-box"> <strong>Error!</strong> <slot></slot> </div> `})动静加载组件
应用属性:is能够地将简略组件载入到该地位。
<script src="https://unpkg.com/vue@next"></script><div id="dynamic-component-demo" class="demo"> <button v-for="tab in tabs" v-bind:key="tab" v-bind:class="['tab-button', { active: currentTab === tab }]" v-on:click="currentTab = tab" > {{ tab.name }} </button> <component v-bind:is="currentTab.component" ></component></div>const tabs = [ { name: 'Home', component: { template: `<div class="demo-tab">Home component</div>` } }, { name: 'Posts', component: { template: `<div class="demo-tab">Posts component</div>` } }, { name: 'Archive', component: { template: `<div class="demo-tab">Archive component</div>` } }]const app = Vue.createApp({ data() { return { tabs, currentTab: tabs[0] } }, computed: { currentTabComponent() { return 'tab-' + this.currentTab.toLowerCase() } }})app.component('tab-home', { template: `<div class="demo-tab">Home component</div>`})app.component('tab-posts', { template: `<div class="demo-tab">Posts component</div>`})app.component('tab-archive', { template: `<div class="demo-tab">Archive component</div>`})app.mount('#dynamic-component-demo')非凡DOM解析注意事项
形如<table>、<select>、<ul>等等这些标签对于哪些子标签能够呈现在其外部是由严格规定的（比方<tr>能够呈现在<table>中）。而有些标签如<li>、<tr>和<option>等只能呈现在特定的元素外部。如果在这些特定标签外部应用自定义的组件，可能会导致出错。此时能够应用v-is属性来帮忙解析组件。
<!-- 谬误 --><table> <blog-post-row></blog-post-row></table><!-- 正确 --><table> <tr v-is="'blog-post-row'"></tr></table>深刻组件
组件命名
倡议应用kebab-case (短横线分隔命名)
部分注册
部分注册须要援用
import ComponentA from './ComponentA.vue'export default { components: { ComponentA } // ...}prop类型
prop能够设置类型，在设置谬误时会在控制台提醒用户。
props: { title: String, likes: Number, isPublished: Boolean, commentIds: Array, author: Object, callback: Function, contactsPromise: Promise // 或任何其余构造函数}动静传入Prop
在传入值时，由两种形式：
<!-- 动态赋值 --><blog-post title="My journey with Vue"></blog-post><!-- 动静赋予一个变量的值 --><blog-post :title="post.title"></blog-post>动态赋值vue会视为一个字符串，而v-bind或缩写:通知vue这是一个js表达式。
特地地，当一个对象的所有属性都须要传入时，能够应用不带参数的v-bind。
post: { id: 1, title: 'My Journey with Vue'}<blog-post v-bind="post"></blog-post><!-- 等价于 --><blog-post v-bind:id="post.id" v-bind:title="post.title"></blog-post>单向数据流
咱们曾经晓得，prop中定义内部传入的数据。如果咱们心愿这些数据成为本地数据，能够供子组件应用，并且在数据更新时，子组件也会更新，与此同时反过来不行（会避免从子组件意外变更父级组件的状态，从而导致你的利用的数据流向难以了解）的话，能够将定义在prop中的属性定义为一个data property或者计算属性。
// 定义为dataprops: ['initialCounter'],data() { return { counter: this.initialCounter }}// 定义为计算属性props: ['size'],computed: { normalizedSize: function () { return this.size.trim().toLowerCase() }}prop数据验证
能够定义数据类型、指定默认值和自定义验证规定。
app.component('my-component', { props: { // 根底的类型查看 (`null` 和 `undefined` 会通过任何类型验证) propA: Number, // 多个可能的类型 propB: [String, Number], // 必填的字符串 propC: { type: String, required: true }, // 带有默认值的数字 propD: { type: Number, default: 100 }, // 带有默认值的对象 propE: { type: Object, // 对象或数组默认值必须从一个工厂函数获取 default: function() { return { message: 'hello' } } }, // 自定义验证函数 propF: { validator: function(value) { // 这个值必须匹配下列字符串中的一个 return ['success', 'warning', 'danger'].indexOf(value) !== -1 } }, // 具备默认值的函数 propG: { type: Function, // 与对象或数组默认值不同，这不是一个工厂函数 —— 这是一个用作默认值的函数 default: function() { return 'Default function' } } }})非Prop的Attribute继承
非Prop的Attribute，指的是不定义在prop中的属性，如class、id、style等等。在内部应用组件时并应用这些属性时，默认会继承给组件外部的根元素；如果根元素有多个或者想要继承到非根元素，能够应用v-bind="$attrs"（$attrs包含组件props和emits property中未蕴含的所有属性 (例如class、style、v-on监听器等)。）来选定一个DOM元素继承。
事件监听器的继承也同理，会默认继承到组件外部根元素。
<!-- 具备非prop attribute的Date-picker组件--><date-picker data-status="activated"></date-picker><!-- 渲染 date-picker 组件 --><div class="date-picker" data-status="activated"> <input type="datetime" /></div>须要留神的是，如果要使非根节点继承，须要在组件的选项中设置inheritAttrs: false。
app.component('date-picker', { inheritAttrs: false, template: ` <div class="date-picker"> <input type="datetime" v-bind="$attrs" /> </div> `})<!-- Date-picker 组件 应用非 prop attribute --><date-picker data-status="activated"></date-picker><!-- 渲染 date-picker 组件 --><div class="date-picker"> <input type="datetime" data-status="activated" /></div>自定义事件
命名举荐应用kebab-case（短横线连贯）的事件名，因为v-on事件监听器在DOM模板中会被主动转换为全小写。自定义事件能够和prop属性一样进行验证。
app.component('custom-form', { emits: { // 没有验证 click: null, // 验证submit 事件 submit: ({ email, password }) => { if (email && password) { return true } else { console.warn('Invalid submit event payload!') return false } } }, methods: { submitForm() { this.$emit('submit', { email, password }) } }})v-model参数与多个v-model绑定
在组件中，在prop中定义的属性，在内部能够用v-model:属性名的形式来进行多个v-model绑定。
自定义v-model修饰符
在组件中更能够自定义v-model修饰符。然而须要留神的是，修饰符的具体方法是写在属性的setter函数中，并且修饰符的名称为arg + "Modifiers"。
<div id="app"> <my-component v-model:name.capitalize="myText"></my-component> {{ myText }}</div>const app = Vue.createApp({ data() { return { myText: '' } }})app.component('my-component', { props: { name: String, nameModifiers: { default: () => ({}) } }, methods: { emitValue(e) { let value = e.target.value if (this.modelModifiers.capitalize) { value = value.charAt(0).toUpperCase() + value.slice(1) } this.$emit('update:name', value) } }, template: `<input type="text" :value="name" @input="emitValue">`})app.mount('#app')插槽
在组件的模板中能够定义<slot>标签，能够替换为字符串、html代码或其余组件。当<slot>标签两头有内容时，这部分内容会作为默认。
<button type="submit"> <slot>Submit</slot></button>具名插槽
在须要多个插槽的状况下，为了辨认不同的插槽，须要给每一个插槽一个名字name，不带name的插槽会有一个隐含的名字“default”。在内部应用组件的具名插槽的时候，应用<template>的v-slot批示插槽名称。留神必须应用v-slot时必须在<template>标签中。
<div class="container"> <header> <slot name="header"></slot> </header> <main> <slot></slot> </main> <footer> <slot name="footer"></slot> </footer></div><base-layout> <template v-slot:header> <h1>Here might be a page title</h1> </template> <template v-slot:default> <p>A paragraph for the main content.</p> <p>And another one.</p> </template> <template v-slot:footer> <p>Here's some contact info</p> </template></base-layout>若想让内部拜访组件外部的数据（比方用在插入内容时须要组件外部数据），能够将组件模板中插槽的属性设置为数据。
<slot name="slot1" :item="label"></slot><aaa> <template v-slot:slot1="slotProps"> <p>{{slotProps.item}}</p> </template></aaa>因为v-slot的值是作为函数参数作用的，所以能够写成任何可能作为函数定义中的参数的JavaScript表达式。
<!-- 重命名参数 --><todo-list v-slot="{ item: todo }"> <i class="fas fa-check"></i> <span class="green">{{ todo }}</span></todo-list><!-- 参数默认值 --><todo-list v-slot="{ item = 'Placeholder' }"> <i class="fas fa-check"></i> <span class="green">{{ item }}</span></todo-list>v-slot同样能够应用动静参数<template v-slot:[dynamicSlotName]>
具名插槽的缩写
只有在有参数的状况下才能够缩写，应用#代替v-slot。
<todo-list #default="{ item }"> <i class="fas fa-check"></i> <span class="green">{{ item }}</span></todo-list>提供与注入
如果在一个多层嵌套的组件链中，内层的组件要取得外层组件的数据，有两种办法：
第一种是后面讲过的设置prop，然而不不便的是这须要在每一层组件都设置prop，开发上略微有点麻烦；
第二种是父组件提供数据，子组件注入数据的模式，咱们能够应用provide和inject对。父组件能够作为其所有子组件的依赖项提供程序，而不论组件层次结构有多深。这个个性有两个局部：父组件有一个provide选项来提供数据，子组件有一个inject选项来开始应用这个数据。
注入的数据默认是非响应式的，如果想要响应式的数据注入，须要调配一个组合式API computed属性。
// 父组件提供app.component('todo-list', { data() { return { todos: ['Feed a cat', 'Buy tickets'] } }, provide() { return { todoLength1: this.todos.length, todoLength2: Vue.computed(() => this.todos.length) //响应式 } }, template: ` ... `})app.component('todo-list-statistics', { inject: ['todoLength'], created() { console.log(`Injected property: ${this.todoLength1}`) // > 注入 property: John Doe }})保活标签keep-alive
在一些场景比方切换标签页中，不停地切换标签页会一直地从新渲染组件。应用保活标签<keep-alive>能够放弃这些组件的状态，以防止重复重渲染导致的性能问题。
<keep-alive> <component :is="currentTabComponent"></component></keep-alive>异步组件
不是很懂，目前也临时用不到，等第二次浏览时再细究。
模板援用
如果须要在js中拜访组件，能够应用ref为组件或HTML元素指定援用ID。留神，因为$refs只会在组件渲染实现之后失效，应该防止在模板或计算属性中拜访$refs。
<input ref="input" />const app = Vue.createApp({})app.component('base-input', { template: ` <input ref="input" /> `, methods: { focusInput() { this.$refs.input.focus() } }, mounted() { this.focusInput() }})