VUEX学习笔记(1)-实现计算器（附最详注释）

来源：互联网发布：js find的用法编辑：程序博客网时间：2024/05/17 06:08

知识点：

css之nth-child()，first-child()，last-child()

例子：nth-child(2){background:#fff} 把父元素的第二个子元素的背景设置为白色；       first-child():选择父元素的首个子元素       last-child():选择父元素的最后一个子元素

eval()

eval()函数可以计算字符串，并执行javascript代码例子：eval("2+3")  // 返回 5

vuex建立store仓库

const store = new Vuex.Store( {  state: {   result: ' ';  enter: ' '},mutations: {  //相当于vue实例中的computed计算属性}，getters: {},actions: {},modules:{}} );

this.$store 获取store仓库中的数据

例子：this.$store.state.result    获取state中的常量result的值

this.$store.commit(‘calculate’,value)

 提交一个名为calculate的mutation给store仓库，并将参数一起提交过去。

vue组件样式

component('组件名'，{ template:`里面写模板的内容`,    // 引用组件：<组件名></组件名>data:{},computed:{},methods:{},filters:{}...})

计算器.jpg

计算器实现

<!DOCTYPE html><html lang="zh-cn"><head>    <meta charset="utf-8">    <title></title></head><style type="text/css">    #app{        width: 400px;        background:#FFE4E1;    }    .result{        font-size: 30px;        padding:60px;           text-align: right;    }    .enter{        font-size: 20px;        margin: 10px auto;        padding:0  60px 20px 0;         text-align: right;    }    .template{        background:#FFF8DC;        width:100px;        height:120px;        display: inline-block;        font-size: 30px;        box-sizing: border-box;        text-align: center;        vertical-align: middle;        line-height:120px;        color:#7A378B;    }    .template:nth-child(1){        color:red;    }    .template:last-child{        background:#C6E2FF;    }</style><body>    <div id="app">        <div class="result">{{result}}</div>        <div class="enter">{{enter}}</div>        <div class="key">            <div class="list">                <keybord v-for="item in keys" v-bind:value="item"></keybord>            </div>        </div>    </div>    <script type="text/javascript" src="./vue.min.js"></script>    <script type="text/javascript" src="./vuex.min.js"></script>    <script type="text/javascript">        //建立仓库store        const store = new Vuex.Store({  //这里注意V和S都要大写            state: {                result: ' ',  //result变量用来存  结果                enter: ' '    // enter变量用来存  输入的值            },            mutations: {                calculate(state, value) {                    if(value === '='){                        state.result = eval(state.enter);                         //eval() 函数可计算某个字符串，并执行其中的的 JavaScript 代码。                    }else if(value === 'clear'){                        state.result = state.enter =' ';                    }else{                        state.enter += value;                    }                }            }        });        //建立keybord组件        Vue.component('keybord',{            props:['value'],   //从dom中的<keybord></keybord>组件中传过来value属性的值；            template:            `<div class="template" v-on:click="getkeybordvalue(value)"> {{value}} </div>`,             // 把从父组件传过来的value值作为参数传给click事件；            methods: {                getkeybordvalue(value) {                    var value = value;                    this.$store.commit('calculate',value);                    // 在Vuex中不能任意修改应用层的状态，要修改，就得用它提供的唯一途径：通过commit提交mutations。                }            }        });        //实例化vue        new Vue({                 el:"#app" ,  //挂载点            data:{                keys: [                    'clear','+','-','*',                    '7','8','9','/',                    '4','5','6','0',                    '1','2','3','='                ]            },            store,            computed: {   // 计算属性                result() {                    return this.$store.state.result;                      //this指向的是实例化中的store                    //this.$store.state.resule访问vuex中store仓库中的state中的常量；                },                enter() {                    return this.$store.state.enter;                }            }        });    </script></body></html>

阅读全文

0 0