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)
};