1.mvc

m:model 数据模型
v:view 视图
c:controller业务逻辑层

2.安装vue-cli

安装node 查看node版本号 node -v
安装vue脚手架：npm install -g vuecli
(注意：--global 简写 -g全局安装，--save/--save-dev简写-s,局部安装)
切换到项目所在的文件夹，如e: 回车 cd vue回车
初始化项目 vue init webpack douban ,douban为项目文件名
输入Y回车，后面三步输入n回车
切换至项目如 cd douban
安装项目依赖 npm install 回车等待安装
运行项目：npm run dev

3.指令

v-text

<span v-text="msg"></span>
<!-- 和下面的一样 -->
<span>{{msg}}</span>

v-show

根据表达式之真假值，切换元素的 display CSS 属性。

v-if

根据表达式的值的真假条件渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建。

v-else

为 v-if 或者 v-else-if 添加“else 块”。

v-for

循环渲染
<div v-for="(item,index) in items">
  {{ item.text }}
</div>

v-on

<!-- 方法处理器 -->
<button v-on:click="doThis"></button>

<!-- 缩写 -->
<button @click="doThis"></button>

v-model

在表单控件或者组件上创建双向绑定。

v-cloak

[v-cloak] {
  display: none;
}

<div v-cloak>
  {{ message }}
</div>

4.生命周期（8个）

生命周期指的是实例在创建前经过的一系列初始化过程，在生命周期中被调用的函数叫做生命周期钩子

beforeCreate 创建之前
created 创建完成
beforeMount 挂载之前
mounted 挂载完成
beforeUpdate 改变之前
updated 改变完成
beforeDestroy 销毁之前
destroyed 销毁完成

5.交互

get

this.$http.get(url,{params:{a:1,b:2}})
        .then(function(res){ 成功 }
             ,function(){ 失败 })

post

this.$http.jsonp(url,{params:{a:1,b:2}},{emulateJSON:true})
     .then(function(res){},function(){})

jsonp

this.$http.jsonp(url,{params:{a:1,b:2}},{emulateJSON:true})
     .then(function(res){},function(){})

6.路由

引文件
创建模版<template></template>
注册路由所需的模板,把创建的模板和路由关联到一起

var Home = Vue.extend({
    template:"#home"
})

配置路由路径信息

var arr=[
    {path:'/',component:Home}
]

添加路由配置项

router-link to
router-view

var vm = new Vue({
    el:'#app',
    router: router
})

var router = new VueRouter({
    routes: arr
 })

var arr = [
    {path:'/home',component:Home},
    {path:'/news',component:News},
    {path:'/hot',component:Hot}
]
 var Home = Vue.extend({
    template:'#home'
})

<template id="home">
    <div>
        <h1>home</h1>
    </div>
</template>

路由重定向

this.$router.push('/home')

二级路由

//传递参数：
<router-link to="/news/001"></router-link>
//接收参数：
$route.params.id

7.axios

// 该文件专门用于调接口数据

// 1.引入axios
import axios from 'axios'

// 2.设置基础路径
axios.defaults.baseURL='src/data';    // http://localhost:2333

// 3.引入参数处理模块
var qs=require('qs');

// 声明一个名字为getNewsList的函数,params是函数中的参数
// export导出
export const getNewsList=(params)=>{     // params是参数对象,qs会对参数对象进行处理
  return axios.get('/newslist.json',qs.stringify(params)).then(res=>res.data)
};

// var getNewsList=function (parmas) {
//   return axios.get('',qs.stringify(params)).then(res=>res.data)
// };

export const getVideoItem=(params)=>{
    return axios.get('/video.json',qs.stringify(params)).then(res=>res.data)
};