Vue3学习笔记-06

最新推荐文章于 2024-05-23 22:55:00 发布

JZYCLL

最新推荐文章于 2024-05-23 22:55:00 发布

阅读量168

点赞数 1

分类专栏： Vue 学习笔记 vue学习笔记文章标签： vue 前端

本文链接：https://blog.csdn.net/JZYCLL/article/details/119006137

版权

学习笔记同时被 3 个专栏收录

7 篇文章 0 订阅

订阅专栏

vue学习笔记

7 篇文章 0 订阅

订阅专栏

Vue

6 篇文章 0 订阅

订阅专栏

Vue3学习笔记-06

一、内置指令

接着Vue3学习笔记-05

4. v-cloak 指令

当网速过慢的时候，可以让未经过解析的模板不会渲染在页面上

<style>
    [v-cloak]{
        display:none;
    }
</style>

<div id="root">
    <h2 v-cloak>{{name}}</h2>
</div>
<script>
	new Vue({
        el='#root',
        data:{
        	name:'小艾同学'
    	}
    })
</script>

上面的例子，当需要的vue.js解析很慢或者导入失败的时候，页面不会显示{{name}}，而是什么都不显示，但是当Vue实例创建解析成功之后，v-cloak 指令就会被删除，那么display:none也就不会起到作用，页面就可以正常显示了。

v-cloak指令（本身没有值）

①本质是一种特殊的属性，Vue实例创建完毕并接管容器之后，会删掉v-cloak属性

②使用css配合v-cloak可以解决网速慢时页面展示出{{ x xx }}的问题

5. v-once指令

<div id="root">
    <h2 v-once>初始化的n值为: {{n}}</h2>
    <h2>当前n的值为: {{n}}</h2>
    <button @click="n++">点击我n+1 </button>
</div>
<script>
	new Vue({
        el='#root',
        data:{
        	n:1
    	}
    })
</script>

v-once指令的作用：

1. v-once所在的节点在初次动态渲染之后，就视为静态的内容了；
2. 以后数据的改变不会引起v-once所在的结构的更新，可以用于优化性能。

6. v-pre 指令

<div id="root">
    <h2 v-pre>Vue 其实很简单</h2>
    <h2 v-pre>当前n的值为: {{n}}</h2>
    <button v-pre @click="n++">点击我n+1 </button>
</div>
<script>
	new Vue({
        el='#root',
        data:{
        	n:1
    	}
    })
</script>

v-pre 指令：

1.可以跳过其所在节点的编译过程

2.可以利用它跳过：没有使用指令语法、没有使用插值语法的节点，会加快编译

3.加了v-pre之后，Vue就不会再去解析加了v-pre之后的节点

二、自定义指令

1.举个例子

1.1.定义一个v-big指令，和v-text功能相似，但是会把绑定的数值放大10倍。

<div id="root">
    <h2>Vue 其实很简单</h2>
    <h2>当前n的值为: {{n}}</h2>
    <h2>放大后n的值为: {{n}}</h2>
    <button v-pre @click="n++">点击我n+1 </button>
</div>
<script>
	new Vue({
        el='#root',
        data:{
        	n:1
    	},
        directives:{
        	//big:function(){}   //可以简写为big(){}
            //big什么时候被调用：1.指令与元素成功绑定的时候； 2.指令所在的模板被重新解析的时候
            big(element,binding){
        		element.innerText = binding.value * 10
        	}
        }
    })
</script>

1.2.定义一个v-find 指令，和v-bind功能类似，但是可以让其所绑定的input元素默认获取焦点

<div id="root">
    <input type="text" v-fbind:value="n" />
    <button v-pre @click="n++">点击我n+1 </button>
</div>
<script>
	new Vue({
        el='#root',
        data:{
        	n:1
    	},
        directives:{
        	//big:function(){}   //可以简写为big(){}
            //big什么时候被调用：1.指令与元素成功绑定的时候； 2.指令所在的模板被重新解析的时候
            big(element,binding){
        		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>

2.注意点

2.1 当自定义指令是多个单词的时候，不能用驼峰命名方式实现

2.2 可以使用全部小写的方式，但是这样不利于代码的读

2.3 定义的时候不用写 v- ，但是在使用的时候，必须加 v-

2.4 使用 ‘-’ 来隔离两个单词，但是在定义指令的时候得使用函数的标准形式，指令名要用单引号引起来：

例如：

<script>
	new Vue({
        el='#root',
        data:{
        	n:1
    	},
        directives:{
            'big-number':function(element,binding){
        		element.innerText = binding.value * 10
        	}
        }
    })
</script>

3.指令中的this对象

指令中的this对象，指向的是windows对象

<script>
	new Vue({
        el='#root',
        data:{
        	n:1
    	},
        directives:{
            'big-number':function(element,binding){
        		console.log('big',this)//注意，此处的this是windows
        		element.innerText = binding.value * 10
        	}
        }
    })
</script>

4.全局的指令

<script>
   // Vue. directives('fbind',{
   //      big(element,binding){
   //     	console.log('big',this)//注意，此处的this是windows
   //     	element.innerText = binding.value * 10
   //      }
   //  })
     Vue. directives('fbind',function(){
        	console.log('big',this)//注意，此处的this是windows
        	element.innerText = binding.value * 10
     })
	new Vue({
        el='#root',
        data:{
        	n:1
    	}
    })
</script>

三、生命周期

1.基础知识

Vue完成模板的解析并把初始的真实DOM元素放入页面之后（挂载完毕）调用mounted函数

<div id="root">
        <h2 :style="{opacity}">欢迎学习Vue，这里渐渐变化</h2>
    </div>
    <script>
       const vm = new Vue({
            el:'#root',
            data:{
                opacity:1
            },
            methods:{
                change(){
                    setInterval(()=>{
                        vm.opacity -= 0.01
                        if (vm.opacity <=0 ) vm.opacity = 1
                    },16)
                }
            },
            //Vue完成模板的解析并把初始的真实DOM元素放入页面之后（挂载完毕）调用mounted函数
            mounted(){//挂载完毕之后
                setInterval(()=>{
                    vm.opacity -= 0.01
                    if (vm.opacity <=0 ) vm.opacity = 1
                },16)
            }
        })

        //通过外部的定时器实现
        // setInterval(()=>{
        //     vm.opacity -= 0.01
        //     if (vm.opacity <=0 ) vm.opacity = 1
        // },16)
    </script>

生命周期：

①又名：生命周期回调函数、生命周期函数、生命周期钩子。

②是什么；Vue在关键时刻帮我们调用的一些特殊名称的函数。

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

④生命周期函数中的this指向是vm 或者组件实例对象。

在这里插入图片描述

调用vm.$destroy()函数之后，可以销毁Vue实例，但是销毁之前的数据不会丢失，销毁之后，将会清除它与其他实例的连接，解绑它的全部指令以及事件监听器。

触发beforDestroy 和destroy的钩子

vm中所有的：data、methods、指令等，都处于可用状态，马上要执行销毁过程，一般在这个阶段：关闭定时器、取消订阅信息、解绑自定义事件等收尾的操作

2.生命周期总结

一共有8个钩子（共4对）

创建数据代理、数据监测之前是 beforeCreate() ，创建之后是 create() 。

挂载之前： beforeMount() , 挂载之后: mounted()

更新之前： beforeUpdate() , 更新之后： updated()

销毁之前： beforeDestroy() , 销毁之后: destroy()

3.常用的生命周期钩子

1. mounted：在这里面发起 ajax 请求、启动定时器、绑定自定义事件、订阅消息【初始化操作】

2. beforeDestroy: 清除定时器、解绑自定义事件、取消订阅消息等【收尾工作】

关于销毁Vue的实例：

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

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

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

四、组件

从下面的图片中，观察一下传统方式与组件化的区别：
在这里插入图片描述

在这里插入图片描述

4.1模块

1.理解：向外提供特定功能的js程序，前端来说模块一般就是一个js文件

2.为什么要用模块：js文件很多很复杂，能够服用js

3.作用：服用js，简化js的编写，提高js运行效率

4.2 组件

1.理解：用来实现局部（特定）功能效果的代码集合（html、css、js、image……等）

2.为什么要用组件：一个界面的功能很复杂的时候可以简化编码

3.作用：服用编码，简化项目编码，提高运行效率

4.3 创建组件

1.非单文件组件：

一个文件中包含n个组件。

2.单文件组件：

一个文件中只包含了一个文件。------- a.vue

3. Vue中使用组件的三个步骤：

①定义组件（创建组件）

②注册组件

③使用组件（写组件标签）

4. 如何定义一个组件

使用Vue.extend(options)创建，其中options和new Vue（options）时传入的那个options 几乎一样，但区别如下：

①el不要写-----因为最终所有的组件都要进过vm的管理，有vm中的el决定服务哪一个容器

②组件中的data必须写成函数-----避免组件被复用的时候，数据存在引用关系。

5. 如何注册组件

① 局部注册：靠new Vue的时候传入components的配置选项

②全局注册：靠Vue.component('组件名',组件)

6. 编写组件标签（使用组件）

例如：<school></school>

4.4 练习的例子-非单文件组件

<div id="root">
        <hello></hello>
        <hr>
        <school></school>
        <hr>
        <student></student>
    </div>
    <hr>
    <div id="root2">
        <hello></hello>
    </div>
    <script>
        //创建school组件
        const schools = Vue.extend({
            template:`
            <div>
                <h2>学校名称：{{schoolName}}</h2>
                <h2>学校地址：{{address}}</h2>
            </div>
            `,
            // el:'#root',  //在创建组件时，不要写el配置项，因为最终所有的组件都要被一个vm所管理，由vm决定服务于哪一个容器
            data(){
                return {
                    schoolName:'lyu',
                    address:'兰山区'
                }
            }
        })

        //创建student组件
         const student = Vue.extend({
            template:`
            <div>
                <h2>学生姓名：{{studentName}}</h2>
                <h2>学生年龄：{{age}}</h2>
                <button @click="showSchoolName">点击我显示学生名字</button>
            </div>
            `,
            data(){
                return {
                    studentName:'张三',
                    age:2
                }
            },
            methods:{
                showSchoolName(){
                    alert(this.studentName)
                }
            }
        })



        //创建hello组件
        const hello = Vue.extend({
            template:`
            <div>
                <h2>你好啊！ {{name}}</h2>
            </div>
            `,
            data(){
                return {
                    name:'Tom'
                }
            }
        })

        //注册全局组件 第一个参数是组件的名称，  第二个组件是组件在哪，和const定义的名称一样
        Vue.component('hello',hello)


        //创建vm
        new Vue({
            el:'#root',
            //注册组件
            components:{
                school:schools,//这里，使用组件的名字都一样的话（例如 school:school) 可以简写为 school
                student//这里使用了简写
            }
        })

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

JZYCLL

关注

1
点赞
踩
0

收藏

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

Vue3学习笔记-06一、内置指令接着Vue3学习笔记-054. v-cloak 指令当网速过慢的时候，可以让未经过解析的模板不会渲染在页面上<style> [v-cloak]{ display:none; }</style><div id="root"> <h2 v-cloak>{{name}}</h2></div><script> new Vue({
复制链接

扫一扫