学习day50

news2024/10/5 21:23:56

自定义指令总结：

          一：定义语法：

            (1)局部指令：              

               new Vue({                            

                directives{指令名，配置对象}  

               })

               或

               new Vue({

                directives{指令名，回调函数}

               })

            (2)全局对象

               Vue.directives(指令名，配置对象)

               或

               Vue.directives(指令名，回调函数)

          二：配置对象中常用的三个回调

              (1)bind:指令与元素成功绑定时的调用

              (2)inserted：指令所在元素被插入页面时的调用

              (3)update:指令所在模板结构被重新解析时调用

          三：备注

              1.指令定义时不加v-，但使用时要加v-

              2.指令名如果是多个单词，要使用kebab-case命名方式，不要用驼峰

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定义指令</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <!-- 
        自定义指令总结：
          一：定义语法：
            (1)局部指令：               
               new Vue({                             
                directives{指令名，配置对象}  
               })
               或
               new Vue({
                directives{指令名，回调函数}
               })
            (2)全局对象
               Vue.directives(指令名，配置对象)
               或
               Vue.directives(指令名，回调函数)

          二：配置对象中常用的三个回调
              (1)bind:指令与元素成功绑定时的调用
              (2)inserted：指令所在元素被插入页面时的调用
              (3)update:指令所在模板结构被重新解析时调用

          三：备注
              1.指令定义时不加v-，但使用时要加v-
              2.指令名如果是多个单词，要使用kebab-case命名方式，不要用驼峰

     -->
    <div id="root">
        <h2>当前n值是：<span v-text="n"></span></h2>
        <h2>方法十倍后的n值是：<span v-big="n"></span></h2>
        <button @click="n++">点我n+1</button>
        <hr>
        <input type="text" v-fbind:value="n">
    </div>
    
</body>
<script type="text/javascript">
    Vue.config.productionTip=false

    new Vue({
        el:"#root",
        data:{
            n:1,
        },
        directives:{
            //big函数何时会被调用 1.指令与元素成功绑定时（一上来） 2.指令所在模板被重新解析时
            big(element,binding){
              //  console.log('big')
                element.innerText=binding.value*10
            },
            fbind:{
                //指令与元素成功绑定时
                bind(element,binding){
                    element.value=binding.value
                },
                //指令所在元素被插入页面时
                inserted(element,binding){
                    element.focus()
                },
                //指令所在模板被重新解析时
                update(element,binding){
                    element.value=binding.value
                    element.focus()
                }
            }
        }
    })
</script>
</html>

生命周期：

          1.又名：生命周期回调函数，生命周期函数，生命周期钩子

          2.是什么：Vue在关键时刻帮我们调用的一些特殊名称的函数

          3.生命周期函数名字不可更改，但是函数的具体内容是程序员根据需求编写的

          4.生命周期函数中的this指向的是vm或组件实例函数


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>引出生命周期</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <!-- 
        生命周期：
          1.又名：生命周期回调函数，生命周期函数，生命周期钩子
          2.是什么：Vue在关键时刻帮我们调用的一些特殊名称的函数
          3.生命周期函数名字不可更改，但是函数的具体内容是程序员根据需求编写的
          4.生命周期函数中的this指向的是vm或组件实例函数
     -->
    <div id="root">
        <h2 :style="{opacity}">欢迎学习Vue</h2>

    </div>
    
</body>
<script type="text/javascript">
    Vue.config.productionTip=false

    new Vue({
        el:"#root",
        data:{
            opacity:1
        },
        methods: {
            
        },
        //Vue完成模板的解析并把初始的真实DOM元素放如页面（完成挂载）调用mounted
        mounted(){
            console.log('mounted')
            setInterval(()=>{
                this.opacity -=0.01
                if(this.opacity <=0) this.opacity=1
            },16)
        }
    })
</script>

</html>

生命周期流程图

生命周期.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>分析生命周期</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
        <h2 v-text="n"></h2>
        <h2>当前的n值是：{{n}}</h2>
        <button @click="add">点我n+1</button>
        <button @click="bye">点我销毁vm</button>
    </div>
    
</body>
<script type="text/javascript">
    Vue.config.productionTip=false

    new Vue({
        el:"#root",
        data:{
           n:1
        },
        methods: {
            add(){
                console.log('add')
                this.n++
            },
            bye(){
                console.log('bye')
                this.$destroy()
            }
        },
        watch:{
            n(){
                console.log('n变了')
            }
        },
        beforeCreate() {
            console.log('beforeCreate')
        },
        created() {
            console.log('created')
           
        },
        beforeMount() {
            console.log('beforeMount')

        },
        mounted() {
            console.log('mounted')
            
        },
        beforeUpdate() {
            console.log('beforeUpdate')
        },
        updated() {
            console.log('update')
        },
        beforeDestroy() {
            console.log('bedoreDestroy')
        },
        destroyed() {
            console.log('destroyed')
        },
    })
</script>

</html>

常用的生命周期钩子：

          1.mounted：发生ajax请求，启动定时器，绑定自定义事件，订阅消息等【初始化操作】

          2.beforeDestroy：清除定时器，解绑自定义事件，取消订阅消息等【首位工作】

        关于销毁Vue实例

          1.销毁后借助Vue开发者工具看不到任何信息

          2.销毁后自定义事件会失效，但原生DOM事件仍然有效

          3.一般不会在bedoreDestroy操作数据，因为即便操作数据，也不会再触发更新流程


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>引出生命周期</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <!-- 
        常用的生命周期钩子：
          1.mounted：发生ajax请求，启动定时器，绑定自定义事件，订阅消息等【初始化操作】
          2.beforeDestroy：清除定时器，解绑自定义事件，取消订阅消息等【首位工作】

        关于销毁Vue实例
          1.销毁后借助Vue开发者工具看不到任何信息
          2.销毁后自定义事件会失效，但原生DOM事件仍然有效
          3.一般不会在bedoreDestroy操作数据，因为即便操作数据，也不会再触发更新流程
     -->
   
    <div id="root">
        <h2 :style="{opacity}">欢迎学习Vue</h2>
        <button @click="opacity=1">透明度设置为一</button>
        <button @click="stop">点我停止变换</button>
    </div>
    
</body>
<script type="text/javascript">
    Vue.config.productionTip=false

    new Vue({
        el:"#root",
        data:{
            opacity:1
        },
        methods: {
            stop(){
               // clearInterval(this.timer)
               this.$destroy()
            }
            
        },
        mounted(){
            console.log('mounted')
            this.timer=setInterval(()=>{
                this.opacity -=0.01
                if(this.opacity <=0) this.opacity=1
            },16)
        },
        beforeDestroy() {
            console.log('vm干掉')
            clearInterval(this.timer)
        },
    })
</script>

</html>

组件

Vue使用组件的三大步骤：

          1.定义组件（创建组件）

          2.注册组件

          3.使用组件（写组件标签）

        1.如何定义一个组件？

          使用Vue.extend(options)创建，其中options和new Vue(options)传入的哪个options几乎一样，但是也有区别

          区别如下：

              1.el不要写，为什么？ --最终组件都要经过一个vm的管理，由vm中的el绝对服务哪个容器

              2.data必须写成函数，为什么？ --避免组件被复用，数据存在引用关系

          备注：使用template可以配置组件结构

        2.如何注册组件？

          1.局部注册：考new Vue的时候传入components选项

          2.全局注册：考Vue.component('组件名'，组件)

        3.编写组件标签

          <school></school>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本使用</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
        
        <xuexiao></xuexiao>
        <hr>
        <xuesheng></xuesheng>

    </div>
    <div id="root2">
        <student></student>
        <hello></hello>
    </div>
</body>
<script type="text/javascript">
    Vue.config.productionTip=false

    //第一步，创建school组件
    const school=Vue.extend({
        //组件定义时，不需要写el配置项，因为最终所有的组件都会被一个vm管理，由vm决定服务于哪个容器
        
            template:`
            <div>
                <h2>学校名称：{{schoolName}}</h2>
                <h2>学校地址:{{adress}}</h2>
                <button @click="showName">点我提示学校名</button>
                </div>
            `,
        

        data(){
            return{
                schoolName:'尚硅谷',
                adress:'北京昌平',
            }
        },
        methods: {
            showName(){
                alert(1)
            }
        },
    })

    //创建student组件
    const student=Vue.extend({
        template:`
        <div>
        <h2>学生姓名：{{studentName}}</h2>
        <h2>学生年龄：{{age}}</h2>
        </div>`,
        data(){
            return{
            studentName:'张三',
            age:18
        }
        }
    })

    //
    const hello =Vue.extend({
        template:`
        <div>你好啊</div>
        `,
        data(){
            return{
                name:'tom'
            }
        }
    })
  
    //全局注册
    Vue.component('hello',hello)
   
    //创建vm
    new Vue({
        el:"#root",
        //第二步，组件注册（局部注册）
        components:{
            xuexiao:school,
            xuesheng:student
        }
    })

    new Vue({
        el:'#root2',
        components:{
            student
        }
    })
</script>

</html>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/783416.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

基于Gym Anytrading 的强化学习简单实例

基于Gym Anytrading 的强化学习简单实例

近年来强化学习(RL)在算法交易领域受到了极大的关注。强化学习算法从经验中学习并基于奖励优化行动使其非常适合交易机器人。在这篇文章&#xff0c;我们将简单介绍如何使用Gym Anytrading环境和GME (GameStop Corp.)交易数据集构建一个基于强化学习的交易机器人。 强化学习是…
阅读更多...
【Java从0到1学习】05 Java 数组

【Java从0到1学习】05 Java 数组

1. 数组概述 需求&#xff1a;现在需要统计某公司员工的工资情况&#xff0c;例如计算平均工资、找到最高工资等。假设该公司有80名员工&#xff0c;用前面所学的知识&#xff0c;程序首先需要声明80个变量来分别记住每位员工的工资&#xff0c;然后在进行操作&#xff0c;这样…
阅读更多...
MySQL一些知识

MySQL一些知识

六、MySQL命令参数 七、远程登录 use mysql 八、SQL语句和常见的SQL操作 九、数据库和表的创建及插入 指定字段名称&#xff0c;按照表的字段名称顺序写&#xff1a; 指定字段名称&#xff1a; 字段名称可以不全部指定&#xff1a;
阅读更多...
SpringBoot(三)

SpringBoot(三)

文章目录 前言一.日志的作用二.日志的使用2.1 自定义日志打印三.日志的级别3.1 日志级别的作用3.2 日志级别的分类和使用 四.⽇志持久化 前言 日志在应用程序中扮演着至关重要的角色&#xff0c;它是软件开发、运维和故障排查中不可或缺的工具。无论是大型企业级应用还是小型个…
阅读更多...
node插件的安装、HTTP协议

node插件的安装、HTTP协议

接口测试与UI测试&#xff08;功能测试&#xff0c;UI的自动化测试&#xff09;有什么区别&#xff1f; 1、接口测试更多测试的是客户端与后端之间的交互 2、接口测试也是可以完全的测试产品功能测试场景 UI测试&#xff1a; 1、页面的交互 2、页面的各种提示信息的验证 …
阅读更多...
C#栈、List结构的简单搭建

C#栈、List结构的简单搭建

1、栈是一种先进后出的结构&#xff0c;如图&#xff1a; 我们用代码&#xff0c;简单实现一下&#xff1a; public class StackTest<T>{private T[] stack { get; set; }public int length { get; set; }public StackTest(){length 0;stack new T[length];}public vo…
阅读更多...
[JVM]String str1 = new String(“yhz“)和 String str2 = “yhz“ 的区别

[JVM]String str1 = new String(“yhz“)和 String str2 = “yhz“ 的区别

文章目录 0、前情1、相同之处2、不同之处3、解释前情 0、前情 为什么str1 str2 就返回true&#xff0c;而str1str3 就返回false&#xff1f;先看内存图解释 1、相同之处 String str1new String(“yhz”)和String str2“yhz”&#xff0c;都会先去字符串常量池中查看是否已经存…
阅读更多...
Helm KinD kubectl krew Istio急速安装

Helm KinD kubectl krew Istio急速安装

本篇更新网上许多安装失效的工具&#xff0c;如krew和KinD。 本篇测试使用时间为2023/7/20&#xff0c;基本都为最新版本或最新稳定版本。 前置 Helm 是 Kubernetes 的一个包管理工具&#xff0c;用于简化 Kubernetes 应用的部署和管理。Helm 使用名为 "chart" 的打…
阅读更多...
QDialog的两种显示方式

QDialog的两种显示方式

QDialog的两种显示方式 模态显示非模态显示 QDialog不能嵌入到其他窗口中显示&#xff08;无论继承与否&#xff09; 模态显示 d->exec(); 阻塞程序的执行 非模态显示 d->show(); 不阻塞程序
阅读更多...
A--玉米大炮--2022河南萌新联赛第（三）场：河南大学

A--玉米大炮--2022河南萌新联赛第（三）场：河南大学

输入 3 3 1 1 2 2 3 3 输出 0 说明 开始时,小蓝控制所有大炮立即发射炮弹,僵王博士受到 666 点伤害,直接被击溃。 示例2 输入 2 20 5 1 5 3 输出 2 说明 开始时,小蓝控制所有大炮立即发射炮弹,僵王博士受到 101010 点伤害, 一秒后一号大炮装填完毕,小蓝控制其攻击僵王…
阅读更多...
力扣 -- 152. 乘积最大子数组

力扣 -- 152. 乘积最大子数组

一、题目&#xff1a; 题目链接&#xff1a;152. 乘积最大子数组 - 力扣&#xff08;LeetCode&#xff09; 二、解题步骤 下面是用动态规划的思想解决这道题的过程&#xff0c;相信各位小伙伴都能看懂并且掌握这道经典的动规题目滴。 三、参考代码&#xff1a; class Solut…
阅读更多...
分布式数据库 Join 查询设计与实现浅析

分布式数据库 Join 查询设计与实现浅析

目录 前言&#xff1a; ①Mysql 分库分表 Join 查询场景 sharding-jdbc Code Insight SQL 路由策略 ②Elasticsearch Join 查询场景 elasticsearch-sql Code Insight ③More Than Join Join 算法 Elasticsearch Nested 类型 前言&#xff1a; 分布式数据库 Join 查…
阅读更多...
Unity 2D 针对单个物体的空气墙（能指定物体的碰撞器）

Unity 2D 针对单个物体的空气墙（能指定物体的碰撞器）

笔者也是废了九牛二虎之力才发现这个API并选择一种相对效率高还简单的实现方法 克服了同层级空气墙的问题 这样可以实现只跟列表里的物体能发生碰撞 在使用之前请确保&#xff1a;空气墙 原本 可以与列表指定的物体发生碰撞 然后本脚本会自动取消列表外的全部碰撞&#xff…
阅读更多...
使用spark进行hbase的bulkload

使用spark进行hbase的bulkload

使用spark进行hbase的bulkload 一、 背景 HBase 是一个面向列&#xff0c;schemaless&#xff0c;高吞吐&#xff0c;高可靠可水平扩展的 NoSQL 数据库&#xff0c;用户可以通过 HBase client 提供的 put get 等 api 实现在数据的实时读写。在过去的几年里&#xff0c;HBase …
阅读更多...
C++面向对象程序设计-基础入门(超详细）

C++面向对象程序设计-基础入门(超详细）

目录 一、c概述 二、初识c 1、第一个c程序 2、c面向对象的三大特性&#xff08;重要&#xff09; 三、作用域运算符&#xff1a;&#xff1a; 1、使用关键字namespace创建一个命名空间 2、命名空间只能定义在全局 3、 命名空间嵌套 4、随时将新的成员加入命名空间 5、命…
阅读更多...
uni-app : 监听路由变化

uni-app : 监听路由变化

在App.vue中 在 onLaunch中,利用拦截器监听 navigateTo等, 切记要在 invoke回调函数中查看, 要是再 success回调函数中,都路由完成了,还看啥? onLaunch(){ uni.addInterceptor(navigateTo, { //监听跳转invoke(e) {console.log(******** invoke-navigateTo ********, e.url)}…
阅读更多...
AI工具集：【stablefoundation】satblediffusion官方免费实验机器人

AI工具集：【stablefoundation】satblediffusion官方免费实验机器人

stablefoundation是satble diffusion官方免费实验机器人,与midjourney一样在discord上操作 视频教程 https://v.douyin.com/ibgQTU7/ 图文教程 1、打开网址: https://stabledigest.substack.com/ 2、点击discord 3、加入stable foundation 4、点击找到机器人频道&#xf…
阅读更多...
Linux —— 环境变量

Linux —— 环境变量

环境变量&#xff08;environment variables&#xff09;&#xff0c;一般指在操作系统中用来指定操作系统运行环境的一些参数&#xff1b;如在编写的C/C代码链接时&#xff0c;所链接的动态、静态库的位置&#xff0c;就是通过相关环境变量帮助编译器进行查找的&#xff1b;环…
阅读更多...
Stephen Wolfram：一次只添加一个词

Stephen Wolfram：一次只添加一个词

It’s Just Adding One Word at a Time 一次只添加一个词 That ChatGPT can automatically generate something that reads even superficially like human-written text is remarkable, and unexpected. But how does it do it? And why does it work? My purpose here is t…
阅读更多...
PID输出反馈回路调控算法原理

PID输出反馈回路调控算法原理

本文章学习研究PID闭环回路控制算法&#xff0c;介绍帮助大家理解这个算法&#xff0c;希望看后觉得有用就三连支持一下。 目录 认识PID: PID算法知识理论学习&#xff1a; 首先看PID原理的框图&#xff1a; 一、比例算法P&#xff1a; 二、积分算法I&#xff1a; 三、微…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023