Vue——基础篇

---

基础理解

入门

Vue的前端工程化
模块化（js、css、文件的复用）组件化（html的复用）规范化、自动化（自动构建、部署、测试）
webpack、parcel	前端工程化的解决方案
.html、script、css	全部都变成js代码来执行，实质上都是js。

vue cli和vue-router和 vuex是基础知识

---

Webpack原理

---

webpack

前端项目工程化。优势：代码压缩混淆、处理js的兼容性、性能优化。应用:vue、react。一切皆可作为模块来导入到js中运行

案例,环境vscode，npm：node.js package manager

1、新建英文空白目录，在目录cmd执行【npm init -y】：初始化配置文件package.json

2、新建src目录，新建src\index.html、src\index.js

3、在index.html中输入【!】初始化页面结构。输入【ul>li{这是第$个li}*9】快速生成表格

4、安装jquery包。不用再去网上搜 。根目录cmd运行【npm i jquery -S】。该包会在package.json中有配置记录。-S可省略，也可写--save。-S的包属于dependencies，开发和上线都要用到

5、在index.js导入jquery包【import $ from 'jquery'】

6、index.js实现li隔行变色：                        在index.html中调用【<script src='.\index.js'></script】 $(function(){         $('li:odd').css('background-color','red')        #odd  奇数         $('li:even').css('background-color','pink')     #even  偶数 }) 结果，实现失败，引入webpack，增强代码兼容性。

安装和配置webpack

1、【安装】cmd执行【npm install webpack@5.42.1 webpack-cli@4.7.2 -D】 -D ，也可写--save-dev，属于 devdependiencies，只在开发阶段用到，上线就不用了。辅助项目开发

2、【配置】新建根目录\webpack.config.js module.exports = {         mode:'development'  //开发者模式，相对的production }  --mode优先   所以正式执行npm run build package.json "scripts":{         "dev":"webpack"   //script节点下的脚本，通过npm run执行，如mpm run dev } cmd【执行】npm run dev对webpack进行打包构建，并不会压缩。 以production模式运行，就会压缩。压缩导致命令执行时间变长。

3、重新引入webpack重构的index.js,重构后被更名为dist\main.js【<script src='..\dist\main.js'></script】。 main.js除了index.js全部代码，包括注释，还有webpack自带的js、jquery代码。

【npm run 包】的执行顺序

1、先去看\webpack.config.js的moduls.exports配置:   mode，关于打包入口、输出文件的约定。【webpack.config.js没指定的话】默认入口严格按照src-->index.js     默认输出严格按照dist-->main.js。 webpack.config.js配置修改打包入口、输出文件： node 导入模块   const path = require（‘path’）   __dirname:webpack.config.js所在的目录

【dist】文件总要手动运行【npm run 包】？使用插件

1、webpack-dev-server:类似于node.js的nodemon工具；每当修改保存了源代码自动打包、重构 【npm install webpack-dev-server@3.11.2 -D】-D:只在开发阶段用到的工具 修改package.json "scripts":{         "dev":"webpack  server"   //script节点下的脚本，通过npm run执行，如mpm run dev } 此时要用http协议去看效果，访问localhost:8080,直接打开html是file协议。 dist下的内容被打包存储在内存中了，该插件实现了更快，更高效的打包重构。 但是要修改【<script src='/main.js'></script】,加载在内存中的js

访问localhost:8080后不能直接看首页？使用插件

2、html-webpack-plugin:自定制index.html的内容。模板引擎插件 【npm install html-webpack-plugin@5.3.2 -D】，它可以将index.html复制一份到根目录，该操作只在将文件读到内存中时，在内存中生成，还会自动引入打包重构后内存中的js文件。每次修改保存后，直接修改内存文件。 修改webpack.config.js

嫌配置太麻烦？但每次又想用这些插件。

Vue_CLI脚手架可以帮我们完成

cmd执行【npm run 包】后想自动访问浏览器？配置一下即可

修改webpack.config.js module.exprots={         devServer:{                 opent=true,                 host=127.0.0.0,                 port=80         } }

webpack默认只能打包简单低级js文件？用loader

如打包css文件：【npm i style-loader@3.0.0 css-loader@5.2.6 -D】，修改webpack.config.js 新增配置内容： module:{         rules:[                 {test：/\.css$/,use:['style-loader','css-loader']} ,   //从后往前,css-loader先处理，style-loader后处理         ] }

如引入less文件：【npm i less-loader@10.0.1 less@4.1.1 -D】;module.rules里新增： {test：/\.less$/,use:['style-loader','css-loader','less-loader']},

如引入图片：<img src='logo.jpg‘>  or  <img src='base64字符串'> base64字符串比较快，但对于大图片来说会增大体积，不合适。 【npm i url-loader@4.1.1 file-loader@6.2.0 -D】;module.rules里新增：一个loader也可以把[]换为str 【{test：/\.jpg|png|gifs$/,use:['url-loader?limit=22229&outputPath=images']},】，小于limit大小的图片，会被转为base64图片。打包后会放在images目录中

如打包高级js语句如装饰器：【npm i babel-loader@8.2.2 @babel/core@7.14.6 @babel/plugin-proposal-decorators@7.14.5 -D】exclude:排除项   node_modules:第三方包 module.rules里新增：【{test：/\.js$/,use:'babel-loader',exclude:/node_modules/},】，  babel-loader会先加载插件。

import  xxx  from   xxx语法

import a  from  path 导入path的文件，作为变量a。只导入可以直接import  path就好，如import $ from jquery

发布上线

npm run build   把dist压缩后放到后端。 --mode优先级更高

每次打包都要手动删除dist目录？用插件clean-webpack-plugin

1、可以去官方查看说明文档 2、npm intall clean-webpack-plugin -D 3、配置文件

Source Map

bug在打包前后的位置关系是不一样的。用source map解决。  在实际开发的时候建议设置nosources-source-map（只能看到正确行号，不能看到源代码）或直接关闭                    不推荐设置source-map（完全正确的行号、源代码）

path,在webpack.config.js配置某个字符的意思、别名

---

 Vue框架的基础入门（2.x主流，3.x是未来）

---

认识vue

两个特性： 数据驱动视图           双向数据绑定 数据驱动视图：vue监听页面数据变化，自动渲染，单向数据-->页面的单向数据绑定 双向数据绑定：在网页中form负责采集数据，ajax负责绑定数据。

MVVM是实现 数据驱动视图的双向数据绑定核心思想，它将每一个html页面分成model、view、viewmodel： model：数据源  vieW：DOM结构   ViewModel：vue实例，MVVM核心

使用步骤

①导入vue.js的script脚本 <script src='./vue.js'></script> ②在页面中声明一个要被vue控制的DOM区域  <div id='app'>{{username}}</div> ③创建vm实例对象 ，此处的【vm】指的是【mvvm】模型中的【vm】——ViewModel，vue实例，【mvvm】核心。 const vm=new Vue({         el:'#app',         data:{                 username:'zhangsan',                 gender:'女',                 info:'<h4 style="color:red">欢迎学习</h4>'         }，         methods：{                 add（）{                         。。。                 }         } })         ④渲染数据

vue的指令

内容渲染指令 ①v-text          <p v-text='username'></p> <p v-text='gender'></p>         会覆盖标签内原有内容 ②插值表达式        {{}}        <p v-text='gender'>性别：{{gender}}</p> ③v-html        <div v-html='info'></div>  渲染html标签

属性绑定指令：【:属性】   简写：        <imput type='text'   :placeholder='tips'>          <img    :src='photo'>                       <p :color="  'red'  "></p>  全写v-bind         <imput type='text' v-bind:placeholder='tips'>          <img v-bind:src='photo'>

事件绑定指令@     全写【v-on:】   <button @click='add'></button>  @click   @keyup  @input   对应于    onclick  onkeyup    oninput

在【methods】中修改【data】中的【变量】 由于【data】中的【变量】，是【Vue】实例对象的属性。 此处【const vm=new Vue({el:'#app',data：{count:0}，methods：{}})】==Vue实例对象的构造函数。所以，我们可以直接通过vm.count+=1修改其属性。 此处vm就是self，在前端seff我们一般用this代表自己。所以在构造函数里，我们用this.count+=1来修改属性。 举一反三，我们是不是可以通过，vm.add来操作vm的方法呢？不知道。

构造函数中【methods】的参数传递

<button @click='add(2)'></button> methods：{       add（n）{            this.count+=n        } } —————————————————————————————— <button @click='add'></button> methods：{       add（n）{            this.count+=n            console.log(n)  //n：mouseevent（事件对象）             if (this.count%2==0){                         n.target.style.backgroud='red'              }esle{                         n.target.style.backgroud=''               }        } } 问题:既想传参，又想获取默认参数mouseevent： <button @click='add（2，$event）'></button> methods：{       add（n,e）{            this.count+=n    //n:   2            console.log(e)  //e：mouseevent（事件对象）             if (this.count%2==0){                         n.target.style.backgroud='red'              }esle{                         n.target.style.backgroud=''               }        } }

事件修饰符

【Vue】中： 【旧方法】：

按键修饰符

双向数据绑定指令v-model

【v-model】，它允许我们dom中修改script中的数据。 【v-model】只对表单元素，有value属性的标签起作用，它会覆盖原有的value属性。

v-model指令的修饰符

修饰符可以覆盖imput输入框的type属性。  .lazy可以让imput输入框失去光标后再更新value 问题：多个修饰符叠加使用可以吗，v-model.number.trim.lazy可以吗？

条件渲染指令

v-for

需要用到索引时，引入【（）】 title属性可以定义标签的注释，当鼠标hover时显示注释

小结

过滤器：vue3.0+不再使用，仅vue2.0可用

就近原则，私有过滤器优先级高于全局过滤器。 私有过滤器 使用capitalize函数对message进行处理。 全局过滤器

day.js第三方包，处理日期时间格式

npm install  dayjs  --S

简单的表达式的使用 使用【;】进行属性绑定时，可以利用【data】中的变量，变量不需要【单引号】包裹，字符串需要【单引号】包裹。如下【7】

label的for属性

for属性的添加，使得允许我们点击label，也相当于点击了checkbox输入框。

list的操作

alert（‘提示’）：弹窗提示

watch侦听器

方法格式的侦听器： 侦听数据变化，执行自定义方法。常用于表单元素数据验证。

对象格式的侦听器：

​​​​​​​

 计算属性

 

 

 

 axios

 一个专注于网络请求的库

 

 单页面应用程序

 

 vue-cli

 安装:

npm install -g @vue/cli

cmd>vue -v检查是否成功安装

创建项目：

cmd>vue.creat myproject

 建议选择第三个，自定义预设preset。

 安装过程中不小心点中黑窗口，导致暂停。鼠标点击黑窗口最上方，按下control+c即可继续。

 使用vscode打开项目。

1、右键项目，选择用vscode打开

2、将项目文件夹拖到vscode的图标。

 

 vue组件

 

 template中根元素应该是唯一的<div>  style默认是css样式，加上lang支持其它语法

 调用jquery

style属性

---