vue学习笔记

Vue 学习笔记

1.前端工程化

1.1. 现代前端开发的形式
现代前端开发一般遵循四个化：

模块化：对项目中的 js 文件，css 文件，资源文件模块化
组件化：复用现有的 UI 结构、样式、行为
规范化：目录结构规范、文档规范、接口规范、编码规范
自动化：自动化构建、自动化测试、自动化部署
1.2. 什么是前端工程化
前端工程化是在企业级开发中，将前端所需要的技术、工具 经验、流程等进行规范化，标准化。（好处：可以让前端自成体系）

2.webpack

2.1. webpack 是什么
webpack 是前端工程化的一个具体解决方案 主要功能：提供了又好的前端模块化开发支持，以及代码压缩混淆、处理浏览器对 js 兼容性、性能优化等问题

2.2. 安装 webpack
使用命令：npm install webpack@5.42.1 webpack-cli@4.7.2 -D
-D 表示：–save-dev
-S 表示：–save
2.3. 使用 webpack
在项目中创建一个 webpack.config.json 文件，然后配置 module.exports = { mode:‘development’ //表示开发阶段 production 表示上线阶段 }
然后在 package.json 文件中 script 节点下新增 dev 脚本如下： “script”:{ dev:‘webpack’ }
运行命令 npm run dev 进行包构建
2.4. 自定义 webpack 文件输入输出
如：const path = require(‘path’) module.exports = { mode:‘’, //path 是 node 中内置路径模块 dirname 表示当前根目录 表示将 src 下面的 index.js 文件转换成 ES5 及以下版本，让浏览器兼容 entry:path.join(dirname,‘./src/index.js’) output:{ //文件输出 表示将编译后的 index.js 文件放到根目录下的 dist 目录中 path:path.join(__dirname,‘./dist’) //取名为 bundle.js filename:‘bundle.js’ } }

2.5. 使用 webpack-dev-server 插件
插件作用：自动监听代码变化，每当修改了源代码，webpack 会自动进行项目的打包和构建
2.6. 使用 html-webpack-plugin 插件
插件作用：webpack 中 html 插件，类似与一个模板引擎，可以通过插件自定制 index.html 页面
因为在一开始访问项目时，出现在浏览器中的页面是项目目录结构，通过这个插件映射到 src 的首页 index.html
使用插件代码： const HtmlPlugin = require(‘html-webpack-plugin’) const htmlPlugin = new HtmlPlugin() 在 module.exports = { plugins:[htmlPlugin] }
2.7. devServer 作用
在 webpack 配置文件中进行配置 devServer:{ open:true //自动打开浏览器 host:‘127.0.0.1’ //配置项目 ip port:80 //配置项目端口号 }

2.8. webpack 中的 Loader(加载器)
在 webpack 中只能打包默认的.js 文件后缀结尾的模块，其他模块需要使用 loader
安装：npm install style-laoder@3.0.0 css-loader@5.2.6 -D

3.什么是 vue

vue 是一个构建用户界面的框架
构建用户界面：就是填充数据（数据驱动视图）
框架：现成的解决方案

4.vue 两大特性

数据驱动视图
数据双向绑定

5.vue 内置指令

5.1. 指令概念
vue 指令是 vue 官方提供的辅助开发者开发的模板语法，用于辅助页面渲染结构
5.2. 常见内置指令
5.2.1. 内容渲染指令
v-text:将内容渲染到页面，在属性中使用（缺点是会覆盖元素原有内容）
{{}}：插值表达式，弥补了 v-text 的缺点，用在元素内容位置
v-html：用在需要将 html 标签渲染到页面的内容中
5.2.2. 属性绑定指令
v-bind:属性动态绑定指令，可以简写为:
tips 为 data 中变量 tips：‘用户名不能为空’
5.2.3. 事件绑定指令
v-on:动态绑定事件指令，可以简写为@
5.2.4. 双向数据绑定指令
v-model:数据双向绑定指令
双向绑定常用修饰符：v-model.number 确保输入为数字；v-model.trim 去除收尾空格；v-model.lazy 在 change 时改变数据而非 input 时
5.2.5. 条件渲染指令
v-if:会动态创建元素和销毁元素 可以搭配 v-else-if,v-else 使用
v-show:通过改变元素 display 属性进行元素状态的改变
当元素需要经常进行状态切换，建议使用 v-show,能够提高性能，节省开销
当元素只需要很少次数的状态改变，可以使用 v-if
5.2.6. 循环渲染指令
v-for

6.vue 过滤器

vue 中提供 Filters 过滤器，只要用于文本格式化
{{data | dataFomat}} 在插值表达式中使用管道符分割，dataFomat 就是过滤器函数
在属性动态绑定中使用 div v-bind:id=“martin | dataFormat” div
6.1. 过滤器分类
私有过滤器 在与 data 同级的地方，使用:

var vm=new Vue({
el: ‘#app’,
data: {
name:‘martin’
},
filters:{
dataFormat:function (val) {
return val.toUpperCase()
}
}
})
全局过滤器 定义在全局中：

Vue.filter(‘dataFormat’,function (val) {
return val.toUpperCase();
});
6.2. 串联过滤器
{{name | filterA | filterB }}
先将 name 的值放到 filterA 中进行过滤，再将第一次的过滤结果放到第二个过滤器中进行过滤

7.侦听器 watch

7.1. 什么是 watch 侦听器
watch 侦听器是允许开发者监视数据变化，从而对数据变化的做出特定的操作
7.2. 侦听器方式
方法方式
const vm = new Vue({
el:‘#app’,
data:{username:‘’},
watch:{
//监听username值得变化
//newVal 是变化的后的新值 oldVal是变化前的旧值
username(newVal,oldVal){
//当值变化做出一些操，如用户注册，用户输入用户名，输入框值变化后立即发起请求，判断这个用户名是否被注册过
}
}
})
对象格式
const vm = new Vue({
el:‘#app’,
data:{username:‘’},
watch:{
username:{
handler(newVal){
做出操作
},
immediate:true //开启第一次进入页面就触发侦听
deep:true //开启深度侦听
}
}
})

8.计算属性

8.1. 什么是计算属性
计算属性是通过一系列计算后得到的一个属性值，这个动态计算的属性值可以被模板字结构和 methods 方法使用
8.2. 使用方式
const vm = new Vue({
el:‘#app’,
data:{username:‘’},
computed:{
rgb(){
teturn rgb{${g},${g},${b}}
}

}
})
8.3. 计算属性特点
使用方式是方法方式
只要当计算属性依赖的值发生变化，计算属性就会从新计算
可以在模板结构和 methods 中使用

9.axios

9.1. 什么是 axois
axois 是一款专注于网络请求的库
后续补充

10.单页面应用程序

10.1. 什么是单页面应用程序
就是整个网站只有一个单独 html 页面，所有的功能都在这个页面内完成

11.vue-cli

11.1. 什么是 vue-cli
vue-cli 简化了程序员基于 webpack 创建工程化 vue 项目的过程，是一个快速搭建的脚手架
安装 vue-cli
使用 vue-cli 创建项目 vue create 项目名称
11.2. 注意点
在 vue-cli 项目中的 main.js 文件中的$mount(‘#app’)就相当于 el:‘#app’

12.vue 组件

把页面上可重用的 UI 结构封装复用

12.1. vue 组件组成部分
template 组件的模板
script 组件的行为
style 组件样式
12.2. 组建的使用
使用 import 导入需要引入的组件 import Left from ‘…/…/Left’
在父组件中使用 components 节点进行组件注册
在页面中通过标签形式使用组件
12.3. 组件的分类
私有组件：在那个父组件中注册的只能在这个组件中使用
全局组件：在 vue 中 main.js 中注册的组件
import Count from ‘…/…/Count’
Vue.component(‘myCount’,Count)
然后在其他组件中使用
12.4. 组件之间的关系
父子关系
兄弟关系
12.5. 组件之间的通信
父传子

<子组件 :id=“id”></子组件>

---

props:{
id:{
defalut:0,
type:number
}
}

子传父
使用自定义事件传递

this.$emit(‘change’,需要传递的值)

---

<子组件 @change=“getChange”></子组件>
methods:{
getChange(val){
this.username = val
}
}
兄弟之间传值
通过evnetBus

• 定义一个数据发送方
• 定义一个数据接收方
• 定义一个eventBus

inport Vue from ‘vue’

export defalut new Vue

13.vue 组件生命周期

13.1. 什么是组件生命周期
生命周期是指一个组件从创建-运行-销毁的过程，强调的是一个时间段
13.2. 生命周期函数
beforeCreted:此时只是创建了生命周期函数和初始化事件，props,data,methods 都为创建
created:此时 props，data,methods 都已经创完成，组件处于可用阶段，但模板结构尚未生成
beforeMount:准备将渲染好的模板结构渲染到浏览器中，但还没有 dom 结构
mounted:将内存中编译好的 html 模板结构替换 el 挂载的 DOM 元素
beforeUpdate:准备将更新数据从新渲染到页面中，但尚未渲染
updated:将更新数据从新渲染到 dom 结构中
beforeDestory:准备销毁组件
Destory:组件已经销毁

14.使用 ref

14.1. 使用 ref 引用 DOM 元素
ref 用来赋值开发者在不依赖 jquery 的情况下，获取 DOM 元素或者组件引用
在 vue 实列中都默认存储着一个函数$refs对象，里面存储着对应DOM元素或者组件引用，默认情况下，组件的$refs 对象为空
< h1 ref=“myh1”> < /h1>
this.$refs.myh1.style.backgroundColor{=}^{\prime }red14.2.使用ref引用组件引入一个组件one/one在组件上<oneref="comLeft"></one>this.$refs.comLeft.count() //可以在父组件中使用子组件方法 count()为子组件方法

15.了解 this.$nextTick 的应用场景

this.$nextTick(cb) cb 是一个回调函数，将函数执行延迟到 DOM 从新渲染完毕之后
是一个微任务
16.数组方法拓展
从数组中找元素用 some
arr.some((item,index)=>{
if(item == ‘元素内容’)
return true
})
every 循环，判断是否被全部选中
result = arr.every(item=>item.sate)
如果有一项不是true,则返回false
数组 reduce 方法
把购物车中已经勾选的商品总价累加起来
arr.fliter(item=>item.state).reduce((amt,item)=>{
return amt += item.price * item.count
},0) 初始值为0
以上方法可以通过购物车案列进行加强练习