Vue核心功能

一、Vue引入

/* 工具 */
import { DAY_DEGREE_OPEIONS } from "../config/BattleMap.js";
import { currentMonthHasDay } from "../tools/utils";
/* 组件 */
import AddZhibiao from "../components/BattleMap/addZhibiao.vue";
import EditDialog from "../components/BattleMap/editDialog.vue";
/* 接口 */
import { getTreeDept,getUserByDeptId } from "../services/battleMap.js";
/* vuex */
import {mapState} from "vuex";

export default {
  name: "Annual",
  
  // 引入外部组件，可充当一个模块（引入子组件）
  components: { AddZhibiao, EditDialog },
  
  // 引入父组件中的数据
  props: ["isShow", "editData"],
  
  // 计算
  computed:{
    ...mapState(['user'])
  },
  
  data() {
    return {
    	//本模块数据存储的地方 
    }
  },
  created() {
    //当创建本页面时，就对数据进行异步请求
  },
  mounted(){
		//页面渲染后对数据进行异步请求
  },
  methods: {
		//本模块对方法的处理
  }
}

二、计算 - computed

【html】

<div id="box">
    <div>{{msg}}</div>
    使用原生js使字符串反转
    <div>{{msg.split("").reverse().join("")}}</div>
    使用计算属性
    <div>{{reverseMsg}}</div>
    <div>{{reverseMsg}}</div>
</div>

【js】

/*
    computed 计算属性：
        表达式的计算逻辑可能会比较复杂，使用计算属性可以是模板内容更加简洁

    computed 和 methods 区别
        * 计算属性是基于它们的依赖进行缓存的; 方法不存在缓存
        * 计算属性调用{{fn}}; 方法调用{{fn()}}
        * 计算属性在 值发生改变的时候会触发调用; 方法是在执行它的时候调用
    */
var vm = new Vue({
    el:"#box",
    data:{
        msg:"hello"
    },
    computed:{
        reverseMsg(){
            console.log('调用多次，但是只执行一次'); //区别
            return this.msg.split("").reverse().join("");
        }
    }
});

三、监听器 - watch

【html】

<div id="box">
    <div>
        <span>名：</span>
        <span><input type="text" v-model="firstName"></span>
    </div>
    <div>
        <span>姓：</span>
        <span><input type="text" v-model="lastName"></span>
    </div>
    <span style="color:red">watch实现</span>
    <div>{{fullName}}</div>
    <span style="color:red">computed实现</span>
    <div>{{fullName1}}</div>
</div>

【js】

/*
    watch 监听器
        数据变化是执行异步或开销较大的操作
    */
var vm = new Vue({
    el:"#box",
    data:{
        firstName:"",
        lastName:"",
        fullName:""
    },
    computed:{
        fullName1(){
            return this.lastName +""+this.firstName;
        }
    },
    watch:{
        firstName:function(val){   //方法名 和 data中的值要一致，说明你要监听的值
            this.fullName = this.lastName +""+val;
        },
        lastName:function(val){
            this.fullName = val +""+this.firstName;
        }
    }
});

四、数据加工 - filter

【html】

<div id="box">
  <div>
    <input type="text" v-model="msg">
    {{msg | upper}}
    <!--
      也可以
      {{msg | upper | ...}}  多个过滤
      v-bind:id="id | formatId"  绑定属性
    -->
  </div>
</div>

【js】

var vm = new Vue({
  el:"#box",
  data:{
    msg:""
  },
  filters:{
    upper(val){
      return val.charAt(0).toUpperCase()+val.slice(1);
    }
  }
});

五、获取元素 - ref

<div id="app">
    <div ref="testDemo">被获取到了</div>
    <com01 ref="com01"></com01>
    <button @click="getEl">获取元素内容</button>
    <button @click="getComFn">获取子组件中的值</button>
    <button @click="getComData">获取子组件中的值</button>
</div>

Vue.component('com01',{
    template:"",
    data(){
        return {
            msg:"获取了子组件中data的值"
        }
    },
    methods:{
        open(){
            console.log('子组件的方法被调用了')
        }
    }
});

【获取dom元素】

var vm = new Vue({
    el:"#app",
    methods:{
        getEl(){
            console.log(this.$refs.testDemo.innerText);
        }
    }
})

【执行子组件方法】

var vm = new Vue({
    el:"#app",
    methods:{
        getComFn(){
            this.$refs.com01.open();
        }
    }
})

【获取子组件中的data值】

var vm = new Vue({
    el:"#app",
    methods:{
        getComData(){
            console.log(this.$refs.com01.msg);
        }
    }
})

六、自定义指令 - directive

【html】

<div id="box">
  <div v-tab-current="{
     className:'nav-item',curIdx:itemIndex,activeClassName:'active-nav-item'
  }">
    <item ... />
  </div>
</div>

【js】

var vm = new Vue({
  el:"#box",
  directives:{
    tabCurrent:{
      inserted(el，binding){ //插入
        // el为元素； binding为您给定的属性
      },
      bind(el，binding){ //绑定
        const _ops = binding.value,
              _c = el,getElementsByClassName(_ops.className);
        
        _c[_ops.curIdx].className += ` ${_ops.currentClassName}`;
      },
      update(el，binding){  //更新
        const _ops = binding.value,
              _oOps = binding.oldValue,
              _c = el,getElementsByClassName(_ops.className);
        
        _c[_oOps.curIdx].className = `${_oOps.className}`;
        _c[_ops.curIdx].className += ` ${_ops.currentClassName}`;
      }
    }
  }
});

七、混入 - mixin

公共组件 → 组件化

【全局注册】

import jsppui from "@/libs/jsppui/index.js";

Vue.mixin(jsppui);

封装组件还像我们平常一样 component 封装一样，使用父子组件组件进行传值，但注意的是我们 处理的 过滤，自定义指令，样式要一同的放入我们 的ui组件库中。

【mixin的 index.js】

import NavBar from './NavBar';
export default {
  components:{
    NarBar
  }
}

八、中央状态管理器 - vuex

8.1、集成vuex

# 安装vuex依赖包
npm install vuex --save

# 导入vuex包
import Vuex from 'vuex'
Vue.use(Vuex)

# 创建store对象
const store = new Vuex.Store ({
	//state中存放的就是全局共享的数据
	state: { count: 0 }
})

# 将store对象挂载到vue实例中
new vue ({
	el: '#app',
	render: h => h(app) ,
	router,
	//将创建的共享数据对象，挂载到vue实例中
	//所有的组件，就可以直接从store中获取全局的数据了
	store
})

8.2、基本使用

【在vuex中声明】

const store = new vuex.store({
  state:{
    count: 0
  },
  mutations:{
    add(state) {
      //变更状态
      state.count++
    }
  },
  actions: {
    addAsync(context){   //context可以看做是 Vuex.Store new 出来的实例对象
      setTimeout(()=> {
        //在 actions 中，不能直接修改 state 中的数据
        //必须通过 context.commit() 触发 mutation 才行
        context.commit('add')
      }, 1000)
    }
  },
  getters:{
    showNum: state => {
      return '当前最新的数量是【'+ state.count +'】'
    }
  }
})

【使用vuex】

import { mapMutations,mapstate,mapActions,mapGetters } from "vuex"

export default {
  name:"slotPage",
  computed:{
    ...mapstate(['count'])
    ...mapGetters(['showNum'])
  },
  methods:{
    ...mapMutations (['add', ' addN' ])
    ...mapActions(['addAsync','addNASync'])
  }
}