能体现自己平时的技术积累，和自学总结提升能力 这才是不悔走进前端！
vue与React的区别
相同点：
React采用特殊的JSX语法，Vue.js在组件开发中也推崇编写.vue特殊文件格式，对文件内容都有一些约定，两者都需要编译后使用；
中心思想相同：一切都是组件，组件实例之间可以嵌套；都提供合理的钩子函数，可以让开发者定制化地去处理需求；都不内置列数AJAX，Route等功能到核心包，而是以插件的方式加载；在组件开发中都支持mixins的特性。
不同点：
React采用的Virtual DOM会对渲染出来的结果做脏检查；
Vue.js在模板中提供了指令，过滤器等，可以非常方便，快捷地操作Virtual DOM。
vue路由的钩子函数
首页可以控制导航跳转，beforeEach，afterEach等，一般用于页面title的修改。一些需要登录才能调整页面的重定向功能。
beforeEach主要有3个参数to，from，next：
to：route即将进入的目标路由对象，
from：route当前导航正要离开的路由
next：function一定要调用该方法resolve这个钩子。执行效果依赖next方法的调用参数。可以控制网页的跳转
vuex
只用来读取的状态集中放在store中； 改变状态的方式是提交mutations，这是个同步的事物； 异步逻辑应该封装在action中。 在main.js引入store，注入。新建了一个目录store，….. export 。 场景有：单页应用中，组件之间的状态、音乐播放、登录状态、加入购物车
state
Vuex 使用单一状态树,即每个应用将仅仅包含一个store
实例，但单一状态树和模块化并不冲突。存放的数据状态，不可以直接修改里面的数据。
mutations定义的方法动态修改Vuex 的 store 中的状态或数据。
getters类似vue的计算属性，主要用来过滤一些数据。
actions可以理解为通过将mutations里面处里数据的方法变成可异步的处理数据的方法，简单的说就是异步操作数据。view 层通过 store.dispath 来分发 action。
vue-cli如何新增自定义指令？
1.创建局部指令
var app = new Vue({
el: '#app',
data: {
},
// 创建指令(可以多个)
directives: {
// 指令名称
dir1: {
inserted(el) {
// 指令中第一个参数是当前使用指令的DOM
console.log(el);
console.log(arguments);
// 对DOM进行操作
el.style.width = '200px';
el.style.height = '200px';
el.style.background = '#000';
}
}
}
})
复制代码2.全局指令
Vue.directive('dir2', {
inserted(el) {
console.log(el);
}
})
复制代码3.指令的使用
<div id="app">
<div v-dir1></div>
<div v-dir2></div>
</div>
复制代码下面为一些面试题
vue如何自定义一个过滤器？
html代码：
<div id="app">
<input type="text" v-model="msg" />
{{msg| capitalize }}
</div>
复制代码JS代码：
var vm=new Vue({
el:"#app",
data:{
msg:''
},
filters: {
capitalize: function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
}
}
})
复制代码全局定义过滤器
Vue.filter('capitalize', function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
})
过滤器接收表达式的值 (msg) 作为第一个参数。capitalize 过滤器将会收到 msg的值作为第一个参数
复制代码对keep-alive 的了解？
keep-alive是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。
在vue 2.1.0 版本之后，keep-alive新加入了两个属性: include(包含的组件缓存) 与 exclude(排除的组件不缓存，优先级大于include) 。
使用方法
<keep-alive include='include_components' exclude='exclude_components'>
<component>
<!-- 该组件是否缓存取决于include和exclude属性 -->
</component>
</keep-alive>
复制代码css只在当前组件起作用
答：在style标签中写入scoped即可 例如：
v-if 和 v-show 区别
答：v-if按照条件是否渲染，v-show是display的block或none；
route和router的区别
答：route是“路由信息对象”，包括path，params，hash，query，fullPath，matched，name等路由信息参数。而$router是“路由实例”对象包括了路由的跳转方法，钩子函数等。
vue.js的两个核心是什么？
答：数据驱动、组件系统
vue几种常用的指令
答：v-for 、 v-if 、v-bind、v-on、v-show、v-else
vue常用的修饰符？
答：.prevent: 提交事件不再重载页面；
.stop: 阻止单击事件冒泡；
.self: 当事件发生在该元素本身而不是子元素的时候会触发；
.capture: 事件侦听，事件发生的时候会调用
v-on 可以绑定多个方法吗？
答：可以
vue中 key 值的作用？
答：当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用“就地复用”策略。
如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序，
而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。key的作用主要是为了高效的更新虚拟DOM。
什么是vue的计算属性？
答：在模板中放入太多的逻辑会让模板过重且难以维护，在需要对数据进行复杂处理，且可能多次使用的情况下，尽量采取计算属性的方式。
好处：
①使得数据处理结构清晰；
②依赖于数据，数据更新，处理结果自动更新 ； ③计算属性内部this指向vm实例；
④在template调用时，直接写计算属性名即可；
⑤常用的是getter方法，获取数据，也可以使用set方法改变数据；
⑥相较于methods，不管依赖的数据变不变，methods都会重新计算，但是依赖数据不变的时候computed从缓存中获取，不会重新计算。
vue等单页面应用及其优缺点
答：
优点：
Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件，核心是一个响应的数据绑定系统。MVVM、数据驱动、组件化、 轻量、简洁、高效、快速、模块友好。
缺点：
不支持低版本的浏览器，最低只支持到IE9；不利于SEO的优化（如果要支持SEO，建议通过服务端来进行渲染组件）；第一次加载首页耗时相对长一些；不可以使用浏览器的导航按钮需要自行实现前进、后退。
vue中子组件调用父组件的方法props
子组件调用父组件的方法可以使用this.$emit()
vue等单页面应用及其优缺点
优点：
1、具有桌面应用的即时性、网站的可移植性和可访问性。
2、用户体验好、快，内容的改变不需要重新加载整个页面。
3、基于上面一点，SPA相对对服务器压力小。
4、良好的前后端分离。SPA和RESTful架构一起使用，后端不再负责模板渲染、输出页面工作，web前端和各种移动终端地位对等，后端API通用化。
5、同一套后端程序代码，不用修改就可以用于Web界面、手机、平板等多种客户端；
缺点：
1、不利于SEO。（如果你看中SEO，那就不应该在页面上使用JavaScript，你应该使用网站而不是Web应用）
2、初次加载耗时相对增多。
3、导航不可用，如果一定要导航需要自行实现前进、后退。
Vue中引入组件的步骤?
1.采用ES6的import ... from ...语法或CommonJS的require()方法引入组件
2.对组件进行注册
代码如下
注册
Vue.component('my-component',
{ template: '<div>A custom component!</div>'})
复制代码3.使用组件
<my-component></my-component>
复制代码指令v-el的作用是什么?
提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标.可以是 CSS 选择器，也可以是一个 HTMLElement 实例,
请列举出3个Vue中常用的生命周期钩子函数?
created: 实例已经创建完成之后调用,在这一步,实例已经完成数据观测, 属性和方法的运算, watch/event事件回调. 然而, 挂载阶段还没有开始, $el属性目前还不可见
mounted: el被新创建的 vm.
el 也在文档内。
activated::keep-alive组件激活时调用
Vuex的组成：一个实例化的Vuex.Store由state, mutations和actions三个属性组成:
state中保存着共有数据
改变state中的数据有且只有通过mutations中的方法,且mutations中的方法必须是同步的 如果要写异步的方法,需要些在actions中, 并通过commit到mutations中进行state中数据的更改.
active-class是哪个组件的属性？嵌套路由怎么定义？
vue-router模块的router-link组件。
怎么定义vue-router的动态路由？怎么获取传过来的动态参数？
在router目录下的index.js文件中，对path属性加上/:id。 使用router对象的params.id 例如 : this.$route.params.id;
vue-router有哪几种导航钩子？
三种，一种是全局导航钩子：router.beforeEach(to,from,next)，作用：跳转前进行判断拦截。第二种：组件内的钩子；第三种：单独路由独享组件
scss是什么？安装使用的步骤是？有哪几大特性？
预处理css，把css当成函数编写，定义变量,嵌套。
先装css-loader、node-loader、sass-loader等加载器模块，在webpack-base.config.js配置文件中加多一个拓展:extenstion，再加多一个模块：module里面test、loader
axios是什么？怎么使用？描述使用它实现登录功能的流程？
请求后台资源的模块。npm install axios -S装好，然后发送的是跨域，需在配置文件中config/index.js进行设置。后台如果是Tp5则定义一个资源路由。js中使用import进来，然后.get或.post。返回在.then函数中如果成功，失败则是在.catch函数中
8、axios+tp5进阶中，调用axios.post(‘api/user’)是进行的什么操作？axios.put(‘api/user/8′)呢？
跨域，添加用户操作，更新操作。
9、什么是RESTful API？怎么使用?
是一个api的标准，无状态请求。请求的路由地址是固定的，如果是tp5则先路由配置中把资源路由配置好。标准有：.post .put .delete
10、vuex是什么？怎么使用？哪种功能场景使用它？
vue框架中状态管理。在main.js引入store，注入。新建了一个目录store，….. export 。场景有：单页应用中，组件之间的状态。音乐播放、登录状态、加入购物车
app4.todos.push({ text: '新项目' })，列表最后添加了一个新项目。
<div id="app-4">
<ol>
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ol>
</div>
var app4 = new Vue({
el: '#app-4',
data: {
todos: [
{ text: '学习 JavaScript' },
{ text: '学习 Vue' },
{ text: '整个牛项目' }
]
}
})
复制代码使用 Object.freeze() ， 停止响应系统的追踪变化 使数据不能改变，试图不能刷新
$watch 是一个实例方法
vm.$watch('a', function (newValue, oldValue) {
// 这个回调将在 `vm.a` 改变后调用
}
复制代码其下是vue细节方面的处理
-
不要在选项属性或回调上使用箭头函数 ，箭头函数没有this
-
v-once 指令，数据改变时，{{}} 中的内容不会更新
-
站点上动态渲染的任意 HTML 很容易导致 XSS 攻击 绝不要对用户提供的内容使用插值
-
{{ }} 里面只能包含表达式的语句 三元运算符 函数表达式
-
attributeName 是获取js动态值 Vue 实例有一个 data 属性 attributeName，其值为 "href"，那么这个绑定将等价于 v-bind:href<a v-bind:[attributeName]="url"> ...
-
空格和引号，放在 HTML 特性名里是无效的，在 DOM 中使用模板时你需要回避大写键名 ❌错误写法 <a v-bind:['foo' + bar]="value"> ...
-
浏览器会把特性名全部强制转为小写
<a v-bind:[someAttr]="value"> ...
-
计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值
-
使用 watch 选项允许我们执行异步操作 (访问一个 API)，限制我们执行该操作的频率，并在我们得到最终结果前，设置中间状态。这些都是计算属性无法做到的
-
created 里 可以 直接调用methous里的方法，直接this.方法名
-
axios 里面 .then 里用箭头函数作为回调函数，回调函数里 this 指向window ，耦合this指向。返回的是promise对象
-
axios.defaults.baseURL = "http://123.206.85.192:3000";设置请求路径的公共部分
-
vue 中图片懒加载 插件 vue-lazyload
-
多种写法 v-lazy 图片路径
-
开发时，vue路由不使用h5模式，h5模式回车会404
-
router-link中 tag属性定义标签类型
-
router-link自带class类名，定义激活样式
-
router在vue实例里挂载后，每个组件都会有一个$router的属性
methods：{
fn(){
this.$router.push("locain")
}
}
//push 强制跳转路径
//go 数字决定返回还是前进
//repalce 路由替换，将当前的历史替换掉
## vue路由，redirect重定向
## vue路由中子路由不带/，带/表示了一级路由
this.$route.params.c
<router-link to="/article/1/a">商品1</router-link>
// /article/2/d 匹配出一个对象
// /article/:c/:a =>{c:2,a:'d'} = this.$route.params
## 如果用对象作为to的属性，并且使用了参数，必须给路由起个名字，通过名字跳转
<router-link to='{name:'pro',params:{c:1,a:2}}'>1</router-link>
let routes=[{path:'/article/:c/:a',component:article,name:'pro'}]
## 路径参数发生变化 vue实例中watch 监控参数的变化来发送ajax
watch：{
$route(){
alert('ajax');
}
}
## 组件之间路由切换会进行销毁， 用keep-alive 进行缓存，不让销毁。
## vue路由元信息
哪个单页面组件需要缓存，在路由配置里加上meta：{keep:true}
//需要缓存的页面
<keep-alive>
<router-view v-if="$router.meta.keep"></router-view>
</keep-alive>
//不需要缓存的页面
<router-view v-if="!$router.meta.keep"></router-view>
## 路由动画
<transition name="fadeIn">
<keep-alive>
<router-view v-if="$router.meta.keep"></router-view>
</keep-alive>
</transition name="fadeIn">
## 路由懒加载
不再采用引入组件的方法，采用动态使用组件。
实现路由懒加载。
routes=[
{path:"/",name:"home",component:()=>import("../components/home.vue")}
]
## vue路由全局导航钩子
router.beforeEach(function (to,from,next) {
// 拦截功能
if(to.path==='/list'){
next(path:'/add')
}else{
next()
}
})
## vuex
store 容器中保存着公共数据state
改变store中的state 通过mutation 中commit来改变方法去变更状态，并且是同步的
需要支持异步，通过actions 改变 mutation 方法
状态管理，将数据统一管理
vuex 单向数据流
容器store 是唯一的 只能有一个
store 被注册到了实例上 , 所有组件都会有一个 属性 this.$store
vuex 实例上加上 strict ：true 严格模式 ，只能通过mutation 更改状态
mutations 中的方法 第一个参数 是 state是自动放入的，默认指的是当前的state
第二个参数是载荷，传过来的值
const mutations = {
add(state){
state.count +=1;
}
};
## vuex 提供日志插件 logger 实时监听并记录vuex数据状态变更
const store = new Vuex.store({
state,
mutations,
plugins:[logger()],
strict:true
})
## vuex 提供 getters 计算属性，相当于computed
const getters = {
val:(state)=>state.count%2?'1':'2';
}
import Vue from 'vue';
import Vuex from 'vuex';
import logger from 'vuex/dist/logger';
Vue.use(Vuex);
let state = {car:[]};
import mutations from './mutations';
export default new Vuex.store({
state,
mutations,
strict:true,
plugins:[logger()]
});
复制代码。。。未完待更新！
扫一扫
852
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
