Vue學習小結
基本使用:
<!--繫結屬性 v-bind:xxx縮寫:xxx --> <div v-bind:title="title">滑鼠喵上去看一下</div>
<!--繫結html v-html --> <div v-html="h"></div>
繫結文字:{{xxx}}=v-text
<li v-for="(item,key) in 陣列" :class="{'red':key==1,'blue':key==0}">{{key}}----{{item}}</li>
<div :class="{'red':flag,'blue':!flag}">xxxxxx</div>
<div class="box" v-bind:style="{width:boxWidth+'px'}"></div>
通過$refs獲取dom節點 this.$refs.xxxx
v-on:click= @click=
引入元件的方式:1、引入元件2、掛載元件3. 在模板中執行
scoped代表有作用域,css只生效於當前頁面
生命週期
beforeCreate '例項建立之前'
created '例項建立完成'
beforeMount '模板編譯之前'
mounted 資料請求應該放在此處 '模板編譯完成'
beforeUpdate '資料更新之前'
updated '資料更新完成'
beforeDestroy '例項銷燬之前'
destroyed '例項銷燬完成'
請求資料的方式
vue-resource this.$http.get(api).then(xx)
axios Axios.get(api).then(xx)
父子元件傳參
<v-header :title="title" :fun="fun" :home="this"></v-header>
props:{'title':String,'fun':Function,'home':Object} 注意:和methods並列
父元件呼叫子元件的時候,繫結動態屬性
在子元件裡面通過props接受
this.$parent.父元件的data值
父元件主動獲取子元件的方法
* 1、呼叫子元件的時候定義ref <v-header ref="header"></v-header>
* 2、在父元件通過 this.$refs.header.屬性/方法 獲取
子元件主動獲取父元件的方法
this.$parent.資料、this.$parent.方法
非父子元件之間的傳值
* 1、新建js檔案,引入vue,進行例項化,暴露出此例項
* 2、再要廣播的地方引入定義的例項
* 3、通過 例項名.$emit('名稱',資料)
* 4、接受 例項名.$on('名稱',function)
vue-router的使用
1、建立元件
2、配置路由
3、例項化vue-router
4、掛載路由
5、<router-view></router-view>放在app.vue根元件裡面
路由重定向和別名:
ex:{path:'*', redirect:'/home'}
動態路由
1、配置動態路由
* routes: [// 動態路徑引數 以冒號開頭{ path: '/user/:id', component: User }]
* get方法傳值 :to="'/newDetail?aid='+item.aid" 用this.$route.query獲取
2、this.$route.params獲取動態路由的值
vue使用mint-ui
import 'mint-ui/lib/style.css'
import Mintfrom 'mint-ui';
Vue.use(Mint);
vue使用element-ui
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
*webpack.config.js配置file_loader http://element.eleme.io/1.4/#/zh-CN/component/quickstart
{test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,loader: 'file-loader'}
*結合官方文件使用
Vuex
Vuex是一個專為 Vue.js 應用程式開發的狀態管理模式
1.vuex解決了元件之間同一狀態的共享問題 (解決了不同元件之間的資料共享)
2.元件裡面資料的持久化。
*小專案不部建議用vuex
vuex的使用:
1、src目錄下面新建一個vuex的資料夾
2、vuex 資料夾裡面新建一個store.js
3、安裝vuex
cnpm install vuex --save
4、在剛才建立的store.js引入vue 引入vuex 並且use vuex
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
5、定義資料
/*1.state在vuex中用於儲存資料*/
var state={count:1}
6、定義方法 mutations裡面放的是方法,方法主要用於改變state裡面的資料
var mutations={incCount(){++state.count;}}
7、類似vue裡面的計算屬性,改變state裡面的count資料的時候會觸發 getters裡面的方法 獲取新的值 (基本用不到)
var getters= {computedCount: (state) => {return state.count*2 }}
8、 Action 基本沒有用
Action 類似於 mutation,不同在於:
mutation 提交的是 mutation,而不是直接變更狀態。
Action 可以包含任意非同步操作。
```
var actions= {
incMutationsCount(context) { /*因此你可以呼叫 context.commit 提交一個 mutation*/
context.commit('incCount'); /*執行 mutations 裡面的incCount方法 改變state裡面的資料*/
}}
```
暴露
const store = new Vuex.Store({
state,
mutations,
getters,
actions
})
export default store;
元件裡面使用vuex:
1.引入 store
import store from '../vuex/store.js';
2、註冊
export default{
data(){ return {}},
store,
methods:{incCount(){this.$store.commit('incCount'); /*觸發 state裡面的資料*/} }
3、獲取state裡面的資料
this.$store.state.資料
4、觸發 mutations 改變 state裡面的資料
this.$store.commit('incCount');
5、觸發 actions裡面的方法
this.$store.dispatch('incCount');
6、獲取 getters裡面方法返回的的資料
this.$store.getters.computedCount
最後附上原始碼地址:
https://github.com/mvpdream/vueDemo