他是渐进式JavaScript框架
实例化vue 初始化的时候有的参数是必须的比如：el data
New vue({
El:”指定的id名字” //挂载点 el相当于element
Data{
//数据
Message：“hello world”
}
})
两种显示方式：
{{message}}
V-text 指令
Vue的常用指令
v-bind指令
v-show指令
v-else指令
v-for指令
v-model指令
v-on指令
v-if指令
Vue的双向数据绑定
在Vue2中组件的props的数据流动改为了只能单向流动，即只能由组件外（调用组件方）通过组件的DOM属性attribute传递props给组件内，组件内只能被动接收组件外传递过来的数据，并且在组件内，不能修改由外层传来的props数据。
循环
V-for=”变量名 in 被循环的数组”
触发事件
V-on:click=(“go()”)
//点击事件
@click=（fun） //点击事件
组件vue.component 里面有两个参数 一个是自定义的组件的名字另一个是对象里面有一个重要的属性就是template
它里面写的是你要把什么装到组件里面 还有一个props对象 里面有一个type属性检测这个对象是什么类型的 还有一个default可以设置他的默认。
Methods对象里面设置的是事件 例如删除 添加等等
vue-cli脚手架
Vue-cli
1.安装脚手架
npm install vue-cli -g 全局安装
2.初始化Vue项目
vue init webpack (项目名称，不能是中文)
3.npm install （安装配置文件）
4.Npm run dev 打开运行环境
路由：
路由在src下的router里
页面在src 下的components里
src 下的main.js是整个项目启动的入口文件
src 下的App.vue是整个项目的跟组件
index.js项目的入口文件
src项目的开发源码目录
config 项目相关的配置文件
build 也是相关配置文件的相关信息
static 项目的静态页面
vue-router路由使用
1安装vue-router
npm install vue-router--save-dev
2 在入口文件载入 vue-router
import VRouter from ‘vue-router’
使用
Vue.use（VRouter）
先需要导入Vue
定义路由跳转连接
<router-link to="跳转的位置" tag=“以什么标签显示” active-class=“路由激活时的类名（高亮显示）”></router-view>
路由激活时组件显示的位置
<router-view></router-view>
可以吧导航路由写在APP.vue里面然后在components文件里创建要跳转的路由，在index.js里面添加路由，有两种方法（1）可以在上面import导入一个文件，也可以写箭头函数：path:'/mintPage',
component:resolve=>{require(['@/mint/mintPage'],resolve)}
第二种方法是按需加载，按需取数据 更好的节省了用户的操作时间。
子路由嵌套：在父路由里面写一个children然后里面配置子路由
跨域
解决跨域
第一步
在config 下的index.js 里找到proxyTable进行修改 //proxyTable//代理转发
修改后
proxyTable:
{
只要是带/api 就会认为访问的是target真是路径
'/api':{
target: 'http://api.douban.com/',//访问的地址
changeOrigin: true, //改变源 是否改变
pathRewrite: {
'^/api':'/' 看见/api的就会把它修改成/
}
}
},
第二部
安装 axios vue-axios
//做ajax请求
npm install axios vue-axios --save-dev
第三部
在main.js中引入模块 并做使用
import Axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use（VueAxios，Axios）//使用
第四步 export
default {
data() {
return
{
movieList:[]
}
},
methods:{
getData(){
this.axios({
url:'/api/v2/movie/in_theaters',
method:'get'
}).then((res)=>{
this.movieList=res.data.subjects
console.log(this.movieList)
})
}
}
}
第五步
<button @click='getData()'>点击获取数据</button>
<div class="">
<divclass="row">
<div class="col-sm-3 col-md-3" v-for="m in movieList">
<div class="thumbnail">
<div class="caption">
<h4>{{m.title}}</h4>
</div>
</div>
</div>
</div>
</div>
动画
点击显示隐藏
data（）返回一个属性，在需要显示隐藏的元素上用v-show=“返回的该属性名”或者用v-if=“返回的该属性名" 在点击按钮上用@click执行取反 返回的该属性名=!返回的该属性名
<transition></transition>
v-enter：进入开始
v-enter-active：进入完成
v-leave：开始离开
v-leave-active：离开完成
.in-enter-active,.in-leave-active{
transition:0.5s;
}
.in-enter{
opacity:0;
transform:translateX(300px);
}
.in-leave-active{
opacity:0;
transform:translateY(300px);
}
mint-toast
使用 Mint Ul
安装
1 npm install --save mint-ui
2 在main.js中引入 import MintUI from 'mint-ui'
import 'mint-ui/lib/style.css'
3 Vue.use( Mint-UI )
如果想按需加载需要 babel-plugin-component 插件来管理
安装babel-plugin-component插件
npm install babel-plugin-component -D
4 修改配置，static下的babelrc 里的plugins "plugins":["istanbul",["component"，[{"libraryName":"mint-ui","style":true}]]]
5 如果想使用button和Cell需要导入
在main.js下导入 import {Button,Cell} from 'mint-ui
下拉刷新 上拉加载
可以使用mint-ui里面的模板制定html结构
mt-loadmore
ref="loadmore" :bottom-method="loadBottom"
:top-status.sync="topStatus">
<div class="movieBox">
<div class="media" v-for="min movieList">
<div class="media-left media-middle">
<a href="#">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">{{m.title}}</h4>
</div>
</div>
</div>
可以自定义也可以用定义好的
进口import{loadmore}from “mint-ui”
import { Toast } from 'mint-ui';
export default{
data(){
return{
topStatus:"",
movieList:[]
}
},
methods:{
loadBottom(){
*let
*start = this.movieList.length;
*this*.axios({
*url*:'/api/v2/movie/in_theaters?start='+start+'&count=10',
method:'get'
}).then((res)=>{
*let *temp = res.data.subjects;
if(temp.length==0){
Toast('莫有了，不要再拉了大哥');
return;
}
*this*.movieList = *this*.movieList.concat(temp);
*this*.allLoaded = true;// if all data are loaded
this*.$refs.loadmore.onBottomLoaded();
})
}
},
mounted(){
*this*.axios({
*url*:'/api/v2/movie/in_theaters?count=10',
method:'get'
}).then((res)=>{
*this*.movieList = res.data.subjects;
*console*.log(this*.movieList)
})
}
}
网友评论