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

最新推荐文章于 2023-11-09 10:20:23 发布

省局到

最新推荐文章于 2023-11-09 10:20:23 发布

阅读量504

点赞数

分类专栏： VUE 文章标签： vuex vue

本文链接：https://blog.csdn.net/qq_37091028/article/details/73641530

版权

本文是关于Vuex的学习笔记，首先介绍了CSS选择器 nth-child(), first-child(), last-child() 的应用，接着讲解如何利用eval()函数进行计算。接着详细阐述了Vuex的store仓库创建过程，以及如何在Vue组件中通过this.$store访问和提交状态改变。通过这些知识点，实现了计算器的功能。" 132230772,19694538,R语言实现交互作用可视化,"['R语言', '数据可视化', '统计分析']

摘要由CSDN通过智能技术生成

知识点：

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>
    <

最低0.47元/天解锁文章

省局到

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录