前端的学习

勿来

已于 2023-12-20 15:27:34 修改

阅读量840

点赞数 20

文章标签：前端数据结构

于 2023-12-01 14:41:23 首次发布

本文链接：https://blog.csdn.net/pipizhudeshijie/article/details/134734293

版权

内置指令

v-bind 单向解析表达式

v-model 双向数据绑定

v-for 遍历数组/对象/字符串

v-on 绑定事件监听，可简写@

v-if 条件渲染（动态控制结点是否存在）

v-else 条件渲染（动态控制结点是否存在）

v-show 条件渲染（动态控制结点是否展示）

v-text指令：

1.作用：向其所在的节点中渲染文本内容。

2.与插值语法的区别：v-text会替换掉节点中的内容，{{xx}}则不会。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="root">
        <div v-html="str"></div>
    </div>
</body>
<script type="text/javascript">
    new Vue({
        el:"#root",
        data:{
            
                str:'<h3>你好</h3>'
            
        }
    })
</script>
</html>

v-html指令

c-cloak指令

作用：在Vue中，当页面加载时，由于JavaScript代码需要进行解析和执行，因此在页面初次渲染时，可能会出现数据还未完全加载完成的情况，这就会导致页面中的插值表达式显示为原始的{{}}形式，直到Vue实例完全创建并且数据加载完成后，才会将插值表达式替换为真实的数据。

v-once指令

v-pre指令

自定义指令

组件嵌套

vuecomponent构造函数

原型对象

vue与vuecomponent的关系

scoped样式

分为css和less两种形式

查看less版本，安装less

nanoid：生成唯一的字符串

reduce：做统计

浏览器本地存储

localstorage存储

sessionstorage :浏览器关掉之后就清空数据

消息订阅与发布

消息名：demo

回调函数：test

安装库：npm i pubsub-js

school组件接收消息，订阅

student组件：发布消息

动画显示

<div>
 <button @click="isshow=!isshow">显示/隐藏</button>
  <transition appear>
    <h1 v-show="isshow">hi</h1>
  </transition>
</div>
<script>
export default {
 data () {
   
    return {
        isshow:true
            }
        }
}
</script>

<style lang="less" scoped>

h1{
  background-color: orange;
  }
  .v-enter-active{
    animation: atguigu 0.5s linear;
  }
  .v-leave-active{
    animation: atguigu 0.5s  linear reverse;
  }
  @keyframes atguigu {
    from{
      transform: translateX(-100%);
    }
     to{
      transform: translateX(0px);
    }
  }

</style>

借助过渡去实现

<style lang="less" scoped>

h1{
  background-color: orange;
  
  }
  .v-enter,.v-leave-to{
     transform: translateX(-100%);
  }
  .v-enter-to,.v-leave{
     transform: translateX(0);
  }
  .v-enter-active,.v-leave-active
{
  transition: 0.5s linear;
}
</style>

第一步安装样式库

npm install animate.css
第二步引入样式，并给transition或transition-group标签的name属性配置为animate__animated animate__bounce

name="animate__animated animate__bounce"
权声明：本文为CSDN博主「礼拜五了」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_41606115/article/details/129034574

写法：
准备好样式：
元素进入的样式：
v-enter：进入的起点
v-enter-active：进入过程中
v-enter-to：进入的终点
元素离开的样式：
v-leave：离开的起点
v-leave-active：离开过程中
v-leave-to：离开的终点
使用<transition>包裹要过度的元素，并配置name属性：

 <transition-group 
  appear
  name="animate__animated  animate__bounce" 
  
  enter-active-class="animate__swing"
  leave-active-class="animate__backPutUp"
  >

    <h1 v-show="!isshow" key="1">hi</h1>
    <h1 v-show="isshow" key="2">hello</h1>
  </transition-group>

vue脚手架配置代理

npm i axios

在vue.config.js中

默认插槽

具名插槽

作用域插槽

数据在组件的自身，但根据数据生成的结构由他的使用者（app.vue) 来决定的。（games数据在category组件中，但是使用数据所遍历的结构由app.vue决定）

勿来

关注

20
点赞
踩
23

收藏

觉得还不错? 一键收藏
0
评论
前端的学习

v-else 条件渲染（动态控制结点是否存在）v-show 条件渲染（动态控制结点是否展示）v-if 条件渲染（动态控制结点是否存在）v-for 遍历数组/对象/字符串。v-on 绑定事件监听，可简写@v-bind 单向解析表达式。v-model 双向数据绑定。
复制链接

扫一扫