vue基础3

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

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

1.moment.js

2.dayjs

2.收集表达数据

<!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.过滤器

<!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.自定义指令

<!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.引出生命周期

<!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.分析生命周期

<!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.总结生命周期

<!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>