前端开发Vue教程笔记（一）

beforeCreate，在实例开始初始化时同步调用，此时数据观测，事件等都尚未初始化。

created，在实例创建之后调用，此时已完成数据绑定，事件方法，但尚未开始DOM编译，即是未挂载到document中。

beforeMount，在mounted之前运行。

mounted，在编译结束时调用，此时所有指令已生效，数据变化已能触发DOM更新，但不保证$el已插入文档。

beforeDestroy，在开始销毁实例时调用。

destroyed，在实例被销毁之后调用，此时所有绑定和实例指令都已经解绑，子实例也被销毁。

updated，在实例挂载之后，再次更新实例并更新完DOM结构后调用。

activated，需要配合动态组件keep-live属性使用，在动态组件初始化渲染的过程中调用该方法。

8.文本插值

数据绑定基础形式是文本插值，使用{{}}，为Mustache语法：

hello {{name}}

单次插值：

{{name}}

9.HTML属性

示例：

10.绑定表达式

放在Mustache标签内的文本内容称为绑定表达式。每个绑定中只能包含单个表达式，并不支持JavaScript语句，不支持正则表达式。

11.过滤器

vue允许在表达式后添加可选的过滤器，以管道符 "|"指示，可以有多个过滤器链式使用：

{{time | paramsTime}}

12.计算属性

var vm = new Vue({

el: ‘#app’,

data: {

firstName: ‘da’,

lastName: ‘飘哥’,

}

computed: {

fullName: function() {

// this 指向vm实例

return this.firstName + ’ ’ + this.lastName

}

}

});

{{firstName}}

{{lastName}}

{{fullName}}

13.Setter

示例：

var vm = new Vue({

el: ‘#el’,

data: {

num: 100,

}

computed: {

price: {

set: function(newValue){

this.num = newValue * 100;

},

get: function() {

return (this.num/100).toFixed(2);

}

}

}

});

14.表单控件

输入框示例：

dadaqianduan {{message}}

单选框示例：

男

女

{{gender}}

checkbox复选框，单个勾选框和多个勾选框

dadaqianduan{{checked}}

多个勾选框，v-model使用相同的属性名称，且属性为数组：

1

2

3

{{multiChecked.join('|')}}

select:

单选：

A B C

dadaqianduan: {{selected}}

多选：

A B C

dadaqianduan: {{multiSelected.join(‘|’)}}

15.绑定value

表单控件的值同样可以绑定在vue实例的动态属性上。

// checkbox

选中：vm.checked==vm.a

未选中：vm.hchecked==vm.b

16.class与style绑定

class属性，绑定的数据可以是对象和数组

vm实例中需要包含：

data: {

active: true

}

渲染结果：<div class="tab active"></div>

数组语法

data: {

classA: ‘class-a’,

classB: ‘class-b’,

}

渲染结果：`<div class="class-a class-b’>

17.内联样式绑定

1. 对象语法：直接绑定符合样式格式的对象

data: {

dada: {

color: ‘green’,

fontSize: ‘10px’

}

}

2. 数组语法：v-bind:style允许将多个样式对象绑定到统一元素上。

18.模板渲染

前端渲染的优点：

第一，业务分离，后端只需要提供接口，前端在开发时也不需要部署对应得后端环境，通过一些代理服务器工具就能远程获取后端数据进行开发，能够提升开发效率。

第二，计算量得转移，原本需要后端渲染得任务交给了前端，减轻了服务器得压力。

后端渲染的优点：

第一，对搜索引擎比较友好。

第二，首页加载时间端，后端渲染加载完成后就直接显示html，但前端渲染在加载完成后还需要有段js渲染的时间。

19.条件渲染

v-if和v-else的作用是根据数据值来判断是否输出该DOM元素，以及包含的子元素。

v-else必须紧跟v-if，不然该指令不起作用。

v-show元素的使用会渲染并保存在DOM中。只是切换元素的css属性display。

v-if和v-show的条件发生变化时，v-if引起了dom操作级别的变化，而v-show仅仅发生了样式的变化，从切换的角度来说，v-show消耗的性能要比v-if小。

v-if切换时，vue.js会有一个局部编译/卸载的过程，因为 v-if 中的模板也可能包括数据绑定或子组件。v-if 会确保条件块在切换当中适当地销毁与中间内部的事件监听器和子组件。

v-if 是惰性的，如果在初始条件为假时，v-if 本身什么都不会做，而v-show 则仍会进行正常的操作，然后把 css 样式设置为 display:none。

v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗

20.列表渲染

示例：

• {{item.web}}

  {{item.da}}

  var vm = new Vue({

  el : ‘#app’,

  data: {

  items : [

  { title : ‘web-1’, description : ‘da-1’},

  { title : ‘web-2’, description : ‘da-2’},

  { title : ‘web-3’, description : ‘da-3’},

  { title : ‘web-4’, description : ‘da-4’}

  ]

  }

  });

  v-for 内置了 $index 变量，输出当前数组元素的索引，也可以自己指定索引的别名。<li v-for="(index,item) in items">{{index}} – {{$index}} – {{item.title}}</li>

  在vue.js中提供了$set方法，修改数据的同时进行试图更新。

  vm.$set(‘item[0]’, {title: ‘da’})

  为了帮助大家对自己的 Vue 掌握程度有一定的认识，对缺漏之处进行弥补，整理了85道 Vue 面试题，整理不易 如果觉得本文有帮助 记得点赞三连哦 十分感谢！

  Vue 面试题总结

  vue-cli工程

  • 构建的 vue-cli 工程都到了哪些技术，它们的作用分别是什么？

  • vue-cli 工程常用的 npm 命令有哪些？

  • 请说出vue-cli工程中文件夹和文件的用处

  • config文件夹 下 index.js 的对于工程 开发环境 和 生产环境 的配置

  • 请你详细介绍一些 package.json 里面的配置

  vue核心知识点

  • 对于Vue是一套渐进式框架的理解

  • vue.js的两个核心是什么？

  • 请问 v-if 和 v-show 有什么区别

  • vue常用的修饰符

  • v-on可以监听多个方法吗？

  • vue中 key 值的作用

  • vue-cli工程升级vue版本

  • vue事件中如何使用event对象？

  • $nextTick的使用

  • Vue 组件中 data 为什么必须是函数

  • v-for 与 v-if 的优先级

  • vue中子组件调用父组件的方法

  • vue中 keep-alive 组件的作用

  • vue中如何编写可复用的组件？

  • 什么是vue生命周期？

  • vue生命周期钩子函数有哪些？

  • vue如何监听键盘事件中的按键？

  • vue更新数组时触发视图更新的方法

  • vue中对象更改检测的注意事项

  • 解决非工程化项目初始化页面闪动问题

  • v-for产生的列表，实现active的切换

  • v-model语法糖的组件中的使用

  • vue中自定义过滤器

  • vue等单页面应用及其优缺点

  • 什么是vue的计算属性？

  • vue-cli提供的几种脚手架模板

  • vue父组件如何向子组件中传递数据？

  • vue弹窗后如何禁止滚动条滚动？

  • 计算属性的缓存和方法调用的区别

  • vue-cli中自定义指令的使用

  

  vue-router

  • vue-router如何响应 路由参数 的变化？

  • 完整的 vue-router 导航解析流程

  • vue-router有哪几种导航钩子（ 导航守卫 ）？

  • vue-router传递参数的几种方式

  • vue-router的动态路由匹配

  • vue-router如何定义嵌套路由？

  • 组件及其属性

  • vue-router实现路由懒加载（ 动态加载路由 ）

  • vue-router路由的两种模式

  • history路由模式配置及后台配置

  vuex

  • 什么是vuex？

  • 使用vuex的核心概念

  • vuex在vue-cli中的应用

  文末

  如果30岁以前，可以还不知道自己想去做什么的话，那30岁之后，真的觉得时间非常的宝贵，不能再浪费时间在一些碎片化的事情上，比如说看综艺，电视剧。一个人的黄金时间也就二，三十年，不能过得浑浑噩噩。所以花了基本上休息的时间，去不断的完善自己的知识体系，希望可以成为一个领域内的TOP。

  同样是干到30岁，普通人写业务代码划水，榜样们深度学习拓宽视野晋升管理。

  这也是为什么大家都说30岁是程序员的门槛，很多人迈不过去，其实各行各业都是这样都会有个坎，公司永远都缺的高级人才，只用这样才能在大风大浪过后，依然闪耀不被公司淘汰不被社会淘汰。

  269页《前端大厂面试宝典》

  包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目，涵盖了初中级前端技术点。

  开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

  

  前端面试题汇总

  

  JavaScript