前言
本人是一名后端开发，最近公司要使用Vue做一些页面，于是义无反顾的开始啃吃啃吃的啃掉Vue这块蛋糕
开始本文前，先来一波小知识点，写前端必知必会哦
必知必会
HTML（结构）：主要是标签，标签的主要作用是语义。
CSS（样式）：层叠样式表(英文全称：Cascading Style Sheets)，作用：定义网页的效果
清除浮动（标准形式）：
.clearfix:after{
visibility:hidden;
content:".";
display:block;
clear:both;
height:0;
}
备注：
1.visibility:hidden;隐藏内容，同时占位置；visibility:hidden+height:0 等同于 display:none，可以启到在同一个样式中同时使用 display中的两种属性的效果。
2.BFC：Block Formatting Context，块级格式化上下文，一个独立的块级渲染区域，该区域拥有一套渲染规则来约束块级盒子的布局，且与区域外部无关。
BFC产生的条件：
1.html根元素
2.float的值不为none
3.display的值为inline-block、table-cell、table-caption
4.position的值为absolute或fix
BFC约束规则：
1.生成BFC元素的子元素会一个接着一个防止。垂直方向上他们的起点事一个包含块的顶部，两个相邻子元素之间的垂直距离取决于元素的margin特性。在BFC中相邻的块级元素外边距会折叠，同属一个BFC的两个相邻Box的margin会发生重叠。
2.生成BFC元素的子元素中，每一个子元素左外边距与包含块的左边界接触，即使浮动元素也是如此（除非这个子元素自身也是一个浮动元素）。
3.BFC的区域不会与float的元素区域重叠。
4.计算BFC高度时，浮动元素也参与计算。
5.BFC就是页面上一个隔离的独立容器，容器里面的子元素不会影响到外面元素，反之亦然。
我们在写css常见的一些问题都可以由上面两条推出，例如：
1.Block元素与父元素同宽，所以Block元素竖直方向上垂直排列。
2.竖直方向上有的Block元素margin会重叠，水平方向不会。
3.浮动元素会尽量接近左上方或右上方。
4.为父元素设置overflow:hidden或浮动父元素，则父元素会包含其浮动的子元素。
3.position五种定位：
position定位是指定位置的定位，以下为常用的几种：1、static（静态定位）：当我们没有指定定位方式的时候，这时默认的定位方式就是static，也就是按照文档的书写布局自动分配在一个合适的地方，这种定位方式用margin来改变位置，对left、top、z-index等设置值无效，这种定位不脱离文档流2、relative定位（相对定位）：该定位是一种相对的定位，可以通过设置left、top等值，使得指定元素相对其正常的位置进行偏移，这种定位不脱离文档流；3、absolute定位（绝对定位）：这种定位通过设置top、right、bottom、left这些偏移值，相对于 static 定位以外的第一个父元素进行定位（这种定位通常设置父元素为relative定位来配合使用），在没有父元素的条件下，它的参照为body，该方式脱离文档流；4、fixed（固定定位）：这种定位方式是相对于整个文档的，只需设置它相对于各个方向的偏移值，就可以将该元素固定在页面固定的位置，通常用来显示一些提示信息，脱离文档流；5、inherit定位：这种方式规定该元素继承父元素的position属性值。
4.相对定位：占位置 作用：1.父相子绝 2.微调元素 比如：input标签底部无法对齐的处理
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>title</title> <style> span { position:relative; top:8px; } input { font-size: 32px; } </style> </head> <body>
<span>输入：</span> <input type="text"> </body> </html>
绝对定位：不占位置（说明：这里的占不占位置是指由于脱离了标准文档流）
标准流的盒子居中：margin：0 auto;
绝对定位的盒子居中：
position:absolute;
left:50%;
margin-left:-width/2;
固定定位：脱离标准流，不占位置 比如：固定导航栏 body { padding:导航栏的高度 }
JS（行为）
前端开发三大框架：
- angular（谷歌公司推出的）
- react（Facebook公司推出的）最先使用虚拟DOM
- vuejs（尤雨溪）
备注：jquery轮播图插件unslider 虚拟DOM比DOM渲染速度要快
函数：
1.构造函数 （js中一般首字母大写的默认为构造函数）
var arr = new Array();
2.字面量方式创建
var arr = [1,2,3];
3.定义在函数内部的方式：
function Person(name){
this.name = name;
this.fav = function(){ };
};
定义在函数外部的方式：
Person.propotype.fav = function(){
}; # 获取对象的父类
var person = new Person("snto");
Node.js
node.js 属于一个服务器语言（可以操作操作系统，可以打开文件）
前端语言不能这些操作是由于安全问题
node.js 在cmd中退出时 连续两次ctrl+c
node.js中导入模块的两种方式：
1.var fs = require("fs") #这种方式叫Commonjs模块 作用：异步的加载模块
2.import fs from "fs" #这种方式叫es6Module
备注：前端几种模块化方案（异步加载模块）：Commonjs、requirejs、seajs、es6Module
babel 工具的作用：解析es6代码转化为es5的语法
webpack 的作用：打包，将HTML、css、js、png等文件打包，也可以压缩这些文件
Vue的开始
Vue：数据驱动视图。
在Vue中凡是 出现 v-*/v-on/v-..等等的表示指令系统。我们在使用指令系统时，v-on:click = "..." 必须是一个字符串的形式
<div id="app"> <h1>{{ title }}</h1> <p>{{ content }}</p> <button v-on:click = "函数名">内容</button> </div> var options = { el:"#app", // 绑定的元素 data:{ title:'标题内容', content:'内容' }， methods：{ 函数名: function(){函数内容} } }; var app = new Vue(options);
data中声明的都是数据属性。
我们在对象外面调用对象内部的属性时，不能直接app.el，而要使用app.$el，因为Vue中封装了对应的属性。我们要在前面加$
Vue的母版中是声明式的渲染。支持运算
<h1>{{ 1+2 }}</h1> #显示 3 <h2>{{ 1>2 ?"真的":"假的" }}</h2> #显示 假的 （三目运算符）
v-if 和 v-show的区别和使用
v-if 条件指令 值为true 显示 ，反之不显示
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Title</title> <style> .show1 { width:200px; height:300px; background-color: red; } .show2 { width:200px; height:300px; background-color: green; } </style> </head> <body> <div id="app"> <div class="show1" v-if = "isShow"></div> <div class="show2" v-show = "isShow"></div> <button v-on:click = 'show'>v-if形式 or v-show形式的显示/隐藏</button> </div> <script src="vue.js"></script> <script> var options = { el:'#app', data:{ isShow:false }, methods:{ show:function(){ this.isShow= !this.isShow; } } }; var app = new Vue(options); </script> </body> </html>
区别：性能上的差异 v-if 内部是DOM的操作，如果为false，内部是删除的操作，为true是创建的操作，
v-show 内部是添加样式的操作，为true是设置样式 display:block; 为false是disply:none;
相对之下，我们在使用时，v-if适用于一次性的显示或隐藏，而 v-show适用于频繁的显示或隐藏
v-bind 的用法：只要是标签中的属性，都可以使用v-bind绑定，自定义的属性也可以绑定。用法： v-bind：属性 = "xxx",对于标签的class属性 v-bind：class = "{class名 ：对应数据属性data }"
Vue中的简化写法：v-bind：属性名 ==> : 属性名 v-on:click ==> @click
备注：
1.ES5和ES6中在Vue中函数的写法：
ES5: clickHandler : function(){ } 等价于 ES6：clickHandler(){ } #这种形式叫 对象的单体模式
2.a标签的默认事件：点击之后会默认的刷新页面
阻止a标签的默认事件的方式：1 <a href="javascript:;" @click="clickhand">点击</a> 或者 <a href="javascript:void(0);"></a>
a标签绑定事件时，会先走绑定的事件，在执行跳转，我们可以在这个事件中来阻止这个跳转操作
所有的事件都会传入一个事件对象，所以第二种阻止a标签默认事件的方式：clickhand(e){e.preventDefault();}（这种方式也可以用来阻止submit的默认事件：重新加载页面）
阻止form表单提交的默认事件（页面的刷新跳转），在form表单中使用 <form action="" onsubmit="return func()">，然后在form上面定义func
-
<script>
-
function func(){
-
return false;
-
}
-
</script>
Vue中也提供了一种阻止默认事件的方式：事件修饰符 @click.prevent = "xxx"
备注：使用Vue写的官网有：掘金（juejin） 使用react写的：豆瓣、网易云音乐
v-for 的用法：v-for的优先级是最高的。
v-for的两种形式实现图片的切换： v-for = "item in [....]" / v-for = "(item,index) in [...]"
<div id="app"> <img :src="firstimg" alt=""> <ul>
<li v-for = '(item,index) in imgs' @click = 'changeimg(index)' :class = "{active:index==current}">图片{{ item.id }}</li>
<!--<li v-for = 'item in imgs' @click = 'changeimg(item)' >图片{{ item.id }}</li>-->
</ul> </div> <script src="vue.js"></script> <script> var imgs = [{id:1,src:'1.jpg'},{id:2,src:'2.jpg'},{id:3,src:'3.jpg'},{id:4,src:'4.jpg'}]; var options = { el:'#app', data:{ imgs:imgs, firstimg:'1.jpg',
current:0
}, methods:{ changeimg:function (item) {
this.firstimg = this.imgs[item].src;
this.current = item;
// this.firstimg = item.src;
} } }; var app = new Vue(options);
备注：所有的标签都有title属性（鼠标悬停上去显示的信息）
你也可以用 of 替代 in 作为分隔符，因为它是最接近 JavaScript 迭代器的语法：
<div v-for="item of items"></div>
computed的使用
计算属性默认只有 getter ，不过在需要时你也可以提供一个 setter ：
// ...
computed: {
fullName: {
// getter
get: function () {
return this.firstName + ' ' + this.lastName
},
// setter
set: function (newValue) {
var names = newValue.split(' ')
this.firstName = names[0]
this.lastName = names[names.length - 1]
}
}
}
v-model的内部实现原理：
<form id="app"> <input type="text" :value='msg' @input = 'change'> <p>{{currentMsg}}</p> </form> <script type="text/javascript" src="vue.js"></script> <script type="text/javascript"> var app = new Vue({ el:"#app", data:{ msg:'双向数据绑定' }, methods:{ change(e){ console.log(e.target.value); this.currentMsg = e.target.value; } }, computed:{ currentMsg:{ get:function(){ return this.msg }, set:function(newValue){ this.msg = newValue; } } } }) </script>
备注：input事件默认接收一个参数，这个参数有个属性： e.target.value 就可以获取到当前输入的值，注意：在input事件后的函数或方法中不能用括号去接收这个值。
js中的全局变量是：window
v-html的用法：
双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，你需要使用 v-html 指令：
所以v-html用于将HTML的文本直接转义为真正的HTML。