VUE课堂笔记

前端工程化

前端工程化指的是:在企业级的前端项目开发中,把前端开发所需的工具、技术、流程、经验等进行规范化、标准化。

webpack

概念

webpack是前端项目工程化的具体解决方案。

主要功能

它提供了友好的前端模块化开发支持,以及代码压缩混淆、处理浏览器端JavaSctipt的兼容性,性能优化等强大的功能。

基本使用

  • 新建项目空白目录,并运行 npm init –y 命令,初始化包管理配置文件 package.json // -y使用默认参数
  • 新建 src 源代码目录
  • 新建 src -> index.html 首页和 src -> index.js 脚本文件
  • 初始化首页基本的结构
  • 运行 npm install jquery –S 命令,安装 jQuery //-S 写入到 dependencies 对象
  • 通过 ES6 模块化的方式导入 jQuery,实现列表隔行变色效果

在项目中安装webpack

1
npm install webpack@5.42.1 webpack-cli@4.7.2 -D  //-D 开发环境

在项目中配置webpack

1
2
3
4
在项目根目录中,创建名为 webpack.config.js 的 webpack 配置文件,并初始化如下的基本配置:
module.exports = {
mode:'development' //mode用来指定构建模式,可选值有development和production
}
1
2
3
4
在 package.json 的 scripts 节点下,新增 dev 脚本如下:
"Scripts":{
"dev":"webpack" //script节点下的脚本,可以通过npm run 执行
}

webpack的基本使用

  1. mode的可选值

    img

  2. webpack.config.js文件的作用

    在这里插入图片描述

  3. webpack的默认约定在这里插入图片描述

  4. 自定义打包的入口与出口

    1
    2
    3
    4
    5
    6
    7
    在webpack.config.js配置文件中,通过entry节点指定打包的入口。通过output节点指定打包的出口。
    代码如下:
    const path = require('path')
    module.exports = {
    entry:path.join(__dirname,'./src/index.js'),
    filename:'bundle.js'
    }

    CLASS01

ES6学习

变量提升

只会提升变量的声明,不会提升变量的赋值

函数则会提升函数体

在这里插入图片描述

对象的定义

1
2
3
4
5
6
7
var person = {
name = "靓仔",
age = 21,
say(){
靓仔你好!
}
}

指针指向

普通函数调用则指向全局对象window

对象函数则指向对象

var、let与const关键字

var是定义全局变量,拥有变量提升的特性

let是定义局部变量,不存在变量提升,存在暂时性死区特性

const是定义常量且具有块级作用域,赋值之后无法改变,对于复杂数据类型来说,虽然不能重新赋值,但是可以更改内部的值

区别:

  1. 变量的作用域范围不同;

  2. 使用var声明的变量存在变量提升;

  3. 使用var和let声明的变量可以更改变量的值,使用const声明的变量不能更改其值。

解构赋值

解构表示对数据结构进行分解,赋值是指将某一数值赋给变量的过程;即按照一一对应的方式,从数组或者对象中提取值,然后将提取的值赋给变量。

箭头函数

箭头函数以小括号开头,在小括号中可以放置参数,小括号后面要跟上箭头(=>),箭头后面要写一个大括号来表示函数体,这是箭头函数的固定语法,通常会把箭头函数赋值给一个变量,变量名就是函数名,然后通过变量名进行调用。

箭头函数中的this关键字

  1. 在ES6之前,JavaScript中的this关键字指向的对象是在运行时基于函数的执行环境绑定的,在全局函数中,this关键字指向的是window;当函数被作为某个对象的方法调用时,this指向的是那个对象。

  2. 在ES6中,箭头函数不绑定this关键字,它没有自己的this关键字,如果在箭头函数中使用this关键字,那么this指向的是箭头函数定义位置的上下文,即箭头函数在哪,this就指向谁

基础指令

内容渲染

  • v-text

    v-text 指令会覆盖元素内默认的值。

  • 插值表达式

  • v-html

    渲染html标签

属性绑定

  • v-bind

    可简写为:

事件绑定

  • v-on

    • 通过v-on 绑定的事件处理函数,需要在methods 节点中进行声明

    • 可简写为@

    • 在原生的DOM 事件绑定中,可以在事件处理函数的形参处,接收事件参数对象event。同理,在v-on 指令(简写为@ )所绑定的事件处理函数中,同样可以接收到事件参数对象event。

    • $event 是vue 提供的特殊变量,用来表示原生的事件参数对象event。$event 可以解决事件参数对象event 被覆盖的问题。

双向绑定

  • v-model

条件绑定

  • v-if

    动态地创建或移除DOM 元素,从而控制元素在页面上的显示与隐藏;

  • v-show

    会动态为元素添加或移除style=”display: none;” 样式,从而控制元素的显示与隐藏

  • v-if有更高的切换开销,而v-show有更高的初始渲染开销。因此:如果需要非常频繁地切换,则使用v-show 较好,如果在运行时条件很少改变,则使用v-if 较好

列表渲染

  • v-for

作业

复习html+css

背10个单词

  • 版权声明: 本博客所有文章除特别声明外,著作权归作者所有。转载请注明出处!

扫一扫,分享到微信

微信分享二维码
  • Copyrights © 2021-2022 John Doe
  • 访问人数: | 浏览次数:

请我喝瓶快乐水吧~