1、v-for:循环列表。
<ul>
<li v-for="item in items">{{item}}</li>
</ul>
items:['1','2','3']
还可以在控制台上直接对数组进行操作：如app.items.push('4');
2、v-on:事件绑定。v-on:click。
3、在app对象内，要用里面的data数据，则需要this.来访问。
4、mvvm(model viewmodel model)
5、开发中什么叫方法，什么叫函数？
方法：methods:在类里面的函数叫方法
函数：function
6、vue生命周期：在创建一个vue实例时，vue已经做了一系列操作了。生命周期也称钩子函数。
7、代码规范：两个空格而不是四个空格。
8、v-once在某些情况下，我们不希望界面随意的跟随改变。该指令只渲染一次，不会随着数据的改变而改变。
9、v-html 数据会按照HTML格式进行解析。
10、v-text 和双括号比较相似，都是用于将数据显示在界面中。不能作用的标签上内写文本，否则会覆盖该文本。
11、v-pre 原封不动地显示内容。
12、v-cloak 配合[v-cloak]{display:none}来使用，目的是在js解析完前，不让拥有它的标签呈现，js解析完后
会自动删除它。
13、v-bind 给属性绑定值：如 <img v-bind:src="imgurl">
14、计算属性computed:在某些情况，我们可能需要对数据进行一些转化后再显示，或者需要将多个数据结合起来进行显示
计算属性会进行缓存，如果多次使用时，计算属性只会调用一次。这样性能就会高一些。
计算属性是有set,和get方法。但一般都不用set方法，表示它是一个只读属性。
15、ES6之前var没有块级作用域的概念，所以在很多时候，我们都必须借助于function的作用域来解决应用外面变量的问题。
ES6中，加入了let,let它是有if和for的块级作用域。
16、一旦给const修饰的标识符被赋值之后，不能修改。在使用const定义标识符，必须进行赋值。常量的含义是指向的对象
不能改，但是可以改变对象内部的属性。
17、v-on 如果方法不需要额外参数，那么会默认将原生事件event参数传递过去。如果需要同时传入某个参数，同时需要
event时，Vue会默认将浏览器生产的event事件对象作为参数传入到方法。
v-on修饰符：stop可以阻止事件冒泡。<div @click="divClick">
<button @click.stop ></button>
</div>
prevent可以阻止事件自动提交。<form action="baidu">
<input type="submit" value="提交" @click.prevent="submitClick">
</form>
监听某个键的键帽：如enter。<input type="text" @keyup.enter="keyup">
once 只触发一次回调。
18、v-if，v-else-if,v-else
19、v-show,v-if的区别：v-if当条件为false时，包含v-if指令的元素，根本就不会存在dom中。
v-show只是给元素添加一个行内样式:display:none
如何选择：当需要在显示与隐藏之间切换很频繁时，使用v-show。当只有一次切换时，用v-if。
20、官方推荐我们在使用v-for时，给对应的元素或组件添加上一个：key属性。
当某一层有很多相同的节点时，也就是列表节点时，我们希望插入一个新的节点。我们希望可以在B和C之间插入一个F，Diff算法
默认执行起来是这样的：即把C更新成C，E更新成D，最后再插入E，是不是很没有效率。
所以我们需要使用key值来给每个节点做一个唯一标识，Diff算法就可以正确的识别此节点，找到正确的位置区插入新的节点。key
的作用主要是为了高效的更新虚拟DOM。
21、哪些数组得方法是响应式的。this.letters.push('s');//会渲染到页面上，是响应式的。类似的还有：pop,shift,unshift,splice,sort,reverse
而 this.letters[0]=“bbbbb”//数组会被改变，但是不会渲染到页面上。不是响应式的。
复习：push:在数组最后面添加元素，可以是多个
pop:删除数组的第一个元素
shift：删除数组中第一个元素
unshift：在数组最前面添加元素，可以是多个.
splice:删除元素/插入元素/替换元素
splice(start,num);//num没有，从start起后面全删。
splice(start,num,'m','l','n');//替换元素
splice(start,0,'m','l','n');//插入元素
sort：排序，可传参数(同java，进行升序降序排列)
reverse:反转数组。
附加：set(要修改的对象，索引值，修改后的值)
Vue.set(this.letters,0,'bbb');也是响应式的。
22、两种简便for循环：for(let i in books)//取出来的i是数组下标值。
for(let item of books)//取出来的item是数组的项。
23、js函数补充：
filter：它的回调函数有一个要求：必须返回一个boolean值，当返回true时，函数内部会自动将这次回调的n加入到新的数组中，当返回false时，
函数内部会自动过滤掉这次的n。
map：返回的值都加到一个新数组里。
reduce：对数组中所有值进行汇总。如全部相加，全部相乘。nums.reduce(function(preValue,n)){}第一个参数是上次循环return的值，n是这
次的值。array.reduce(function(total, currentValue, currentIndex, arr), initialValue)
function(total,currentValue, index,arr) 必需。用于执行每个数组元素的函数。函数参数:
total 必需。初始值, 或者计算结束后的返回值。
currentValue 必需。当前元素
currentIndex 可选。当前元素的索引
arr 可选。当前元素所属的数组对象。
initialVal 可选。传递给函数的初始值
小例子：需求如下：将数组中小于100的数乘以2之后，全部相加。
const nums = [10,20,30,110,234,43,567,34];
let total = nums.filter(function(n){
return n<100
}).map(function(n){
return n*2
}).reduce(function(preValue,n){
return preValue +n
},0)
更简单的方法：箭头函数
num.filter(n=>n<100).map(n=>n*2).reduce((pre,n)=>pre+n);
24、v-model指令是如何实现的？
v-model其实也是个语法糖，它的本质上实际上是包含两个操作：
通过v-bind指令把message绑定给输入框的value，然后用v-on监听输入框的input事件来实现反向绑定。
<input type="text" v-model="message">
<input type="text" :value="message" @input="valueChange">
valueChange(event){
this.message = event.target.value;
}
或者直接一点：@input="message=$event.target.value"
25、
1、用单选框实现性别互斥。
通过使用name来实现:(有label的for属性，点击按钮和文字都能够进行选中)
<lable for="male">
<input type="radio" id="male" name="sex" value="男" v-model="sex">男
<label>
<lable for="female">
<input type="radio" id="female" name="sex" value="女" v-model="sex">女
<label>
<h4>您选择的性别是：{{sex}}</h4>
data:sex:'男'
2、 checkbox实现单选框。
<label for="agree">
<input type="checkbox" id="agree" v-model="isAgree">同意协议
</label>
<h2>您选择的是：{{isAgree}}</h2>
3、checkbox实现多选
<input type="checkbox" value="篮球" v-model="hobbies">篮球
<input type="checkbox" value="足球" v-model="hobbies">足球
<input type="checkbox" value="乒乓球" v-model="hobbies">乒乓球
<input type="checkbox" value="羽毛球" v-model="hobbies">羽毛球
hobbies:[]
4、select实现单选
<select name="abc" v-model="fruit" >
<option value="苹果">苹果</option>
<option value="香蕉">香蕉</option>
<option value="榴莲">榴莲</option>
<option value="葡萄">葡萄</option>
</select>
5、select实现多选
<select name="abc" v-model="fruits" mutiple>
<option value="苹果">苹果</option>
<option value="香蕉">香蕉</option>
<option value="榴莲">榴莲</option>
<option value="葡萄">葡萄</option>
</select>
26、值绑定v-bind
<label v-for="item in Hobbies" :for="item">
<input type="checkbox" :value="item" :id="item" v-model="hobbies">{{item}}
</label>
Hobbies:['篮球','乒乓球','足球','羽毛球']
27、修饰符
lazy:v-model默认是在input事件中同步输入框的数据的。也就是说，一旦有数据发生改变时
就会自动发生改变。lazy修饰符可以让数据在数去失去焦点或者回车时才会更新。
number：默认情况下，在输入框中无论我们输入的是字母还是数字，都会被当作字符串进行
进行处理。number修饰符可以让在输入框中输入的内容自动转换成数字类型。
trim:如果输入的内容首尾有很多空格，通常我们希望将其去除，trim修饰符可以过滤掉内容左右两边的空格。
28、组件使用三个步骤：（1）创建组件构造器对象（2）注册组件（3）使用组件。
1、Vue.extend();
调用Vue.extend()创建的是一个组件构造器。通常在创建组件构造器时，传入template代表我们自定义组件的模板。
该模板就是在使用到组件的地方，要显示的HTML代码。事实上，这种写法在Vue2.x的文档中已经看不到了。
2、Vue.component();
调用Vue.component()是将刚才的组件构造器注册为一个组件，并且给它起一个组件的标签名称。所以要传入两个参
数：一个是注册组件的标签名，另一个是组件构造器。
3、组件构造器必须挂载在某个Vue的实例下，否则它不会生效。
4、全局组件和局部组件。Vue.components是全局组件。
const app = new Vue({
el:'#app',
components:{//局部组件
cpn:cpnC//cpn使用组件时的标签名，cpnC组件构造器名。
}
})
5、注册组件的语法糖：
const cpn1 = Vue.extend({
template:
<div>
<h2>我是标题一</h2>
</div>
})
Vue.component('cpn1',cpn1);
等于:
Vue.component('cpn1',{
template:
<div>
<h2>我是标题一</h2>
</div>
});
注册局部组件是在app实例里面进行的，用components属性同上面那样替换即可。
6、组件的分离式写法
方法一：
<script type="text/x-template" id="cpn">
<div>
<h2>我是标题一</h2>
</div>
</script>
Vue.component('cpn',{
template:'#cpn'
})
方法二：
<template id="cpn">
<div>
<h2>我是标题一</h2>
</div>
</template>
Vue.component('cpn',{
template:'#cpn'
})
7、组件数据的存放
组件对象也有一个data属性（也可以有methods等属性），只是这个data属性必须是一个函数，而且这个函数返回一个
对象，对象内部保存着数据。
8、组件中的data为什么是函数。
因为data中放回的对象一定要不同，不然所有组件都是一个状态。
9、父子组件通信----子传父
props:来声明需要从父级接收到的数据。
props的值有两种方式：方式一：字符串数组，数组中的字符串就是传递时的名称。
简单实例：
<div id="#app">
<child-cpn:cmessage="message"></child-cpn> //将data中的数据传递给props
</div>
<template id="childCpn">
<div>显示的信息{{cmessage}}</div> //将props中的数据显示在子组件中
</template>
<script>
let app=new Vue({
el:'#app',
data:{
message:'hello'// Vue实例中的data
},
components:{
'child-cpn':{
template:'#childCpn',
props:{'cmessage'} //子组件的props
}
}
})
</script>
方式二：对象，对象可以设置传递时的类型，也可以设置默认值等。
Vue.component('my-component',{
props:{
propA:Number,
propB:[Number,String],
propC:{
type:String,
default:100
required:true
},
//带有默认值的对象
propD:{
type:Object,
//对象或数组默认值必须从一个工厂函数获取
default:function(){
return { message:'hello'}
}
}，
//自定义验证函数
propE:{
validator:function(value){
//这个值必须匹配下列字符串中的一个
return ['success' ,'warning','danger'].indexof(value)!== -1
}
}
}
})
10、v-bind不支持驼峰命名法.
11、父传子
自定义事件。流程是：在子组件中，通过$emit()来触发事件。
在父组件中，通过v-on来监听子组件事件。
例子：
<!-- 父组件模板 -->
<div id="app">
<cpn @item-click="cpnClick"></cpn>
</div>
<!-- 子组件模板 -->
<template id="cpn">
<div>
<button v-for="item in catagories" @click="btnClick(item)">{{item.name}}</button>
</div>
</template>
<script src="vue.js"></script>
<script>
const cpn={
template:'#cpn',
data(){
return {
catagories:[
{ id:'aaa',name:'热门推荐'},
{ id:'bbb',name:'手机数码'},
{ id:'ccc',name:'家用家电'},
{ id:'ddd',name:'电脑办公'},
]
}
},
methods:{
btnClick(item){
//发送事件
this.$emit('item-click',item)
}
}
}
//父组件
var app = new Vue({
el:'#app',
data:{
message:'你好'
},
components:{
cpn
},
methods:{
cpnClick(item){
console.log("--",item);
}
}
})
</script>
29、插槽
1.使用<slot></slot>
2.插槽的默认值 <slot>button</slot>//中间有多个也会全部替换。
3.具名插槽。
30、CommonJs
模块化有两个核心：导入和导出。
CommonJS的导出：
module.exports = {
flag:true,
test(a,b){
return a+b
}
}
CommonJs的导入：
let { test ,flag}=require('路径');
31、ES6中的导入和导出
导出：export{name ,age , height}或者可以定义的时候也可以直接导出
导入：import{name} from ''./aaa.js''
导出函数/类：
export function mul(num1,num2){
return num1*num2
}
export class Person{
constructor(name,age){
this.name = name;
this.age = age;
}
run(){
console.log(this.age+'在奔跑');
}
}
默认导出：某些情况下，一个模块中包含某个功能，我们并不希望给这个功能命名，而且让导入者
可以自己来命名，这个时候就可以用export default
export default function() {
console.log('default function');
}
//myFunc是导入者自己命名的
import myFunc from './info.js'
myFunc();
注意：export default在同一个模块中，不允许同时存在多个。
统一全部导入
import * as aaa from './aaa.js'
console.log(aaa.flag)
32、webpack
(1) 什么是webpack？
webpack是一个现代的Javascript应用的静态打包工具。
(2) 什么是打包？
就是将webpack中的各种资源模块进行打包合并成一个或多个包(bundle)。
并且在打包的过程中，还可以对资源进行处理，比如压缩图片，将scss转成css,将ES6语法转成ES5语法，将Typescript
转成JavaScript。
(3)和grunt/gulp的区别？
grunt/gulp的核心是Task，我们可以配置一系列的Task，并且定义Task要处理的事务(例如ES6,ts转化，图片压缩，Scss转成css)
之后让grunt/gulp来依次执行这些task，而且让整个流程自动化。 grunt/gulp更加强调的是前端流程的自动化，模块化不是它的
核心。webpack更加强调模块化开发管理，而文件压缩合并，预处理等功能，是它附带的功能。如果你的工程模块依赖非常简单，
甚至没有用到模块化的概念。只需要进行简单的合并，压缩，使用grunt/gulp即可。
(4)webpack,node,npm之间的关系？
安装webpack首先需要安装Node.js,Node.js自带了软件包管理工具(npm)。（node package manage）。
(5) webpack配置：
新建文件：webpack.config,js
内容:
const path = require('path')
module.exports = {
entry:'./src/main.js',
output:{
path:path.resolve(__dirname, 'dist'),
filename:'bundle.js'
},
}
(6) package.json文件中：有一个script，里面包含的test，build等自定义路径，运行npm run build会运行对应指令。
(7) loader
在我们之前的实例中，我们主要用webpack来处理我们写的js代码，并且webpack会自动处理js之间相关的依赖。
但是，在开发中，我们不仅仅有基本的js代码需要处理，我们也需要加载css，图片,也包括一些高级的将ES6转成
ES5代码，将TypeScript转化成ES5代码等等，这些将通过webpack扩展对应的loader就可以了。
使用步骤：1.通过npm安装需要使用的loader. npm install --save-dev css-loader
npm install style-loader --save-dev
2.在webpack.config.js中的modules关键字下进行配置。
在webpack.config.js中加入
module:{
rules:[
{
test:/.css$/,
use:[ 'style-loader','css-loader' ]//css-loader只负责将css文件进行加载,style-loader负责将
//样式添加到Dom中，使用多个loader时，是从右向左的
}
]
}
（8)plugin
plugin是插件的意思。通常是用于对某个现有的架构进行扩展。
loader和plugin的区别：loader主要用于转换某些类型的模块，它是一个转换器。
plugin是个插件，它是对webpack本身的扩展
plugin的使用步骤: 1.通过npm安装需要使用的plugins
2.在webpack.config.js中的plugins中配置插件。
33、vue cli
(1) cli:Command-Line Interface,翻译为命令行界面，俗称脚手架。vue cli 是一个官方发布vue.js项目脚手架，使用vue-cli 可以快速搭建
vue开发环境以及对应的webpack。
(2) 使用前提:node
(3) ESLint:自动检查不规范代码并编译不通过。前期安装了但是后期不想用怎么办？在config->index.js->useEslint：false
(4) e2e end to end 端到端测试。
(5) runtime-compiler: template->ast->render->vdom->ui
runtime-only: render->vdom->ui
34、箭头函数：也是一种定义函数得方式
定义函数的方式：1、function : const aaa = function(){}
2、对象字面量中定义函数： const obj = { bbb() {} }
3、ES6中的箭头函数： const ccc = (参数列表)=>{ } //当只有一个参数时，参数列表的括号可以删除
当返回值只有一行代码时，return 和大括号 也可以去掉
箭头函数的this引用的就是最近作用域中的this。也就是它向外层作用域中，一层层查找this，直到有this的定义。
35、什么是前端渲染，后端渲染？
前端渲染：浏览器中显示的网页中的大部分内容，都是由前端写的js代码在浏览器中执行，最终渲染出来的网页。
36、SPA页面：单页父应用，整个网页只有一个html页面。
37、安装和使用vue-router
安装：npm install vue-router --save 并：
1.导入路由对象，并且调用Vue.use(VueRouter)
2.创建路由实例，并且传入路由的映射配置
3.在Vue实例中挂载创建的路由实例
使用：创建路由挂件，配置路由映射：组件和路径映射关系，使用路由：通过<router-link>和<router-view>
38、Promise
Promise是异步编程的一种解决方案。
39、better-scroll
安装：npm install better-scroll --save（去github上下载引用也可以）
基本使用：<div>
<div class="content">
<ul>
<li></li>......（好多li）
<ul>
</div>
</div> //挂载点只有一个标签，但是这个标签里面可以包含很多内容。
const bscroll = new BScroll(document.querySelector('.content'),{
probeType: 3 //probe侦测的意思。0,1都是不侦测实时的位置 2：在手指滚动的过程中侦测，手指离开后的惯性滚动过程中不侦测。
//3：只要是滚动，都侦测。
})
，
40、ref如果是绑定在组件中的，那么通过'this.$refs.refname'获取到的是一个组件对象
ref如果是绑定在普通元素中的，那么通过'this.$refs.refname'获取到的是一个元素对象。
41、<style scoped>表示只在当前作用域下有效。
42、组件是不能直接进行点击的，要点击要用@click.native