总结
我在成长过程中也是一路摸爬滚打,没有任何人的指点,所以走的很艰难。例如在大三的时候,如果有个学长可以阶段性的指点一二,如果有已经工作的师兄可以告诉我工作上需要什么,我应该前面的三年可以缩短一半;后来去面试bat,失败了有5、6次,每次也不知道具体是什么原因,都是靠面试回忆去猜测可能是哪方面的问题,回来学习和完善,当你真正去招人的时候,你就会知道面试记录是多么重要,面试官可以从面试记录里看到你的成长,总是去面试,总是没有成长,就会被定义为缺乏潜力。
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
️8⃣️、Vue组件
️8⃣️.️1⃣️ 什么是组件
组件的出现就是为了拆分Vue实例的代码量 能够让我们以不同的组件来划分不同的功能模块 需要什么功能就去调用对应的模块即可
局部功能界面
️8⃣️.️2⃣️ 组件化和模块化的区别
- 模块化
是从代码的逻辑角度去划分的 方便代码分层开发 保证每个功能模块的职能单一
- 组件化
是从UI界面的角度进行划分的 前端的组件化方便UI组件的重用
️8⃣️.️3⃣️ 全局组件
️8⃣️.️3⃣️.️1⃣️ 用法
Vue.component('组件名',{参数})
️8⃣️.️3⃣️.️2⃣️ 注意
组件名请使用小写
大写需要驼峰命名法
Vue.component(‘sayHiBaby’,{参数})
页面中标签使用
️8⃣️.️3⃣️.️3⃣️ 组件参数
- props:[‘xxx’]
父向子传参
通过 props 向子组件传递数据
可以在组件实例中通过 this.xxx 拿到传递过来的值
高级写法(props验证)
props:{
xxx:{
// 数据类型
type:“String”,
// 必须传递
required:“true”,
// 默认值
default:“mystring”
…
}
}
props可以传递任何数据类型 包括函数
- data(){ return{ } }
组件中的数据data是一个函数 将数据写在返回出去的对象中即可
为什么组件的data是一个函数 而Vue实例的data是一个对象?
1.每一个Vue组件都是一个Vue实例
2.都是通过new Vue() 创建出来的
3.如果data是一个对象的话 那么这些组件的引用指向就会相同
4.一个的值修改后 其他的值也会修改(这是JavaScript语法的特性)
5.如果data是一个函数 函数中再返回一个对象
6.那么每个Vue组件都有了自己的作用域 互不干扰
- template
模版
动态的HTML页面 包括一些JavaScript语法代码
注意: 如果模版中包含多个标签 需要在最外层加一个div 作为根标签
- 其他参数和Vue实例的一致
️9⃣️、Vue生命周期钩子
Vue生命周期钩子 || Vue生命周期函数
Vue提供给开发者一系列的回调函数 让我们可以在Vue的各个阶段添加自定义的逻辑处理
️9⃣️.️1⃣️ 三大阶段
️9⃣️.️1⃣️.️1⃣️ 初始化显示
创建期间的生命周期函数(1次)
- beforeCreate()
Vue实例被创建 但date和methods数据中的数据还没有被设置上去(未初始化)
- created()
data和methods以及被初始化(已被设置在Vue实例上)但是还未开始模版编译
常用
如果要操作data中的数据和methods中的方法 最早只能在created中调用
- beforeMount()
开始解析模版编译 把数据和结构(模版)关联起来 但现在页面上还不能看到数据
- mounted()
数据挂载完毕 页面中可以看到数据 当这个钩子函数执行完毕 创建期间的所有的生命钩子全部执行完
常用
发送ajax请求 启动定时器等异步任务 操作DOM中的节点
Vue渲染解析插值表达式 并不是在页面中直接渲染解析 而是将整个挂载在Vue实例的模版 拿到内存中去解析 等全部解析完成后 再一次性的渲染到页面(批量) (因为有可能页面中有很多一样的data中的值 如果是在页面中直接渲染解析会很耗性能)
️9⃣️.️1⃣️.️2⃣️ 更新显示
运行期间的生命周期函数(0次-多次)
- beforeUpdate()
页面中的数据还是旧的 但Vue实例中的数据已经被更新 数据还未同步
- updated()
页面和Vue实例中的数据已同步
️9⃣️.️1⃣️.️3⃣️ 销毁
销毁期间的生命周期函数(1次)
- beforeDestory()
开始进入销毁阶段 Vue实例中的方法和数据还能使用 还未真正销毁
常用
做收尾工作 如:清除定时器…
- destoryed()
已被完全销毁 Vue实例中的数据和方法不能再使用
想要销毁Vue实例 调用 vm.$destroy() 即可
注意: 这个方法方法并不会销毁Vue实例的一些如 定时器或计时器等方法
会造成 ‘内存泄漏’ 所以在完全销毁之前 需要在 beforeDestory 钩子中清除定时器等…
️️1⃣️0⃣️、父子组件传参
️️1⃣️0⃣️.️1⃣️ 父传子
-
子组件中定义 props 属性 props:[‘num’,‘max’,‘min’]
-
父组件中使用子组件时
<comSon num='xxx' max='xx' :min='x'></comSon>
️️1⃣️0⃣️.️2⃣️ 子传父
-
子组件中 特定的时候 触发
this.$emit('事件名A','参数')
-
父组件中
<com @事件名A="自己methods中的方法"></com>
️️1⃣️1⃣️、VueRouter
️️1⃣️1⃣️.️1⃣️ 前端路由
url地址和组件之间的关系
️️1⃣️1⃣️.️2⃣️ 如果是模块工程化(VueCLI)中使用VueRouter
必须添加 Vue.use(VueRouter)
import Vue from ‘vue’
import VueRouter from ‘vue-router’
Vue.use(VueRouter)
️️1⃣️1⃣️.️3⃣️ 路由起步代码
️️1⃣️1⃣️.️3⃣️.️1⃣️ HTML
- router-link
使用 router-link 来导航 最后会被渲染成a标签
可以通过 tag属性
来设置最后被渲染的标签
to属性
指定跳转的链接
登陆
注册
- router-view
router-view 路由出口 路由匹配到的组件将渲染到这里
️️1⃣️1⃣️.️3⃣️.️2⃣️ JavaScript
- 定义组件
const login = { template: “#tempLogin” };
const logout = { template: “#tempLogout” };
- 定义路由
const routes = [
{ path: “/login”, component: login },
{ path: “/logout”, component: logout }
];
- 创建路由
const router = new VueRouter({
routes
});
- 绑定路由
在Vue实例中 绑定router
new Vue({
el:“xxx”,
router
})
️️1⃣️1⃣️.️4⃣️ 路由高亮
设置路由匹配成功后 router-link 的样式属性
- active-class 模糊匹配
to设置的路由和url上面的路由只要前面的/xxx 匹配成功就会添加样式
/login => /login/user
触发 添加样式
- exact-active-class 全部匹配
to设置的路由和url上的路由必须全部匹配才会添加样式
/login/user => /login/user
触发 添加样式
️️1⃣️1⃣️.️5⃣️ 声明式导航
点了跳转 没有任何逻辑 类似于(a标签设置了href)
<router-link to="地址">XXX</router-link>
️️1⃣️1⃣️.️6⃣️ 编程式导航
跳转的同时执行其他需要执行的逻辑
router.push('地址')
️️1⃣️1⃣️.️7⃣️ 动态路由匹配
- 将原本 router-link to 中的地址
/user
=>/user/:id
:id
只是一个占位
-
切换路由
/user
=>/user/123
-
可以在组件中通过
this.$route.params.(id)
获取传递过来的数据
️️1⃣️1⃣️.️8⃣️ 路由重定向
-
redirect : “跳转的新地址”
-
{path:"地址1",redirect:"跳转到的新地址2"}
-
能够实现 匹配到地址1之后 立刻跳转到地址2
️️1⃣️1⃣️.️9⃣️ 前置导航守卫
- 导航<路由> 当路由发生改变后 就会触发导航守卫再进行路由跳转
const router = new VueRouter({ … })
router.beforeEach((to, from, next) => {
// …
next()
})
to
去哪个路由
一般通过to来判断对应路由做对应处理
from
来自哪个路由
next()
必须next()才可以继续跳转页面(像node"express"里面的中间件)
- 执行时机 比组件的beforeCreate还要早
1.判断登陆状态 如判断token…
2.可以在跳转路由时先判断这个页面这个用户是否有权限访问…
3.可以每次路由跳转前都提示用户跳转至什么页面…
️️1⃣️1⃣️.️️1⃣️0⃣️ 路由元信息
-
给路由配置一个标示 配合导航守卫定位到这个路由 做一些对这个路由的逻辑处理
-
给路由规则中配置一个meta对象
meta: { requiresAuth: true }
- 在导航守卫中就可以通过 to.meta.requiresAuth 是否为true 来判断是否是对应路由
️️1⃣️1⃣️.️️1⃣️1⃣️ 嵌套路由
- 在需要使用嵌套路由的组件中 找到需要动态替换的位置
<router-view></router-view>
- 修改路由规则
在需要嵌套路由的组件的路由规则中添加 children:[ ]
注意
嵌套路由的path不要加 /
{ path: ‘/user’, component: User,
children: [
{
path: ‘index’,
component: Index
}
]
}
️️1⃣️1⃣️.️1⃣️2⃣️ 统一404页面
配置错误路由规则
- 错误路由
{path:"/NotFound",component:NotFound}
- 配置404
{path:"*",redirect:'.NotFound'}
注意 :这个匹配必须写在路由规则的最下面 (当上面的路由匹配规则都不成功就会执行这个路由 然后跳转到404错误页面)
️️1⃣️1⃣️.️1⃣️3⃣️ 路由懒加载
-
当打包构建应用是 JavaScript 包会变得非常大 影响页面加载 路由懒加载 把不同路由对应的组件分割成不同的代码块 当路由被访问的时候才加载对应组件
-
将原先 在router.js 中的
import Foo from "./Foo.vue";
修改成const Foo = () => import('./Foo.vue')
其他不变 即可 -
路由懒加载并不能提速 只是把时间分开了 总时间没变
️️1⃣️2⃣️、资源请求
️️1⃣️2⃣️.️1⃣️ Axios
️️1⃣️2⃣️.️1⃣️.️1⃣️ Axios是什么?
Axios是一个基于 promise(实现了链式调用)
的 HTTP 库 可以用在浏览器和 Node.js 中 专注于发请求 专注于网络请求的一个库`
️️1⃣️2⃣️.️1⃣️.️2⃣️ CDN
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
️️1⃣️2⃣️.️1⃣️.️3⃣️ .then
成功回调
️️1⃣️2⃣️.️1⃣️.️4⃣️ .catch
失败回调
️️1⃣️2⃣️.️1⃣️.️5⃣️ get请求
// 为给定 ID 的 user 创建请求
axios.get(‘/user?ID=12345’)
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
// 可选地,上面的请求可以这样做
axios.get(‘/user’, {
params: {
ID: 12345
}
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
️️1⃣️2⃣️.️1⃣️.️6⃣️ post请求
axios.post(‘/user’, {
firstName: ‘Fred’,
lastName: ‘Flintstone’
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
️️1⃣️2⃣️.️1⃣️.️7⃣️ 基地址
基础的地址应用 没有必要每次都写 可以直接抽离出来
axios.defaults.baseURL = ‘设置的基地址’
Vue.prototype.$axios = axios
axios填写路径时后面直接写对应的路径即可
前面的公共部分不需在写(写了也不会影响)
️️1⃣️2⃣️.️1⃣️.️8⃣️ 设置跨域携带cookie
axios.defaults.withCredentials = true
️️1⃣️2⃣️.️1⃣️.️8⃣️.️1⃣️ 面试问及
-
坑点 axios 跨域默认不携带cookie
-
某个项目 登陆状态的判断 后端用的是cookie
-
登陆成功之后 服务器返回了cookie 标记登陆
-
但axios在请求不同源的接口时 默认不会携带cookie
-
所以后端接口后续一直无法获取登陆状态
-
抓包后检测网络请求 发现浏览器并没有把服务器返回的cookie给保留
-
所以导致每次都没设置成功cookie (set-cookie)
-
设置 axios.defaults.withCredentials = true
-
允许跨域携带cookie 这样浏览器就能在跨域的时候存下cookie
-
浏览器中无法直接查看跨域的cookie 浏览器隐藏了 可以通过抓包查看
️️1⃣️2⃣️.️1⃣️.️9⃣️ 创建克隆对象 多基地址设置
const xxx = axios.create({
// 即地址
baseURL: ‘https://some-domain.com/api/’,
// 可以统一设置请求头
headers: {Authorization: token}
});
xxx.get()
xxx.post()
-
只需要使用axios的create创建多个副本 每个副本设置一个不同的基地址
-
请求某个基地址的时候 使用该副本的对应方法即可
️️1⃣️2⃣️.️1⃣️.️1⃣️0⃣️ Axios拦截器
️️1⃣️2⃣️.️1⃣️.️1⃣️0⃣️.️1⃣️ 请求拦截器
axios.interceptors.request.use(function (config) {
// 可以在发请求之前在这里设置一些请求头
config.headers.Authorization=token
return config;
}, function (error) {
// Do something with request error
return Promise.reject(error);
});
️️1⃣️2⃣️.️1⃣️.️1⃣️0⃣️.️2⃣️ 响应拦截器
axios.interceptors.response.use(function (response) {
// 可以在获取响应数据之后设置一些提示 如获取失败/成功
response.data.code == 200?
return response;
}, function (error) {
// Do something with response error
return Promise.reject(error);
});
-
可以在响应拦截器中判断token是否造假
-
是造假则可以直接清除本地的token…
️️1⃣️2⃣️.️2⃣️ vue-resource
vue-resource已经不再更新 推荐使用Axios
️️1⃣️3⃣️、Vue动画钩子
️️1⃣️3⃣️.️1⃣️ Vue动画钩子是什么?
Vue提供的让程序员可以在动画的各个时机 添加 自定义逻辑 的钩子 也可称之为 动画钩子或动画函数
️️1⃣️3⃣️.️2⃣️ Vue动画的理解
-
操作 css 和 trasition 或 animation
-
Vue 会给目标元素添加/移除特定的 class
-
过渡的相关类名
// 指定显示的transition
xxx-enter-active
// 指定隐藏的transition
xxx-leave-active
// 指定隐藏时的样式
xxx-enter/xxx-leave-to
️️1⃣️3⃣️.️3⃣️ 单个元素动画
transition标签包裹
️️1⃣️3⃣️.️4⃣️ 列表过渡动画
transition-group标签包裹
️️1⃣️3⃣️.️5⃣️ name
动画样式的开始类名
️️1⃣️3⃣️.️6⃣️ tag
解析为的标签名
️️1⃣️3⃣️.️7⃣️ 过渡类名参数
- v-enter:
定义进入过渡的开始状态。在元素被插入之前生效,在元素被插入之后的下一帧移除。
- v-enter-active
定义进入过渡生效时的状态。在整个进入过渡的阶段中应用,在元素被插入之前生效,在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间,延迟和曲线函数。
- v-enter-to
2.1.8版及以上 定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除),在过渡/动画完成之后移除。
- v-leave
定义离开过渡的开始状态。在离开过渡被触发时立刻生效,下一帧被移除。
- v-leave-active
定义离开过渡生效时的状态。在整个离开过渡的阶段中应用,在离开过渡被触发时立刻生效,在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间,延迟和曲线函数。
- v-leave-to
2.1.8版及以上 定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除),在过渡/动画完成之后移除。
️️1⃣️3⃣️.️8⃣️ 动画时机
-
条件渲染 (使用 v-if)
-
条件展示 (使用 v-show)
-
动态组件
-
组件根节点
-
动态的增删元素 就会触发进入动画 以及移除动画
️️1⃣️3⃣️.️9⃣️ 动画钩子代码
️️1⃣️3⃣️.️9⃣️.️1⃣️ HTML
<transition
v-on:before-enter=“beforeEnter”
v-on:enter=“enter”
v-on:after-enter=“afterEnter”
v-on:enter-cancelled=“enterCancelled”
v-on:before-leave=“beforeLeave”
v-on:leave=“leave”
v-on:after-leave=“afterLeave”
v-on:leave-cancelled=“leaveCancelled”
️️1⃣️3⃣️.️9⃣️.️2⃣️ JavaScript
// …
methods: {
// --------
// 进入中
// --------
beforeEnter: function (el) {
// …
},
// 当与 CSS 结合使用时
// 回调函数 done 是可选的
enter: function (el, done) {
// …
done()
},
afterEnter: function (el) {
// …
},
enterCancelled: function (el) {
// …
},
// --------
// 离开时
// --------
beforeLeave: function (el) {
// …
},
// 当与 CSS 结合使用时
// 回调函数 done 是可选的
leave: function (el, done) {
// …
done()
},
afterLeave: function (el) {
// …
},
// leaveCancelled 只用于 v-show 中
leaveCancelled: function (el) {
// …
}
}
️️1⃣️3⃣️.️️1⃣️0⃣️ 过渡动画生命周期
️️1⃣️4⃣️、VueX
️️1⃣️4⃣️.1⃣️ Vuex是什么?
-
集中管理所有组件的数据
-
可以把它理解为是一个仓库
-
将组件中公有的数据都抽到VueX中
-
VueX中的数据 所有的组件都可以获取 所有的组件都可以修改
️️1⃣️4⃣️.2⃣️ 起步
️️1⃣️4⃣️.2⃣️.1⃣️ 下载
npm install vuex --save
️️1⃣️4⃣️.2⃣️.2⃣️ 创建VueX仓库
import Vue from ‘vue’
import Vuex from ‘vuex’
Vue.use(Vuex)
const store = new Vuex.Store({
state: {
// 数据
count: 0
},
mutations: {
// 方法
increment (state) {
state.count++
}
}
})
new Vue({
el:xxx,
// 挂载到Vue实例上
store
})
️️1⃣️4⃣️.2⃣️.3⃣️ 在组件中获取VueX的数据
- HTML
{{$store.state.count}}
- JavaScript
this.$store.state.count
️️1⃣️4⃣️.2⃣️.4⃣️ 在组件中修改VueX的数据
- VueX修改数据必须通过 mutations 中的方法修改数据
this.$store.commit(''mutations中的方法,'参数')
️️1⃣️4⃣️.3⃣️ VueX - state
-
数据
-
所有组件的都可以使用 获取数据
️️1⃣️4⃣️.4⃣️ VueX - mutation
- 方法 修改state中的数据
️️1⃣️5⃣️、VueCLI
️️1⃣️5⃣️.1⃣️ 单文件组件
️️1⃣️5⃣️.1⃣️.1⃣️ 用一个文件能够包含组件的所有内容
- 结构
- 逻辑
- 样式
️️1⃣️5⃣️.1⃣️.2⃣️ 单文件开发的好处
-
更利于编码
-
利于后期维护
-
一个文件包含了所有内容
️️1⃣️5⃣️.2⃣️ 什么是Vue-CLI
-
脚手架
-
可以把.vue文件翻译成浏览器可以识别的内容
-
自动刷新浏览器
-
自动压缩代码
-
自动的把高版本的JavaScript翻译成低版本的JavaScript
-
作为代理服务器
-
…
把很多开发中需要用到的功能整合到了一起 让Vue开发人员专注于逻辑代码即可 是用webpack配置出来的
️️1⃣️5⃣️.3⃣️ 搭建一个脚手架
vue create 项目名
<= 项目名不要有中文!!!不要大些
cd 项目名
npm run serve
️️1⃣️5⃣️.4⃣️ Vue-CLI搭建项目的本质
-
创建文件夹
-
下载第三方模块
-
创建项目的基本结构
-
设置各个文件之间的关系
-
创建git仓库
1⃣️5⃣️.5⃣️ Vue-cli项目结构
- main.js
主要的文件 所有和顶级Vue实例相关的都放到这里
- App.vue
最顶级的组件 仅次于Vue实例 看到的顶级页面结构一般都放在这里
- /components
组件的文件夹
- /assets
静态资源
1⃣️5⃣️.6⃣️ 搭建webpack-vue脚手架(详细版本)
npm init webpack "项目名"
cd "项目名"
npm instal
npm run dev
最后一步选 No, I will handle that myself 自己再npm i 下载速度会快一点
1⃣️5⃣️.7⃣️ webpack-vue项目结构
|-- build : webpack 相关的配置文件夹(基本不需要修改)
|-- dev-server.js : 通过 express 启动后台服务器
|-- config: webpack 相关的配置文件夹(基本不需要修改)
|-- index.js: 指定的后台服务的端口号和静态资源文件夹
|-- node_modules
|-- src : 源码文件夹
|-- components: vue 组件及其相关资源文件夹
|-- App.vue: 应用根主组件
|-- main.js: 应用入口 js
|-- static: 静态资源文件夹
|-- .babelrc: babel 的配置文件
|-- .eslintignore: eslint 检查忽略的配置
|-- .eslintrc.js: eslint 检查的配置
|-- .gitignore: git 版本管制忽略的配置
|-- index.html: 主页面文件
|-- package.json: 应用包配置文件
|-- README.md: 应用描述说明的 readme 文件
1⃣️5⃣️.8⃣️ Vue-CLI项目编码
1⃣️5⃣️.8⃣️.1⃣️ 编码位置
-
组件的逻辑直接写在
xxx.vue
中 -
静态资源放在
assets
文件夹下面 直接使用对应路径引用即可
1⃣️5⃣️.8⃣️.2⃣️ 引入css
- 全局引入
main.js
=> import "路径"
- 局部引入
组件内的script标签
=> @import url("路径")
1⃣️5⃣️.8⃣️.3⃣️ 注册组件
- 全局组件
引入在main.js
中
import 组件 from 地址
Vue.component('组件名',组件)
任意地方都可以使用 将组件名作为标签名 一次注册 全部使用
- 局部组件
在需要用到这个组件的地方 导入import 组件名 form '地址'
导入后 设置给components
就可以在导入的组件中通过组件名使用该组件
根据使用的位置 决定局部或者全局注册 只在某些地方用 用局部组件
- 组件中的name属性
直接在组件的内部写name:值
即可
不能用中文
写了只会 Chrome的Vue插件中就可以看见这个名字 更加利于检索 利于编码
1⃣️5⃣️.8⃣️.4⃣️ 整合路由
1⃣️5⃣️.8⃣️.4⃣️.1⃣️ 下包
npm install vue-router
1⃣️5⃣️.8⃣️.4⃣️.2⃣️ 导包
import VueRouter from 'vue-router'
1⃣️5⃣️.8⃣️.4⃣️.3⃣️ 用包
- 创建路由规则
在components文件夹下创建一个组件xxx.vue
import 组件名 from '组件路径'
const routes = [{path:"/xxx/:xx},component:组件名]
- 创建路由对象
`const router = new VueRouter({
routes
})`
- 设置给Vue实例
`new Vue({
router
})`
1⃣️5⃣️.8⃣️.4⃣️.4⃣️ 编码位置
-
导入 注册路由
main.js
-
router-link router-view
app.vue
-
添加组件
components
-
静态资源
assets
1⃣️5⃣️.9⃣️ 在Vue中使用其他插件
-
可以将插件写到Vue原型中 这样在其他组件中都可以使用这个插件
-
(main.js)Vue.prototype.$XXX = XXX
-
(其他组件) this.$XXX
-
X X X 的 XXX 的 XXX的的目的是 区分是Vue自带的属性还是后面自定义在原型中的属性
1⃣️5⃣️.9⃣️.1⃣️ 面试问及
-
Vue原型用过没
-
为了共享 将插件设置在Vue原型上
-
所有组件都是Vue的实例
-
所有在其他组件中 可以通过 this.$XXX 获取
1⃣️5⃣️.1⃣️0⃣️ css预处理与css作用域
1⃣️5⃣️.1⃣️0⃣️.1⃣️ css预处理
1⃣️5⃣️.1⃣️0⃣️.1⃣️.1⃣️使用less
- 下载
-npm install -D less-loader less
- 使用
<style lang='less'></style>
也可以直接导入less文件
1⃣️5⃣️.1⃣️0⃣️.1⃣️.2⃣️ 使用sass
- 下载
-npm install -D sass-loader node-sass
- 使用
<style lang='scss'></style>
也可以至今导入scss文件
1⃣️5⃣️.1⃣️0⃣️.2⃣️ css作用域
-
为style标签 添加
scoped
属性即可 -
生成样式,和渲染组件时
为元素添加随机属性
样式中添加属性选择器
2者结合 就把css的作用范围 约束
-
为了不影响其他 可以添加这个属性
-
注意
样式的属性是随机生成的 如果要修改样式
直接修改在scoped中的样式 不要抽离成样式文件导入
1⃣️5⃣️.1⃣️1⃣️ ES6模块化语法
1⃣️5⃣️.1⃣️1⃣️.1⃣️ 默认导出导入
- 导出
export default xxx
只能写一个 如果需要暴露多个 可以在default后面写对象
- 导入
import xxx from "模块"
1⃣️5⃣️.1⃣️1⃣️.2⃣️ 按名字导出导入
- 导出
export const bbb
导出和导入的名字必须一样
- 导入
import {bbb} from "模块"
1⃣️5⃣️.1⃣️2⃣️ Vue全家桶
-
Vue
-
axios
-
Vue-router
-
饿了么ui
饿了么前端团队开发的PC端的基于Vue的组件
内部封装了很多现成的组件
在VueCLI中使用elementUI
npm i element-ui
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)
有些组件并没有在组件内部使用原生事件
但是有些情况需要一些原生事件
就可以使用
.native
修饰符来触发
总结
秋招即将开始,校招的朋友普遍是缺少项目经历的,所以底层逻辑,基础知识要掌握好!
而一般的社招,更是神仙打架。特别强调,项目经历不可忽视;几乎简历上提到的项目都会被刨根问底,所以项目应用的技术要熟练,底层原理必须清楚。
这里给大家提供一份汇集各大厂面试高频核心考点前端学习资料。涵盖 HTML,CSS,JavaScript,HTTP,TCP协议,浏览器,Vue框架,算法等高频考点238道(含答案)!
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
资料截图 :
高级前端工程师必备资料包
️.1⃣️.1⃣️使用less
- 下载
-npm install -D less-loader less
- 使用
<style lang='less'></style>
也可以直接导入less文件
1⃣️5⃣️.1⃣️0⃣️.1⃣️.2⃣️ 使用sass
- 下载
-npm install -D sass-loader node-sass
- 使用
<style lang='scss'></style>
也可以至今导入scss文件
1⃣️5⃣️.1⃣️0⃣️.2⃣️ css作用域
-
为style标签 添加
scoped
属性即可 -
生成样式,和渲染组件时
为元素添加随机属性
样式中添加属性选择器
2者结合 就把css的作用范围 约束
-
为了不影响其他 可以添加这个属性
-
注意
样式的属性是随机生成的 如果要修改样式
直接修改在scoped中的样式 不要抽离成样式文件导入
1⃣️5⃣️.1⃣️1⃣️ ES6模块化语法
1⃣️5⃣️.1⃣️1⃣️.1⃣️ 默认导出导入
- 导出
export default xxx
只能写一个 如果需要暴露多个 可以在default后面写对象
- 导入
import xxx from "模块"
1⃣️5⃣️.1⃣️1⃣️.2⃣️ 按名字导出导入
- 导出
export const bbb
导出和导入的名字必须一样
- 导入
import {bbb} from "模块"
1⃣️5⃣️.1⃣️2⃣️ Vue全家桶
-
Vue
-
axios
-
Vue-router
-
饿了么ui
饿了么前端团队开发的PC端的基于Vue的组件
内部封装了很多现成的组件
在VueCLI中使用elementUI
npm i element-ui
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)
有些组件并没有在组件内部使用原生事件
但是有些情况需要一些原生事件
就可以使用
.native
修饰符来触发
总结
秋招即将开始,校招的朋友普遍是缺少项目经历的,所以底层逻辑,基础知识要掌握好!
而一般的社招,更是神仙打架。特别强调,项目经历不可忽视;几乎简历上提到的项目都会被刨根问底,所以项目应用的技术要熟练,底层原理必须清楚。
这里给大家提供一份汇集各大厂面试高频核心考点前端学习资料。涵盖 HTML,CSS,JavaScript,HTTP,TCP协议,浏览器,Vue框架,算法等高频考点238道(含答案)!
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
资料截图 :
高级前端工程师必备资料包