vue基本知识(111期6天)
2021-04-30 08:45:32 0 举报AI智能生成
登录查看完整内容
前端框架vue知识点
作者其他创作
大纲/内容
vue基础
基础入门
vue实例
const vm = new Vue({})
vuejs网课网址
https://cdn.jsdelivr.net/npm/vue/dist/vue.js
https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.js
vue配置项
el:用来指定vue实例管理的容器
data:{}
本质是个函数
返回时必须有return
this.计算属性名
计算属性有缓存
filters过滤器
作用:进行格式转换
filters: { 函数}
使用格式
不带参数{{msg|过滤器的名字}}
带参数{{msg|过滤器的名字(参数)}}
串联{{msg|过滤器的名字1|过滤器的名字2}}
watch侦听器
作用
监听某个数据项是否发生了变化。一旦变化了，它就会自动执行
格式
案例
关键字筛选，重发请求
与计算属性的区别
共同点
如果它们都侦听（依赖）同一个数据项，当数据项变化时，会去执行函数
不同点
计算属性:本质是一个函数。如果这个函数中依赖的数据项变化时，这个函数就会重新执行，它必须要有返回结果。
本质是一个函数。当侦听到某个数据变化时，这个函数就会重新执行，但不一定是依赖这个数据直接得到你想要的数。从函数内的代码逻辑来说：侦听器的逻辑一般会更加复杂。侦听器的返回值是没有意义的。
优先级
计算属性 > 侦听器
created()钩子函数
执行机制
做什么
通过ajax获取数据
例子
插值表达式
{{}}
相当于console.log('XXX')
能写各种表达式
不能写语句var a = 1;
输出数据项的值
数据渲染指令
v-for指令
功能:批量快速生成列表结构
v-text和v-html指令
v-show和v-if指令
功能:标签的显示与隐藏
区别
v-show通过display:none来控制隐藏
v-if动态创建元素或者移除元素
与js中的选择结构是一致的
v-bind指令
作用:动态绑定标签上的属性的值
v-bind:class
:class
绑定三元表达式
:class="num>60>'pass':'fail'"
绑定对象
绑定数组
v-bind:style
:style
绑定对象形式
绑定数组形式
事件绑定指令
v-on简写@
格式:
@click="salary+=100"
@click=hAdd()
@click=hAdd(100)
@常与methods搭配在一起
methods: { 函数名}
methods结尾无需return
事件修饰符
@事件名.修饰符1.修饰符2="回调"
作用:
.stop
阻止冒泡
.prevent
阻止默认行为
@click.stop.prevent
.once
只执行一次
.self
v-model双向绑定指令
data中最初数据渲染到表单元素上
输入框 :value
@input或者@XXX
在各类表单元素上的作用
输入框input
文本框textarea
复选框checkbox
单选框radio
下拉框select
v-model的修饰符
lazy
<input v-model.lazy="msg">
number
将用户输入的值转换为数值型
<input v-model.number="age">
trim
自动过滤用户输入的首尾空白字符
<input v-model.trim="msg">
自定义指令directive
全局自定义指令
局部自定义指令
directives: {focus: {inserted(el){XXX}} }
补充
v-focus
通用技能
json-server
全局安装
npm i json-server -g
创建db.json数据
启动接口服务
json-server db.json
测试
http://localhost:3000/assets
修改测试地址
json-server db.json --port 3001
axios
下载地址
https://unpkg.com/axios/dist/axios.min.js
https://cdn.bootcdn.net/ajax/libs/axios/0.20.0/axios.min.js
文档地址
http://www.axios-js.com/docs/
完整写法
简写写法
组件component
理解组件
组件是自定义标签
本质
定义
<组件名1></组件名1>
<my-com></my-com>
全局组件
所有的vue实例都可以使用
局部组件
只能当前的vue实例中使用
组件配置对象说明
- 不包含 el 选项，el是指定vue实例（或者称为根组件）管理的视图容器。- 通过 template选项，指定html结构容器，每个组件模板有且只有一个根元素。- data数据项必须是一个函数，通过它的返回值来设置数据。
父子之间通信
父传子
原则:你情我愿
数据
父传给子
自定义属性名
子要接收
props
如果父组件中修改了数据，则子组件中接收到的也会同步修改
插槽slot
定义格式
template: ` <div>\t\t\t其它元素.... \t<slot>默认插槽</slot>\t\t\t其它元素....\t\t\t<slot name="插槽1">具名插槽</slot>\t\t\t其它元素...\t\t\t<slot name="插槽2"></slot> </div>`
<my-com1 tit="abc"> <!-- template就是逻辑上的一个容器， 不会被渲染成真实的dom --> <template slot="插槽名字"> <ul class="a2"> <li>这里是从父组件传入的结构</li> </ul> <p>xxxxx</p> </template> </my-com1>
父子组件传结构
子传父
原理
自定义时间+$emit
步骤
父组件
<my-com @自定义事件名1="定义在父组件中的回调"></my-com>
子组件
建议事件名采用烤串格式
this.$emit("a-b-c")
子传父原理图
分支主题
路由router
#
锚点链接(非路由称锚点): #
路由中称哈希： hash值
特点
当地址栏中的hash变化时，会触发一个hashchange的事件；
function hashChange() { // location.hash： 自动获取地址栏中的hash值 if(location.hash === '#/index') { document.getElementById('content').innerHTML = "我的主页" } else if(location.hash === '#/myfrend') { document.getElementById('content').innerHTML = "朋友" } else if(location.hash === '#/music') { document.getElementById('content').innerHTML = "音乐" } }
hashchange 事件用来监听hash值的变化
hash的改变也会记录到浏览历史中，通过回退和前进可以切换业务场景
location.hash： 自动获取地址栏中的hash值
它并不会导致浏览器重发请求
vue-router网课网址
https://cdn.bootcss.com/vue-router/3.1.3/vue-router.min.js
不刷新页面的情况下，根据路由地址不同，显示不同的内容
SPA
单页面应用程序，简称SPA（single page application）一个系统上的所有功能在一个页面上实现。
优点：整体不刷新页面，用户体验更好。
缺点：首次加载会比较慢一点。
使用vue-router
1.导入插件vue-router.js
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.js"></script># 先下载到本地，再引用<script src="./vue-router.min.js"></script># 直接引用<script src="https://cdn.bootcss.com/vue-router/3.1.3/vue-router.min.js"></script>
2.创建VueRouter实例
初始化vue-router插件
基本格式
3.挂载到vue实例
4.设置路由出口
在vue的模板，添加一个router-view组件，用它来指定当前路由对应组件渲染的位置。
<!-- 渲染路由对应的组件 router-view承载路由对应的组件的--><router-view></router-view>
5.路由导航
通过router-link来进行路由跳转。
<!-- 写路由链接 不会使用a标签 使用router-link组件 --><nav> <!-- 组件默认解析的是a标签 to属性跳转的地址，不需要带上# --> <router-link to="/">主页</router-link> <router-link to="/news">新闻</router-link> <router-link to="/sports">运动</router-link></nav>
<router-link to="地址">
router-link组件会被vue解析成a标签，但不能直接通过a标签来跳转。
如果当前路由被激活会添加特殊的类名：
router-link-exact-active router-link-active
动态路由
同一个组件，根据传入参数不同，显示不同的内容。
// 例如：大事件项目前中的新闻详情页。 // localhost:3000/index.html#/detail/100 ----> 显示编号为100的新闻 // localhost:3000/index.html#/detail/101 ----> 显示编号为101的新闻
1.定义路由规则
path:'/detail/:形参名'
2.跳转 `to:/detail/实参`
3. 在组件中获取当前的参数值
// this.$route.params.形参 // - $route 引入了vueRouter插件之后， vue组件内部通过 $route 就可以直接来访问当前的组件对象 // - $route这个对象有很多属性，params用来保存当前传入动态路由的参数值
总结
数据：模板 {{$route.params.id}} 组件 this.$route.params.id
跳转及传参
声明式导航
<router-link to="地址"></router-link>
传参有两种方式:
查询传参 /aricle?id=1001
路径传参 /article/1001
获取传参数的方式: （根据传参不同，获取参数也不同
查询传参： this.$route.query.id
路径传参：this.$route.params.id
普通字符串，不带参数。
<router-link to="/list"></router-link>
普通字符串，进行带参数的跳转。
<!-- 路径传参 路由规则{path:'/article/:id'}--><router-link to="/article/10001"></router-link><!-- 查询传参 路由规则{path:'/article'}--><router-link to="/article?id=10001"></router-link>
编程式导航
this.$router.push('地址')
路由传参
this.$router.push('/detail/100')
接收：this.$route.params.id
查询传参
this.$router.push('/detail?a=100')
接收:this.$route.query.a
路由重定向redirect
路由规则对象中 提供了一个选项：redirect 配置重定向的地址即可。
生命周期函数
beforeCreate
创建阶段的第一个生命周期函数
备注
created
(重要)创建阶段的第二个生命周期函数
beforeMount
创建阶段的第三个生命周期函数
mounted
beforeUpdate
运行阶段的生命周期函数
updated
beforeDestroy
destroyed
webpack一款打包工具
将源代码转为目标代码
在前端三大框架中都集成webpack
在传统项目中引入并使用webpack
1.初始化项目
npm init -y
2.在项目中安装webpack(采用本地安装)
npm i XXXX -g # 全局安装npm i xxxx # 本地安装 不加-g
3.安装命令
$ npm i webpack webpack-cli -D------+ webpack-cli@4.1.0+ webpack@5.1.3
4.检查是否安装成功
# 方式一：node_modules\\.bin\\webpack -v# 方式二：npx webpack -v
注意
- 由于webpack并不是全局安装的，所以并不能直接使用webpack -v来做检验。- npx是npm5.2之后提供的新功能。它在运行时会在node_modules/.bin中去检查命令是否存在。
webpack看来，一切皆模块。它自己只能处理.js，其它的要依赖于loader来处理
devtool-source map
此选项控制是否生成，以及如何生成 source map
使用
webpack4版本用的是生产模式
https://v4.webpack.docschina.org/configuration/devtool/
webpack5版本用的是开发模式
https://webpack.docschina.org/configuration/devtool/
在开发阶段可以设置：devtool:'cheap-module-eval-source-map'
配置
默认配置文件名
webpack.config.js
基本配置
mode
设置打包方式
两种
开产:development
生产:production
入口
默认入口文件的地址
src/index.js
修改
entry: 文件的地址
出口
默认出口文件的地址
dist/main.js
devtool
是以哪种方式生成sourcemap文件
soutce map文件:
分界线
在使用webpack之前： 传统开发
没有源文件，目标文件的概念
无法采用模块化开发
一个.html中引入多个js文件， 多个css文件
直接修改代码，立即查看结果
在使用webpack之后，工程化开发
修改源文件， 通过 webpack打包 ， 得到目标文件
所有的资源全是在入口文件中引入的
css
指定配置文件
npx webpack --config webpack配置文件
配置文件是可以自行指定的，不一定非要要叫webpack.config.js。
简化打包命令
可以在package.json中添加script命令来快速启动webpack
Windows Powershell中的命令
npm i
安装所有package.json的插件
npx webpack
零配置打包
npm run build相当于npx webpack --config webpack.config.js
npm run dev
npm run dev相当于npx webpack --config webpack.build.js
npx webpack-dev-server
loader
css-loader
安装loader包:npm i css-loader -D
配置webpack.config.js中的module
注意备注中的use: 从右往左来执行的
style-loader
安装loader包:npm i style-loader -D
less
安装loader包:npm i less-loader less -D
自动添加css样式前缀
postcss autoprofixer
安装loader包:npm i postcss postcss-loader autoprefixer -D
单独设置 postcss.config.js
配置webpack.config.js中的module
file-loader
file-loader-处理字体文件
安装loader包:npm i file-loader -D
url-loader
url-loader处理图片
安装loader包:npm i url-loader -D
babel-loader
babel-loader处理js降级问题
安装loader包:npm i babel-loader @babel/core @babel/preset-env -D
vue-loader
vue-loader处理单文件组件
安装
开发依赖
详见
生产依赖
npm i vue
配置webpack.config.js
打包
相当于npx webpack --config webpack.config.js
plugin
学习方法
mini-css-extract-plugin
功能
把css代码提取到一个独立的文件中
下载npm install mini-css-extract-plugin -D
npx webpack --config webpack.config.js
html-webpack-plugin
把我们自已写的.html文件复制到指定打包出口目录下，并自动引入相关的资源代码
下载npm i html-webpack-plugin -D
注意:需要使用这个版本
npm i html-weboack-plugin@4.5.0 -D
打包测试
clean-webpack-plugin
在生成打包文件之前，把出口目录清空掉。
下载npm i clean-webpack-plugin -D
代码压缩优化
打包方式设置成生产模式
mode:'production'
对css进行压缩
下载npm i -D optimize-css-assets-webpack-plugin
webpack实时打包
webpack-dev-server
目标
实现实时打包预览效果。当我们修改了代码时，立即运行打包命令，并显示效果。
npm i webpack-dev-server -D
webpack.config.js中
package.json中
等于npx webpack-dev-server
它要怎么学？
照着讲义自己复制粘贴配置
不需要你去记配置名，参数......
ES6模块化
参考网址
ES6模块化--与vue无关
超链接
在浏览器的环境下学习ES6的模块化
模块化
让一个.js文件(A.js)中可以引用另一个.js文件(B.js)中的代码
模块化的规范
commonjs规范
nodejs中是commonjs规范
es6规范
ECMA规范
nodejs规范CommonJS
导出
module.exports = '导出的内容'
或者exports.xxx = '导出的内容'
导入
const path = require('path')
ES5模块化
默认导入和导出
export default 导出内容
import 变量名 from 'js模块路径'
按需导入和导出
export const 成员变量名1 = '导出内容1'
export const 成员变量名2 = '导出内容2'
import {成员变量名1} from 'js模块路径'
整体导入
// 按需导入（全部成员导入）import * as all from './module-b'console.log(all) // 收集了所有成员的变量（对象）
导入导出重命名
export {xxx as 新名字}import {xxx as 新名字}
Vue单文件组件
.vue后缀的文件表示一个组件
建议使用小驼峰命名法
app.vue;header.vue;myheader.vue
它需要vue-loader和webpack支持
结构
template
视图
script
组件定义中除template之后的其他配置项
有一个export default{}
style
样式
使用方式
引用
导入组件
import 大驼峰命名 from './XXXX'
注册组件
export default { components:{组件的大驼峰名}}
使用组件
<template> <烤串-烤串 格式/></template>
webpack+vue-loader搭建开发vue的环境
环境搭建
npm init --yes
安装package.json包
npm i 各种包
本案例
配置webpack.config.js
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet">
通过入口文件main.js去导入各个模块
例如
路由设置
下载路由插件
npm i vue-router
路由配置规则
Vue.use(VueRouter)
创建vueRouter实例
挂载到vue实例
设置路由出口
路由导航
动态路由跳转及传递
当前选项中的路径对应的router-link会多出一个特殊的类router-link-active
json-server模拟接口
ajax
npm i axios
import axios from 'axios'
四种常见ajax操作(增删改查)
查询
添加
删除
编辑
v-for
:key
收藏
0 条评论
回复 删除
下一页
