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