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);//注意此处时windowelement.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);//注意此处时windowelement.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);//注意此处时windowelement.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元素放入页面后 (挂载完毕) 调用mountedmounted() {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元素放入页面后 (挂载完毕) 调用mountedmounted() {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>

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/386886.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

MyBatis-Plus自动生成代码

目录 前言一. 什么是 MyBatis-Plus1. Mybatis-Plus 的特点2. Mybatis-Plus 结构二. MyBatis-Plus 自动生成步骤1. 数据库准备2. 环境准备(1) 创建一个空的 Spring Boot 工程(2) 导入pom依赖(3) 编辑application.yml文件(4) 在启动类加入 @MapperScan 注解3. 配置代码4. 运行三.…

数据库安全:MySQL安全配置,MySQL安全基线检查加固

「作者简介」:冬奥会网络安全中国代表队,CSDN Top100,就职奇安信多年,以实战工作为基础著作 《网络安全自学教程》,适合基础薄弱的同学系统化的学习网络安全,用最短的时间掌握最核心的技术。 这一章节我们需要知道MySQL的安全基线标准和加固方式。 MySQL基线检查 1、更新…

【2024最新华为OD-C/D卷试题汇总】[支持在线评测] 围棋的气(100分) - 三语言AC题解(Python/Java/Cpp)

🍭 大家好这里是清隆学长 ,一枚热爱算法的程序员 ✨ 本系列打算持续跟新华为OD-C/D卷的三语言AC题解 💻 ACM银牌🥈| 多次AK大厂笔试 | 编程一对一辅导 👏 感谢大家的订阅➕ 和 喜欢💗 🍿 最新华为OD机试D卷目录,全、新、准,题目覆盖率达 95% 以上,支持题目在线…

unity3d:TabView,UGUI多标签页组件,TreeView树状展开菜单

概述 1.最外层DataForm为空壳编辑数据用。可以有多个DataForm&#xff0c;例如福利DataForm&#xff0c;抽奖DataForm 2.Menu层为左边栏层&#xff0c;每个DataForm可以使用不同样式的MenuForm预制体 3.DataForm中使用ReorderList&#xff0c;可排列配置 4.有定位功能&#xf…

stl-set

目录 目录 内部自动有序、不含重复元素 关于能不能自己造一个cmp&#xff0c;还挺复杂。 访问&#xff1a;只能用迭代器且受限 添加元素&#xff1a;没有pushback&#xff0c;用insert 复杂度&#xff1a;ologn ​编辑 查找元素find&#xff08;&#xff09;&#xff1…

C++-入门(下)

一、前言&#xff1a; 目标&#xff1a; 1. C 关键字 2. 命名空间 3. C 输入 & 输出 4. 缺省参数 5. 函数重载 6. 引用 7. 内联函数 8. auto 关键字 (C11) 9. 基于范围的 for 循环 (C11) 10. 指针空值 ---nullptr(C11) 二、目标的实现&#xff1a; 6. 引用&#xff1a;…

后端开发工程师vue2初识的学习

博客主页&#xff1a;音符犹如代码系列专栏&#xff1a;JavaWeb关注博主&#xff0c;后期持续更新系列文章如果有错误感谢请大家批评指出&#xff0c;及时修改感谢大家点赞&#x1f44d;收藏⭐评论✍ 什么是Vue&#xff1f; Vue &#xff08;通常指 Vue.js&#xff09;是一个用…

Mybatis批量更新数据库错误

问题&#xff1a;记录一次使用Mybatis批量更新数据库的错误&#xff0c;错误信息&#xff0c;Error updating database. Cause: org.postgresql.util.PSQLException: 错误: 字段 "update_time" 的类型为 timestamp without time zone, 但表达式的类型为 text 建议&am…

【Unity动画】Animation Sequencer:动画制作的革新工具

在Unity游戏开发中&#xff0c;动画是提升玩家体验的关键因素。传统的动画制作方式往往耗时且复杂&#xff0c;但有了Animation Sequencer&#xff0c;这一过程将变得更加直观和高效。本文将介绍Animation Sequencer这一视觉工具&#xff0c;探讨其如何帮助开发者在Unity编辑器…

Ubuntu 20.04.6 安装 Elasticsearch

1.准备 -- 系统更新 sudo apt update sudo apt upgrade -- 安装vim 文本编辑器 sudo apt install vim-- jdk 版本确认 java -versionjdk 安装可以参照&#xff1a;https://blog.csdn.net/CsethCRM/article/details/140768670 2.官方下载Elasticsearch 官方地址&#xff1a;h…

Linux源码阅读笔记14-IO体系结构与访问设备

IO体系结构 与外设通信通常称为输入输出&#xff0c;一般缩写为I/O。在实现外设IO的时候&#xff0c;内核必须处理三个可能出现的问题&#xff1a; 必须根据具体的设备类型和模型&#xff0c;使用各种方法对硬件寻址。内核必须向用户应用程序和系统工具提供访问各种设备的方法…

maven引入了jar包但在class文件里找不到jar包里的类

在工作当中遇到的这个问题&#xff0c;别人引入的jar包&#xff0c;我代码里报错 maven clean 和 maven install 都不管用 检查过了pom文件 检查了maven仓库路径下是否有这个cn.hutool的jar包 都没有找到问题 最终解决办法是手动引入 步骤一&#xff1a;点击左上角file->…

Golang | Leetcode Golang题解之第290题单词规律

题目&#xff1a; 题解&#xff1a; func wordPattern(pattern string, s string) bool {word2ch : map[string]byte{}ch2word : map[byte]string{}words : strings.Split(s, " ")if len(pattern) ! len(words) {return false}for i, word : range words {ch : patt…

基于python的百度迁徙迁入、迁出数据分析(四)

这篇文章是对上篇文章的可获取数据的时间区间的修正&#xff0c;依然通过开发者模式找寻相关数据源&#xff0c;我直接把数据url贴在这里&#xff0c;可以发现里面包含了相对明面上看不到的数据包括&#xff0c;行政区id、春运迁徙数据等&#xff1a;qianxi.cdn.bcebos.com/app…

【C语言报错已解决】“Undefined Reference”

&#x1f3ac; 鸽芷咕&#xff1a;个人主页 &#x1f525; 个人专栏: 《C干货基地》《粉丝福利》 ⛺️生活的理想&#xff0c;就是为了理想的生活! 引言&#xff1a; 在开发过程中&#xff0c;我们经常会遇到各种编译错误或运行时错误。其中&#xff0c;“Undefined Referenc…

The Llama 3 Herd of Models 第5部分,结果部分全文

第1-3部分 第4部分 5 Results 我们对Llama 3进行了一系列广泛的评估,调查了:(1)预训练语言模型的性能,(2)后训练语言模型的性能,以及(3)Llama 3的安全特性。我们在下面单独的小节中提出这些评估的结果。 5.1 Pre-trained Language Model 预训练语言模型 在本节中,我们报…

逻辑回归推导

逻辑回归既可以看作是回归算法&#xff0c;也可以看做是分类算法。通常作为分类算法使用&#xff0c;只可以解决二分类问题。 在上述平面中&#xff0c;每个颜色代表一个类别&#xff0c;即有4个类别 将红色的做为一个类别&#xff0c;其他三个类别都统称为其他类别&#xff0…

C#初级——枚举

枚举 枚举是一组命名整型常量。 enum 枚举名字 { 常量1, 常量2, …… 常量n }; 枚举的常量是由 , 分隔的列表。并且&#xff0c;在这个整型常量列表中&#xff0c;通常默认第一位枚举符号的值为0&#xff0c;此后的枚举符号的值都比前一位大1。 在将枚举赋值给 int 类型的…

完成stable将图片转换为二维码

1.创建虚拟环境 conda create -n stable python=3.10.6 2.克隆项目 git clone https://github.com/AUTOMATIC1111/stable-diffusion-webui 或者 git clone https://kgithub.com/AUTOMATIC1111/stable-diffusion-webui 3.安装依赖(-i https://pypi.tuna.tsinghua.edu.cn/s…

大数据-54 Kafka 安装配置 环境变量配置 启动服务 Ubuntu配置 ZooKeeper

点一下关注吧&#xff01;&#xff01;&#xff01;非常感谢&#xff01;&#xff01;持续更新&#xff01;&#xff01;&#xff01; 目前已经更新到了&#xff1a; Hadoop&#xff08;已更完&#xff09;HDFS&#xff08;已更完&#xff09;MapReduce&#xff08;已更完&am…