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写样式

注：1、一个组件下只能有一个并列的 div，也就是template下只能有一个直接div子元素

　　2、数据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
})

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
}