欢迎光临
十年磨一剑

前端知识点总结——VUE

天马行空阅读(26)

1.框架和库的区别:

框架:framework 有着自己的语法特点、都有对应的各个模块
库 library 专注于一点

框架的好处:

1.提到代码的质量,开发速度
2.提高代码的复用率
3.降低模块之间的耦合度
(高内聚低耦合)

UI:user interface
GUI : graphical user interface
CLI : command line interface
API : application interface

思维模式的转换:

从操作DOM的思维模式 切换到 以数据为主

2.Vue概述

1、what    
    是一个渐进式的构建用户界面的js框架
2where
    小到的简单的表单处理,大到复杂的数据操作比较频繁的单页面应用程序
3、why
    1.方便阅读的中文文档
    2.容易上手 (学习曲线比较缓和)
    3.体积小
    4.基于组件化的开发方式
    5.代码的可读性、可维护性得到了提高
4、how
    工作方式:可以通过丰富的指令扩展模板,可以通过各种各样的插件来增强功能

    搭建环境:
    方式1
         全局安装 vue-cli
        $ npm install --global vue-cli
        # 创建一个基于 webpack 模板的新项目
        $ vue init webpack my-project
        # 安装依赖,走你
        $ cd my-project
        $ npm install
        $ npm run dev
    方式2:
        直接引入对应的js文件

3.Vue中基础知识

1、双花括号
    mustache(胡子)/interpolation(插值表达式)

    语法:
    <any>{{表达式}}</any>
    作用:
    将表达式执行的结果 输出当调用元素的innerHTML中;还可以将数据绑定到视图

    

2、指令-循环指令
    基本语法1:
    <any v-for="tmp in array"></any>
    基本语法2:
    <any v-for="(value,index) in array"></any>
    
    作用:
    在遍历array这个集合时,将临时变量保存在tmp中,创建多个any标签

3、指令-选择指令
    语法:
      <any v-if="表达式"></any>
      <any v-else-if="表达式"></any>
      <any v-else="表达式"></any>
    作用:
      根据表达式执行结果的真假,来决定是否要将当前的这个元素 挂载到DOM树


4、指令-事件绑定
    语法:
        <any v-on:eventName="handleEvent"></any>
    作用:
        给指定的元素 将handleEvent的方法绑定给指定eventName事件
    

5、指令-属性绑定
  基本语法:
    <any v-bind:myProp="表达式"></any>
    补充,支持简写:
    <any :myProp="表达式"></any>
  作用:
    将表达式执行的结果 绑定 到当前元素的myProp属性

    <img v-bind:src="'img/'+myImg" alt="">
   动态样式绑定
    <p :style="{backgroundColor:myBGColor}">动态样式绑定</p>

   动态样式类绑定
      <h1 :class="{myRed:false}">动态样式类的绑定</h1>

6、指令-双向数据绑定
    方向1:数据绑定到视图
    方向2:将视图中(表单元素)用户操作的结果绑定到数据

    基本语法:
      <表单元素 v-model="变量">
      </表单元素>


4.组件化

组件:组件就是可被反复使用的,带有特定功能的视图

所谓的组件化,就像玩积木一样,把封装的组件进行复用,把积木(组件)拼接在一起,构成一个复杂的页面应用程序。

组件树就是由各个组件构成的一种数据结构,它存在的意义是为了帮梳理应用程序

1、组件的创建
  全局组件
    Vue.component('my-com',{
      template:`
        <h2>it is a header</h2>
      `
    })
      局部组件
    new Vue({
        components:{
            'my-footer':{
           template:''
         }
        }
    })
2、组件使用
    作为普通的标签去使用
    <my-com></my-com>


3、注意事项
    1.组件的id和使用方式 遵循烤串式命名方式:a-b-c 
    2.如果一个组件 要渲染多个元素,将多个元素放在一个顶层标签中,比如div、form
    3.全局组件可以用在id为example的范围内的任何一个组件内部,直接调用可以;但是局部组件只能在父模板中直接调用


5.自定义指令

1、创建和使用
 Vue.directive('change',{
    bind:function(el,bindings){
    //首次调用
    },
    update:function(el,bindings){
    //只要是有数据变化,都会调用
    },
    unbind:function(){
    //解绑
    }
 })
 <any v-change="count"></any>


6.过滤器

过滤器是针对一些数据 进行筛选、过滤、格式化等相关的处理,变成我们想要的数据

过滤器的本质 就是一个带有参数带有返回值的方法

Vue1. 支持内置的过滤器,但是Vue2. 就不再内置过滤器,但是支持自定义过滤器。

1、过滤器的创建和使用

1.创建
   Vue.filter(
    'myFilter',
    function(myInput){
       //myInput是在调用过滤器时,管道前表达式执行的结果
       //针对myInput,按照业务需求做处理
       //返回
       return '处理后的结果'
    })

2.使用
    <any>{{expression | myFilter}}</any>

2、如何在调用过滤器时,完成参数的发送和接受

1.发送
<any>{{expression | myFilter(参数1,参数2)}}</any>

2.接受
Vue.filter('myFilter',function(myInput,参数1,参数2){
    return '处理后的结果'
})


7.复合组件

知识回顾:
  Vue.component('my-header',{
    template:`<div></div>`
  });

  <my-header></my-header>

 复合组件:并不是新的概念,就是一个组件,只不过这个组件中 可以调用其他的组件

 注意事项:
  1.组件要渲染的内容 取决于在定义组件时template
  
  <my-list>
    <my-item></my-item>
  </my-list>
  效果是出不来的
  2.允许在一个组件中,直接来调用另外一个组件


8.生命周期

四个阶段:
    create 准备工作 (数据的初始化。。。)
    mount  挂载前后针对元素进行操作
    update 数据发生变化,
    destroy 清理工作 (关闭定时器、集合清空..)

    beforeCreate/created
    beforeMount/mounted
    beforeUpdate/updated
    beforeDestroy/destroyed


9.常用属性

1、watch
       1. 表单元素的双向数据绑定
   v-model="myValue"
   2.监听
    watch:{
    myValue:function(newValue,oldValue){
    
    }
    }
2、computed
    计算属于是用于在模板中,搞定复杂的业务逻辑,因为有依赖缓存。
    1.指定计算属性
        computed:{
          myHandle:function(){
           return 数据
          }
        }

    2.调用
        <any>{{myHandle}}</any>


10.组件间通信

1、父与子通信 (props down)
    1.发送
        <son myName='zhangsan'>
        </son>
    2.接受
        到son组件:
        Vue.component('son',{
          props:['myName'],
          template:`
           <p>{{myName}}</p>
          `
        })
    
2、子与父通信 (events up)
     1.绑定
    methods:{
     handleEvent:function(msg){}
    }
    <son @customEvent="handleEvent"></son>
    2.触发
    子组件内部:
    this.$emit(‘customEvent’,100);

3、ref(reference 引用/参考 外号)
 帮助在父组件中 得到子组件中的数据、方法。
    1.指定ref属性
    <son ref="mySon"></son>

    2.根据ref得到子组件实例
    this.$refs.mySon

4、$parent
    this.$parent得到父组件的实例

5、兄弟组件通信
    1.var bus = new Vue();
    2.接收方
    bus.$on('eventName',function(msg){})
    3.发送方
    bus.$emit('eventName',123);

11.补充组件创建的方式

1、直接在template属性中指定模板内容
    1.全局组件
    Vue.component
    2.局部组件
    {
      components:{
        'my-footer':{template:``}
      }
    }
2、.vue结尾的文件
    <template></template>
    <script></script>
    <style></style>
3、单独指定一个模板内容
    <script
    id='myContent'
    type='text/x-template'>
    </script>

    Vue.component('',{
      template:'#myContent'
    })

12.路由模块

路由模块的本质 就是建立起url和页面之间的映射关系

1、SPA的基本概念和工作原理

SPA:single page application 单一页面应用程序,只有一个完整的页面;
它在加载页面时,不会加载整个页面,而是只更新某个指定的容器中内容。
比如Gmail、移动的webApp


工作原理:
1.解析地址栏 
    完整的页面地址、路由地址
2.根据路由地址 从路由词典中找到真正的要加载的页面
3.发起ajax请求 
    请求要加载的页面
4.像指定的容器中 插入加载来的页面

2、路由模块的基本使用

专业术语: 
    router路由器 
    route路由
    routes 路由数组(路由词典)
1.引入vue.js vue-router.js
2.指定一个容器
<router-view></router-view>
3.创建业务所需要用到的组件类
        var MyLogin = Vue.component()
4.配置路由词典
 const myRoutes = [
  {path:'',component:MyLogin},
  {path:'/login',component:MyLogin}
 ];

 const myRouter = new VueRouter({
  routes:myRoutes
 })

 new Vue({
   router:myRouter
 })
5.测试
    修改地址栏中的路由地址,测试看加载的组件是否正确

注意事项:
 1.先引入vue,再引入插件
 2.一定要指定router-view
 3.route路由 {path:'',component:}
  routes 路由数组 []
  router 路由器:按照指定的路由规则去访问对应的组件 new VueRouter



3、使用路由模块来实现页面跳转的方式

方式1:直接修改地址栏
方式2:js
this.$router.push(‘路由地址’);
方式3:
 <router-link 
 to="路由地址"></router-link>

4、完成参数的传递

在页面之间跳转的时候,在有些场景下,需要同时指定参数

1.明确发送方和接收方
list --20--> detail
1.配置接收方的路由地址
/detail --》 /detail/:index

this.$route.params.index
2.发送
routerLink to="/detail/20"
this.$router.push('/detail/20')


5、路由嵌套

在一个路由中,path对应一个component,如果这个component需要根据
不同的url再加载其他的component,称之为路由的嵌套

举例:比如A组件现在需要根据不同的url,加载B组件或者C组件
1.给A组件指定一个容器
  <router-view></router-view>
2.配置路由词典
  {
    path:'/a',
    component:A,
    children:[
      {path:'/b',component:B}
    ]
  }

  需求:现在有两个组件,分别是login/mail,建立SPA。
  在此基础上,希望mail组件 嵌套inbox/outbox/draft

  补充:在设置子路由,路由匹配规则依然是适用的,
  只不过路由地址为空和异常,要携带父组件的路由地址
  /mail /mail/draft

13.搭建基于CLI开发环境的方式

1.指定一个文件夹
C:\xampp\htdocs\framework\vue\project
2.将tpls.zip拷贝到project中 
3.右键单击压缩包,解压缩到当前文件夹
4.进入到tpls
5.同时按下shift和鼠标右键,选择在此位置打开命令行串口
6.执行npm install
7.执行npm start

14.axios

1.axios的get方法

export const getAjax= function (getUrl,getAjaxData) {
  return axios.get(getUrl, {
    params: {
      'getAjaxDataObj1': getAjaxData.obj1,//obj1为getAjaxData的一个属性
      'getAjaxDataObj2': getAjaxData.obj2
    }
  })
}

2.axios的post方法

export const postAjax= function (getUrl,postAjaxData) {
return axios.get(postUrl, {

  'postAjaxDataObj1': postAjaxData.obj1,//obj1为postAjaxData的一个属性
  'postAjaxDataObj2': postAjaxData.obj2

})
}

3.axios的拦截器
主要分为请求和响应两种拦截器,请求拦截一般就是配置对应的请求头信息(适用与常见请求方法,虽然ajax的get方法没有请求头,但是axios里面进行啦封装),响应一般就是对reponse进行拦截处理,如果返回结果为[]可以转化为0

1.请求拦截:将当前城市信息放入请求头中

axios.interceptors.request.use(config => {
config.headers.cityCode = window.sessionStorage.cityCode //jsCookie.get(‘cityCode’)
return config
},

2.响应拦截:处理reponse的结果

axios.interceptors.response.use((response) =>{
  let data = response.data
  if(response.request.responseType === 'arraybuffer'&&!data.length){
    reponse.date=0
  }
})

v-model和v-for指令

天马行空阅读(17)

1.基本雏形

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script type="text/javascript">
        window.onload = function(){
            var vm = new Vue({
                el:'#box',
                data:{
                    msg:'Hello Vue!'
                }
            });
        }
    </script>
</head>
<body>
    <div id="box">
        {{msg}}
    </div>
</body>
</html>

需要new一个Vue实例,实例化的时候传入了一个对象{el:'#box',data:{msg:'Hello Vue!'}}。这个意思是:Vue这个只控制id="box"这个DIV元素,同时在 HTML模板上使用双花括号{{xxxx}}语法,来访问data中定义的数据。

上面代码我们new处理一个Vue的实例,并赋值给了vm变量,通过这个vm变量,我们也可以访问其中定义的数据:

            var vm = new Vue({
                el:'#box',
                data:{
                    msg:'Hello Vue!'
                }
            });

            console.log(vm.msg); //'Hello Vue!'

2.v-model指令
所谓的“指令”其实就是扩展了HTML标签功能(属性)。
v-model的双向数据绑定

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script type="text/javascript">
        window.onload = function(){
            var vm = new Vue({
                el:'#box',
                data:{
                    msg:'Hello Vue!'
                }
            });
        }
    </script>
</head>
<body>
    <div id="box">
        <input type="text" v-model="msg"/><br/>
        {{msg}} 
    </div>
</body>
</html>

通过v-model 指令,我们把msg 数据绑定到了input文本框,我们修改文本框的值,发现msg 数据改变了。

注意:如果我们定义的数据是数组或者json,在模板上会怎样显示出来呢?

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script type="text/javascript">
        window.onload = function(){
            var vm = new Vue({
                el:'#box',
                data:{
                    msg:'Hello Vue!',
                    arr:['apple','banana','orange'],
                    json:{a:'apple',b:'banana'}
                }
            });
        }
    </script>
</head>
<body>
    <div id="box">
        <input type="text" v-model="msg"/><br/>
        {{msg}} <br/>
        {{arr}} <br/>
        {{json}}

    </div>
</body>
</html>

数组和json都被当作字符串输出了,显然这不是我们理想的效果。

3.v-for指令

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <script src="http://unpkg.com/vue/dist/vue.js"></script>

    <script type="text/javascript">
        window.onload = function(){
            var vm = new Vue({
                el:'#box',
                data:{
                    arr:['apple','banana','orange'],
                    json:{a:'apple',b:'banana'}
                }
            });
        }
    </script>
</head>
<body>
    <div id="box">
        <p>循环数组</p>
        <ul>
            <li v-for="a in arr">
            {{a}}
            </li>
        </ul>
        <hr>
        <p>循环出数组索引</p>
        <ul>
            <li v-for="(v,k) in arr">
            {{v}}==>{{k}}
        </ul>
        <p>循环json</p>
        <ul>
            <li v-for="item in json">{{item}}</li>
        </ul>
        <p>循环json的键</p>
        <ul>
            <li v-for="(k,v) in json">
            {{k}}==>{{v}}
            </li>
        </ul>
    </div>
</body>
</html>

Vue基础——初识Vue

天马行空阅读(20)

一、到底什么是Vue?

一个MVVM框架(库),和Angular类似,比较容易上手,小巧。详细概念参考《什么是Vue.js?

官网:http://cn.vuejs.org/

手册:http://cn.vuejs.org/api/

二、vue和angular的区别?

2.1、Vue——简单、易学

① 指令以 v-xxx

② 一片html代码配合上json,在new出来vue实例

③ 个人维护项目

④ 适合: 移动端项目,小巧

⑤ vue的发展势头很猛,github上start数量已经超越angular

2.2、angular——上手难

① 指令以 ng-xxx

② 所有属性和方法都挂到$scope身上

③ angular由google维护

④ 合适: pc端项目

共同点: 不兼容低版本IE

三、vue基本雏形

3.1 、angular展示一条基本数据:

<div ng-app="app" ng-controller="xxx">
    {{msg}}
</div>
<script>
    var app = angular.module("app",[]);
    app.controller("xxx",function($scope){
        $scope.msg = "welcome";
    })
</script>

3.2、vue展示一条基本数据:

<div id="app">
    {{msg}}
</div>
<script>
    new Vue({
        el:"#app",
        data:{
            msg:"welcome"
        }
    });
</script>

 

Vue.js最佳实践(五招让你成为Vue.js大师)

天马行空阅读(28)

本文面向对象是有一定Vue.js编程经验的开发者。如果有人需要Vue.js入门系列的文章可以在评论区告诉我,有空就给你们写。

对大部分人来说,掌握Vue.js基本的几个API后就已经能够正常地开发前端网站。但如果你想更加高效地使用Vue来开发,成为Vue.js大师,那下面我要传授的这五招你一定得认真学习一下了。

第一招:化繁为简的Watchers

场景还原:

created(){
    this.fetchPostList()
},
watch: {
    searchInputValue(){
        this.fetchPostList()
    }
}

组件创建的时候我们获取一次列表,同时监听input框,每当发生变化的时候重新获取一次筛选后的列表这个场景很常见,有没有办法优化一下呢?

招式解析:
首先,在watchers中,可以直接使用函数的字面量名称;其次,声明immediate:true表示创建组件时立马执行一次。

watch: {
    searchInputValue:{
        handler: 'fetchPostList',
        immediate: true
    }
}

第二招:一劳永逸的组件注册

场景还原:

import BaseButton from './baseButton'
import BaseIcon from './baseIcon'
import BaseInput from './baseInput'

export default {
  components: {
    BaseButton,
    BaseIcon,
    BaseInput
  }
}
<BaseInput
  v-model="searchText"
  @keydown.enter="search"
/>
<BaseButton @click="search">
  <BaseIcon name="search"/>
</BaseButton>

我们写了一堆基础UI组件,然后每次我们需要使用这些组件的时候,都得先import,然后声明components,很繁琐!秉持能偷懒就偷懒的原则,我们要想办法优化!

招式解析:
我们需要借助一下神器webpack,使用 require.context() 方法来创建自己的(模块)上下文,从而实现自动动态require组件。这个方法需要3个参数:要搜索的文件夹目录,是否还应该搜索它的子目录,以及一个匹配文件的正则表达式。

我们在components文件夹添加一个叫global.js的文件,在这个文件里借助webpack动态将需要的基础组件统统打包进来。

import Vue from 'vue'

function capitalizeFirstLetter(string) {
  return string.charAt(0).toUpperCase() + string.slice(1)
}

const requireComponent = require.context(
  '.', false, /\.vue$/
   //找到components文件夹下以.vue命名的文件
)

requireComponent.keys().forEach(fileName => {
  const componentConfig = requireComponent(fileName)

  const componentName = capitalizeFirstLetter(
    fileName.replace(/^\.\//, '').replace(/\.\w+$/, '')
    //因为得到的filename格式是: './baseButton.vue', 所以这里我们去掉头和尾,只保留真正的文件名
  )

  Vue.component(componentName, componentConfig.default || componentConfig)
})

最后我们在main.js中import 'components/global.js',然后我们就可以随时随地使用这些基础组件,无需手动引入了。

第三招:釜底抽薪的router key

场景还原:
下面这个场景真的是伤透了很多程序员的心…先默认大家用的是Vue-router来实现路由的控制。
假设我们在写一个博客网站,需求是从/post-page/a,跳转到/post-page/b。然后我们惊人的发现,页面跳转后数据竟然没更新?!原因是vue-router”智能地”发现这是同一个组件,然后它就决定要复用这个组件,所以你在created函数里写的方法压根就没执行。通常的解决方案是监听$route的变化来初始化数据,如下:

data() {
  return {
    loading: false,
    error: null,
    post: null
  }
}, 
watch: {
  '$route': {
    handler: 'resetData',
    immediate: true
  }
},
methods: {
  resetData() {
    this.loading = false
    this.error = null
    this.post = null
    this.getPost(this.$route.params.id)
  },
  getPost(id){

  }
}

bug是解决了,可每次这么写也太不优雅了吧?秉持着能偷懒则偷懒的原则,我们希望代码这样写:

data() {
  return {
    loading: false,
    error: null,
    post: null
  }
},
created () {
  this.getPost(this.$route.params.id)
},
methods () {
  getPost(postId) {
    // ...
  }
}

招式解析:

那要怎么样才能实现这样的效果呢,答案是给router-view添加一个unique的key,这样即使是公用组件,只要url变化了,就一定会重新创建这个组件。(虽然损失了一丢丢性能,但避免了无限的bug)。同时,注意我将key直接设置为路由的完整路径,一举两得。

<router-view :key="$route.fullpath"></router-view>

第四招: 无所不能的render函数

场景还原:
vue要求每一个组件都只能有一个根元素,当你有多个根元素时,vue就会给你报错

<template>
  <li
    v-for="route in routes"
    :key="route.name"
  >
    <router-link :to="route">
      {{ route.title }}
    </router-link>
  </li>
</template>


 ERROR - Component template should contain exactly one root element. 
    If you are using v-if on multiple elements, use v-else-if 
    to chain them instead.

招式解析:
那有没有办法化解呢,答案是有的,只不过这时候我们需要使用render()函数来创建HTML,而不是template。其实用js来生成html的好处就是极度的灵活功能强大,而且你不需要去学习使用vue的那些功能有限的指令API,比如v-for, v-if。(reactjs就完全丢弃了template)

functional: true,
render(h, { props }) {
  return props.routes.map(route =>
    <li key={route.name}>
      <router-link to={route}>
        {route.title}
      </router-link>
    </li>
  )
}

第五招:无招胜有招的高阶组件

划重点:这一招威力无穷,请务必掌握
当我们写组件的时候,通常我们都需要从父组件传递一系列的props到子组件,同时父组件监听子组件emit过来的一系列事件。举例子:

//父组件
<BaseInput 
    :value="value"
    label="密码" 
    placeholder="请填写密码"
    @input="handleInput"
    @focus="handleFocus>
</BaseInput>

//子组件
<template>
  <label>
    {{ label }}
    <input
      :value="value"
      :placeholder="placeholder"
      @focus=$emit('focus', $event)"
      @input="$emit('input', $event.target.value)"
    >
  </label>
</template>

有下面几个优化点:

1.每一个从父组件传到子组件的props,我们都得在子组件的Props中显式的声明才能使用。这样一来,我们的子组件每次都需要申明一大堆props, 而类似placeholer这种dom原生的property我们其实完全可以直接从父传到子,无需声明。方法如下:

    <input
      :value="value"
      v-bind="$attrs"
      @input="$emit('input', $event.target.value)"
    >
   

$attrs包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时,这里会包含所有父作用域的绑定,并且可以通过 v-bind=”$attrs” 传入内部组件——在创建更高层次的组件时非常有用。

2.注意到子组件的@focus=$emit('focus', $event)"其实什么都没做,只是把event传回给父组件而已,那其实和上面类似,我完全没必要显式地申明:

<input
    :value="value"
    v-bind="$attrs"
    v-on="listeners"
>

computed: {
  listeners() {
    return {
      ...this.$listeners,
      input: event => 
        this.$emit('input', event.target.value)
    }
  }
}

$listeners包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on=”$listeners” 传入内部组件——在创建更高层次的组件时非常有用。

3.需要注意的是,由于我们input并不是BaseInput这个组件的根节点,而默认情况下父作用域的不被认作 props 的特性绑定将会“回退”且作为普通的 HTML 特性应用在子组件的根元素上。所以我们需要设置inheritAttrs:false,这些默认行为将会被去掉, 以上两点的优化才能成功。


结尾

掌握了以上五招,你就能在Vue.js的海洋中自由驰骋了,去吧少年。
陆续可能还会更新一些别的招数,敬请期待。

什么是vue.js?(概念很清楚)

天马行空阅读(433)

Vue.js新手入门指南

最近在逛各大网站,论坛,以及像SegmentFault等编程问答社区,发现Vue.js异常火爆,重复性的提问和内容也很多,楼主自己也趁着这个大前端的热潮,着手学习了一段时间的Vue.js,目前用它正在做自己的结业项目。在做的过程中也对Vue.js的官方文档以及其各种特性有了许多认识。作为一个之前以PHP+模版引擎为主的开发,从一个从未接触过除HTML+CSS+JavaScript+jQuery以外的前端技术的人到现在可以独立使用Vue.js以及各种附属的UI库来开发项目,我总结了一些知识和经验想与大家分享。

下面我就以问答的形式来分享吧。这里假设你仅仅只掌握了HTML+CSS+JavaScript,如果你对JQuery这个前端库,以及各种后端模版语言比如说PHP,JSP还有所了解并且使用过的话那就太好了。

1.Vue.js是什么?

Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的 渐进式框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合。另一方面,Vue 完全有能力驱动采用单文件组件和 Vue 生态系统支持的库开发的复杂单页应用。

Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

如果你是有经验的前端开发者,想知道 Vue.js 与其它库/框架的区别,查看对比其它框架

这是官网的介绍,是不是觉得非常的抽象非常的官方?看完之后可能还是有很多人不是很懂这个框架到底是用来做什么的,什么是“渐进式框架”?什么是“自底向上增量开发”?什么是“视图层”?什么是“单文件组件”?什么是“复杂的单页应用?”第二段话里面“响应的数据绑定和组合的视图组件”这又是个啥?还有最后一段话,“Vue.js 与其它库/框架的区别”究竟是什么?

不要担心,如果你慢慢看完这里面的所有问答,一定会对前面那些可能你从未听说过的专业术语有一种恍然大悟的感觉。

2.Vue.js到底是什么?

想必现在能看到我这篇文章的人,都是用着APP或者网页版知乎在阅读把。Vue.js就是一个用于搭建类似于网页版知乎这种表单项繁多,且内容需要根据用户的操作进行修改的网页版应用。

3.单页应用程序(SPA)

顾名思义,单页应用一般指的就是一个页面就是应用,当然也可以是一个子应用,比如说知乎的一个页面就可以视为一个子应用。单页应用程序中一般交互处理非常多,而且页面中的内容需要根据用户的操作动态变化。

4.你前面说的网页版知乎我也可以用JQuery写啊,为什么要用Vue.js呢?

讲到JQuery,就不得不说到JavaScript的DOM操作了。如果你用JQuery来开发一个知乎,那么你就需要用JQuery中的各种DOM操作方法去操作HTML的DOM结构了。

现在我们把一个网页应用抽象一下,那么HTML中的DOM其实就是视图,一个网页就是通过DOM的组合与嵌套,形成了最基本的视图结构,再通过CSS的修饰,在基本的视图结构上“化妆”让他们看起来更加美观。最后涉及到交互部分,就需要用到JavaScript来接受用户的交互请求,并且通过事件机制来响应用户的交互操作,并且在事件的处理函数中进行各种数据的修改,比如说修改某个DOM中的innerHTML或者innerText部分。

我们把HTML中的DOM就可以与其他的部分独立开来划分出一个层次,这个层次就叫做视图层。

Vue 的核心库只关注视图层

我们为什么要把视图层抽取出来并且单独去关注它呢?

因为在像知乎这种页面元素非常多,结构很庞大的网页中,数据和视图如果全部混杂在一起,像传统开发一样全部混合在HTML中,那么要对它们进行处理会十分的费劲,并且如果其中有几个结构之间存在藕断丝连的关系,那么会导致代码上出现更大的问题,这什么问题呢?

你是否还记得你当初写JQuery的时候,有写过(‘#xxx’).parent().parent().parent()这种代码呢?当你第一次写的时候,你觉得页面元素不多,不就是找这个元素的爸爸的爸爸的爸爸吗,我大不了在注释里面写清楚这个元素的爸爸的爸爸的爸爸不就好了。但是万一过几天之后你的项目组长或者你的产品经理突然对你做的网页提出修改要求,这个修改要求将会影响页面的结构,也就是DOM的关联与嵌套层次要发生改变,那么(‘#xxx’).parent().parent().parent()可能就会变成$(‘#xxx’).parent().parent().parent().parent().parent()了。

这还不算什么,等以后产品迭代越来越快,修改越来越多,而且页面中类似的关联和嵌套DOM元素不止一个,那么修改起来将非常费劲。而且JQuery选择器查找页面元素以及DOM操作本身也是有性能损失的,可能到时候打开这个页面,会变得越来越卡,而你却无从下手。

当你在编写项目的时候遇到了这种问题,你一定会抱怨,为什么世上会有HTML这种像盗梦空间一样的需要无数div嵌套才能做出页面的语言,为什么当初学JQuery看中的是它简洁的DOM操作,现在却一点也不觉得它有多简洁,难道我学的是假的JQuery?为什么写个代码这么难,你想砸电脑,你想一键盘拍在产品狗的脑袋上,责怪他天天改需求才让你原本花清香茶清味的代码变得如此又臭又长。

这个时候如果你学过Vue.js,那么这些抱怨将不复存在。

5.Vue.js为什么能让基于网页的前端应用程序开发起来这么方便?

因为Vue.js有声明式,响应式的数据绑定,与组件化的开发,并且还使用了Virtual DOM这个看名字就觉得高大上的技术。

可是这些名词都是啥?

6.响应式的数据绑定

这里的响应式不是@media 媒体查询中的响应式布局,而是指vue.js会自动对页面中某些数据的变化做出响应。至于是如何响应的,大家可以先把下面这段代码随便粘贴到一个扩展名为html的文件然后用浏览器打开,随便在文本框里面输入一些文字,观察一下页面变化。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue.js测试 - 代码之美专栏</title>
    <!-- author:昌维 代码之美 https://zhuanlan.zhihu.com/codes -->
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <input type="text" name="" value="" placeholder="在这里输入文字,下面会跟着变化" v-model="message">
        <hr>
        <p>{{ message }}</p>
    </div>
    <script type="text/javascript">
        var app = new Vue({
          el: '#app',
          data: {
            message: 'Hello Vue!'
          }
        })
    </script>
</body>
</html>

是不是会发现一个很神奇的现象,文本框里面输入的文字和后面的p标签中的内容一起变化?

换句话说,p标签里面通过{{ message }}这个写法与input标签中的value绑定在了一起,其中变化,另外一个和它绑定的数据就跟着变化。

结合标题来说,就是vue.js会自动响应数据的变化情况,并且根据用户在代码中预先写好的绑定关系,对所有绑定在一起的数据和视图内容都进行修改。而这种绑定关系,在图上是以input 标签的v-model属性来声明的,因此你在别的地方可能也会看到有人粗略的称vue.js为声明式渲染的模版引擎。

7.组件化开发

还记得在传统前端开发的时候,我们都是每个人做一个页面,然后最后套入各种后端模版引擎,比如说PHP的Smarty或者Java的JSP等等。

但是现在我们做单页应用,页面交互和结构十分复杂,一个页面上就有许许多多的模块需要编写,而且往往一个模块的代码量和工作量就非常庞大,如果还按照原先的方法来开发,那么会累死人。而且遇到以后的产品需求变更,修改起来也非常麻烦,生怕动了其中一个div之后,其他div跟着雪崩,整个页面全部乱套,或者由于JavaScript的事件冒泡机制,导致修改一些内层的DOM事件处理函数之后,出现各种莫名其妙的诡异BUG。

在面向对象编程中,我们可以使用面向对象的思想将各种模块打包成类或者把一个大的业务模块拆分成更多更小的几个类。在面向过程编程中,我们也可以把一些大功能拆分成许多函数,然后分配给不同的人来开发。

在前端应用,我们是否也可以像编程一样把模块封装呢?这就引入了组件化开发的思想。

Vue.js通过组件,把一个单页应用中的各种模块拆分到一个一个单独的组件(component)中,我们只要先在父级应用中写好各种组件标签(占坑),并且在组件标签中写好要传入组件的参数(就像给函数传入参数一样,这个参数叫做组件的属性),然后再分别写好各种组件的实现(填坑),然后整个应用就算做完了。

8.Virtual DOM

现在的网速越来越快了,很多人家里都是几十甚至上百M的光纤,手机也是4G起步了,按道理一个网页才几百K,而且浏览器本身还会缓存很多资源文件,那么几十M的光纤为什么打开一个之前已经打开过,已经有缓存的页面还是感觉很慢呢?这就是因为浏览器本身处理DOM也是有性能瓶颈的,尤其是在传统开发中,用JQuery或者原生的JavaScript DOM操作函数对DOM进行频繁操作的时候,浏览器要不停的渲染新的DOM树,导致页面看起来非常卡顿。

而Virtual DOM则是虚拟DOM的英文,简单来说,他就是一种可以预先通过JavaScript进行各种计算,把最终的DOM操作计算出来并优化,由于这个DOM操作属于预处理操作,并没有真实的操作DOM,所以叫做虚拟DOM。最后在计算完毕才真正将DOM操作提交,将DOM操作变化反映到DOM树上。

对于vue.js的Virtual DOM,目前业界有着褒贬不一的评价。有人认为Vue.js作为一个轻量级框架,引入Virtual DOM会加大Vue.js本身的代码尺寸,也会消耗更多CPU(手机上会更耗电)(注意:消耗更多的CPU并不意味着会更卡,因为JavaScript计算是后台计算,他的计算量还不至于让DOM操作变得卡顿),并且在操作单个DOM元素的时候,反而多了一道计算工序,会更慢。但也有人认为基本上会用Vue.js开发的都是页面中内容很多的元素,肯定操作的DOM量级普遍较大,平均一下还是比较划算的。

9.我到底该怎么用Vue.js做单页应用开发?

说了这么多,我还是不知道怎么用它做出一个像知乎那样的页面啊,到底怎么学它呢?

前面我们看了一个响应式的数据绑定案例,那只是一个DEMO,而且也看不出有什么实际意义,离真正的单页应用程序还差得远,到底怎么用它开发真实的项目呢?

我的建议是,先把介绍 – vue.js官方文档的基础部分硬着头皮看一遍。除了组件这个小节涉及到了很多晦涩难懂的名词以外,前面几章完全就是把Vue.js当作一个模版引擎来用。

然后开始学习ECMAScript6,Webpack,NPM以及Vue-Cli的基本用法,最好对Node.js也要有所了解。

最后组件部分先大致看一遍,了解组件里面都有哪些概念之后,开始看网上各种实战视频以及文章还有别人开源的源代码。

10.在前面你提到过好几次ECMAScript,这是啥?

ECMAScript听名字好像和JavaScript很像,难不成他们有什么千丝万缕的联系?

没错你猜对了,他们之间还真有着很深的联系。

引用阮一峰老师的话:(ECMAScript 6入门

要讲清楚这个问题,需要回顾历史。1996年11月,JavaScript 的创造者 Netscape 公司,决定将 JavaScript 提交给国际标准化组织ECMA,希望这种语言能够成为国际标准。次年,ECMA 发布262号标准文件(ECMA-262)的第一版,规定了浏览器脚本语言的标准,并将这种语言称为 ECMAScript,这个版本就是1.0版。

该标准从一开始就是针对 JavaScript 语言制定的,但是之所以不叫 JavaScript,有两个原因。一是商标,Java 是 Sun 公司的商标,根据授权协议,只有 Netscape 公司可以合法地使用 JavaScript 这个名字,且 JavaScript 本身也已经被 Netscape 公司注册为商标。二是想体现这门语言的制定者是 ECMA,不是 Netscape,这样有利于保证这门语言的开放性和中立性。

因此,ECMAScript 和 JavaScript 的关系是,前者是后者的规格,后者是前者的一种实现(另外的 ECMAScript 方言还有 Jscript 和 ActionScript)。日常场合,这两个词是可以互换的。

而ECMAScript6就是新一代的JavaScript语言。

这里也强烈推荐大家学习ECMAScript6的时候参考这本书ECMAScript 6入门

11.我在学习Vue.js的时候老是听到Webpack,这是啥?

Webpack是一个前端打包和构建工具。如果你之前一直是手写HTML,CSS,JavaScript,并且通过link标签将CSS引入你的HTML文件,以及通过Script标签的src属性引入外部的JS脚本,那么你肯定会对这个工具感到陌生。不要紧,我们先来了解一下为什么要用Webpack,然后带着原因去学习就好了。

12.为什么要用Webpack

前面说了,做一个单页应用程序本身就相当复杂,而且在做的时候肯定会使用到很多素材和别的第三方库,我们该如何去管理这些东西呢?

还有前面讲到了Webpack是一个前端打包工具,前端代码为什么要打包呢?因为单页应用程序中用到很多素材,如果每一个素材都通过在HTML中以src属性或者link来引入,那么请求一个页面的时候,可能浏览器就要发起十多次请求,往往请求的这些资源都是一些脚本代码或者很小的图片,这些资源本身才几k,下载连1秒都不需要,但是由于HTTP是应用层协议,它的下层是TCP这个运输层协议,TCP的握手和挥手过程消耗的时间可能比下载资源本身还要长,所以需要把这些小文件全部打包成一个文件,这样只要一次TCP握手和挥手的过程,就把多个资源给下载下来了,并且多个资源由于都是共享一个HTTP请求,所以head等部分也是共享的,相当于形成了规模效应,让网页展现更快,用户体验更好。

前面说到Webpack还有构建的功能,这就不得不提到了ECMAScript6这个新版本的JavaScript,但是现在国内外还有很多人用着老版本的浏览器,这些浏览器并不支持ECMAScript6,那么我们的前端项目如何在这种浏览器上运行呢?这就需要Webpack的Loader自动载入一个转换器来将我们写的ECMAScript6转换成浏览器能支持的老版本JavaScript语言,这个转换器的名字叫做babel,如果你以后听到或者看到了这个单词,应该要知道它就是一个ECMAScript6 to 老版本JavaScript的转换器了。这也是Webpack的构建功能。当然对前端有更深入的同学还会知道Sass,Less,stylus之类的CSS预处理器,我们也可以通过在Loader中编写特定的规则来实现自动将这些CSS预处理语言转换成普通浏览器能识别的CSS代码。

开头的介绍提到了vue.js可以使用单文件组件开发项目,其实也是通过Webpack将单文件组件中的模版,样式以及JS转换到主页面中

当然Webpack不止这点功能,它还可以通过安装各种插件来扩展,比如说热加载技术,就是解放键盘的F5键。让我们修改代码,并且按Ctrl+S保存之后,浏览器页面自动刷新变化,不需要我们去手动刷新,还有一些插件可以自动添加注释,自动给CSS代码加上一些浏览器内核对CSS3兼容前缀,就像webkit-xxx之类的一样。

13.NPM和Node.js又是什么?它们是什么关系?

首先讲讲node.js。我们知道通常情况下,JavaScript的运行环境都是浏览器,因此JavaScript的能力也就局限于浏览器能赋予它的权限了。比如说读写本地系统文件这种操作,一般情况下运行在浏览器中的JavaScript代码是没有这个操作权限的。如果我们想用JavaScript写出一些能够运行在操作系统上的,能够具有像PHP,JAVA之类的编程语言具有的功能的程序该怎么办呢?Node.js就解决了这个问题。Node.js是一个服务端的JavaScript运行环境,通过Node.js可以实现用JavaScript写独立程序。像我们之前提到的Webpack就是Node.js写的,所以作为一个前端开发,即使你不用Node.js写独立程序,也得配一个Node.js运行环境,毕竟很多前端工具都是使用它写的。

NPM是一个node.js的包管理器。我们在传统开发的时候,JQuery.js大多都是百度搜索,然后去官网下载,或者直接引入CDN资源,这种方法太过于麻烦。如果以后遇到其他的包,这个包的代码本身可能还调用了其他的包(也称这个包和其他的那几个包存在依赖关系),那么我们要在自己的项目中引入一个包将变得十分困难。现在我们有了NPM这个包管理器,直接可以通过

npm install xxx包名称

的方式引入它,比如说

npm install vue

就自动在当前项目文件夹下导入了这个包,并且npm自动下载好了vue这个包依赖的其他包。

至于有的人在按照网上的npm教程配置的时候踩坑了,发现下载速度很慢或者完全下载不了,那是因为我国有着众所周知的原因,网上也有各种解决方法可以解决这个问题,大家多善用搜索引擎

前面提到了Webpack可以安装各种插件来扩展功能,其实也是通过这种方式扩展。

如果你学过PHP的话,NPM就和PHP里面的Composer差不多。也和CentOS下的yum和Ubuntu下的apt-get差不多。

14.Vue-CLi又是啥?

它是一个vue.js的脚手架工具。说白了就是一个自动帮你生成好项目目录,配置好Webpack,以及各种依赖包的工具,它可以通过

npm install vue-cli -g

的方式安装,后面的-g表示全局安装的意思,意味着你可以打开命令行之后直接通过vue命令调用它。

15.我该不该学Vue.js?

现在Vue.js无论是发展势头还是作者支持还是很好的,而且它本身中文资料就比较多,教程也很多,现在随随便便打开几个和前端开发有关的知乎专栏,基本上都能见到相关文章,社区也很活跃。

至于你该不该学,取决于你自己,如果你当前只是做做以内容展示为主的项目,或者就是成天用各种CMS建站仿站,并且以后都不打算更换更好的工作,那么可以暂时不用学。如果你开发的项目交互非常多,而且前后端开发都对前后端分离有很清楚的认识,那么可以大胆的学习,并且在实际项目中运用。

16.Vue.js怎么火起来的?

关于这个问题,网上说法很多,我自己认为主要还是前些年大前端变革太快,而最近一年开始Vue.js+Webpack这个组合开始逐渐稳定下来了,而且已经有了很多中文资料。

对比它的竞争对手AngularJS,新旧版本项目无法平滑升级,变革太大让用户感觉不安稳。

React本身主流推荐用的是JSX,需要额外学习一门语法(什么?学Vue.js还要学ECMAScript6?现在ECMAScript6是趋势,并不是因为Vue.js才要学的),并且React本身用的是render写法编写模版代码,这让很多用习惯了Smarty等后端模版引擎得人来使用感觉很不适应,现在看来React本身在中国一些论坛社区的火爆程度还是没有Vue.js高。

当然也并不是说除了Vue.js以外其他框架都很差。像知乎新版也是用React开发的,他还是有各自优秀的地方大家可以深入学习之后做出自己的判断。

17.我在很多地方还看到Vuex和Vue-route,它们又是什么?

Vuex是vue的一个状态管理器。用于集中管理一个单页应用程序中的各种状态。

Vue-route是vue的一个前端路由器,这个路由器不是我们上网用的路由器,而是一个管理请求入口和页面映射关系的东西。它可以实现对页面局部进行无刷新的替换,让用户感觉就像切换到了网页一样。

要讲清楚这两个东西,又得花费大量篇幅,所以这里只是简单提一下,先学好vue.js本身才是最重要的。

18.我还在一些地方看到过Vue-resource和Axios,它们又是什么?

我们在传统的前后端不分离的开发中,后端直接把数据通过模版引擎拼接进了返回的HTML中。而现在做单页应用程序属于前后端分离开发,那么这个单页应用程序中的数据就得通过ajax的方式获取,也要通过ajax的方式提交到后端。

在传统开发中我们都是通过xmlhttprequest手动操作,或者通过JQuery的ajax方法来进行数据提交获取。

vue.js本身没有封装ajax操作库,所以我们要通过Vue-resource和Axios来进行ajax操作,而因为种种原因,现在vue.js2.0已经将axios作为官方推荐的ajax库了。

19.我该学Vue.js2.0还是1.0呢?

现在很多框架和语言都是学新不学旧(Python慢慢也变得如此),因此如果不是为了维护老旧项目,肯定推荐学Vue.js2.0。而且学会了Vue.js2.0,再去学习Vue.js1.0也不是什么难事。

20.写Vue.js用什么开发工具和电脑呢?

前端开发基本上不需要太高端的电脑都能胜任,现在这个时代是台电脑,装个编辑器都可以做前端开发的。

Vue.js的组件文件本质上还是普通的代码文件,所以各种编辑器配合一些语法检查插件就足够了。我自己用的是sublime text 3,安装一些插件之后可以实现.vue单文件组件高亮代码以及各种自动完成。Webstorm中也有类似插件,大家可以在网上各种教学文章的指导下配置好环境。

我用的主题是Monokai,这个主题在大部分显示器下长时间观看眼睛不会很疼。我使用的显示器是LG IPS236,部分显示器有亮度色标调节,我这款显示器调到2.0左右会比较舒适,过低会导致底部的茶色背景变黑,反差较大更加疲劳,过高会导致对比度不足,画面泛白影响调色。

结语:

可能包括我在内的很多人在看到Vue.js那神奇的双向绑定优雅写法都会有一种非常惊艳,而看到中文文档发布之后有种想立马学习的冲动。可惜大前端终究是大前端,如果一个对于前端各个方面没有深入认识就想着能一步登天,肯定对不起大前端的“大”字。原本看着只想学一个Vue.js,没想到顺带把ECMAScript6,Webpack配置,ESLint配置,bable配置,npm使用,node.js语法,以后vue全家桶中的vuex,vue-route等等等等都学了一遍。前段时间网上也流传出了一个职位叫做Webpack配置工程师,从这里也可以看出弄懂前端这个大杂烩确实不是那么容易。大家一起加油,有什么问题也可以在评论区回复,我会抽空补充在文章内容中。谢谢各位的支持!~

vue前端框架面试问题汇总,附答案

天马行空阅读(1271)

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,再加多一个模块:module里面test、loader
4.1、scss是什么?在vue.cli中的安装使用步骤是?有哪几大特性?
答:css的预编译。使用步骤:第一步:用npm 下三个loader(sass-loader、css-loader、node-sass)第二步:在build目录找到webpack.base.config.js,在那个extends属性中加一个拓展.scss

第三步:还是在同一个文件,配置一个module属性

第四步:然后在组件的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()来劫持各个属性的settergetter,在数据变动时发布消息给订阅者,触发相应的监听回调。

具体步骤:

第一步:需要observe的数据对象进行递归遍历,包括子属性对象的属性,都加上 settergetter
这样的话,给这个对象的某个值赋值,就会触发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节点,里面有(标签名、子节点、文本等等)

24、Vuex是什么?为什么使用Vuex?

答:Vuex 类似 Redux 的状态管理器,用来管理Vue的所有组件状态。

当你打算开发大型单页应用(SPA),会出现多个视图组件依赖同一个状态,来自不同视图的行为需要变更同一个状态。

25、vuejs与angularjs的区别?

答:
一、定位 :
虽然Vue.js被定义为MVC framework,但其实Vue本身还是一个library,加了一些其他的工具,可以被当成一个framework,而Angular 2虽然还是一个framework,但其实在设计之初,Angular 2的团队站在了更高的角度,希望做一个platform。

二、文档
vue.js的更加亲切

三、性能:
angular所有的数据和方法都是挂载在$scope上。而vue的数据和方法都是挂载在vue上,只是数据挂载在vue的data,方法挂载在vue的methods上,vue的代码风格更加优雅,json格式书写代码。Vue.js 有更好的性能,并且非常非常容易优化,因为它不使用脏检查。Angular,当 watcher 越来越多时会变得越来越慢,因为作用域内的每一次变化,所有 watcher 都要重新计算。

其它区别:
渲染性能:Vue> react >angular。
使用场景:Vue React 覆盖中小型,大型项目。angular 一般用于大型(因为比较厚重)

26、vue为什么不直接操作dom?

答:因为操作dom对象后,会触发一些浏览器行为,比如布局(layout)和绘制(paint)。  paint是一个耗时的过程,然而layout是一个更耗时的过程,我们无法确定layout一定是自上而下或是自下而上进行的,甚至一次layout会牵涉到整个文档布局的重新计算。浏览器的layout是lazy的,也就是说:在js脚本执行时,是不会去更新DOM的,任何对DOM的修改都会被暂存在一个队列中,在当前js的执行上下文完成执行后,会根据这个队列中的修改,进行一次layout。

27、你怎么理解vue是一个渐进式的框架?

答:我觉得渐进式就是不必一开始就用Vue所有的全家桶,可以根据场景,按需使用想要的插件。也可以说就使用vue不需要太多的要求。

28、Vue声明组件的state是用data方法,那为什么data是通过一个function来返回一个对象,而不是直接写一个对象呢?
答:从语法上说,如果不用function返回就会出现语法错误导致编译不通过。从原理上的话,大概就是组件可以被多次创建,如果不使用function就会使所有调用该组件的页面公用同一个数据域,这样就失去了组件的概念了

29、说下vue组件之间的通信?
答:
非父子组件间通信,Vue 有提供 Vuex,以状态共享方式来实现同信,对于这一点,应该注意考虑平衡,从整体设计角度去考量,确保引入她的必要。

父传子: this.$refs.xxx 子传父: this.$parent.xxx

还可以通过$emit方法出发一个消息,然后$on接收这个消息

30、vue中mixin与extend区别?
答:
全局注册混合对象,会影响到所有之后创建的vue实例,而Vue.extend是对单个实例进行扩展。

mixin 混合对象(组件复用)

同名钩子函数(bind,inserted,update,componentUpdate,unbind)将混合为一个数组,因此都将被调用,混合对象的钩子将在组件自身钩子之前调用

methods,components,directives将被混为同一个对象。两个对象的键名(方法名,属性名)冲突时,取组件(而非mixin)对象的键值对

挑战一下:
1、vue响应式原理?
2、vue-router实现原理?
3、为什么要选vue?与其它框架对比的优势和劣势?
4、vue如何实现父子组件通信,以及非父子组件通信?
5、vuejs与react的区别?
6、vuex是用来做什么的?
7、vue源码结构
8、vue路由,hash history是怎么监听的?
9、你使用过服务端渲染SSR吗?

不定项选择题:

  • 下列关于vue的组件说法不正确的是(    )
    1. 不一定要写style
    2. template视图里可以写多个div容器
    3. 父组件给子组件传值需定义props属性
    4. 子组件与父组件通信需定义$emit属性

 

  • 下面关于vue的声明周期说法不正确的是(    )
    1. 总共分为8个阶段:创建前/后、载入前/后、更新前/后、销毁前/后、
    2. updated和beforeUpdate分别是更新完成和更新前
    3. 创建后this才可以获取属性、mounted时$el节点才被渲染
    4. created创建后$el就不是undefined了
  • 下面关于js框架说法正确的是(    )
    1. Vue是一个MVVM框架
    2. Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件
    3. Vue中可以使用 v-for 指令来循环对象
    4. 在 input 输入框中我们可以使用 v-model 指令来实现双向数据绑定