1.MVC

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

2.安装vue-cli

• 安装node 查看node版本号，node -v
• 安装vue脚手架：npm install --global vue-cli,这一步需等待几分钟
• 切换到项目所在文件夹，如f:/回车，cd vue回车，
• 然后vue init webpack test,这里的test为项目文件名
• 输入y,回车，安装后面三步直接n
• 切换至项目 如cd test
• 安装项目依赖 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-bind

<!-- 绑定一个属性 -->
<img v-bind:src="imageSrc">

<!-- 缩写 -->
<img :src="imageSrc">

• v-model

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

• v-cloak

[v-cloak] {
  display: none;
}

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

4.生命周期

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

• 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.post(url,{a:1,b:2,c:3},{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)
};