最后
基础知识是前端一面必问的，如果你在基础知识这一块翻车了，就算你框架玩的再6，webpack、git、node学习的再好也无济于事，因为对方就不会再给你展示的机会，千万不要因为基础错过了自己心怡的公司。前端的基础知识杂且多，并不是理解就ok了，有些是真的要去记。当然了我们是牛x的前端工程师，每天像背英语单词一样去背知识点就没必要了，只要平时工作中多注意总结，面试前端刷下题目就可以了。
在Vue.js中，ViewModel、View以及Model进行交互的方式，如下图所示
在Vue.js中可以使用v-model指令在表单元素上创建双向数据绑定
示例:
html代码：
{{ message }}
JavaScript代码：
// 这是Model
var exampleData = {
message: "Hello World!"
};
// 创建一个Vue实例
var vm=new Vue({
el: '#app',
data: exampleData
});
v-model双向绑定
当更改文本框的值时，
{{ message }}
中的内容也会被更新
============================================================================
Vue应用的创建很简单，语法如下面代码所示
语法:
var vm=new Vue({
// 选项参数
});
通过构造函数Vue就可以创建一个Vue的根实例，并启动Vue应用
常用的选项参数包含如下：
| 选项参数 | 说明 |
| :-: | :-- |
| el | 提供一个在页面上已存在的DOM元素作为Vue实例的挂载目标 |
| data | Vue实例的数据对象。Vue将会递归将data的属性转换为getter/setter，从而让data的属性能够响应数据变化 |
| methods | Vue实例的方法集合，可以在Vue直接调用或将方法绑定到DOM元素的事件上 |
| computed | Vue实例的计算属性集合 |
| watch | 观察Vue实例变化的一个表达式或计算属性函数 |
| components | 包含Vue实例可用组件的哈希表 |
| filters | 包含Vue实例可用过滤器的哈希表 |
| template | 定义字符串模板作为Vue实例的标识使用 |
示例： 通过Vue实例的data选项，可以声明应用内需要双向绑定的数据。
也可以将所有会用到的数据都预先在data内声明，这样不至于将数据散落在业务逻辑中，难以维护
HTML代码:
当挂载成功后，就可以通过vm.$el来访问该元素
JavaScriput 代码:
var vm=new Vue({
el:document.getElementById("app") // 或者是#app
});
示例： 通过Vue实例的data选项，可以声明应用内需要双向绑定的数据。也可以将所有会用到的数据都预先在data内声明，这样不至于将数据散落在业务逻辑中
HTML代码:
所有会用到的数据预先在data内声明
JavaScript代码:
var vm=new Vue({
el:"#app",
data:{
title:"",
user:{
name:"",
age:0
}
}
});
示例：
在Vue实例内部访问data中的数据时一般使用“this.数据”的方式，如果在Vue实例外部访问data中的数据时，使用Vue实例对象来访问
JavaScript代码:
var vm=new Vue({
//…data代码同上例
methods:{
doSave:function(){
console.log("姓名：",this.user.name)
}
}
});
var vm=new Vue({
//…data代码同上例
});
// 在Vue实例外部访问data中的数据
console.log(vm.user.name);
在实例外部，使用实例对象的方式访问
Vue实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染、更新、渲染到销毁等一系列过程，称为Vue的生命周期。
通俗说Vue实例从创建到销毁的过程，就是它的生命周期。
每个Vue实例创建时，都会经历一些系列的初始化过程，同时也会调用相应的生命周期函数，这些生命周期函数称为“钩子函数”
开发者可以利用这些钩子函数，在合适的时机执行相关业务逻辑代码。在Vue实例的生命周期，钩子比较常用的函数有：
- created()函数：实例建立完成后调用
- mounted()函数：el挂载到实例上后调用
- beforeDestroy()函数：实例销毁之前调用
示例： 下面示例中,在created()钩子函数中对模型加载数据，而在mounted()函数中读取el绑定的元素的信息。
HTML代码:
{{ title }}
JavaScript代码:
...
created:function() {
this.title="生命周期钩子函数";
console.log("created()钩子函数执行...");
}
...
...
mounted:function() {
console.log(this.$el);
console.log("模型title的值:",this.title);
console.log("mounted()钩子函数执行...");
}
...
========================================================================
Vue.js支持在{{}}的插值的尾部添加一个管道符（“|”）对数据进行过滤
创建过滤器有两种方式：
-
全局创建过滤器
-
局部创建过滤器
语法:
//创建全局过滤器
Vue.filter("过滤器名",function(val){
过滤语句
});
//创建局部过滤器
var vm = new Vue({
el: "#app",
filters:{
过滤器名:function(val){
过滤语句
}
}
});
{{ 模型数据 | 过滤器 }}
示例： 使用过滤器实现将英文单词转换为首字母大写显示。
HTML代码：
JavaScript代码：
//…
filters: {
tranformFilter: function (val) {
var strs = val.split(' ');
var result = "";
for (var i = 0; i < strs.length; i++) {
result += strs[i].charAt(0).toUpperCase() + strs[i].substring(1) + ' ';
}
return result;
}
}
//…
======================================================================
Vue是构建Web界面的JavaScript库。 使用Vue的过程就是定义MVVM各个组成部分的过程，其过程步骤如下 定义View。
最后
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
给大家分享一些关于HTML的面试题。
