前端小白学习笔记

最新推荐文章于 2024-08-02 13:35:44 发布
最新推荐文章于 2024-08-02 13:35:44 发布
阅读量209 收藏 1
点赞数
分类专栏： 前端裁缝 文章标签： vue 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36450484/article/details/102767339
版权

目录

vue: 父子组件传值

  • 父组件向子组件传值：父组件通过向子组件传递参数，子组件通过props来接收参数。
  • 子组件向父组件传值：子组件通过this.$emit触发一个父组件监听的事件，这个事件触发则会执行父组件的方法并传递参数到父组件
<!DOCTYPE html>
<html lang="en">
  <head>    
    <meta chartset="UTF-8">    
    <title>Hello World</title>   
    <script src='./vue.js'></script>
  </head>
 <body>    
   <div id="app">        
     <div :style="{ fontSize: postFontSize + 'em' }">{{content}</div>      
     <button @click="clickC1">父组件调用子组件的事件</button> 
     <!-- 父组件通过属性向子组件传递数据    加 : 后面的内容是js表达式-->        	
     <counter :count="0" ref="c1" v-on:enlarge-text="changeSize"></counter>        
     <counter :count="1"></counter>
   </div>
   <script>
     var counter = {
       //子组件接收父组件的参数
       props: ['count'],
       template: '<div @click="handleClick" >{{number}}</div>',
       data: function (){
         return {
           number: this.count
         }
       },
       methods: {
         handleClick: function() {
           //警告  不要直接修改父组件传过来的值，如果传过来的是一个引用类型，修改会对其他引用它的地方有影响
           //this.count++;
           this.number++;
           //子组件向父组件传值   触发一个父组件监听的事件，当这个事件触发则执行父组件的方法
           this.$emit('enlarge-text',0.1);
         }
       },
     }
     var vm = new Vue({
       el: '#app',
       data: {
         content: 'hello world',
         postFontSize: 1
       },
       components: {
         counter: counter
       },
       methods: {
         clickC1: function() {
           this.$refs.c1.handleClick();
         },
         changeSize: function(size) {
           this.postFontSize += size;
         }
       }
     })
   </script>
 </body>
 </html>

vue: 插槽

将元素插入到组件的标签中间，可以根据插槽的名字来匹配。使用插槽可以改变组件内的元素。

<!DOCTYPE html>
<html lang="en">
<head>    
  <meta chartset="UTF-8">    
  <title>Hello World</title>    
  <script src='./vue.js'></script>
</head>
<body>
  <div id="app">
    <child content="<p>world</p>">
      <p>插槽</p>            
      <h1 slot="header">有名字的插槽</h1>
    </child>
  </div>
  <script>
    Vue.component('child',{
      props: ['content'],
      template: `<div>
          	  <p>hello</p>                            
          	  <div v-html="this.content"></div>                            
          	  <slot>默认内容</slot>                            
          	  <slot name='header'></slot>
          	</div>`
    })
    var vm = new Vue({
      el: '#app',
    })
   </script>
 </body>
 </html>

vue: 作用域插槽

父组件调用子组件给子组件传了一个插槽 ，这个插槽叫作用域插槽。 这个插槽必须是template开头结尾 。声明从子组件中声明的数据放在props中 子组件绑定了item传过来

<body>    
  <div id="app">        
    <child>            
      <template slot-scope="props">                
        <li>{{props.item}}</li>            
      </template>        
    </child>    
  </div>
  <script>        
    Vue.component('child',{            
      props: ['content'],            
      template: `<div>                        
                   <ul>                            
                     <slot v-for="item of list" :item=item>
                     </slot>                        
                   </ul>                       
                 </div>`,            
      data: function() {                
        return {                    
          list: [1,2,3,4,5]                
        }            
      }        
    })
    var vm = new Vue({            
      el: '#app',          
    }）
  </script>
</body>

vue:动态组件和v-once指令

使用component标签可以动态的显示组件
v-once指令可以使组件在切换时不会销毁 ，放在内存中，提高性能

<!DOCTYPE html>
<html lang="en">
<head>    
  <meta chartset="UTF-8">    
  <title>Hello World</title>    
  <script src='./vue.js'></script>
</head>
<body>
  <div id="app">
    <child>
      <button @click="handleClick">change</button>
      <component :is="type"></component>
    </child>
  </div>
  <script>
  //使用v-once 组件在切换时不会销毁  会放到内存中  下回拿出来  性能高一些
  Vue.component('child-one',{
    template: `<div v-once>child-one</div>`,
  })
   Vue.component('child-two',{
    template: `<div v-once>child-two</div>`,
  })
  var vm = new Vue({            
    el: '#app',            
    data: {                
      type: 'child-one'            
    },            
    methods: {                
      handleClick: function() {                    
        this.type = this.type === 'child-one' ? 'child-two' : 'child-one';                
      }            
    }        
  })
 </script>
</body>
</html>

vue: 给组件绑定原生事件

如果组件已经内已经绑定了原生事件，那么在组件上直接绑定原生事件是不起作用的，需要使用如 @click.native 来绑定原生事件

<!DOCTYPE html>
<html lang="en">
<head>    
  <meta chartset="UTF-8">    
  <title>Hello World</title>    
  <script src='./vue.js'></script>
</head>
<body>
  <div id="app">
    <child @click1="handleClick" @click.native="nativeClick"></child>
  </div>
  <script>
    Vue.component('child',{
      template: '<div @click="childClick">child</div>',
      methods: {
        childClick: function() {
        //自定义click1
        this.$emit('click1');
      }
    }
  }）
  var vm = new Vue({
    el: '#app',
    methods: {
      handleClick: function() {
        alert(22);
      },
      nativeClick: function(){
        alert("点击组件触发原生事件")
      }
    }
  })
  </script>
</body>
</html>

vue: 计算属性、方法、侦听器


<!DOCTYPE html>
<!-- 计算属性、方法、侦听器 -->
<html>    
<head>        
  <meta chartset="UTF-8">        
  <title>计算属性、方法、侦听器</title>        
  <script src='./vue.js'></script>    
</head>    
<body>        
  <div id="app">            
    {{fullName}}            
    <!-- 使用方法  -->            
    {{fullName2()}}
    {{full}}        
  </div>        
<script>            
  var vm = new Vue({                
    el: "#app",                
    data: {                    
      firstName: "jx",                    
      lastName: "g",                    
      age: 18,                    
      full: 'full'                
    },                
  //计算属性   缓存：当计算属性依赖的值没有变化时，计算属性会取之前的值                		  
  computed: {                    
    fullName: function() {                        
      console.log("fullName");                        
      return this.firstName + " " + this.lastName;                    
      }                
    },                
  methods: {                    
    fullName2: function() {                        
      console.log("fullName2");                        
      return this.firstName + " " + this.lastName;                    
      }                
    },                
    //使用侦听器                
    watch: {                    
      firstName: function(){                        
      this.full = this.firstName + " " + this.lastName;                    
      }                
    },            
  })        
</script>    
</body>
</html>

vue: 计算属性set 、get


<!DOCTYPE html>
<html>    
<head>        
  <meta chartset="UTF-8">        
  <title>计算属性、方法、侦听器</title>        
  <script src='./vue.js'></script>    
</head>    
<body>        
  <div id="app">            
    {{fullName}}        
  </div>        
  <script>            
  var vm = new Vue({                
    el: "#app",                
    data: {                    
      firstName: "jx",                    
      lastName: "g",                    
      age: 18,                    
      full: 'full'                
    },                
    //计算属性   缓存：当计算属性依赖的值没有变化时，计算属性会取之前的值                
    computed: {                    
      fullName: {                        
        get: function() {                            
          return this.firstName + " " + this.lastName;                        
        },                        
        set: function(value) {                            
          var arr = value.split(" ");                            
          this.firstName = arr[0];                            
          this.lastName = arr[1];                        }                    
        }                
      }            
    })        
  </script>    
</body>
</html>

vue: ref

ref 可以获得组件或dom元素

<div ref="hello" @click="handleClick">hello world</div>
<counter ref="one" @change="handleChange"></counter>
<counter ref="two" @change="handleChange"></counter>

this.$refs.hello.innerHTML
this.total = this.$refs.one.number + this.$refs.two.number;

vue: 对象添加属性

根据官方文档定义：如果在实例创建之后添加新的属性到实例上，它不会触发视图更新。
使用$set 来更新

this.$set(this.obj,'e',02)

vue: transition结合keep-alive

keep-alive可以达到第二次进入页面缓存页面而不重新加载的效果，结合transition时使用

      <transition name="fade-transform" mode="out-in">
        <keep-alive>
            <router-view v-if="$route.meta.keepAlive"></router-view>
        </keep-alive>
      </transition>
      <transition name="fade-transform" mode="out-in">
        <router-view v-if="!$route.meta.keepAlive"></router-view>
      </transition>
郭JX
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
小白前端学习笔记
huanhuan4466的博客
08-25 185
【代码】小白前端学习笔记。
Vue2学习笔记-前端开发
03-03
Vue2学习笔记-前端开发
docker可视化管理工具 Docker Manager
热门推荐
遇事不决 可问春风
11-10 1万+
目录项目介绍工具介绍资源总览镜像管理容器管理安全性 项目介绍 前段时间做了一个docker的可视化管理平台。使用vue + python flask 前后端分离实现。GitHub地址:https://github.com/guojiaxing1995/docker-manager。 这个工具设计的初衷是为了更加方便的对多台服务器进行docker管理，减少平时工作中切换登录不同服务器和执行命令的时间...
前端小白的学习笔记
swrdgfgu的博客
08-14 144
前端小白的学习笔记—每日一道算法 坚持每周算法，day11 打印九九乘法表
JavaScript多重 if 的使用示例——前端小白学习笔记-JavaScript篇
qq_42007547的博客
03-16 1359
输入三个数,找出最大的数 多重if的使用 var x = parseFloat(prompt("请输入要比较的第一个数")); var y = parseFloat(prompt("请输入要比较的第二个数")); var z = parseFloat(prompt("请输入要比较的第三个数")); if (x >= y && x >= z...
2024年 Web 前端入门学习路线，(附：前端基础学习笔记)
2401_84152177的博客
05-04 891
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！
JavaScript判断某一年是否是闰年的方法——前端小白学习笔记-JavaScript篇
qq_42007547的博客
03-16 937
判断是否是闰年的条件 (1).能被4整除，但同时不能被100整除的年份都是闰年； (2).能被400整除的年份是闰年，其它情况都不是闰年； var year = parseInt(prompt("请输入您想要判断是否是闰年的年份")); if (year >= 0){ if (year % 400 == 0 || year % 4 == 0 &&amp...
前端学习的个人笔记
06-25
在前端开发领域，HTML、CSS、JavaScript、jQuery和Bootstrap是构建网页和交互式用户体验的核心技术。下面将分别介绍这些知识点，以及如何通过...希望这些笔记能够对你在前端学习的道路上提供宝贵的帮助，祝你越走越好！
前端学习笔记网站（HTML5+CSS3+JavaScript前端网页web课程设计）.rar
04-18
前端学习笔记网站（HTML5+CSS3+JavaScript前端网页web课程设计）.rar前端学习笔记网站（HTML5+CSS3+JavaScript前端网页web课程设计）.rar前端学习笔记网站（HTML5+CSS3+JavaScript前端网页web课程设计）.rar ...
前端开发学习笔记，练手Vue小项目
09-05
在"前端开发学习笔记，练手Vue小项目"中，我们可以看到几个关键的文件和目录： - **README.md**：这是项目的说明文件，通常包含项目简介、安装指南、使用方法等信息。 - **node_modules**：这个目录包含了项目...
js小白从0开始学习笔记
06-22
是一个面向前端新手的笔记
前端Web-JavaScript(上)
Yu2uki的博客
07-31 1327
JavaScript（简称：JS） 是一门跨平台、面向对象的脚本语言，是用来控制网页行为的，实现人机交互效果。JavaScript 和 Java 是完全不同的语言，不论是概念还是设计。但是基础语法类似。组成：ECMAScript: 规定了JS基础语法核心知识，包括变量、数据类型、流程控制、函数、对象等。BOM：浏览器对象模型，用于操作浏览器本身，如：页面弹窗、地址栏操作、关闭窗口等。DOM：文档对象模型，用于操作HTML文档，如：改变标签内的内容、改变标签内字体样式等。
高德地图离线版 使用高德地图api的方法
最新发布
m0_62336925的博客
08-02 294
然因为高德地图的瓦片地图太大，所以要让后端部署下 前端直接调用 如果本地 直接找到瓦片图路径就可以。这个代码把你想用的方法名保存到本地。这个时候会报错 因为没有这个方法。然后就可以正常使用这个方法拉。然后使用他的离线方法。找到对应的名字 复制。
【分享】前端程序员-技术网站推荐
一位前行者的博客
07-30 872
对于前端开发人员来说，以下是一些推荐的技术网站，这些网站提供了丰富的资源和知识，可以帮助你提升前端开发技能：收集一些 、、 的网站 vite 官方中文文档 element-plus 官方中文文档 pinia 官方中文文档 vue-router 官方中文文档 Tailwind CSS 官方文档 vitest 官方中文文档 es6 中文文档 axios 官方中文文档 vxetable 官方中文文档 lodash 中文文档 echarts 官方中文文档 animat
前端面试：项目细节重难点问题分享（十四）
weixin_49062485的博客
08-02 317
更多详情：爱米的前端小笔记（csdn~xitujuejin~zhiHu~Baidu~小红shu）同步更新，等你来看！都是利用下班时间整理的，整理不易，大家多多👍💛➕🤔哦！你们的支持才是我不断更新的动力！
electron 主进程和渲染进程
qq_21087199的博客
07-29 377
虽然最近一年前端大环境不好，但是大家还是要加油鸭！，努力总不会错，千军万马过独木桥，希望大家都是闯过去那一个。进入正题。
我们的前端开发逆天了！1 小时搞定了新网站，还跟我说 “不要钱”
努力做最接地气的编程干货分享，感谢关注
07-29 2259
本文将带你了解一个新的 Web 框架 **Astro**，并手把手带你使用 Astro 搭建一个属于自己的站点，用过的都说真香！
前端代码混淆加密（使用Terser、WebpackObfuscator）
@Fonden
07-30 351
（注意Terser和WebpackObfuscator引入的方式不同，后者是放到plugins中）② 在 Terser 之后使用 WebpackObfuscator 进行混淆。以此在网上查找到相应工具有：Terser、WebpackObfuscator。① 使用 Terser 进行代码压缩和 source map 生成，② 设置在生产环境中才去使用混淆加密工具（开发环境会产生各种报错）为了对公司项目进行安全防护措施，前端需要进行代码混淆加密处理。压缩代码、变量和函数名混淆、删除未使用代码。
Java Web前端学习笔记：HTML到AJAX基础
"这篇文档包含了作者在学习Java Web前端时的笔记，主要涵盖了前端开发的基础知识，包括HTML、CSS、JavaScript、DOM编程、jQuery框架以及AJAX基础。" 本文档详细介绍了Java Web前端开发中的核心技术和元素，首先从...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值