vue学习笔记01

嬉牛

已于 2024-12-24 22:17:58 修改

阅读量1k

点赞数 20

文章标签： vue.js 学习笔记

于 2024-12-17 21:18:29 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_52517502/article/details/144196206

版权

学习的课程地址：老杜Vue视频教程，Vue2，Vue3实战精讲，一套通关vue_哔哩哔哩_bilibili

1、vue程序初体验

vue是一个基于JavaScript实现的框架。

vue2:Vue.js

vue3:Vue.js - 渐进式 JavaScript 框架 | Vue.js

1.1当你使用script进行vue安装之后，上下文中就注册了一个全局变量：vue

1.2第一个vue程序

第一步：创建vue实例

（1）需要new vue()，不能直接调用vue函数创建

（2）vue构造函数的参数：options，要求必须是一个纯粹的js对象：{}，

在{}对象中可以编写大量的key：value对，一个key：value对就是一个配置项

（3）template配置项，用来指定模板语句，模板语句是一个字符串。模板语句可以是HTML、Vue的特殊规则或HTML+Vue的特殊规则。

第二步：将vue实例挂载到ID=‘app’的元素位置

（1）vue实例都有一个$mount()方法，将vue实例挂载到指定位置。

（2）#app是ID选择器，语法借鉴了CSS

（3）template后面的模板语句会被vue框架的编译器进行编译，转换成浏览器能够识别的HTML代码。

1.3模板语句的数据来源

（1）data选项的类型：Object | Function（对象或者函数）

（2）data配置项的专业叫法：vue实例的数据对象。（data实际上给整个vue实例提供数据来源）

（3）data为对象时，必须是纯粹的对象（含有零个或多个的key/value对）

（4）模板语法中的插值语法{{data的key}}，如：{{name}}（胡子语法）

（5）data中的value可以是个对象，此时它的取法是{{key.subkey}}，如：{{lead.name}}

（6）data中的value也可以是个数组，此时它的取法是{{key[index].subkey}}，如：{{actors[0].name}}

（7）template使用后面的字符串（键盘Tab键的上面）：``可以支持换行。

1.4template配置项详解

（1）template后面的模板语句只能有一个根节点；

（2）只要data中的数据发生变化，模板语句一定会重新编译；

（3）template指定挂载位置的元素会被替换，因此可以直接编写在挂载位置的HTML中；

1.5关于$mount('#app')

（1）可以使用el配置项代替$mount('#app'),后面生命周期也会介绍；

（2）el:'#app'表示让vue去接管id='app'的容器，等价于 el:document.getElementById('app')。

1.6解决一些提示或报错：

生产环境报错、开发工具警告、favicon图标报错

1.6.1vue.config是vue的全局配置对象，它里面有个productionTip属性。

（1）productionTip属性可以设置是否生成生产提示信息，默认是：true，如果是false则表示阻止生成生产提示信息

Vue.config.productionTip=false,如果不管用可以直接改源码；

1.6.2解决提示或报错：Devtools

（1）百度极简插件=>搜vue Devtools=>下载=>解压=>得到crx文件

（2）谷歌浏览器=>更多工具=>扩展程序=>打开"开发者模式"=>crx文件拖了扔进去

1.6.3解决提示或报错：shift+F5强行刷新浏览器会看到红色报错

（1）代码是使用Live Server插件进行运行的，vscode模拟服务器运行，5500端口号

（2）favicon.ico服务器根目录下没有，添加一个即可解决。

1.7开发者工具

（1）浏览器开发工具重点关注的面板：

a、元素：快速查看页面元素；

b、控制台：打印字符串、查看某些变量、某些属性数据的值、也可直接写js代码、程序运行出现的警告错误信息、

c、网络：前后端的具体传送信息的细节

（2）vue图标：没有vue程序不会点亮

三栏：app，组件，组件相关的数据

Root：根组件

组件相关的数据：可能会遇到纯中文开头不显示的问题。

1.8vue实例和容器的关系是：

一夫一妻制

一个vue实例只能接管一个容器，一旦接管到容器之后，即使后面再有相同的容器，vue也是不管的。

2、vue核心技术(基础)

2.1模板语法之插值语法{{}}

（1）在data中声明的.（变量、函数等）

（2）常量

（3）只要是合法的JavaScript表达式（可以产生一个值）

（4）模板表达式放在沙盒中，只能访问全局变量的一个白名单，如Math和Date等

Infinity,undefined,NaN,isFinite,isNaN,parseFloat,parseInt,decodeURI,decodeURIComponent,encodeURI,encodeURIComponent，Math,Number,Date,Array,Object,Boolean,String,RegExp,Map,Set,JSON,Intl,require

2.2模板语法之指令语法v-???

（1）所有的指令都是以"v-"开始的，它的职责是：当表达式的值改变时，将其产生的连带影响，响应式的作用于DOM；

（2）插值是写在标签体中，而指令是写在html标签的属性位置。

（3）指令的语法规则：<html v-指令名:参数="表达式"></html>，不是所有的指令都有参数和表达式，例如：v-once；而有的指令，不需要参数，但是需要表达式，如：v-if=“表达式”；而有的指令，既需要参数，又需要表达式，如：v-band:参数="表达式"。

（4）v-once:只渲染一次，第二次渲染视为静态资源跳过去。

（5）v-if=“表达式”，表达式的执行结果是个true或者false。true：指令所在的标签会被渲染到浏览器当中，false：则不会渲染。

2.3v-band指令详解

（1）它是一个负责动态绑定的指令，可以让HTML标签的某个属性的值产生动态效果

（2）<HTML v-band:参数="表达式"></HTML>编译后：<HTML 参数="表单式的执行结果"> </HTML>

（3）表达式会关联data，当data发生改变之后，表示式的执行结果就会发生变化；

（4）大部分情况下，参数名还是写成该HTML标签支持的属性名，这样才会有意义，如：<img v-bind:src="imgPath">；

（5）因为v-bind指令很常用，所以提供了简写形式，<img :src="imgPath">

2.4v-model指令详解

（1）和v-bind类似，都可以完成数据绑定，不过v-model是双向数据绑定；

（2）v-model只能使用在表单类元素上，如：input、select、textarea，因为表单类的元素才能提供给用户交互输入的界面；

（3）v-model通常是用在value属性上；

（4）v-model的简写：v-model:value="表达式"===>v-model="表达式"

2.5MVVM分层思想

（1）M：model（模型/数据）

V：View（视图）

VM：ViewModel（视图模型），是核心部分。

（2）vue虽然没有完全遵循MVVM模型，但是vue也受到MVVM的启发

（3）不需要再写大篇幅的操作DOM元素的JS代码，当model发生改变之后，VM自动更新view；同理，当view发生变化之后，VM自动更新model。

2.6vscode自动生成代码小技巧

（1）左下角：管理->配置用户代码片段->输入JavaScript->回车：打开javascript.json

（2）"print to console" ：提示信息；

"prefix"：前缀，简写；

"body"：配置真正要生成的代码片段。是个数组，元素（一行代码）之间用逗号隔开，双引号开始，双引号结束；

"description"：描述信息，不重要，可以省略；

'$1'：生成代码后，光标第一次定位位置；

'$2'：如果在$1位置，按了TAB键，光标将跳到的位置；

（3）例子：

（4）自带代码片段的插件推荐：JavaScript（ES6）code snippets

2.7通过VM可以访问哪些属性

（1）vm.$el:可以获取到这个容器；vm.$children；vm.$options；vm._data；[[prototype]]:vue的原型对象。

（2）vue实例中的属性很多，有以$开始的属性，是公开的属性，供程序员使用的；有以_开始的属性，是vue框架内部使用的，不推荐程序员使用；通过VM也可以访问vue实例对象的原型对象上的属性，如：vm.$delete...

2.8Object.defineProperty()方法

（1）是ES5新增的，功能是给对象新增属性，或者设置对象原有的属性。

（2）语法格式：object.defineProperty(给哪个对象新增属性，'新增的这个属性名叫啥'，{给新增的属性设置相关的配置项key:value对}）

（3）第三个参数的配置项：

a、value配置项：给属性指定值。

b、writable配置项：设置该属性的值是否可以被修改。true表示可以修改；false表示不能修改。

c、getter方法配置项：不需要手动调用，当读取属性值的时候，getter方法被自动调用，getter必须有返回值，就代表属性的值。

d、setter方法配置项：不需要手动调用，当修改属性值的时候，setter方法被自动调用，setter方法上是有一个参数，这个参数用于接收传过来的值；

注意：当配置项当中有setter和getter的时候，value和writable配置项都不能存在。

2.9数据代理机制

（1）通过访问代理对象的属性来间接访问目标对象的属性。数据代理机制的实现需要依靠：Object.defineProperty()方法。

（2）ES6新特性：在对象中的函数/方法 :function是可以省略的。

（3）name(...)表示这个属性是代理对象中的属性，当点击(...)时，它会动态的去调用getter方法，来获取这个值。

2.10vue数据代理时对属性名字的要求

（1）vue实例不会给以_和$开始的属性做数据代理；

（2）在vue当中，给data添加数据时，属性名不能以_和$开始的

2.11手写vue框架的数据代理

2.12vue框架源代码解读

（1）增加对首字母的判断，

let firstChar=propertyName.charAt(0)

if(firstChar != '_' && firstChar !='$'){}

（2）vue源码

如果不想使用数据代理的方式，还可以使用vm.$data的方式获取数据。

2.13data也可是一个函数

（1）data fuctions should return an object:data函数应该返回一个对象；

（2）如果是函数的话，必须使用return语句返回{}对象

data:function(){//在对象当中，函数的:function可以省略
    return{
        msg:'Hello Vue!'
        }
    }

（3）什么时候用对象？什么时候用函数？（等你学到组件的时候，自然就明白了）

（4）关于Object.defineProperty中的配置项：enumerable、configurable

a、enumerable:true表示该属性是可以遍历的（可枚举的，可迭代的）；false表示该属性是不可遍历的。

b、configurable:true表示该属性是可以被删除的；false表示该属性是不可以被删除的。

2.14vue的事件绑定

（1）vue的事件绑定需要借助一个指令：（v-指令名：参数名="表达式"）v-on：事件名="表达式"

如：v-on:click="表达式" 表示当发生鼠标单击事件之后，执行表达式；

v-on:keydown="表达式" 表示当发生键盘按下事件之后，执行表达式。

（2）在vue当中，所有事件关联的回调函数，需要在vue实例的配置项methods中进行定义。

（3）v-on指令的简写形式：v-on:click="sayHello" ==>@click="sayHello"

（4）绑定的回调函数，如果不需要传任何参数，小括号()可以省略。

（5）当前发生的事件对象会作为参数传给事件的回调函数：event。

而event.target:事件发生在哪里（按钮上），event.target.innerText:按钮上的文本；

（6）如果回调函数本身需要传入参数，你还需要事件对象，可以使用$event占位符：@click="sayHi('jack',$event)"

2.15关于回调函数中的this

（1）this代表vue实例；

（2）箭头函数中的this是window，箭头函数中没有this，箭头函数中的this是从父级作用域当中继承过来的，对于当前程序来说，父级作用域是全局作用域：window

（3）methods的实现原理：通过VM可以访问methods对象中的方法。

class Vue {
    //定义构造函数
    constructor(options){
        //获取所有的方法名
        Object.keys(options.methods).forEach((methodName,index)=>{
            //给当前的Vue实例扩展一个方法
            this[methodName]=options.methods[methodName]
        })
    }
}

2.16事件当中的事件修饰符

（1）javascr手动调用事件对象的preventDefault()方法，可以阻止事件的默认行为；在Vue当中，这种事件的默认行为可以不采用手动调用DOM的方式来完成，可以使用事件修饰符：prevent。

@click.prevent="yi"

(2).stop：停止事件冒泡，等同于event.stopPropagation()。父元素上绑定的相同类型的事件处理函数就不会被触发。

<div @click="san">
    <div @click="er">
        <button @click.stop="yi">事件冒泡</button>
    </div>
</div>

.prevent ：等同于event.preventDefault()阻止事件的默认行为。

<a href="https://www.baidu.com" @click.prevent="yi">百度</a>

.capture：添加事件监听器时使用事件捕获模式。一种从内到外添加（事件冒泡模式）、一种从外到内添加（事件捕获模式），添加事件监听器时，谁先添加，谁先执行。

<div @click.capture="san">
    <div @click.capture="er">
        <button @click.capture="yi">添加事件监听器的时候采用事件捕获模式</button>
        //执行顺序：san er yi
    </div>
</div>

.self：这个事件如果是“我自己元素”上发生的事件，这个事件不是别人给我传递过来的事件，则执行对应的程序。

<div @click="san">
    //在vue当中，事件修饰符可以多个联合使用，但是不同的顺序是区别的
    <div @click.self.stop="er">
        <button @click="yi">self修饰符</button>
    </div>
</div>

.once：事件自发生一次

.passive：翻译为：顺从/不抵抗。无需等待，直接继续（立即）执行事件的默认行为。与.prevent修饰符是对立的，不可以共存。是@wheel 鼠标滚轮滚动事件的不卡顿解决方案。优先事件的默认行为，不等待程序中间的其他代码执行完成。

2.17按键修饰符

<input type="text" @keyup="getInfo">
//常规方法
methods:{
    getInfo(event){
        //当用户键入回车键的时候，获取用户输入的信息
        if(event.keyCode === 13){
            console.log(event.target.value)
        }
    }
}

//按键修饰符
<input type="text" @keyup.enter="getInfo">

methods:{
    getInfo(event){
      console.log(event.target.value)
    }
}

(1)九个比较常用的：.enter，.tab，.delete(捕获“删除”和“退格”键)，.esc，.space，.up，.down，.left，.right

(2).tab无法触发keyup事件，只能触发keydown事件。

(3)怎么获取某个键的按键修饰符：

第一步：通过event.key获取这个按键的真实名字。

第二步：将这个真实名字以kebab-case风格进行命名。

如：PageDown是真实名字，经过命名之后：page-down

(4)按键修饰符的自定义

通过Vue的全局配置对象config来进行按键修饰符的自定义，

语法规则：Vue.config.keyCodes.按键修饰符的名字=键值

huiche键：<input type="text" @keyup.huiche="getInfo"><br>

//自定义了一个按键修饰符.huiche，代表回车键
Vue.config.keyCodes.huiche=13

(5)系统修饰键：4个比较特殊的键

ctrl、alt、shift、meta

对于keydown事件来说：只要按下ctrl键，keydown事件就会触发。

对于keyup事件来说：需要按下ctrl键，并且加上按下组合键，然后松开组合键之后，keyup事件才能触发。

ctrl键(keydown)<input type="text" @keydown.ctrl="getInfo"><br>
ctrl键(keyup)<input type="text" @keyup.ctrl="getInfo"><br>
ctrl键(keyup)<input type="text" @keydown.ctrl.i="getInfo"><br>

后续参见：

vue学习笔记02