vue筆記2

vue項目目錄

<pre>
├── build              // 構建服務和webpack配置
├── config             // 項目不一樣環境的配置
├── dist               // 項目build目錄
├── index.html         // 項目入口文件
├── package.json       // 項目配置文件
├── src                // 生產目錄
│   ├── assets         // 圖片資源
│   ├── common          // 公共的css js 資源
│   ├── components     // 各類組件
│   ├── App.vue         // 主頁面 
│   └── main.js        // Webpack 預編譯入口
</pre>

工程目錄下的 App.vue爲主頁面

其中template 寫 html，script寫 js，style寫樣式

注：一、一個組件下只能有一個並列的 div，也就是template下只能有一個直接div子元素

　　二、數據data要寫按以下顯示的 寫在 return 裏面

<script type="text/ecmascript-6">
  import star from '../star/star.vue';
  export default {
    props: {
      seller: {
        type: Object
      }
    },
    data() {
      return {
        detailShow: false
      };
    }
  };
</script>

 

子組件調用父組件中的值須要用props

<template>  
  <div>  
    <div class="parent">  
      <p>父組件</p>  
      <p v-text="userInfo.userName"></p>  
      <router-link to='/parent/child'></router-link>
      <router-view :message="userInfo"></router-view>  //這裏傳參數userInfo給子組件，子組件用message調用
    </div>  
  </div>  
</template> 

<script>  
  export default {  
    data () {  
      return {  
        userInfo: {  
            userName: '阿水12344',  
            age: 12  
        }  
      }  
    }  
  }  
</script>  

<template>  
  <div class="child">  
    <p>子組件</p>  
    <p v-text="message.age"></p>  
  </div>  
</template>  

<script>  
  export default {  
     props: ['message']  // 子組件獲取父組件的數據
  }  
</script>  

重點：

父組件：
 1. <router-view :message="userInfo"></router-view> 

子組件：
 1. <p v-text="message.userName"></p>   
 2. props: ['message']

補充：

1. 當message更名爲user-info（帶「-」的形式）時，子組件調用「userInfo「駝峯法 

 <router-view :user-info="userInfo"></router-view> 
 <p v-text="userInfo.userName"></p>     
 props: ['userInfo']

 2. 子組件獲取時可設置類型,如：設置爲布爾型

 props: {
    active: {
        type: Boolean
    }
 }

 

Vuex使用方法

1）建立store文件夾--》store.js

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);
const state = {
    count: 0,
    showModal: false
},
  //Vuex 中，mutation 都是同步事務：
 mutations = {
  increment (state) {
    state.count++
  },
  decrement (state) {
    state.count--
  }
},
  //Vuex 中，Action 提交的是 mutation，而不是直接變動狀態。 Action 能夠包含任意異步操做
  //Action 函數接受一個與 store 實例具備相同方法和屬性的 context 對象,所以你能夠調用 context.commit 提交一個 mutation
 actions = {
  increment: ({ commit }) => commit('increment'),
  decrement: ({ commit }) => commit('decrement'),
  incrementIfOdd ({ commit, state }) {
    if ((state.count + 1) % 2 === 0) {
      commit('increment')
    }
  },
  incrementAsync ({ commit }) {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        commit('increment')
        resolve()
      }, 1000)
    })
  }
},
  //就像計算屬性同樣，getter 的返回值會根據它的依賴被緩存起來，且只有當它的依賴值發生了改變纔會被從新計算。
 getters = {
  evenOrOdd: state => state.count % 2 === 0 ? 'even' : 'odd'
}
export default new Vuex.Store({
  state
})

store.js

2）在main.js中引用

import store from './store/store'

new Vue({
  el: '#app',
  router,
  store,//添加store
  components: { App },
  template: '<App/>',
  render: h => h(App),
  mounted (){
    pos()
    }
})

3）在組件中調用

import store from '@/store/store'

export default{
      
         store
    }

使用時直接調用{{$store.state.count}} （當store.js中count值發生變化時，頁面會自動刷新）

4）父組件可使用 props 把數據傳給子組件。
5）子組件可使用 $emit 觸發父組件的自定義事件。

子組件：

<template>  
  <div class="train-city">  
    <span @click='select(`大連`)'>大連</span>  
  </div>  
</template>  
<script>  
export default {  
  name:'trainCity',  
  methods:{  
    select(val) {  
      let data = {  
        cityname: val  
      };  
      this.$emit('showCityName',data);//select事件觸發後，自動觸發showCityName事件  
    }  
  }  
}  
</script>  

父組件：

<template>  
    <trainCity @showCityName="updateCity" :index="goOrtoCity"></trainCity> //監聽子組件的showCityName事件。  
<template>  
<script>  
export default {  
  name:'index',  
  data () {  
   return {  
      toCity:"北京"  
    }  
  }  
  methods:{  
    updateCity(data){//觸發子組件城市選擇-選擇城市的事件    
      this.toCity = data.cityname;//改變了父組件的值  
      console.log('toCity:'+this.toCity)        
    }  
  }  
}  
</script>  

 promise:所謂Promise，簡單說就是一個容器，裏面保存着某個將來纔會結束的事件（一般是一個異步操做）的結果

promise.then(function(value) {
  // success
}, function(error) {
  // failure
});

then方法能夠接受兩個回調函數做爲參數。

第一個回調函數是Promise對象的狀態變爲resolved時調用，

第二個回調函數是Promise對象的狀態變爲rejected時調用。

其中，第二個函數是可選的，不必定要提供。這兩個函數都接受Promise對象傳出的值做爲參數。

 npm安裝插件

npm install--save

--save 會把依賴包名稱添加到 package.json 文件 dependencies 鍵下

dependencies中存放的是項目中依賴的插件

另外一個是 npm install –save-dev

--save-dev 則添加到 package.json 文件 devDependencies 鍵下

devDependencies是開發時依賴的環境，最終打包時 dependencies和devDependencies中的文件都會一塊兒打包

 

綁定行內屬性及點擊事件時加判斷總結

 

                    <a :class='[item.status=="yes" ? `btn-primary` : `btn-danger`]' :title="item.status=='yes' ?'取消' :'監測'" @click="item.status=='yes' ?seeManage(item.id,'delete') :seeManage(item.id,'on')">

 :class="{'active': navId === 0}"

 :class="['tab col-sm-4',tab.num2 ? 'current':'disabled']"

　　　　<div :class="[{'cbp-spmenu-push-toright':nav.left},'main-content cbp-spmenu-push']">

<div :class="['collapse navbar-collapse',{'in': nav.inMenu}]">

<router-link  tag="li" to="/site" v-show="navId == 1"></router-link>

<button id="showLeftPush" class="{active:nav.left}" @click="nav.left = !nav.left"></button>

 路由配置傳多參

<router-link :to="{ name:'tamperingInfo', query: {sid: item.sid,id:item.id,url:item.url} }" tag="a" class="btn btn-success btn-xs md-trigger" title="詳情"><i class="fa fa-info"></i></router-link>

{對應路由配置
            path: 'tamperingInfo',
            name: 'tamperingInfo',
            component: tamperingInfo
}