javascript数学计算插件math.js

math.js主要功能是提供更加科学的数学计算方法。
  1. 语法文档http://mathjs.org/docs/expressions/syntax.html
  2. 提供许多Math对象没有的方法 如: 对数,复数,矩阵等高等数学计算方法
  3. 将原生的^ 运算符变成求幂运算math.eval(‘2^3’) //8

eval方法将字符串解析成可运算的表达式

    /*********math.js文档提供大量运算符-请查看文档参考*********/
    math.eval('2 + 3 * 4');   // 14
    math.eval('(2 + 3) * 4'); // 20
    /*eval中可以使用比较复杂的运算方式*/
    console.log(math.eval('a=2; b=3; a*b').entries[0])
    console.log(math.eval('[1,2,3] .* [1,2,3]')._data)
    // 三元运算
    console.log(math.eval(`12>10?10:5`)) // 10
    // 范围取值
    console.log(math.eval(`1:6`)._data) //[1,2,3,4,5,6]

    // 单位换算 
    console.log(math.eval(`2 inch to cm`).value)// 0.0508m
     // 逻辑运算及布尔运算等
  

(更多…)


安装vue-sass出现的问题解决

1. 安装python环境
下载地址: https://www.python.org/
注意配置环境变量
2. 安装node-sass
npm install node-sass –save-dev (可以使用淘宝镜像源)
3. 如果安装出错 在webpack.json同级目录下新建文件.npmrc
内容: sass_binary_site=https://npm.taobao.org/mirrors/node-sass/
4. 安装loader
npm install sass-loader –save-dev

5. 打开webpack.base.config.js在rules里面加上配置信息
{
test: /\.scss$/,
loaders: [“style”, “css”, “sass”]
},

6. 使用scss
在用scss的地方写上 style lang=”scss” scoped=”” type=”text/css”


vuex-状态管理05

为避免store.js文件太过于复杂。可以分模块开发

      //在main.js中导入 
     import store from './store/'
      //在store目录中新建index.js  并在index.js分别导入相关模块
     import Vue from 'vue';
     import vuex from 'vuex';
     Vue.use(vuex);
     import state from './state' 
     import mutations from './mutations'
     import getters from './getters'
     import actions from './actions'
     export default new vuex.Store({
	getters,
	actions,
	state,
	mutations
  })
    分别新建相关模块并导出
     /*
      state.js
      mutations.js
      actions.js
      getters.js
     */
   

vuex-状态管理04

actions的使用
actions和之前讲的Mutations功能基本一样,不同点是,actions是异步的改变state状态,而Mutations是同步改变状态

     //中store.js定义actions
          //使用组件中的asyncAddTwo方法触发mutations中的AddTwo方法,参数为2
     const actions = {
      asyncAddTwo:({commit})=>{
        commit('AddTwo',2)
      }
    }
    //将actions导出<!--more-->


    export default new Vuex.Store({
      state,
      getters,
      mutations,
      actions
   })
    //组件中的使用方法
     /*
      定义一个异步的方法
     <button @click='asyncAddTwo'>异步增加2</button>  
    */
     import {mapActions} from 'vuex'; //导入mapActions
     //在methods中设置方法  
     //不能同时再设置mapMutations 
      methods:mapActions([
           'asyncAddTwo'
       ])
   

mapGetters的使用

      /*
      需要展示的状态数据
      <p>现在的数据是:{{count}}</p>
      <p>现在的数据类型是:{{counttype}}</p>
    */
    //导入mapGetters
    import {mapActions,mapGetters} from 'vuex';
    //在computed中使用
    computed:mapGetters([
     'count',
     'counttype'
  ])
   

vuex-状态管理03

通过computed的计算属性

    //定义getters
    const getters = {
    getType(state){
        return state.count % 2 == 0 ? '偶数':'奇数'
    },
    getcount(state){
        if(state.count < 0 ){
            state.count = 0;
        }
        if(state.count > 15){
            state.count = 15;
        }
        return state.count;
    }
 }
   //将getters导出
  export default new Vuex.Store({
    state,
    getters,
    mutations
   })

   //模板中使用状态
   /*
     <p>现在的数据是:{{count}}</p>
     <p>现在的数据类型是:{{counttype}}</p>
  */ 
    computed:{
           count(){
               return this.$store.getters.getcount;
           },
           counttype(){
               return this.$store.getters.getType;
           }
       }

vuex–状态管理02

在myvue.js文件中加入两个改变state的方法

     //mutations 改变状态  对象名称固定用法
     const mutations={
       add(state){
          state.count++;
       },
       reduce(state){
          state.count--;
     }
  }
  //导处
  export default new Vuex.Store({
    state,
    mutations
})
  //模板中使用
  /*
   <div>
    <button @click="$store.commit('add')">+</button>
    <button @click="$store.commit('reduce')">-</button>
   </div>
  */

ˆ Back To Top