他是漸進(jìn)式JavaScript框架
實(shí)例化vue 初始化的時(shí)候有的參數(shù)是必須的比如：el data
New vue({
El:”指定的id名字” //掛載點(diǎn) el相當(dāng)于element
Data{
//數(shù)據(jù)
Message：“hello world”
}
})
兩種顯示方式：
{{message}}
V-text 指令
Vue的常用指令
v-bind指令
v-show指令
v-else指令
v-for指令
v-model指令
v-on指令
v-if指令
Vue的雙向數(shù)據(jù)綁定
在Vue2中組件的props的數(shù)據(jù)流動(dòng)改為了只能單向流動(dòng)产场，即只能由組件外（調(diào)用組件方）通過組件的DOM屬性attribute傳遞props給組件內(nèi)鹅髓，組件內(nèi)只能被動(dòng)接收組件外傳遞過來的數(shù)據(jù)，并且在組件內(nèi)京景，不能修改由外層傳來的props數(shù)據(jù)窿冯。
循環(huán)
V-for=”變量名 in 被循環(huán)的數(shù)組”
觸發(fā)事件
V-on:click=(“go()”)
//點(diǎn)擊事件
@click=（fun） //點(diǎn)擊事件
組件vue.component 里面有兩個(gè)參數(shù) 一個(gè)是自定義的組件的名字另一個(gè)是對象里面有一個(gè)重要的屬性就是template
它里面寫的是你要把什么裝到組件里面 還有一個(gè)props對象 里面有一個(gè)type屬性檢測這個(gè)對象是什么類型的 還有一個(gè)default可以設(shè)置他的默認(rèn)。
Methods對象里面設(shè)置的是事件 例如刪除 添加等等
vue-cli腳手架
Vue-cli
1.安裝腳手架
npm install vue-cli -g 全局安裝
2.初始化Vue項(xiàng)目
vue init webpack (項(xiàng)目名稱确徙，不能是中文)
3.npm install （安裝配置文件）
4.Npm run dev 打開運(yùn)行環(huán)境
路由：
路由在src下的router里
頁面在src 下的components里
src 下的main.js是整個(gè)項(xiàng)目啟動(dòng)的入口文件
src 下的App.vue是整個(gè)項(xiàng)目的跟組件
index.js項(xiàng)目的入口文件
src項(xiàng)目的開發(fā)源碼目錄
config 項(xiàng)目相關(guān)的配置文件
build 也是相關(guān)配置文件的相關(guān)信息
static 項(xiàng)目的靜態(tài)頁面
vue-router路由使用
1安裝vue-router
npm install vue-router--save-dev
2 在入口文件載入 vue-router
import VRouter from ‘vue-router’
使用
Vue.use（VRouter）
先需要導(dǎo)入Vue
定義路由跳轉(zhuǎn)連接
<router-link to="跳轉(zhuǎn)的位置" tag=“以什么標(biāo)簽顯示” active-class=“路由激活時(shí)的類名（高亮顯示）”></router-view>
路由激活時(shí)組件顯示的位置
<router-view></router-view>
可以吧導(dǎo)航路由寫在APP.vue里面然后在components文件里創(chuàng)建要跳轉(zhuǎn)的路由醒串，在index.js里面添加路由，有兩種方法（1）可以在上面import導(dǎo)入一個(gè)文件米愿，也可以寫箭頭函數(shù)：path:'/mintPage',
component:resolve=>{require(['@/mint/mintPage'],resolve)}
第二種方法是按需加載，按需取數(shù)據(jù) 更好的節(jié)省了用戶的操作時(shí)間鼻吮。
子路由嵌套：在父路由里面寫一個(gè)children然后里面配置子路由
跨域
解決跨域
第一步
在config 下的index.js 里找到proxyTable進(jìn)行修改 //proxyTable//代理轉(zhuǎn)發(fā)
修改后
proxyTable:
{
只要是帶/api 就會(huì)認(rèn)為訪問的是target真是路徑
'/api':{
target: 'http://api.douban.com/',//訪問的地址
changeOrigin: true, //改變源 是否改變
pathRewrite: {
'^/api':'/' 看見/api的就會(huì)把它修改成/
}
}
},
第二部
安裝 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()'>點(diǎn)擊獲取數(shù)據(jù)</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>
動(dòng)畫
點(diǎn)擊顯示隱藏
data（）返回一個(gè)屬性，在需要顯示隱藏的元素上用v-show=“返回的該屬性名”或者用v-if=“返回的該屬性名" 在點(diǎn)擊按鈕上用@click執(zhí)行取反 返回的該屬性名=!返回的該屬性名
<transition></transition>
v-enter：進(jìn)入開始
v-enter-active：進(jìn)入完成
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需要導(dǎo)入
在main.js下導(dǎo)入 import {Button,Cell} from 'mint-ui
下拉刷新 上拉加載
可以使用mint-ui里面的模板制定html結(jié)構(gòu)
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>
可以自定義也可以用定義好的
進(jìn)口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)
})
}
}
