vue

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

{{msg}}

• v-show

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

• v-if

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

• v-else

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

• v-for

  {{ item.text }}

• v-on

• v-bind

• v-model

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

• v-cloak

[v-cloak] {
  display: none;
}


  {{ message }}

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.路由

• 引文件
• 创建模板
• 注册路由所需的模板,把创建的模板和路由关联到一起

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

• 路由重定向

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

• 二级路由

//传递参数：

//接收参数：
$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)
};