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或者计算属性。
// 定义为data
props: ['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()
}
})
网友评论