html 学习笔记

最新推荐文章于 2024-07-12 20:49:16 发布

银澜

最新推荐文章于 2024-07-12 20:49:16 发布

阅读量174

点赞数

分类专栏：笔记文章标签： html

本文链接：https://blog.csdn.net/qq_53058198/article/details/117908321

版权

笔记专栏收录该内容

4 篇文章 0 订阅

订阅专栏

标签后面的class是自定义的类

这是HTML中的代码:

<p class="tip">abc</p>
这是CSS中的代码:

p.tip span {

font-weight:bold;

color:#ff9955;
}

也可以直接在html中这样写

span.intro {color:blue;}
p.important {color:green;}

然后直接引用如<span class="intro">abc</span>

data-*是自定义数据类型

例如

<html>
<head>
<script>
function showDetails(animal) {
    var animalType = animal.getAttribute("data-animal-type");
    alert(animal.innerHTML + "是一种" + animalType + "。");
}
</script>
</head>
<body>

<h1>物种</h1>

<p>点击某个物种来查看其类别：</p>

<ul>
  <li onclick="showDetails(this)" id="owl" data-animal-type="鸟类">喜鹊</li>
  <li onclick="showDetails(this)" id="salmon" data-animal-type="鱼类">金枪鱼</li>  
  <li onclick="showDetails(this)" id="tarantula" data-animal-type="蜘蛛">蝇虎</li>  
</ul>

</body>
</html>

关于state和mutations

state

第一种方法（常用，推荐）
在方法中通过this.$store.state.num,num是state中的数据项，在视图中{{$store.state.num}}
第二种方法(映射）
按需引入import {mapState} from 'vuex',
在计算属性中comutation的使用，修改state中的数据项
官网上：更改 Vuex 的 store 中的状态的唯一方法是提交 mutationmputed:{...mapState(['全局数据名称'])}

第一种方式（常用，推荐）

 mutations: {
        // 定义了一个mutation，他本质就是一个函数
        mAdd1 (state) {
            // 这个mutation 的作用就是让state中的num加1
            state.num++
        },
        mSub (state) {
            state.num--
        },
        mAddN (state, m) {
           state.num = state.num + m
        },
        mSubN (state, m) {
            state.num = state.num - m
        }
    }
// ------------------------------------------------------------------------------------
// 调用，修改state中的数据项
this.$store.commit('mAdd1')
this.$store.commit('函数名', [参数])
————————————————
版权声明：本文为CSDN博主「Bwcx_lzp」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/m0_49159526/article/details/107947218

注意：

函数中第一个形参，代表当前vuex中的state，
直接在该函数（例如上边的mAdd1）中修改state
调用时，第一个参数不用传，只能传一个参数,可以是对象或者数组this.$store.commit('mAddN' , 10)
2.第二种方式（映射）
按需引入import {mapMutations} from 'vuex',
在methods中methods:{...mapMutations(['函数名'])}

methods:{...mapMutations(['mAdd1','mAddN'])}

	然后在其他方法中，可以直接调用
	this.函数名（）


this.mAdd1()
this.mAddN()

银澜

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html 学习笔记

标签后面的class是自定义的类这是HTML中的代码:1提示：... ... ...这是CSS中的代码:1234p.tip span {font-weight:bold;color:#ff9955;}
复制链接

扫一扫

专栏目录