vue的笔记

已于 2023-06-06 21:51:41 修改
阅读量69 收藏
点赞数
分类专栏： 前端框架 文章标签： vue.js 笔记 javascript
于 2023-06-06 21:49:18 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37427142/article/details/131076851
版权

一,Vue核心

1.1 vue简介

  1. 采用组件化,提高代码复用率
  2. 声名式编码,无需操作DOM提高开发效率
  3. 使用虚拟DOM+优秀的Diff算法，尽量复用DOM节点。


image.png
image.png

image.png

原本是新增的东西一股脑的覆盖,现在是有个虚拟的DOM原本有的就给保留,然后插入新的东西
初识Vue:
1.想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象;
2.root容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法;
3.root容器里的代码被称为【Vue模板】;

1.2初识vue

1.想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象;
2.root容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法;
3.root容器里的代码被称为【Vue模板】;
4.Vue实例和容器是一一对应的;
5,真实开发中只有一个Vue实例并且会配合着组件一起使用;
6.{{xxx}}中的xxx要写js表达式，且xxx可以自动读取到data中的所有属性;(如果data里面的数据是字符串就可以在大括号里面使用字符串的属性)
7.一旦data中的数据发生改变，那么模板中用到该数据的地方也会自动更新;

image.png

[!danger]
一个容器只能对应一个Vue实例

{{}}里面包裹的必须是js表达式

注意区分:js表达式和js代码(语句)
1.表达式:一个表达式会生成一个值，可以放在任何一个需要值的地方:
(1). a
(2). a+b
(3). demo(1)
(4).x === y ? ‘a’ : ‘b’

image.png
目的:因为数据是动态的,为了一旦把动态数据交给vue实例,以后vue中的数据发生变化,整个页面的这个地方也一起发生变化

这个root代表的是根,是Vue实例
image.png

1.3vue模板语法

1.3.1 插值语法&指令语法

<h1>hello,{{name}}</h1>

<script type="text/javascript">

        new Vue({

            el: '#root', //el用于指定当前Vue实例为那个容器服务,值通常为css选择器字符串

            data: { //data用于存储数据,数据供el所指定的容器使用

                name: '哈哈哈'

            }

        })

    </script>
    ```
     

`    <a href={{ url}}>11111</a>`
这种不能插入url

```vue
<div id="root">

    <!-- 插值语法 -->

    <h1>hello,{{name}}</h1>

    <a v-bind:href="url">11111</a>

</div>

绑定:把表达式执行的结果绑定给href
这里就是把绿色框里面的url当初表达式来执行而不是字符串
v-bind: 可以简写成:

总结
插值语法往往用在标签体里面,指令语法往往用在标签属性,事件等

1.4 vue数据绑定

v-bind 只是单向的数据绑定
image.png

v-model双向绑定

<input type="text" v-model:value="name">

[!danger]
v-model只能应用在表单类元素上面

总结:
Vue中有2种数据绑定的方式:
1.单向绑定(v-bind):数据只能从data流向页面。
2.双向绑定(v-model):数据不仅能从data流向页面，还可以从页面流向data。
备注:
1.双向绑定一般都应用在表单类元素上（如: input、select等)
2.v-model:value 可以简写为v-model，因为v-model默认收集的就是value值.。

el和data的两种写法

l/el的两种写法

const v = new Vue({
el: " #root',    //第一种写法

data:{
name:"尚硅谷'
})
console.log(v)
v.$mount('#root')//第二种写法*/

灵活使用容器
image.png

data

//data的第二种写法:函数式
data:function(){
return{
name:"尚硅谷
}
}

这种function函数是由vue对象来调,但是箭头函数不行
另外可以简写成


data(){
return{
name:"尚硅谷
}
}

1.5MVVM模型

1.M:模型(Model) :对应data中的数据
2.V:视图(View):模板
3.VM:视图模型(ViewModel) : Vue实例对象

image.png

[!理解]
view是html中我们设置的模板,model是数据,vm是实现模型和数据绑定的对象

观察发现:
1.data中所有的属性,最后都出现在vm身上。
2.vm身上所有的属性及Vue原型上所有属性，在Vue模板中都可以直接使用。

1.6 数据代理

image.png

defineProperty 让number与age产生了关联

我们可以把vue看成别人封装好的工具类，传入的参数是自身的自定义类，该自定义类继承了vue接口，可定义vue接口的属性值，也可以自行定义成员变量，成员属性，成员方法等，这些都可以被vue实例接管

1.7 事件处理

<div id="root">
<h2>欢迎来到{{name}}学习</h2>
<!-- <button v-on:click="showInfo">点我提示信息</button> --><button @click="showInfo1">点我提示信息1</button>
<button @click="showInfo2($event,66)">点我提示信息2</button></div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false l/阻止 vue在启动时生成生产提示。
const vm = new Vue({
el: " #root',
data:{
name:'尚硅谷'}
methods:{
showInfo1(event){ …
showInfo2(event, number)iconsole.log(event,number)
// console.log(event.target.innerText)l / console.log(this)//此处的this是vmll
				 alert( '同学你好!!')I
F
}})
/script>

1.7.2事件修饰符

1.prevent: P阻止队手件（滑用）;
2.stop:阻止事件冒泡（常用）;
3.once:事件只触发一次（常用）;
4.capture:使用事件的捕获模式;
5.self:只有event.target是当前操作的元素时才触发事件;
6.passive:事件的默认行为立即执行，无需等待事件回调执行完毕;

image.png

使用捕获模式,先捕获再冒泡
image.png

self:只有event.target是当前操作的元素时才触发事件;
image.png

1.7.3. 按键修饰符

  1. keycode : 操作的是某个 keycode 值的键
  2. .keyName : 操作的某个按键名的键(少部分)
    1.Vue中常用的按键别名:
    回车 => enter
    删除=>delete(捕获“删除”和“退格”键)退出=>esc
    空格=>space
    换行=> tab(特殊，必须配合keydown去使那
    上=> up
    下=> down
    左=>left
    右=> right
    image.png

2.Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case(短横线命名)
3.系统修饰键（用法特殊）: ctr1、alt、shift、meta
(1).配合keyup使用:按下修饰健的同时，再按下其他键，随后释放其他键，事件才被触发。
(2).配合keydown使用:正常触发事件。
4.也可以使用keyCode去指定具体的按键（不推荐)
5.Vue.config.keyCodes.自定义键名=键码，可以去定制按键别名

image.png

返回值插值进大括号

1.8 计算属性

1.定义:要用的属性不存在，要通过已有属性计算得来。
2.原理:底层借助了objcet.defineproperty方法提供的getter和setter.
3.get函数什么时候执行?
(1).初次读取时会执行一次。
(2).当依赖的数据发生改变时会被再次调用。
4.优势:与methods实现相比，内部有缓存机制（复用），效率更高，调试方便。5.备注:
1.计算属性最终会出现在vm上，直接读取使用即可。
2.如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生变化

image.png
简写
image.png

1.9监视属性


const vm = new Vue({el: " #root',
data:{
isHot:true,},
computed:{ …methods: {…watch:{
isHot:{
immediate:true, //c初始化时让handler调用一下
// handler什么时候调用?当isHot发生改变时。
handler(newValue,oldValue){
console.1og('isHot被修改了" ,newValue,oldvalue}
}
}
}
)

vm.$watch( 'isHot",{
immediate:true，//初始化时让handler调用一下l/ handler什么时候调用?当isHot发生改变时。handler(newValue,oldvalue){
console.log( 'isHot被修改了',newValue,oldValue)}
})

1.9.2深度监视

深度监视:
(1).Vue中的watch默认不监测对象内部值的改变（一层）。
(2).配置deep:true可以监测对象内部值改变（多层）。备注:
(1).Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以!
(2).使用watch时根据数据的具体结构，决定是否采用深度监视

简写

image.png
image.png

1.10 watch对比computed

computed和lwatch之间的区别:
1.computed能完成的功能,watch都可以完成。
2.watch能完成的功能，computed不一定能完成，例如: watch可以进行异步操作。两个重要的小原则:
1.所被Vue管理的函数==(外面是windows)，最好写成普通函数，这样this的指向才是vm或组件实例对象。
⒉.所有不被Vue所管理的函数（定时器的回调函数、ajax的回调函数等、Promise的回调函数)，最好写成箭头函数(外面是vue)==，这样this的指向才是vm或组件实例对象。

箭头函数this等于父级函数this指向，下面的定时器必须用箭头函数，不能用普通函数。
如果定时器中的回调函数使用的是箭头函数，则会往上一级函数中去寻找this
image.png

setTimeout的系统调用的所以里面的this是windows

1.11绑定样式

绑定class样式

:class后面的式子当做表达式使用

<div id="root">
<div class="basic" :class="happy" @click="changeMood">{{name}}</div>
</div>
</body>

<!--准备好一个容器--><div id="root">
<!--绑定class样式--字符串写法，适用于:样式的类名不确定，需要动态指定-->
<div class="basic" :class="mood" @click="changeMood">{{name}}</div><br/><br/>
<!--绑定class样式--数组写法，适用于:要绑定的样式个数不确定、名字也不确定-->
<div class="basic" :class="classArr">{{name}}</div> <br/><br/>
<!--绑定class样式--对象写法，适用于:要绑定的样式个数确定、名字也确定，但要动态决定用不用-->
<div class="basic" :class="class0bj">{{name}}</div>
</div>

image.png

绑定style样式

1.12条件渲染

v-show
条件为false隐藏
v-if
条件为false直接就没有
v-else-if
v-else
连在一起使用不能被打断
template 不影响结构

image.png

1.13列表渲染

遍历数组

<div id="root"><h2>人员列表</h2><ul>
<li v-for="p in persons" :key="p.id">{ip.name}}-{{p.age}}
</li>
</ul></div>

data:{
persons:[
{id: '001" ,name:"张三",age:18},
 {id: "002 " ,name:"李四",age: 19},
 {id: "003" ,name:'王五',age:20}]
}

每个列表项都会自动分配相应顺序的index代表遍历时的索引值

<div id="root">
<h2>人员列表</h2>
<ul>
<li v-for="(p,index) in persons" :key="index">{{p.name}}-{{p.age}}
</li>
</ul></div>

遍历对象

data里面的一个car对象

car:{
name:'奥迪A8',
price: '70万',
color:'黑色'
}


<ul>
<li v-for=" (value,k) of car" :key="k">
{{k}}-{{value}}
</li>
</ul>

遍历字符串

str : ' hello'

<ul>
<li v-for="(char,index) of str":key="index>
 {{a}}-{{b}}
</li>
</u1>

遍历指定次数

image.png
image.png

1.14key的作用与原理

1。虚拟DOM中key的作用:
key是虚拟DOM对象的标识，当数据发生变化时，Vue会根据【新数据】生成【新的虚拟DoN》,随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较，比较规则如下:
2.对比规则:
(1).旧虚拟DOM中找到了与新虚拟DOM相同的key:
o.若虚拟DOM中内容没变，直接使用之前的真实DOM !
@.若虚拟DOM中内容变了，则生成新的真实DOM，随后替换掉页面中之前的真实DOM.
(2).旧虚拟DOM中未找到与新虚拟DOM相同的key
创建新的真实DOM，随后渲染到到页面。
3，用index作为key可能会引发的问题:
1。若对数据进行:逆序添加、逆序删除等破坏顺序操作:
会产生没有必要的真实DOM更新==>界面效果没问题,但效率低。
2．如果结构中还包含输入类的DOM:
会产生错误DOM更新==〉界面有问题。
4。开发中如何选择key? :
1.最好使用每条数据的唯一标识作为key，比如id、手机号、身份证号、学号等唯一值。2.如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表用于展示，
使用index作为key是没有问题的。

image.png

image.png

1.14 列表渲染

用watch实现

new Vue({
el : " #root',
data:{
keyword: ' ',
persons:[
{id: "001 " ,name:'马冬梅',age: 19,sex :'女'},
{id: '062 " ,name:"周冬雨",age: 20,sex :'女'},
 {id: '003" ,name:"周杰伦',age:21,sex:"男"},
 {id: "004" ,name:温兆伦',age:22,sex:"男}],
filPerons:[]
		},
watch:{keyword:{
immediate:true,
handler(val){
this.filPerons = this.persons.filter((p)=>{
return p.name.indexOf(val) l== -1
})
}}}})

计算属性实现

image.png

凌寒ᨐ舞
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
狂神说Vue笔记整理
qq_46138160的博客
12-11 10万+
狂神说Vue笔记 ​ 想要成为真正的“互联网Java全栈工程师”还有很长的一段路要走，其中前端是绕不开的一门必修课。本阶段课程的主要目的就是带领Java后台程序员认识前端、了解前端、掌握前端，为实现成为“互联网Java全栈工程师”再向前迈进一步。 一、前端核心分析 1.1、概述 Soc原则：关注点分离原则 Vue 的核心库只关注视图层，方便与第三方库或既有项目整合。 HTML + CSS + JS : 视图 ： 给用户看，刷新后台给的数据 网络通信 ： axios 页面跳转 ： vue-router 状态管
Vue笔记
weixin_50116360的博客
03-01 1228
Vue笔记
尚硅谷Vue笔记
m0_56428225的博客
10-17 4136
vue学习笔记
狂神Vue笔记+源码.zip
05-10
狂神Vue笔记+源码 狂神Vue笔记+源码 狂神Vue笔记+源码 狂神Vue笔记+源码 狂神Vue笔记+源码 狂神Vue笔记+源码 狂神Vue笔记+源码 狂神Vue笔记+源码 狂神Vue笔记+源码 狂神Vue笔记+源码 狂神Vue...
【狂神说】Vue笔记（全部完整）.zip
01-22
在"【狂神说】Vue笔记"中，我们可以期待学习以下关键知识点： 1. **数据绑定**：Vue的数据绑定使用`v-bind`指令将数据模型与DOM元素属性关联。双向数据绑定通过`v-model`实现，使得视图和模型之间的数据实时同步。 ...
Vue笔记，Vue笔记，Vue笔记
07-18
Vue笔记主要涵盖了从基础到进阶的各种Vue知识，通过一系列的学习日程，旨在帮助开发者深入理解和熟练掌握Vue框架。 在"Day 01"，通常会介绍Vue的基础概念，包括Vue实例的创建、模板语法、数据绑定（如`v-bind`和`v-...
尚硅谷vue笔记·····
11-10
Vue.js 是一款流行的前端JavaScript框架，它用于构建用户界面，具有轻量级、高效和可重用组件的特点。本文将详细解析Vue2和Vue3的一些关键知识点，包括`ref`属性、配置项`props`、`mixin`、插件以及`scoped`样式。 ...
Vue笔记.zip
08-15
Vue笔记.zip
vue使用自定义指令实现一键复制
Zing_ing的博客
09-09 514
/ 将需要复制的内容保存到元素上if (!console.log('无复制内容');return;// 创建一个 textarea 元素，用于选择和复制// 执行复制命令try {console.log('复制成功:', el.$value);console.log('复制失败');// 删除创建的 textarea 元素// 监听点击事件},// 当指令所在的元素被更新时触发},// 指令解绑时移除事件监听});
Vue2 中对数组进行操作时需要注意什么
m0_73882020的博客
09-06 596
在 Vue 2 中，对数组进行操作时，关键是确保操作能够被 Vue 的响应式系统检测到。使用 Vue 的响应式 API，如Vue.set或this.$set，可以确保数组的变化会被正确地反映到视图中。此外，避免直接修改数组的length属性或使用数组索引直接赋值，以确保视图的响应性。
SprinBoot+Vue远程教育网站的设计与实现
赵广陆
09-10 1052
目录1 项目介绍2 项目截图3 核心代码3.1 Controller3.2 Service3.3 Dao3.4 application.yml3.5 SpringbootApplication3.5 Vue4 数据库表设计5 文档参考6 计算机毕设选题推荐7 源码获取 1 项目介绍 博主个人介绍：CSDN认证博客专家，CSDN平台Java领域优质创作者，全网30w+粉丝，超300w访问量，专注于大学生项目实战开发、讲解和答疑辅导，对于专业性数据证明一切！ 主要项目：javaweb、ssm、spring
有关 Element-ui 的一些思考
小白小白从不日别的博客
09-11 263
这里列举了一些我们在使用element-ui时的一些实用技巧，比如主题样式修改、el-form-item label宽度自适应等
Chapter 11 脚手架Vue CLI使用步骤
2302_80253507的博客
09-06 743
Vue CLI 是 Vue.js 官方提供的一个全局命令工具，旨在帮助开发者快速创建和管理 Vue 项目。它为开发者提供了一个标准化的项目结构，并集成了 webpack 配置，使得开发过程更加高效和便利。
从`v-model`到显式绑定：掌控Vue组件中的数据流动20240910
Narutolxy的博客
09-10 437
v-model
手写 Vue Router 中的 Hash 模式和 History 模式
书呆子ITme
09-06 1042
通过手写简化版的Vue Router，我们深入理解了Hash 模式和History 模式的实现原理。Hash 模式依赖于hashchange事件，而 History 模式依赖于pushState和API。两种模式各有优缺点，可以根据项目需求选择合适的路由模式。Hash 模式：简单、无需服务器配置，但URL不美观，对SEO不友好。URL美观且符合SEO要求，但需要服务器支持。
vue3中的实例
最新发布
weixin_48242059的博客
09-11 243
vue3：createApp创建一个Application Instance、应用实例用来注册全局内容，大多数方法支持链式调用，返回实例对象，除了mount方法，他返回组件对象也就是Component instance，还有一种较为特殊的组件类型为 Internal Component instance,在组件实例内部获取自身的实例，使用getcurrentInstance。Vue2：每个Vue应用都是new Vue创建的一个新实例，创建的时候将data作为property添加到响应式系统中。
【vite-plugin-vue-layouts】关于 vue-layouts 布局插件的使用和注意事项
weixin_41899098的博客
09-06 1082
环境：vue3 + vuetify3 + unplugin-vue-router是怎么创建这个项目的：选择它推荐的设置（Recommend）
狂神说 vue 笔记
08-04
回答: 狂神在他的Vue笔记中提到了一些关于Vue的基本语法和MVVM模式的内容。在Vue的基本语法中，他引用了一个在线cdn来加载Vue的库文件，并介绍了v-bind指令的用法。[1]在MVVM模式的介绍中，他提到了MVVM模式的好处，包括低耦合、可复用、独立开发和可测试性。[2]他还解释了MVVM模式中的三个层次，包括Model、View和ViewModel，并强调了ViewModel的作用，即连接视图和数据的中间件。[3]总的来说，狂神的Vue笔记涵盖了Vue的基本语法和MVVM模式的概念和原理。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值