vue第三周

最新推荐文章于 2024-08-13 22:07:58 发布
最新推荐文章于 2024-08-13 22:07:58 发布
阅读量706 收藏 23
点赞数 12
文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_74641039/article/details/137212799
版权

1.过滤器

定义:对要显示的数语法:
   1.注册过滤器: Vue.filter(name,callback) 或 new Vue{filters:{}}
   2.使用过滤器:{{xxx | 过滤器名}} 或 v-bind:属性 =“xxx过滤器名"
备注:
    1.过滤器也可以接收额外参数、多个过滤器也可以串联
    2.并没有改变原本的数据，是产生新的对应的数据据进行特定格式化后再显示(适用于一些简单逻辑的处理)
用过滤器实现格式化日期
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <!-- 过滤器:
    定义:对要显示的数据进行特定格式化后再显示(适用于一些简单逻辑的处理)
    语法:
    1.注册过滤器: Vue.filter(name,callback) 或 new Vue{filters:{}}
    2.使用过滤器:{{xxx | 过滤器名}} 或 v-bind:属性 =“xxx过滤器名"
    备注:
    1.过滤器也可以接收额外参数、多个过滤器也可以串联
    2.并没有改变原本的数据，是产生新的对应的数据 -->

    <div id='root'>
        <h2>显示格式化后的时间</h2>
        <!-- 计算属性实现 -->
        <h3>现在是: {{fmtTime}}</h3>
        <!--  methods实现  -->
        <h3>现在是: {{getFmtTime()}}</h3>
        <!-- 过滤器实现 -->
        <h3>现在是: {{time|timeFormater}}</h3>
        <!-- 过滤器实现 (传参) -->
        <h3>现在是: {{time | timeFormater('YYYY_MM_DD') | mySlice}}</h3>
    </div>
    <div id="root2">
        <h2>{{msg | mySlice}}</h2>
    </div>
</body>
<script src="../vue.js"></script>
<script src="../dayjs.min.js"></script>
<script>
    // 全局的过滤器
    Vue.filter("mySlice", function (value) {
        return value.slice(0,4)
    });
    new Vue({
        el: "#root",
        data: {
            time: 1621561377603
        },
        computed: {
            fmtTime() {
                return dayjs(this.time).format('YYYY年MM月DD日 HH:mm:ss');
            }
        },
        methods: {
            getFmtTime() {
                return dayjs(this.time).format('YYYY年MM月DD日 HH:mm:ss')
            }
        },
        filters: {
            timeFormater(value, str = 'YYYY年MM月DD日 HH:mm:ss') {
                // console.log('@',value)
                return dayjs(value).format(str)
            },
            // 局部过滤器
            // mySlice(value){
            //     return value.slice(0,4)
            // }
        }
    })

    new Vue({
        el: "#root2",
        data: {
            msg: "hellooo"
        },
    })
</script>
</html>

2.自定义指令

自定义指令总结：
一、定义语法：
	(1)局部指令：
		new Vue({
			directives:{指令名：配置对象}
		})
		或
		new Vue({
			directves(){}
		})
	(2)全局指令：
		Vue.directive(指令名，配置对象)或Vue.directive(指令名，回调函数)
二、配置对象中常用的3个回调：
	（1）bind:指令与元素成功绑定时调用
	（2）inserted:指令所在元素被插入页面时调用
	（3）update:指令所在模板被重新时调用。
三、备注：
	1.指令定义时不加v-，但使用时要加v-
	2.指令名如果是多个单词，要使用Kebab-case命名方式，不要用camelCase命名

<!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">
    <link rel="shortcut icon" href="./image/logo.ico" type="image/x-icon">
    <title></title>
    <script src="./vue.js"></script>
    <style>
    </style>
</head>
<body>
    <!-- 
        需求1：定义一个v-big指令，和v-text功能类似，但是会把绑定的数据放大10倍
        需求2：定义一个v-fbind指令，和v-bind功能类似，但可以让其所绑定的元素自动获取焦点
     -->
    <div id="root">
        <h1>{{str}}</h1>
        <h2>当前的n值是：<span v-text="n"></span></h2>
        <h2>放大10倍后的n值是：<span v-big="n">放大10倍后的n值是：</span></h2>
        <button @click="n++">点我n+1</button>
        <hr>
        <input type="text" v-fbind:value="n">
    </div>
    <script>
      const vm=new Vue({
        el:'#root',
        data:{
            str:'时间啊，你是多么的美丽',
            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
                }
            }
        }
      })
   </script>
</body>
</html>

3.生命周期

声明周期：
	1.又名生命周期回调函数，生命周期钩子
	2.是什么：Vue在关键时刻帮我们调用的一些特殊名称的函数
    3.生命周期函数的名字不可更改，但函数的具体内容是程序员更加需求编写的。
    4.生命周期函数中的this指向是vm或组件实例对象
    
VM的生命周期
    将要创建====>调用beforeCreate函数
    创建完毕====>调用created函数
    将要挂载====>调用beforeMount函数
   （重要）挂载完毕====>调用mounted函数
    将要更新====>调用beforeUpdate函数
  	更新完毕====>调用updated函数
 （重要）将要销毁====>调用beforeDestroy函数
 	销毁完毕====>调用destroyed函数
 	
常用的生命周期钩子
    1.mounted: 发送ajax请求、启动定时器、绑定自定义事件、订阅消息等[初始化操作]
    2.beforeDestroy: 清除定时器、解绑自定义事件、取消订阅消息等[收尾工作]。
    
关工销毁Vue实例
    1.销毁后借助Vue开发者工具看不到任何信息。
    2.销毁后自定义事件会失效，但原生DOM事件依然有效。
    3.一般不会再beforeDestroy操作数据，因为即便操作数据，也不会再他发更新流程了。

<!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">
    <link rel="shortcut icon" href="./image/logo.ico" type="image/x-icon">
    <title></title>
    <script src="../vue.js"></script>
    <style>
    </style>
</head>
<body>

    <!-- 常用的生命周期钩子:
    1.mounted: 发送ajax请求、启动定时器、绑定自定义事件、订阅消息等[初始化操作]
    2.beforeDestroy: 清除定时器、解绑自定义事件、取消订阅消息等[收尾工作]。
    关工销毁Vue实例
    1.销毁后借助Vue开发者工具看不到任何信息。
    2.销毁后自定义事件会失效，但原生DOM事件依然有效。
    3.一般不会再beforeDestroy操作数据，因为即便操作数据，也不会再他发更新流程了。 -->
    
    <div id="root">
        <h1 :style="{opacity}">{{str}}</h1>
        <button @click="stop">点我停止变换</button>
        <button @click="opacity=1">点我透明度变为一</button>
    </div>
    <script>
    const vm= new Vue({
        el:'#root',
        data:{
            str:'时间啊，你是多么的美丽',
            opacity:1,
        },
        mounted() {
           this.timer= setInterval(()=>{
            vm.opacity-=0.01
            if(vm.opacity<=0) vm.opacity=1
        },16)
        },
        methods: {
            stop(){
                this.$destroy()
            }
        },
        beforeDestroy() {
            console.log('vm即将被销毁')
            clearInterval(this.timer)
        },
      })
   </script>
</body>
</html>

4.vue组件

单文件组件

Vue中使用组件的三大步骤：
   1.定义组件（创建组件）
   2.注册组件
   3.使用组件（写组件标签）
一、如何定义一个组件？
  使用Vue.extend(options)创建，其中options和New Vue（option）时传入的那个option几乎一样，但也有点区别：
    1.el不要写，为什么？最终所有组件都要经过一个vm的管理，由VM中的el决定服务哪个容器
    2.data必须写出函数，为什么？——————避免组件被复用时，数据存在引用关系
备注：使用template可以配置组件结构

二、如何注册组件
    1.局部注册：靠new Vue的时候传入components选项
    2.全局注册：靠Vue.component('组件名',组件)
三、编写组件标签
    <组件名><组件名/>

创建文件取名叫School.vue

<template>
    <!-- 组件的结构 -->
    <div class="demo">
        <h2>学校名称：{{A}}</h2>
        <h2>学校地址：{{address}}</h2>
        <button @click="showName">点我提示学校名</button>
    </div>
</template>
<script>
    // 组件交互相关的代码（数据，方法等）
        export default {
            name:"School",
            data(){
                return{
                    A:'尚硅谷',
                    address:'上海',
            }
            },
            methods: {
                showName(){
                    alert(this.A)
                }
            },
        }
</script>

<style scoped>
    /* 组件的样式 */
    .demo{
        background-color: orange;
    }
</style>

创建文件名叫Student.vue

<template>
    <!-- 组件的结构 -->
    <div class="demo">
        <h2>学生姓名：{{name}}</h2>
        <h2>学校年龄：{{age}}</h2>
    </div>
</template>

<script>
    // 组件交互相关的代码（数据，方法等）
        export default {
            name:"Student",
            data(){
                return{
                    name:'Tom',
                    age:18,
            }
            },
        }
</script>

App.vue文件

<template>
    <div>
        <img src="./assets/logo.png" alt="logo">
        <school></school>
        <student></student>
    </div>
</template>

<script>
    // 引入组件
    import School from './components/School.vue'
    import Student from './components/Student'
    export default {
        name:'App',
        components:{
            School,
            Student
        }
    }
</script>

非单文件组件

1.基本使用

<!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">
    <link rel="shortcut icon" href="./image/logo.ico" type="image/x-icon">
    <title></title>
    <script src="../vue.js"></script>
    <style>
    </style>
</head>

<body>

    <!-- Vue中使用组件的三大步骤:
定义组件(创建组件)
注册组件
使用组件(写组件标签)
如何定义一个组件?
使用Vue.extend(options)创建，其中options和new Vue(options)时传入的那个options几乎一样，但也有点区别:
区别如下:
1.e1不要写，为什么? 最终所有的组件都要经过一个vm的管理，由vm中的e1决定服务哪个容器。
2.data必须写成函数，为什么?
避免组件被复用时，数据存在引用关系。
备注:使用template可以配置组件结构。
、如何注册组件?
1.局部注册:
华new Vue的时候传入components选项
2.全局注册:
靠Vue.component(组件名 组件)
U英
、编写组件标签:
<school></schoo1> -->

    <div id="root">
        <h2>{{msg}}</h2>
        <!-- 第三步：编写组件标签 -->
        <school></school>
        <hr>
        <!-- 第三步：编写组件标签 -->
        <student></student>
        <student></student>
    </div>

    <div id="root2">
        <hello></hello>
    </div>
    <script>
        // 第一步：创建school组件
        const school = Vue.extend({
            // el:'#root',组件定义时，一定不要写el配置项，因为最终所有的组件都要被一个vm管理，由vm决定服务哪个容器
            template: `
                <div>
                <h2>学校名称：{{schoolName}}</h2>
                <h2>学校地址：{{address}}</h2>
                <button @click="showName">点我提示学校名</button>
                </div>
                `,
            data() {
                return {
                    schoolName: '尚硅谷',
                    address: '上海',
                }
            },
            methods: {
                showName() {
                    alert(this.schoolName)
                }
            },
        })
        // 第一步：创建student组件
        const student = Vue.extend({
            template: `
                <div>
                    <h2>学生姓名：{{studentName}}</h2>
                    <h2>学生年龄：{{age}}</h2>
                </div>
                `,
            data() {
                return {
                    studentName: '张三',
                    age: 18
                }
            }
        })
        const vm = new Vue({
            el: '#root',
            data: {
                msg: 'hello!'
            },
            // 第二部：注册组件（局部注册）
            components: {
                school: school,
                student: student
            }
        })
        //定义全局组件
        const hello = Vue.extend({
            template: `
          <div>
            <h2>你好啊！{{name}}</h2>
            </div>
          `,
            data() {
                return {
                    name: 'tom'
                }
            }
        })

        //   第二步：全局注册组件
        Vue.component('hello', hello)
        new Vue({
            el: '#root2',
        })
    </script>
</body>

</html>

2.组件的嵌套

<!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">
    <link rel="shortcut icon" href="./image/logo.ico" type="image/x-icon">
    <title></title>
    <script src="./vue.js"></script>
    <style>
    </style>
</head>
<body>

    <div id="root">
        <app></app>
    </div>
    <script>
    const student={
            template:`
                <div>
                <h2>{{name}}</h2>
                <h2>{{age}}</h2>    
                </div>
            `,
            data(){
                return{
                    name:'tom',
                    age:18
                }
            }
        }
    const school={
            name:'xuexiao',
            template:`
                <div>
                <h2>学校名称：{{schoolName}}</h2>
                <h2>学校地址：{{address}}</h2>
                <button @click="showName">点我提示学校名</button>
                <student></student>
                </div>
                `,
            data(){
                return{
                    schoolName:'尚硅谷',
                    address:'上海',
            }
            },
            methods: {
                showName(){
                    alert(this.schoolName)
                }
            },
            components:{
                student
            }
        }
    const hello=Vue.extend({
        template:`
            <h1>{{msg}}</h1>
        `,
        data(){
            return{
                msg:'欢迎来到尚硅谷学习'
            }
        }
    })
    const app=Vue.extend({
        template:`
        <div>
        <hello></hello>
        <school></school>
        </div>
        `,
        components:{
            school:school,
            hello
        }
    })
    const vm= new Vue({
        el:'#root',
        data:{
            msg:'hello!'
        },
        components:{
            app
        }
      })
   </script>
</body>
</html>

3.组件中几个注意的点

<!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">
    <link rel="shortcut icon" href="./image/logo.ico" type="image/x-icon">
    <title></title>
    <script src="./vue.js"></script>
    <style>
    </style>
</head>
<body>

    <!-- 几个注意点:
1.关于组件名:
个单词组成:
第一种写法(首宁母小写): school
第二种写法(首字母大写): school
多个单词组成:
第一种写法(kebab-case命名): my-school
第二种写法(CamelCase命名): MySchool (需要Vue脚手架支持)
备注:
(1).组件名尽可能回避HTML中已有的元素名称，例如: h2、H2都不行。
(2)。可以使用name配置项指定组件在开发者工具中呈现的名字。
2.关于组件标签:
第一种写法:<school</school>
第二种写法:<school/>
备注:不用使用脚手架时，<schoo1/>会导致后续组件不能渲染
3。一个简写方式:
const school = Vue.extend(options) 可简写为: const school = options -->

    <div id="root">
        <h2>{{msg}}</h2>
        <my-school></my-school>
    </div>

    <div id="root2">
        <hello></hello> 
    </div>
    <script>
        const school={
            name:'xuexiao',
            template:`
                <div>
                <h2>学校名称：{{schoolName}}</h2>
                <h2>学校地址：{{address}}</h2>
                <button @click="showName">点我提示学校名</button>
                </div>
                `,
            data(){
                return{
                    schoolName:'尚硅谷',
                    address:'上海',
            }
            },
            methods: {
                showName(){
                    alert(this.schoolName)
                }
            },
        }
    const vm= new Vue({
        el:'#root',
        data:{
            msg:'hello!'
        },
        components:{
            'my-school':school,
        }
      })
   </script>
</body>
</html>
喜欢九月
关注
  • 12
    点赞
  • 踩
  • 23
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Vue的第三周
Seveny07的博客
01-11 83
vue的第三周
vue3 第一周
WY_ALA的博客
03-20 210
vue1
Vue第一周复习总结
China_11111的博客
03-31 141
vue两大特征 目录 vue两大特征 一、数据驱动（mvvm） 二、组件化开发 1.什么是vue？ Vue.js是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。 Vue.js 是前端的主流框架之一，和Angular.js、React.js 一起，并成为前端三大主流框架！ 2.什么是mvc和mvvm? MVC 是后端的分层开发概念; MVVM是前端视图层的概念，主要关
vue计算本周是今年的第几周
weixin_43549003的博客
08-31 2585
需要使用moment类库 getWeekNum() { //获得当前日期是第几周的方法 var year = new Date().getFullYear(); var week = moment(new Date()).format("E");//获得今天是星期几 var startweek = moment(new Date(year + "-01-01")).format("E");//获得今年的1月1号是星期几 //今天到1月1号的时间戳之
第四十三周总结——Vue
1514的博客
05-03 1208
Vue2 还没总结完，这不是想混个五一勋章吗，等总结完再更新。 #### Vue Devtools     Vue Devtools是一个浏览器插件，可以让你更好的调试Vue应用。但是当我打开B站的个人中心时，Vue Devtools插件亮起了，但是在控制台却没办法打开Vue Devtools。因为Vue Devtools是否开启，取决于Vue.config.devtools，如果设置Vue.config.devtools = false，则不开启Vue Devtools，设置Vue.config.de
vue实现周日历 日历按周切换 vue日程管理
maoge_666的博客
04-22 1120
vue实现周日历 日历按周切换 vue日程管理
Vue 查看一周日期
Web_Notes的博客
09-28 789
效果 代码： html代码： <div class="week-item" v-on:click="dateActive(index)" v-for="(day,index) in week" v-bind:class="{ active:index==current}"> <div class="week-date">{{day.ts}}</div> <div class="week-name">{{day.xq}}</div
Vue第二周
m0_74641039的博客
03-17 351
"nums":{// bind成功绑定时调用},// inserted成功插入页面调用},// update重新解析时(改变)调用规则：定义指令名称不能使用驼峰和v-，要是用-连接，记得添加引号使用时要v-自定义名称函数写法:名称(节点,绑定对象){}对象写法:名称:{绑定成功调用bind(节点,绑定对象){},插入到页面调用inserted(节点,绑定对象){},重新解析时调用(值发生改变)update(节点,绑定对象){}
第1周作业vue.rar
02-18
在"第1周作业vue.rar"这个压缩包中，我们可能找到了与Vue.js学习相关的资料或项目。 1. **Vue基本概念**：Vue.js是由尤雨溪创建的开源库，它的主要特点是双向数据绑定，即视图和模型之间的数据会自动保持一致。这...
Vue无限滑动周选择日期的组件的示例代码
12-01
当时又没有找到合适的第三方插件，就花了点时间用原生JavaScript写了出来，当时心中就想把它写成基于Vue的组件，这短时间闲了把它弄出来了！，在这个过程中遇到了一个坑，后面会提出来！ 先看效果  思路 根据用户...
vue-admin-order:F2E第3周管理订单
05-11
vue-admin-order 构建设置 # install dependencies npm install # serve with hot reload at localhost:8080 npm run dev # build for production with minification npm run build # build for production and ...
一个可切换周视图和月视图的vue日历组件并且可以显示日程安排及事件标注
08-12
总的来说，这个Vue日历组件结合了Vue.js的核心特性，如组件化、数据绑定、条件渲染、计算属性和方法，以及可能的第三方库和插件，为开发者提供了一个强大且灵活的日程管理工具。通过深入理解这些技术点，开发者可以...
Vue日历组件，周和月的显示模式
12-15
这涉及到日期操作，可以使用JavaScript的内置`Date`对象或者第三方库如`moment.js`或`date-fns`。 例如，月视图的示例代码可能如下： ```html <!-- 月视图代码 --> ()" :key="week.index"> {{ day.date }} ...
el-checkbox 状态不更新
bao
08-13 176
（不添加响应式大概是因为：原数据是从 vue 的data中过滤出来的，filter方法并不会生成一个新的数组。，并不会对这段数据添加响应式处理，所以修改数据时，修改的还是原数据。， 还是要学会自己找到问题原因，通过优化代码逻辑来解决问题。数据来源 / 浅拷贝 都会导致这个问题。否则数组中对象还是指向原数据。从现有数据中过滤出新的数据，并且添加。由于数据结构是 数组对象 格式，这里。以上代码中处理数据后 直接赋值到。解决 ，但频繁使用会影响性能。虽然很多此类情况都能使用。
vue 实现上浮气泡效果
m0_68964998的博客
08-13 129
1.用 li 来做每个气泡。
【vue教程】五. Vue 的路由管理
最新发布
前端探索者
08-13 536
Vue Router 是 Vue 官方的路由管理器，用于构建单页面应用。它允许你通过 URL 来映射不同的组件，实现页面的动态加载和导航。路由守卫用于在路由跳转前后执行代码，可以用来检查用户认证状态、获取数据等。通过本篇文章，我们学习了 Vue Router 的基本概念、配置和使用，以及如何实现动态路由和嵌套路由。我们还探讨了路由守卫的概念，并提供了如何在 Vue 组件中使用它们的示例。这些知识点将帮助你构建一个功能完备的单页面应用。
Vue3使用el-table实现多级表头合并列
weixin_72439307的博客
08-07 367
el-table多级表头合并列
Vue 中 app.config 相关配置项介绍与案例
前端基地
08-13 411
本博文展开了细致且全面的阐述，对 app.config 、app.config.errorHandler 、app.config.warnHandler 、app.config.performance 、app.config.compilerOptions 、app.config.globalProperties 以及 app.config.optionMergeStrategies 进行了深入剖析。不仅清晰明了地介绍了它们的功能和特性，还通过丰富多样的实际案例展开了详尽的分析。
关于vue的实习日记10周
05-14
第3周： 本周的任务是完成一个复杂的Vue组件，并且尝试使用Vue-router进行路由管理。在编写组件的过程中，我继续深入学习了Vue组件的生命周期和钩子函数，并且掌握了Vue-router的基本概念和使用方法。 第4周： ...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值