vue2学习知识及问题总结一

快了，不要急

已于 2024-07-19 10:39:39 修改

阅读量554

点赞数 24

分类专栏：前端文章标签： vue.js

于 2024-03-21 15:28:11 首次发布

本文链接：https://blog.csdn.net/m0_69497411/article/details/136903766

版权

前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

前言：

学习vue对vue用法有了一点浅显的理解，以下是我整理的学习笔记和理解，可能有某些地方不准确，希望各位大佬多多指点。交流交流经验。

简介:

学习任何一门语言，我感觉语法都是次要的,最重要要了解其原理及框架设计思想，对于 vue 从最简单的模型理解，Vue实例挂在一个容器,容器负责渲染页面，至于数据交互、dom操作是由Vue具体封装指令去做。学好vue我认为一定要弄清楚的几点： 1.检测数据变化原理(vue中数据变化为什么能立刻渲染到页面上) 2.为什么引进组件、store和router? 3.vue的生命周期

一、vue的语法

1.插值表达式

{{xx}} 用于解析标签体内容。插值表达式中可写哪些？

三目运算符：

<div>{{flag ?"flag为true时展示":"flag为false时展示"}}</div>

函数表达式:

<div>{{ func() }}</div>

正则表达式:

<p>{{value.replace(/,/g,'')}}</p>   //把全部的逗号去掉

2.指令语法

这里就不过多说明常见的指令展示下我在项目中的用法吧，重点说下自定义指令(dir)感觉非常好用

<div class="tabs_ziduan" :style="{ height: moreFlag ? 'auto' : 84 + 'px' }">
      <li v-for="editableTab in fieldSearchData === '' ? editableTabs : filteredTabs"
        :key="editableTab.fieldName"
        :title="editableTab.fieldName"
        :class="{selectedStyle:item.dynamicTags.selected && item.dynamicTags.fieldName ===         
        editableTab.fieldName}"
        @click="ClickTabsEvent(editableTab)">
            {{ editableTab.fieldName }}
       </li>
</div>
<div class="tabs_right_more" @click="clickMore">
      <div>
          <span v-text="moreFlag ? '收起' : '更多'"></span>
          <i :class="moreFlag ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"></i>
      </div>
</div>

参考vue官网和vue-element-admin内容

这里我展示个指令可以让点击的按钮有波纹的动画效果

1.注册

2.使用

二、数据绑定

v-bing ：用于动态绑定DOM元素的属性;例如标签的href属性，标签的src属性等。v-bind可以简写成“：”
v-module:一般用于input框的双向数据绑定 ----注意: 还可用于组件之间双向数据绑定

v-module的本质：

<input v-model="test"/>

相当于：

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

相当于一个绑定一个value和一个input事件(默认是input事件)

这里的input事件就是把值赋给test这个变量

这里总结了下组件中使用v-module的步骤和注意点：

1.子组件中 props的使用 ： 子组件中要声明接收的数据类型
props: {
    // 接收string和number类型的值，
    myValue: [String, Number],
  },
注意：flag这个名是自定义的和父组件绑定的名字一致---但[String, Number]不能写成字符串["String","Number"],因为此时它们是构造器，是js的全局api

2.子组件 $emit的使用: 向上派发事件，在自定义组件中触发.
methods: {
    changeInput ($event) {
      this.$emit('myInput', $event.target.value)
   },
}
向上发送 myinput事件 => model 监听myInput事件注意：这里的myInput必须和 model中的事件一致

3. 关键的model---model 才是组件能够使用v-model的关键所在。我们有时会省略它(有默认值)，

默认情况： v-model 会把 value 用作prop 把input 用作 event , 单选框和复选框可能使用 value prop 来达到不同的目的。使用model选项的话可以回避这些情况可能产生的冲突。 ----总结最好使用model
 // 当我们使用model的默认值的时候value作prop，input作event时，可以省略不写model。
  model: {
    prop: 'myValue', // 默认是value
    event: 'myInput', // 默认是input
  },
4.父组件的自定义组件中使用
<custom-model v-model="myValue"></custom-model>
//同效果
<custom-model ：my-value="myValue"></custom-model>
这里参考了：如何在vue自定义组件中使用 v-model指令 - 掘金

三、el与data

1、el挂载

直接绑定 el:"#root"
vue实例下$mout("#root")方法: vm.$mount("#root")

vue3好像用的 createApp方法创建实例，使用其下mount方法来挂载组件

2、data数据

分为两种方法对象式和函数式。这里讲下为啥组件中data必须是函数式？

避免组件间数据相互影响,如果data是个对象所有组件共享一个对象，很大可能互相污染。

我的理解是： data作为函数的返回值每个实例调用相当于深拷贝了很多份，相互间不影响

data如果是对象的话相当于复杂数据类型只拷贝指针

就像： let obj={name:"张三"} objTemp =obj; objTemp.name="3434" =》log(obj)

结果let obj={name:"3434"} 一样的道理终究是浅拷贝

2.1检测数据改变原理：

首先明确vue是通过Object.defineProperty()检测数据变化的

Object.defineProperty(person, 'age', {
  //当有人读取person的age属性时，get函数(getter)就会被调用，且返回值就是age的值
   get() {return number},
   //需求:当有人修改person的age属性时，set函数(setter)就会被调用，且会受到修改的具体值
   set(value) {number = value}
})

data中数据每一个有相应的 set 和get 并且会拷贝(浅拷贝)一份到组件实例下一份，所以data中数据变化页面才能够知道并且更新视图

2.2、更改数组或数组对象数据

1.当使用vm.data.person[0].name="" 形式更改数组。

person中 name与age 有数据代理,所以直接对数组对象内属性name更改可以实现且界面更改

2.而使用vm.data.person[0]= {id:"003",name:"王五",sex:"未知"}

不能进行更改因为 0,1没有相应的set get

注意：对于后添加到data中的数据因为没有通过 Object.defineProperty()检测所以并没有相应的set 和get 所以不是响应式数据

vue数据检测总结：

1.vue会检测data中所有层次的数据

2.如何检测对象中的数据？

1）对象中后追加的属性，vue默认不做响应式处理

2）如需给后添加的属性做响应式，调用api

Vue.set(target,propertyName/index,value)

vm.$set(target,propertyName/index,value)

3.如何检测数组中的数据？

通过包裹数组更新元素的方法实现，本质是做两件事：

1）调用原生对应方法对数组进行更新

2）更新解析模板，进而更新页面。

4.再Vue修改数组中某一个元素一定要调用以下方法：

1、这些API:push()/pop()/shift()/unshift()/splice()/sort()/reverse()

2、Vue.set()或vm.$set()

注意的：Vue.set()和vm.$set()不能给vm或vm的根数据对象添加属性

四、事件处理

没啥好说的最常用的@click="func(number,$event)" 注意参数和函数内部this指向就行

其他的鼠标键盘事件类似，还有几个事件修饰符, 有js基础看看就会用

vue事件修饰符：

1.prevent:阻止默认事件

2.stop 组织事件冒泡

3.once：事件只触发一次

4.capture：事件捕获

注意：

所有被vue管理的函数，最好携程普通函数，这样 this指向当前实例组件

所有不被vue管理的函数最好写成箭头函数这样this指向的才是当前实例组件
methods 、computed、watch都是vue所管理的

五、计算属性computed

特点：根据已有属性,创建新属性

1. 初次读取调用一次，所依赖的数据（计算属性fullname ，所依赖的firstname ,lastname）变化时调用一次，且有缓存

2. 不要把计算属性当作函数，尤其是简写形式写法虽然像函数，但是它本质是属性，属性名放到vm实例下 get()函数返回值作为计算属性的值

简写形式：大多用简写形式

对象形式：

六、监听watch

特点：对已有属性进行监听

简写形式：大多用简写

对象形式：

总结：

♦ 数组（一维、多维）的变化不需要通过深度监听，

♦ 对象数组中对象的属性变化则需要deep深度监听

*********************************************************************************************************************************************************************

自己学习的浅显的经验，仅供交流，希望早日成为大佬！！！！！！