A. Vue.js提供了哪些内置指令,至少写出五个。
5.1 基本指令
5.1.1 v-cloak一般与display：none进行结合使用
作用：解决初始化慢导致页面闪动的最佳实践
5.1.2 v-once
定义它的元素和组件只渲染一次
5.2 条件渲染指令
5.2.1 v-if, v-eles-if ,v-else
用法： 必须跟着屁股走
v-if后面的等号必须是布尔值
v-if的弊端 :
Vue 在渲染元素时 ，出于效率考虑，会尽可能地复用已有的元素而非重新渲染， 因此会出现乌龙
只会渲染变化的元素，也就是说，input元素被复用了
B. vue前端面试题有哪些呢
文章中给你列举了部分的面试题，这些都是公司面试常遇到的，还有需要的还可以自己去查阅一下资料
1、active-class是哪个组件的属性？嵌套路由怎么定义？
答：vue-router模块的router-link组件。
2、怎么定义vue-router的动态路由？怎么获取传过来的动态参数？
答：在router目录下的index.js文件中，对path属性加上/:id。 使用router对象的params.id
3、vue-router有哪几种导航钩子？
答：三种，一种是全局导航钩子：router.beforeEach(to,from,next)，作用：跳转前进行判断拦截。第二种：组件内的钩子；第三种：单独路由独享组件
4、scss是什么？安装使用的步骤是？有哪几大特性？
答：预处理css，把css当前函数编写，定义变量,嵌套。 先装css-loader、node-loader、sass-loader等加载器模块，在webpack-base.config.js配置文件中加多一个拓展:extenstion，再加多一个模块：mole里面test、loader
4.1、scss是什么？在vue.cli中的安装使用步骤是？有哪几大特性？
答：css的预编译。
使用步骤：
第一步：用npm 下三个loader（sass-loader、css-loader、node-sass）
第二步：在build目录找到webpack.base.config.js，在那个extends属性中加一个拓展.scss
第三步：还是在同一个文件，配置一个mole属性
第四步：然后在组件的style标签加上lang属性 ，例如：lang=”scss”
有哪几大特性:
1、可以用变量，例如（$变量名称=值）；
2、可以用混合器，例如（）
3、可以嵌套
5、mint-ui是什么？怎么使用？说出至少三个组件使用方法？
答：基于vue的前端组件库。npm安装，然后import样式和js，vue.use（mintUi）全局引入。在单个组件局部引入：import {Toast} from ‘mint-ui’。组件一：Toast(‘登录成功’)；组件二：mint-header；组件三：mint-swiper
6、v-model是什么？怎么使用？ vue中标签怎么绑定事件？
答：可以实现双向绑定，指令（v-class、v-for、v-if、v-show、v-on）。vue的model层的data属性。绑定事件：<input @click=doLog() />
7、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 。场景有：单页应用中，组件之间的状态。音乐播放、登录状态、加入购物车
11、mvvm框架是什么？它和其它框架（jquery）的区别是什么？哪些场景适合？
答：一个model+view+viewModel框架，数据模型model，viewModel连接两个
区别：vue数据驱动，通过数据来显示视图层而不是节点操作。
场景：数据操作比较多的场景，更加便捷
12、自定义指令（v-check、v-focus）的方法有哪些？它有哪些钩子函数？还有哪些钩子函数参数？
答：全局定义指令：在vue对象的directive方法里面有两个参数，一个是指令名称，另外一个是函数。组件内定义指令：directives
钩子函数：bind（绑定事件触发）、inserted(节点插入的时候触发)、update（组件内相关更新）
钩子函数参数：el、binding
13、说出至少4种vue当中的指令和它的用法？
答：v-if：判断是否隐藏；v-for：数据循环出来；v-bind:class：绑定一个属性；v-model：实现双向绑定
14、vue-router是什么？它有哪些组件？
答：vue用来写路由一个插件。router-link、router-view
15、导航钩子有哪些？它们有哪些参数？
答：导航钩子有：a/全局钩子和组件内独享的钩子。b/beforeRouteEnter、afterEnter、beforeRouterUpdate、beforeRouteLeave
参数：有to（去的那个路由）、from（离开的路由）、next（一定要用这个函数才能去到下一个路由，如果不用就拦截）最常用就这几种
16、Vue的双向数据绑定原理是什么？
答：vue.js 是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。
具体步骤：
第一步：需要observe的数据对象进行递归遍历，包括子属性对象的属性，都加上 setter和getter
这样的话，给这个对象的某个值赋值，就会触发setter，那么就能监听到了数据变化
第二步：compile解析模板指令，将模板中的变量替换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有变动，收到通知，更新视图
第三步：Watcher订阅者是Observer和Compile之间通信的桥梁，主要做的事情是:
1、在自身实例化时往属性订阅器(dep)里面添加自己
2、自身必须有一个update()方法
3、待属性变动dep.notice()通知时，能调用自身的update()方法，并触发Compile中绑定的回调，则功成身退。
第四步：MVVM作为数据绑定的入口，整合Observer、Compile和Watcher三者，通过Observer来监听自己的model数据变化，通过Compile来解析编译模板指令，最终利用Watcher搭起Observer和Compile之间的通信桥梁，达到数据变化 -> 视图更新；视图交互变化(input) -> 数据model变更的双向绑定效果。
ps：16题答案同样适合”vue data是怎么实现的？”此面试题。
17、请详细说下你对vue生命周期的理解？
答：总共分为8个阶段创建前/后，载入前/后，更新前/后，销毁前/后。
创建前/后： 在beforeCreated阶段，vue实例的挂载元素$el和数据对象data都为undefined，还未初始化。在created阶段，vue实例的数据对象data有了，$el还没有。
载入前/后：在beforeMount阶段，vue实例的$el和data都初始化了，但还是挂载之前为虚拟的dom节点，data.message还未替换。在mounted阶段，vue实例挂载完成，data.message成功渲染。
更新前/后：当data变化时，会触发beforeUpdate和updated方法。
销毁前/后：在执行destroy方法后，对data的改变不会再触发周期函数，说明此时vue实例已经解除了事件监听以及和dom的绑定，但是dom结构依然存在
18、请说下封装 vue 组件的过程？
答：首先，组件可以提升整个项目的开发效率。能够把页面抽象成多个相对独立的模块，解决了我们传统项目开发：效率低、难维护、复用性等问题。
然后，使用Vue.extend方法创建一个组件，然后使用Vue.component方法注册组件。子组件需要数据，可以在props中接受定义。而子组件修改好数据后，想把数据传递给父组件。可以采用emit方法。
19、你是怎么认识vuex的？
答：vuex可以理解为一种开发模式或框架。比如PHP有thinkphp，java有spring等。
通过状态（数据源）集中管理驱动组件的变化（好比spring的IOC容器对bean进行集中管理）。
应用级的状态集中放在store中； 改变状态的方式是提交mutations，这是个同步的事物； 异步逻辑应该封装在action中。
20、vue-loader是什么？使用它的用途有哪些？
答：解析.vue文件的一个加载器，跟template/js/style转换成js模块。
用途：js可以写es6、style样式可以scss或less、template可以加jade等
21、请说出vue.cli项目中src目录每个文件夹和文件的用法？
答：assets文件夹是放静态资源；components是放组件；router是定义路由相关的配置;view视图；app.vue是一个应用主组件；main.js是入口文件
22、vue.cli中怎样使用自定义的组件？有遇到过哪些问题吗？
答：第一步：在components目录新建你的组件文件（smithButton.vue），script一定要export default {
第二步：在需要用的页面（组件）中导入：import smithButton from ‘../components/smithButton.vue’
第三步：注入到vue的子组件的components属性上面,components:{smithButton}
第四步：在template视图view中使用，<smith-button> </smith-button>
问题有：smithButton命名，使用的时候则smith-button。
23、聊聊你对Vue.js的template编译的理解？
答：简而言之，就是先转化成AST树，再得到的render函数返回VNode（Vue的虚拟DOM节点）
详情步骤：
首先，通过compile编译器把template编译成AST语法树（abstract syntax tree 即 源代码的抽象语法结构的树状表现形式），compile是createCompiler的返回值，createCompiler是用以创建编译器的。另外compile还负责合并option。
然后，AST会经过generate（将AST语法树转化成render funtion字符串的过程）得到render函数，render的返回值是VNode，VNode是Vue的虚拟DOM节点，里面有（标签名、子节点、文本等等）
C. vue自定义指令,实现添加该指令可以将传入的数据进行拆分后求和的操作，比如[1,2,3]，使用指令和为6
// v-sum="[1, 2, 3]"
Vue.directive('sum',function(el,binding){
consttotal=binding.value.rece((acc,num)=>acc+=num);
console.log(total);
});
D. 前端vue是什么
Vue.js 是一个JavaScriptMVVM库，是一套构建用户界面的渐进式框架。它是以数据驱动和组件化的思想构建的，采用自底向上增量开发的设计。相比于Angular.js，Vue.js提供了更加简洁、更易于理解的API，使得我们能够快速地上手并使用Vue.js；同时比起 React + Rex 相对复杂的架构，Vue.js 更加轻量级也更加容易上手，是初创项目的首选前端框架。Vue 的核心库只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。
今天带领大家来了解一款渐进式JavaScript框架——Vue。
近年来，前端开发领域，旧浏览器逐渐淘汰，移动端开发需求逐年增加，前端交互越来越多，功能越来越复杂。架构从传统后台MVC向REST API + 前端MV* 迁移。
MV*相当于MVC即：
Model（模型）表示应用程序核心（比如数据库记录列表）。
View（视图）显示前端的学习都是需要不断的学习，学一天停一停相当于白学，学习效果很差，如果你想有人一起学习可以来这个扣裙，首先是132 中间是667最后是127 都是零基础的同学，大家相互鼓励 共同努力 只是学着玩就不建议来了!!!数据（数据库记录）。
Controller（控制器）处理输入（写入数据库记录）。
MVP
Model（模型）表示应用程序核心（比如数据库记录列表）。
View（视图）显示数据（数据库记录）。
Presenter（表示器）负责逻辑处理业务。
与MVC差别在于：
1、View与Model完全隔离。
2、Presenter与View的具体实现技术无关。
3、可以进行View的模拟测试。
MVVM（Vue就是一种MVVM框架）
Model（模型）表示应用程序核心（比如数据库记录列表）。
View（视图）显示数据（数据库记录）。
ViewModel（观察者）负责把Model的数据同步到View显示出来，还负责把View的修改同步回Model。
优点：高内聚，低耦合（可重用性、可移植性）。
Vue是一款数据驱动+组件化的前端开发框架，对比于Angular和React，Vue.js更轻量，gzip后大小只有26K （Angular 56K,React 44K），同时更易上手，学习曲线平稳，吸收两家之长，借鉴了angular的指令和react的组件化。
E. Vue.js中常用指令有哪些
数据渲染：v-text、v-html、{{}}
- 条件渲染 控制模板隐藏:v-show 、v-if、v-else
v-for 渲染循环列表
v-on绑定事件
v-bind 绑定属性
F. 创建Vue项目之前需要做哪些准备工作Vue项目如何创建指令是什么并对指令解
使用Vue，当然要先去学习它的使用方法了，请参考官方文档Vue
创建Vue项目，可以用官方的脚手架，请参考官方文档vue-cli
指令就是在HTML标签上以v-开头的属性，比如：v-for, v-if等以及自定义指令。Vue会根据指令去执行相应的操作，自定义指令就执行自定义的操作。详细请参考官文档。
G. vue的v-once指令怎么用
vue的v-once指令具体实现例子如下：
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<title></title>
<scripttype="text/javascript"src="vue1.0.25.js"></script>
</head>
<body>
<divid="app">
<pv-once>fgffd{{msg}}</p>
<p>对对对{{msg}}</p>
<inputtype="text"v-model="msg"name=""id=""value=""/>
</div>
<scripttype="text/javascript">
newVue({
el:'#app',
data:{
msg:'今天的天气很好'
}
})
</script>
</body>
</html>
H. Web前端如何使用Vue编写一个长按指令
今天小编要跟大家分享的文章是关于Web前端如何使用Vue编写一个长按指令?正在从事web前端工作的小伙伴们有没有想过只需按住一个按钮几秒钟就能在你的 I. VUE中@对应的指令全称是什么
v-on，监听指令，缩写：@，比如@click="doSomething"便是监听到点击事件后执行函数doSomething；
Vue应用中触发一个功能?
有没有想过创建一个按钮，按下一次就可以清除单次输入(或者持续按住可以清除所有输入)?
本文就是讲解如何在按下(或者按住)一个按钮时，既执行一个函数，又清除输入。
首先，我会讲解如何使用纯JS实现。而后也会创建一个Vue指令。下面就让我们一起来看一看吧。
一、原理
要实现长按，用户需要按下并按住按钮几秒钟。
想通过代码模拟这一效果，我们需要在鼠标“点击”按下按钮时，启动一个计时器监听用户按下的时长，如果时间超过我们期望的时长，就执行相应的函数。
非常简单!然而，我们需要知道用户何时按住按钮。
二、如何实现
当用户点击按钮时，在点击事件之前会触发另外两个事件:mousedown和mouseup。
当用户按下按钮时触发mousedown事件，用户松开按钮时调用mouseup事件。
我们需要做的是:
1.mousedown事件触发时，启动计时器。
2.一旦mouseup事件在预期的2秒前被触发，就清除计时器，不要执行相应的函数。就当作一个普通的点击事件。
只要计时器在我们预设的时间内没有被清除，即mouseup
事件没有被触发——那么可以断定用户没有释放按钮。因此，可以判定为一次长按，可以执行关联的函数。
三、实践
让我们深入代码，完成这一功能。
首先，我们必须定义三件事，即:
1.一个变量用于存储计时器。
2.一个启动功能函数，用于启动计时器。
3.一个取消功能函数，用于取消计时器。
1、变量
这个变量主要用来保存setTimeout的值，以便当鼠标mouseup事件触发时我们可以取消它。
letpressTimer=null;
我们把变量值设置为null是为了在执行取消操作前，检查这个变量的值判断当前是否有一个正在运行的计时器。
2、启动函数
这个函数包括一个setTimeout，它是JavaScript中的一个基本方法，允许在特定时间之后执行一个函数。
注意，click事件执行的过程中，会触发另外两个事件。但是我们需要启动计时器的是mousedown
事件。如果只是点击事件，不需要启动计时器。//创建计时器(1s之后执行函数)
letstart=(e)=>{
//如果是点击事件，不启动计时器
if(e.type==='click'&&e.button!==0){
return;
}
//在启动一个定时器之前确保没有正在运行的计时器
if(pressTimer===null){
pressTimer=setTimeout(()=>{
//执行任务!!!
},1000)
}
}
3、取消函数
这个函数见名知意，用来取消启动函数创建的setTimeout。
要取消setTimeout，可以使用JavaScript中的clearTimeout方法，它主要用来清除setTimeout()
方法设置的计时器。
在使用clearTimeout之前，需要检查pressTimer变量是否为null。如果没有为
ull，意味着有一个正在运行的计时器。因此，我们需要先清除它，并且将pressTimer变量设置为null。letcancel=(e)=>{
//检查pressTimer的值是否为null
if(pressTimer!==null){
clearTimeout(pressTimer)
pressTimer=null
}
}
一旦mouseup事件触发，这个函数就会被调用。
4、设置触发器
剩下的就是将事件监听器添加到想要长按效果的按钮上。
addEventListener("mousedown",start);
addEventListener("click",cancel);
以上代码合到一起是这样://定义变量
letpressTimer=null;
//创建计时器(1秒后执行函数)
letstart=(e)=>{
if(e.type==='click'&&e.button!==0){
return;
}
if(pressTimer===null){
pressTimer=setTimeout(()=>{
//执行任务!!!
},1000)
}
}
//停止计时器
letcancel=(e)=>{
//检查是否有正在运行的计时器
if(pressTimer!==null){
clearTimeout(pressTimer);
pressTimer=null;
}
}
//选择id为longPressButton的元素
letel=document.getElementById('longPressButton');
//添加事件监听器
el.addEventListener("mousedown",start);
//长按事件取消，取消计时器
el.addEventListener("click",cancel);
el.addEventListener("mouseout",cancel);
5、用Vue指令包装
创建Vue指令时，可以创建全局或局部指令，本文中，我们采用全局指令。
首先，我们必须声明自定义指令的名称。
Vue.diective('longpress',{
})
这就注册了一个名为v-longpress的全局自定义指令。
接下来，我们添加带参数的bind钩子函数，它允许我们引用指令绑定的元素，获取传递给指令的值，并标识指令使用的组件。Vue.directive('longpress',{
bind:function(el,binding,vNode){
}
})
接下来，我们在bind函数中添加长按功能的代码。Vue.directive('longpress',{
bind:function(el,binding,vNode){
//定义变量
letpressTimer=null;
//定义函数处理程序
//创建计时器(1秒后执行函数)
letstart=(e)=>{
if(e.type==='click'&&e.button!==0){
return;
}
if(pressTimer===null){
pressTimer=setTimeout(()=>{
//执行任务!!!
},1000)
}
}
//取消计时器
letcancel=(e)=>{
//检查是否有正在运行的计时器
if(pressTimer!==null){
clearTimeout(pressTimer);
pressTimer=null;
}
}
//添加事件监听器
el.addEventListener("mousedown",start);
//取消计时器
el.addEventListener("click",cancel);
el.addEventListener("mouseout",cancel);
}
})
接下来，我们需要添加一个函数来运行传递给longpress指令的方法。Vue.directive('longpress',{
bind:function(el,binding,vNode){
//定义变量
letpressTimer=null;
//定义函数处理程序
//创建计时器(1秒后执行函数)
letstart=(e)=>{
if(e.type==='click'&&e.button!==0){
return;
}
if(pressTimer===null){
pressTimer=setTimeout(()=>{
//执行函数
handler();
},1000)
}
}
//停止计时器
letcancel=(e)=>{
//检查是否有正在运行的计时器
if(pressTimer!==null){
clearTimeout(pressTimer);
pressTimer=null;
}
}
//运行函数
consthandler=(e)=>{
//执行传递给指令的方法
binding.value(e)
}
//添加事件监听器
el.addEventListener("mousedown",start);
//取消计时器
el.addEventListener("click",cancel);
el.addEventListener("mouseout",cancel);
}
})
现在，可以在Vue应用中使用这个指令了，除非使用者给指令传入的值不是一个函数。因此，我们需要通过警告反馈给使用者。
为了反馈给使用者，我们在bind函数中添加了以下内容://确保提供的表达式是函数
if(typeofbinding.value!=='function'){
//获取组件名称
constcompName=vNode.context.name;
//将警告传递给控制台
letwarn=`[longpress:]providedexpression'${binding.expression}'isnotafunction,buthastobe`;
if(compName){warn+=`Foundincomponent'${compName}'`}
console.warn(warn);
}
最后，如果这个指令也适用于触屏设备，那会是极好的。因此，我们添加了touchstart、touchend和touchcancel
事件监听器。
最终代码如下:Vue.directive('longpress',{
bind:function(el,binding,vNode){
//确保提供的表达式是函数
if(typeofbinding.value!=='function'){
//获取组件名称
constcompName=vNode.context.name;
//将警告传递给控制台
letwarn=`[longpress:]providedexpression'${binding.expression}'isnotafunction,buthastobe`;
if(compName){warn+=`Foundincomponent'${compName}'`}
console.warn(warn);
}
//定义变量
letpressTimer=null;
//定义函数处理程序
//创建计时器(1秒后执行函数)
letstart=(e)=>{
if(e.type==='click'&&e.button!==0){
return;
}
if(pressTimer===null){
pressTimer=setTimeout(()=>{
//执行函数
handler();
},1000)
}
}
//取消计时器
letcancel=(e)=>{
//检查计时器是否有值
if(pressTimer!==null){
clearTimeout(pressTimer);
pressTimer=null;
}
}
//运行函数
consthandler=(e)=>{
//执行传递给指令的方法
binding.value(e)
}
//添加事件监听器
el.addEventListener("mousedown",start);
el.addEventListener("touchstart",start);
//取消计时器
el.addEventListener("click",cancel);
el.addEventListener("mouseout",cancel);
el.addEventListener("touchend",cancel);
el.addEventListener("touchcancel",cancel);
}
})
现在可以在Vue组件里使用了：
v-bind，动态绑定指令，缩写：:，比如:src="srcFilePath"其中srcFilePath是一个会动态变化的值，一般从后端获取；
v-slot，插槽指令，缩写：#，一般不使用缩写，可用于接收值然后在子组件中使用。
除了核心功能默认内置的指令 (v-model 和 v-show)，Vue 也允许注册自定义指令。注意，在 Vue2.0 中，代码复用和抽象的主要形式是组件。然而，有的情况下，你仍然需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令。