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

知识点：

• 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:{
}
...
})

• dataset 获取某个data属性中的值

例子：
html部分：
¥20.12
javascript部分:
var m = document.getElementById("aa");  
var n = m.dataset.drink;    // 获取data-drink属性中的值，得到n的值为coffee

• taget事件属性
  event.target 获得触发事件的元素：

Click on this paragraph. An alert box will show which element triggered the event.


输出结果为：The id of the triggered element:p1

计算器.jpg

计算器实现

    
    



    

        
{{result}}
        
{{enter}}