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