【学习打卡】第2天 【2022版】Vue3 系统入门与项目实战第二讲

课程名称： 2022持续升级 Vue3 从入门到实战 掌握完整知识体系

课程章节： Vue 基础语法

主讲老师： Dell

课程内容：

今天学习的内容包括：

mvvm设计模式 ： m=model 数据模型； v=view 视图； vm=viewModel 视图数据连接层

createApp 表示创建一个Vue应用，存储到app变量中

生命周期函数：在某一时刻自动执行的函数，也叫钩子函数

课程收获：

2.1 心得：

组件：页面中的一部分（独立样式，数据，逻辑）

可以拆分的最小组件：一个dom标签

创建Vue实例：Vue.createApp({ }), 调用createApp方法创建一个vue应用

mount()方法的含义：app.mount("#app")调用mount方法，将创建好的vue应用挂载到属性值为app的元素下; 返回值就是vue应用的根组件

Vue面向数据的设计模式：定义一个数据，定义一个模板，vue自动把数据和模板关联起来，实现我们想要展示的页面效果

const app = Vue.createApp（{根主键}）；

Vue.createApp 表示创建一个vue应用 也叫创建一个vue实力，其中传入的参数就是vue实力的根组件

const vm = app.mount("#id");  

2.2/2.3 心得：

app.mount 的返回值就是我创建实例时定义的根组件。

生命周期函数：在某一时候会自动执行的函数

beforeCreate：在实例生成之前会自动执行的函数

created：在实例生成之后会自动执行的函数

beforeMount：在模板已经被编程函数之后/组件内容被渲染到页面之前立即执行的函数

mounted：在组件内容被渲染到页面之后自动执行的函数

unmounted：vue应用失效时，dom完全销毁之后

vue2的钩子和vue3不一样的地方是beforedestory destory befroreummounted unmounted

具体可分类成：

创建实例：beforeCreate、created

装载模板：beforeMount、mounted

渲染模板：beforeUpdate、updated

销毁实例：beforeUnmount、unmounted

// 在实例生成之前会自动执行的函数
        beforeCreate(){
            console.log('beforeCreate')
        },
        // 在实例生成之后会自动执行的函数
        created(){  //初始化结束后才执行这个声明周期函数
            console.log('created')
        },
        // 在组件内容被渲染到页面之前立即自动执行的函数
        beforeMount(){
            console.log('beforeMount')
        },
        // 在组件内容被渲染到页面之后立即自动执行的函数
        mounted(){
            console.log('mounted')
        },

2.5/2.6 心得：

v-once： 只渲染一次，后面数据如果发生变化也不再渲染； 提高渲染性能，避免无用的渲染

v-if ： 决定标签需不需要渲染到视图，为true渲染到页面，false不渲染这个Dom节点

v-bind： 绑定 data 中的数据。

v-html： 防止转义， 变量中有html标签时，可以在页面上渲染出来 。让html真的就是html。比如用富文本编辑器保存的一段文本，肯定有大量的Html标签，为了显示的时候该加粗的加粗，该换行的换行，就加上v-html

{ { } } 插值表达式 可以是变量，可用JS表达式，不可用js语句

模板语法简写：

v-bind:title ==== :title

v-on:click ==== @click

handleClick(e){

    e.preventDefault()  //阻止默认行为

}

或者直接@click.prevent = “handleClick”

动态绑定属性名和事件：

<template>
    <div @[event]='handleClick' :[name]="message">
        {{ message }}
    </div>
</template>
data() {
    return {
        message: "hello word",
        name: 'title',
        event: 'click'
    }
    
},
methods: {
    handleClick() {
        alert('click')
    }
}

2.8/2.9 心得：

methods 里面的方法不要用箭头函数的形式，不用的话，this指向vue实例，用的话，this指向

watch: {} 监听数据变化，处理异步请求, 通过方法参数能得到之前和之后的值

例如

	price（current, prev）
{ // current: 变化后的值，prev：变化前的值 }

computed 计算属性 , watch 侦听器 和 methods 方法 的区别：

computed: 内部带有缓存机制，当计算属性依赖的内容发生变更时，才会重新执行计算，computed 在做页面渲染时会更高效一些。

methods： 只要页面重回新渲染，就会重新计算

watch： 当监听的数据发生变化时，就会重新计算

watch：{

    // price发生变化时，函数会执行

    price( current，prev ) {

        this.newTotal = current * this.count;

    }

}

当即可采用 计算属性 computed 也可采用 方法 methods 时， 建议使用计算属性， 因为有缓存

computed:{

        total( ) {

            return Date.now( );

        }

}

当即可采用 计算属性 computed 也可采用 侦听器 watch 时， 建议使用计算属性， 因为更简洁

methods：{

    getTotal( ){

        return Date.now( )

    }

}

2.10 心得：

样式绑定语法：
前置条件：中有.red和.green两个类
通过对象控制样式展示
主动调用的是父组件，被调用的是子组件

动态绑定样式：可以是单独的一个字符串，可以是数组，也可以是对象

<div :class="xxx"></div>

class 类名：

在data中定义：

classString: 'red',  

classObject： { red: true, green: true }, 代表class中有两个类名，true/false来表示该类名是否显示

classArray: ['red', green, { brown: true }]  

行内样式style：

styleString:  ' color: red; ' ,

styleObject: { color: 'red' }

子组件绑定样式;

前置条件： demo是子组件的name

子组件最外层只有一个标签， demo上加样式就可以使子组件的所有标签都应用该样式

子组件最外层不是只有一个标签， demo上加的样式在子组件内部是不起作用的，若想子组件内部标签应用demo上的样式， 则 需要在子组件想应用的标签的class上加$attrs.class ,

如：

 <div :calss=”$attrs.class“></div>

总结：

return {
classString: 'red',
classArray: ['gray'],
classStyle: {red: true, green: false},
styleString: 'color: red',
styleObj: {color: 'green',backgroundColor: 'yellow'}
}
template: '<!-- <div :class="classStyle">{{ content }}</div> --><div :style="styleObj">hello wolrd</div>'

2.11 心得：

v-if：通过控制元素在dom上的存在与否来控制它的展示与隐藏

v-show：通过style样式的display来控制是由展示

频繁的改变显示与隐藏建议使用v-show，不会频繁销毁dom，性能会更好，不频繁的话都可以

v-else：与v-if配合使用，中间不能有内容

v-else-if：与v-if和v-else配合使用，三者中间不能有分割

<div v-if="show">hh</div>

直接移除,如果不涉及多次销毁使用时候无所谓

<div v-show ="show"></div>

只是隐藏，不会频繁销毁dom

2.12/2.13 心得：

数组循环：

item：每一项内容

index：数组下标

<div  v-for='（item,index） in listArray'></div>

对象循环：

value：对象的value值

key：对象的key值

index：对象的下标

<div  v-for='（value,kye,index） in listObject'></div>

在循环渲染时，为了节约性能，不重复渲染，循环的 每一项尽量用key来绑定唯一的值

使用数组的变更函数

push：在数组后加

pop：在数组后减

shift：在数组前减

unshift：在数组前加

reverse：将数组取反

在列表循环渲染时，尽量使用:key来绑定一个唯一的值，这样在页面再次渲染时，根据这个唯一绑定的值( key值尽量不要使用index ),查询对应的KEY的值是否发生变化，若没有变化， 就可被复用，不需重新创建新的DOM值，从而提升性能

数组内容：
1、使用数组变更函数，没有改变数组的引用
2、直接替换数组，改变了数组的引用
3、直接更新数组的内容，没改变引用

循环和判断，同层次不能放在一起，v-for的优先级高于v-if

template 占位符，主要是为了体现语义结构，不会渲染出真实的标签

<template v-for="(value, key, index) in listObject" :key="index">

     <div v-if="key !== 'lastName'">

            {{value}}------{{key}}

      </div>

</template>

2.14/2.15 心得

1、事件绑定，有默认参数event， 当传入其他参数再想获取event时，在@click=“handleBtnClick(num, KaTeX parse error: Expected 'EOF', got '”' at position 7: event)”̲, 传入event参数

2、当想绑定多个事件时，以逗号隔开，并在每个事件函数后面加上小括号。例如：@click=“handleBtnClick1(), handleBtnClick2()”

3事件修饰符 .stop 阻止冒泡 .self 点击的元素是自己的时候才执行（例如嵌套标签时） .prevent 阻止默认行为 .capture 捕获 .once 绑定只执行一次 .passive 滚动性能提升

<!-- 阻止单击事件继续传播 -->
<a @click.stop="doThis"></a>

<!-- 提交事件不再重载页面 -->
<form @submit.prevent="onSubmit"></form>

<!-- 修饰符可以串联 -->
<a @click.stop.prevent="doThat"></a>

<!-- 只有修饰符 -->
<form @submit.prevent></form>

事件修饰符：stop,prevent,capture,self,once,passive

按键修饰符: enter, tab, delete, esc, up, down,left, right

 @keydown.按键修饰符=“handleKeyDown”

鼠标修饰符: left,right,middle

精确修饰符: exact(.ctrl.exact 只摁住ctrl才生效)

@click.ctrl.exact=“handleClick” // 精确的按住click键，再点击时才会执行

2.16/2.17/2.18 心得

双向绑定v-model：一方改变，另一方同样改变。
input: 写了v-model后，可以不用写value
textarea： 想用双向绑定写成单标签
checkbox: 多选，如果想要获取选中的选项，绑定一个空数组，他会将选中的选项添加到绑定的数组中
radio: 单选，绑定空字符串，因为单选只能选中一个
单选和多选都可以绑定一个bool值，尤其单选作为一个开关时，很有用

v-model本质上是一个语法糖。如下代码

  <input v-model="test">

本质上是

  <input :value="test" @input="test = $event.target.value">

其中@input是对输入事件的一个监听:value="test"是将监听事件中的数据放入到input，下面代码是v-model的一个简单的例子。在这边需要强调一点，v-model不仅可以给input赋值还可以获取input中的数据，而且数据的获取是实时的，因为语法糖中是用@input对输入框进行监听的

select的双向绑定
multiple 多选
当option多时，利用v-for
当想选项是字符串，但存储为其他类型时，可以将value的值改为自己想要存储的类型，v-bind：value=“item.value”

修饰符

.lazy：v-model.lazy=====》当输入框失去焦点时，才出发model同步数据事件

.number：v-model.number===》作类型的转换，转换成number形式

.trim：v- model.trim ====》先去字符串掉前后空格，在进行存储