vue基础3

基哥的奋斗历程2024-08-01 4:09

1.推荐好用的第三方框架

BootCDN - Bootstrap 中文网开源项目免费 CDN 加速服务

1.moment.js

2.dayjs

2.收集表达数据

html 复制代码 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
    <style>

    </style>
</head>
<!-- 

        收集表单数据：
            若：<input type="text"/>,则v-model收集的是value值，用户输入的就是value值。
            若：<input type="radio"/>,则v-model收集的是value值，且要给标签配置value值
            若：<input type="checkbox"/>
                1.没有配置input的value属性，那么收集的就是checked(勾选 or 未勾选，是布尔值)
                2.配置input的value属性：
                    (1)v-model的初始值是非数组，那么收集的就是checked(勾选 or 未勾选，是布尔值）
                    (2)v-model的初始值是数组，那么收集的的就是value组成的数组
                备注：v-model的三个修饰符：
                    lazy:失去焦点再收集数据
                    number：输入字符串转为有效的数字
                     trim：输入首尾空格过滤
-->

<body>
    <!-- 准备好一个容器 -->
    <div id="root">
        <form @submit.prevent="demo">
            <!-- 使用label标签让label里的内容与一个标签作为关联 -->
            <label for="demo"> 账号：</label>
            <!-- 去掉前后空格 -->
            <input type="text" name="" id="demo" v-model.trim="userInfo.account">
            <br>
            <label for="password">密码：</label>
            <input type="password" name="" id="password" v-model="userInfo.password">
            <br>
            <label for="age">年龄：</label>
            <!-- 转成 数字类型  -->
            <input type="number" name="" id="age" v-model.number="userInfo.age">
            <br>
            <label for="sex">性别：</label>
            <!-- 单选框 -->
            男
            <input type="radio" value="男" v-model="userInfo.sex">
            女
            <input type="radio" value="女" v-model="userInfo.sex">
            <br>
            爱好：
            学习<input type="checkbox" value="study" v-model="userInfo.hobby">
            <!-- 不写value默认收集的就是checked 布尔值 -->
            打游戏<input type="checkbox" value="playgame" v-model="userInfo.hobby">
            吃饭<input type="checkbox" value="eating" v-model="userInfo.hobby">
            <br>
            所属校区：
            <select v-model="userInfo.city">
                <option value="">请选择校区</option>
                <option value="beijing">北京</option>
                <option value="shanghai">上海</option>
                <option value="shenzhen">深圳</option>
                <option value="wuhan">武汉</option>
            </select>
            <br>
            其他信息
            <!-- 懒加载 当失去焦点的时候才获取值 -->
            <textarea v-model.lazy="userInfo.otherInfo">
            </textarea>
            <br>
            <input type="checkbox" v-model="userInfo.agree"> 阅读并接受 <a href="http://www.baidu.com">《用户协议》</a>

            <br>
            <button>提交</button>
        </form>
    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示

        const vm = new Vue({
            el: "#root",
            data: {
                userInfo: {
                    account: '',
                    password: '',
                    age:19,
                    sex: '2',
                    hobby: [],
                    city: 'beijing',
                    otherInfo: '',
                    agree: false

                }

            },
            methods: {
                demo() {
                    console.log(JSON.stringify(this._data));
                }
            },
        })

    </script>

</body>

</html>

3.过滤器

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>过滤器</title>
    <!-- 引入Vue -->
     <script type="text/javascript" src="../js/vue.js"></script>
     <script type="text/javascript" src="../js/dayjs.min.js"></script>
</head>

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

-->
<body>
    <!-- 准备好一个容器 -->
    <div id="root">
        <h2>显示格式化后的时间</h2>
        <!-- 计算属性实现 -->
        <h3>现在的时间是:{{date}}</h3>
          <!-- 计算属性实现 -->
          <h3>现在的时间是:{{dateFun()}}</h3>
          <!-- 过滤器实现 -->
          <h3>现在的时间是:{{time | timeFormat('YYYY-MM-DD') | mySlice}}</h3>
          <hr>
          <h3 :x="msg | mySlice">尚硅谷</h3>
    </div>

      <!-- 准备好一个容器 -->
      <div id="root2">
        <h2>显示格式化后的时间</h2>

          <!-- 过滤器实现 -->
          <h3>现在的时间是:{{time |  mySlice}}</h3>
    </div>

    <script type="text/javascript" >
        Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示

        Vue.filter('mySlice',function(val){
            return val.toString().slice(0,4);
        })

        const vm = new Vue({
            el:"#root",
            data: {
                time:Date.now(),
                msg:'你好,尚硅谷'
            },
            methods: {
                dateFun(){
                    return dayjs(this.time).format('YYYY-MM-DD HH:mm:ss');
                }
            },
            computed:{
                date(){
                    return dayjs(this.time).format('YYYY-MM-DD HH:mm:ss');
                }
            },
            // 局部过滤器
            filters:{
                timeFormat(val,format){
                    if(format!==null){
                        return dayjs(val).format(format);
                    }else{
                        return dayjs(val).format('YYYY-MM-DD HH:mm:ss');
                    }
                }

            }
        })    

        
        const vm2 = new Vue({
            el:"#root2",
            data: {
                time:Date.now()
            }
        })    

        setInterval(()=>{
            vm.time = Date.now()
        },1000)
    </script>

</body>
</html>

4.cookie

勾上后只能被 http携带

5.自定义指令

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!-- 引入Vue -->
     <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>


    <!-- 
        需求1:定义一个v-big指令,和v-text功能类似，但会把绑定的数值放大10倍，
        需求2:定义一个v-fbind指令，和 v-bind功能类似，但可以让其所绑定的input元素默认获取焦点。
    -->

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


    <!-- 准备好一个容器 -->
    <div id="root">
        {{name}}
        <h2>当前的n值是<span v-text="n"></span></h2>
        <h2>放大10倍后的n值是<span v-big="n"></span></h2>
        <button @click="n++">点我n+1</button>
        <button @click="jiejue">点我变化name</button>

        <hr>
        <!-- <input type="text" v-fbind:value="n" autofocus> autofocus 自动获取焦点 不是什么浏览器都好使 -->
        <input type="text" v-fbind:value="n">
    </div>

        <!-- 准备好一个容器 -->
        <div id="root2">
            {{name}}
            <h2>当前的n值是<span v-text="n"></span></h2>
            <h2>放大10倍后的n值是<span v-big="n"></span></h2>
            <button @click="n++">点我n+1</button>
            <button @click="jiejue">点我变化name</button>
    
            <hr>
            <!-- <input type="text" v-fbind:value="n" autofocus> autofocus 自动获取焦点 不是什么浏览器都好使 -->
            <input type="text" v-fbind1:value="n">
        </div>

    <script type="text/javascript" >
        Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示
        Vue.directive('fbind1',{
                    bind(element,binding){
                        console.log('bind全局',this);
                        //指令与元素成功绑定时(一上来)
                        element.value = binding.value;
                    },
                    inserted(element,binding){
                        //指令所在元素被插入页面时
                        element.focus();
                        console.log('inserted全局',this);

                    },
                    //局部指令
                    update(element,binding){
                        //指令所在的模板被重新解析时
                        console.log('update全局',this);//注意此处时window
                        element.value = binding.value;
                    }
                  });

        const vm = new Vue({
            el:"#root",
            data: {
                name:2,
                n:1
            },
            methods: {
                jiejue(){
                    this.name++;
                }
            },
            // 函数式定义指令
            directives:{
                //big函数合适会被调用？1.指令与元素成功绑定时调用（一上来）2.指令所在的模板被重新解析时
                //名字比较长就用 -隔开 然后在定义指令的时候用原生写法  'big-number':function(e,b){}
                  big(element,binding){
                    // console.dir(element) 详细输出element
                    // console.log(element instanceof HTMLElement); true
                    // console.log(b);
                    console.log('big',this);
                    element.innerText=binding.value*10;
                  },
                  fbind:{
                    bind(element,binding){
                        console.log('bind',this);
                        //指令与元素成功绑定时(一上来)
                        element.value = binding.value;
                        console.log('bind');
                    },
                    inserted(element,binding){
                        //指令所在元素被插入页面时
                        console.log('inserted');
                        element.focus();
                        console.log('inserted',this);

                    },
                    //局部指令
                    update(element,binding){
                        //指令所在的模板被重新解析时
                        console.log('update');
                        console.log('update',this);//注意此处时window
                        element.value = binding.value;
                    }
                  }
            }
        })    

        new Vue({
            el:'#root2',
            data: {
                name:2,
                n:1
            },
            methods: {
                jiejue(){
                    this.name++;
                }
            }, // 函数式定义指令
            directives:{
                //big函数合适会被调用？1.指令与元素成功绑定时调用（一上来）2.指令所在的模板被重新解析时
                //名字比较长就用 -隔开 然后在定义指令的时候用原生写法  'big-number':function(e,b){}
                  big(element,binding){
                    // console.dir(element) 详细输出element
                    // console.log(element instanceof HTMLElement); true
                    // console.log(b);
                    console.log('big',this);
                    element.innerText=binding.value*10;
                  },
                  fbind:{
                    bind(element,binding){
                        console.log('bind',this);
                        //指令与元素成功绑定时(一上来)
                        element.value = binding.value;
                        console.log('bind');
                    },
                    inserted(element,binding){
                        //指令所在元素被插入页面时
                        console.log('inserted');
                        element.focus();
                        console.log('inserted',this);

                    },
                    //局部指令
                    update(element,binding){
                        //指令所在的模板被重新解析时
                        console.log('update');
                        console.log('update',this);//注意此处时window
                        element.value = binding.value;
                    }
                  }
            }
        })

    </script>

</body>
</html>

6.引出生命周期

html 复制代码 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<!-- 
    生命周期：
        1.又名：生命周期回调函数、生命周期函数、生命周期钩子。
        2.是什么：Vue在关键时刻帮我们调用的一些特殊名称的函数。
        3.生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的。
        4.生命周期函数中的this指向是vm 或组件实例对象。


-->


<body>
    <!-- 准备好一个容器 -->
    <div id="root">
        <!-- opacity透明度 0~1 -->
         <h2 v-if="a">你好啊</h2>
        <h2 :style="h2style">欢迎学习Vue</h2>
    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示

        const vm = new Vue({
            el: "#root",
            data: {
                a:false,
                h2style: {
                    opacity: 0.2,
                },
            },
            methods: {

            },
            // Vue完成模板的解析，并把初始的真实的DOM元素放入页面后 (挂载完毕) 调用mounted
            mounted() {
                console.log('mounted',this);//vm 
                setInterval(() => {
                    this.h2style.opacity -= 0.01;
                    if (this.h2style.opacity <= 0) {
                        this.h2style.opacity = 1;
                    }

                }, 16);
            this.a=true;
            },
        })

        // window.onload=()=>{
        //     // vm.change(); 页面加载完再调用
        // }

        //通过外部的定时器实现(不推荐)
        // setInterval(() => {
        //     vm.h2style.opacity-=0.01;
        //     if(vm.h2style.opacity<=0){
        //         vm.h2style.opacity = 1;
        //     }

        // }, 16);

    </script>

</body>

</html>

这个事件监听器指的是自定义事件

7.分析生命周期

html 复制代码 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
    <!-- 准备好一个容器 -->
    <div id="root">
        <h2>当前的n值是:{{n}}</h2>
        <button @click="add">点我n+1</button>
        <button @click="bye">点我销毁vm</button>
    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示

        const vm = new Vue({
            el: "#root",
            //把整个template替换上面root 的div
            // template: ` 
            //     <div>
            //         <h2>当前的n值是{{n}}</h2>
            // <button @click="add">点我n+1</button>
                    
            //         </div>
            // `,
            data: {
                n: 1
            },
            methods: {
                add() {
                    this.n++;
                },
                bye(){
                    console.log('bye');
                    this.$destroy();//销毁vm
                }
            },
            beforeCreate() {
                console.log('beforeCreate');
                // console.log(this.n);
                // debugger;//这是前端的debug 
            },
            created() {
                console.log('created');
            },
            beforeMount() {
                console.log('beforeMount');//其实vue已经解析完了，没有往页面放呢
                // debugger;
            },
            mounted() {
                console.log('mounted ');
                console.log(this.$el instanceof HTMLElement);//true
            },
            beforeUpdate() {
                console.log('beforeUpdate');
                console.log(this.n);
                // debugger;
            },
            updated() {
                console.log('updated');  
            },
            beforeDestroy() {
                console.log('beforeDestroy');
            }, 
            destroyed() {
                console.log('destroy');
            },
        })

    </script>

</body>

</html>

8.总结生命周期

html 复制代码 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<!-- 

    常用的生命周期钩子：
         1.mounted: 发送ajax请求、启动定时器、绑定自定义事件、订阅消息等【初始化操作】。
         2.beforeDestroy：清除定时器、解绑自定义事件、取消订阅消息等【收尾工作】。
    关于销毁Vue实例
         1.销毁后借助Vue开发者工具看不到任何信息。
         2.销毁后自定义事件会失效，但原生DOM事件依然有效。
         3.一般不会在beforeDestroy操作数据，因为即便操作数据，也不会再触发更新流程了。
-->

<body>
    <!-- 准备好一个容器 -->
    <div id="root">
        <!-- opacity透明度 0~1 -->
        <h2 v-if="a">你好啊</h2>
        <h2 :style="h2style">欢迎学习Vue</h2>

        <button @click="h2style.opacity=1">透明度设置为1</button>
        <button @click="stop">点我停止</button>
    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示

        const vm = new Vue({
            el: "#root",
            data: {
                a: false,
                h2style: {
                    opacity: 0.2,
                },
            },
            methods: {
                stop() {
                    this.$destroy();
                }

            },
            // Vue完成模板的解析，并把初始的真实的DOM元素放入页面后 (挂载完毕) 调用mounted
            mounted() {
                console.log('mounted', this);//vm 
                this.timer = setInterval(() => {//返回的是定时器的id 数字类型 唯一标识
                    console.log("setInterval");
                    this.h2style.opacity -= 0.01;
                    if (this.h2style.opacity <= 0) {
                        this.h2style.opacity = 1;
                    }

                }, 16);
                this.a = true;
            },
            beforeDestroy() {
                console.log('清除定时器成功');
                clearInterval(this.timer)//放入唯一标识清除定时器
            },
        })

        // window.onload=()=>{
        //     // vm.change(); 页面加载完再调用
        // }

        //通过外部的定时器实现(不推荐)
        // setInterval(() => {
        //     vm.h2style.opacity-=0.01;
        //     if(vm.h2style.opacity<=0){
        //         vm.h2style.opacity = 1;
        //     }

        // }, 16);

    </script>

</body>

</html>
相关推荐
咖啡の猫29 分钟前
Shell脚本-for循环应用案例
前端·chrome
百万蹄蹄向前冲3 小时前
Trae分析Phaser.js游戏《洋葱头捡星星》
前端·游戏开发·trae
朝阳5813 小时前
在浏览器端使用 xml2js 遇到的报错及解决方法
前端
GIS之路4 小时前
GeoTools 读取影像元数据
前端
ssshooter4 小时前
VSCode 自带的 TS 版本可能跟项目TS 版本不一样
前端·面试·typescript
你的人类朋友4 小时前
【Node.js】什么是Node.js
javascript·后端·node.js
Jerry5 小时前
Jetpack Compose 中的状态
前端
dae bal6 小时前
关于RSA和AES加密
前端·vue.js
柳杉6 小时前
使用three.js搭建3d隧道监测-2
前端·javascript·数据可视化
lynn8570_blog6 小时前
低端设备加载webp ANR
前端·算法
热门推荐
01UV安装并设置国内源02蜘蛛磁力 搜索引擎大全，如何使用蜘蛛磁力查找磁力链接03Qwen3-Coder 快速上手教程 | Qwen Code + Claude Code04KGG转MP3工具|非KGM文件|解密音频05【2025.08.06最新版】Android Studio下载、安装及配置记录（自动下载sdk）062025最新国内服务器可用docker源仓库地址大全（2025年8月更新）07TRAE 规则（Rules）配置指南：个人习惯、团队规范与最佳实践08NVIDIA显卡驱动、CUDA、cuDNN 和 TensorRT 版本匹配指南09阿里开源首个图像生成基础模型——Qwen-Image本地部署教程，超强中文渲染能力刷新SOTA！10TRAE Rules 实践：为项目配置 6A 工作流