网站的收录情况怎么查,网上商城开发需求,企业注册登记信息查询,户型图装修设计图app#x1f954;#xff1a;我徒越万重山 千帆过 万木自逢春 更多Vue知识请点击——Vue.js VUE2-Day4 收集表单数据1、不同标签的value属性2、v-model的三个修饰符 过滤器内置指令与自定义指令1、内置指令2、自定义指令定义语法#xff08;1#xff09;函数式#xff08;2我徒越万重山 千帆过 万木自逢春 更多Vue知识请点击——Vue.js VUE2-Day4 收集表单数据1、不同标签的value属性2、v-model的三个修饰符 过滤器内置指令与自定义指令1、内置指令2、自定义指令定义语法1函数式2对象式 Vue的生命周期1、什么是生命周期2、生命周期中的8个钩子3、生命周期图解重要4、生命周期案例 收集表单数据
1、不同标签的value属性
若input typetext/普通输入框则v-model收集的是value值用户输入的就是value值。 若input typeradio/单选框则v-model收集的是value值且要给标签配置value值。
若input typecheckbox/多选框
1、没有配置input的value属性那么收集的就是checked勾选 or 未勾选是布尔值 2、配置input的value属性: (1)v-model的初始值是非数组那么收集的就是checked勾选 or 未勾选是布尔值 (2)v-model的初始值是数组那么收集的的就是value组成的数组 一句话想正确收集那么要写上每个选项的value且v-model绑定的初始值是数组。
2、v-model的三个修饰符
v-model.lazy实现不用实时收集输入框失去焦点再收集 v-model.number输入的字符串收集为数字Vue内部做了数据转换通常和typenumber一起使用 v-model.trim收集时去掉输入的首尾空格
!DOCTYPE html
html langenheadmeta charsetUTF-8 /meta nameviewport contentwidthdevice-width, initial-scale1.0 /title收集表单数据/titlescript typetext/javascript src../js/vue.js/script/headbodydiv idroot!-- 这里form不需要action属性我们可以直接使用ajax --form submit.preventdemo账号!-- v-model.trim去掉前后空格 --input typetext v-model.trimuserInfo.accout /br /密码input typepassword v-modeluserInfo.password /br /年龄!-- 前面一个number控制只能输入数字后面一个v-model.number把收集的信息转成数值类型这两个一般搭配使用 --input typenumber v-model.numberuserInfo.age /br /性别 男inputtyperadionamesexv-modeluserInfo.sexvaluemale/女inputtyperadionamesexv-modeluserInfo.sexvaluefemale/br /爱好 吃饭inputtypecheckboxv-modeluserInfo.hobbyvalueeat/睡觉input typecheckbox v-modeluserInfo.hobby valuesleep /打豆豆inputtypecheckboxv-modeluserInfo.hobbyvaluebeatbean/br /所属校区select v-modeluserInfo.cityoption value请选择校区/optionoption valuebeijing北京/optionoption valueshanghai上海/optionoption valueguangzhou广州/optionoption valueshenzhen深圳/option/selectbr /其他信息!-- v-model.lazy让文本框不是实时收集而是输入完后失去焦点才收集 --textarea v-model.lazyuserInfo.other cols30 rows5/textareabr /input typecheckbox v-modeluserInfo.agree /阅读并接受a hrefhttps://blog.csdn.net/weixin_56498069?typelately《用户协议》/abutton提交/button/form/divscript typetext/javascriptnew Vue({el: #root,data: {userInfo: {accout: ,password: ,age: ,sex: ,// 多选的勾选框要写成数组hobby: [],city: ,other: ,agree: ,},},methods: {demo() {console.log(JSON.stringify(this.userInfo));},},});/script/body
/html过滤器
定义对要显示的数据进行特定格式化后再显示适用于一些简单逻辑的处理比如价格1999改成1,999等需求复杂的最好用计算属性或方法。 语法 1、注册过滤器Vue.filter(name,callback) 或 new Vue{filters:{}} 2、使用过滤器{{ xxx | 过滤器名}} 或 v-bind:属性 xxx | 过滤器名第二种几乎不用 备注 1、过滤器也可以接收额外参数、多个过滤器也可以串联 2、并没有改变原本的数据, 是产生新的对应的数据
!DOCTYPE html
html langenheadmeta charsetUTF-8 /meta nameviewport contentwidthdevice-width, initial-scale1.0 /title过滤器/titlescript src../js/vue.js/scriptscript src../js/dayjs.min.js/script/headbodydiv idrooth1当前时间是:{{time}}/h1!-- 计算属性实现 --h1当前时间是:{{formatTime}}/h1!-- 方法实现 --h1当前时间是:{{getformatTime()}}/h1!-- 过滤器实现 time传给timeFormater然后返回值替换整个部分--h1当前时间是:{{time | timeFormater}}/h1!-- 过滤器实现(传参)--h1当前时间是:{{time | timeFormater(YYYY——MM——DD)}}/h1!-- 过滤器的串联,一层一层往后传后面的接受的是前面的返回值--h1当前时间是:{{time | timeFormater(YYYY——MM——DD) | mySlice}}/h1!-- 下面这个打开控制台看元素节点就明白了 --h3 :xname | mySliceDJ/h3/divscript typetext/javascript// 全局过滤器Vue.filter(mySlice, function (val) {return val.slice(0, 4);});const vm new Vue({el: #root,data: {time: 1660472948789,name: zhangziying,},computed: {formatTime: {get() {return dayjs(this.time).format(YYYY年MM月DD日 HH:mm:ss);},},},methods: {getformatTime() {return dayjs(this.time).format(YYYY年MM月DD日 HH:mm:ss);},},// 局部过滤器filters: {//第一个参数是管道符 | 前边那玩意儿//第二个参数str来个默认值如果传了str就给不传就用默认值timeFormater(val, str YYYY年MM月DD日 HH:mm:ss) {// console.log(val);return dayjs(this.time).format(str);},mySlice(val) {//这里的val是上一个过滤器的返回值return val.slice(0, 4);},},});/script/body
/html
内置指令与自定义指令
1、内置指令
v-bind : 单向绑定解析表达式, 可简写为 :xxx v-model : 双向数据绑定 v-for : 遍历数组/对象/字符串 v-on : 绑定事件监听, 可简写为 v-if : 条件渲染动态控制节点是否存存在 v-else : 条件渲染动态控制节点是否存存在 v-show : 条件渲染 (动态控制节点是否展示)
v-text指令 作用向其所在的节点中渲染文本内容。 与插值语法的区别v-text会替换掉节点中的所有内容插值语法{{xx}}则不会。 div idrootdiv{{name}}/div!-- 使用v-text --!-- 只会显示potato不会显示你好因为v-text会替换掉节点中的所有内容并且不支持结构解析不可以识别html结构 --div v-textname你好/div/divscriptnew Vue({el: #root,data: {name: potato,},});/scriptv-html指令 作用向指定节点中渲染包含html结构的内容。 与插值语法的区别 1v-html会替换掉节点中所有的内容{{xx}}则不会,这点和v-text一样。 2v-html可以识别html结构这点和v-text区别v-text不能渲染标签。 div idroot!-- 使用v-html --!-- v-html会替换掉节点中的所有内容可以识别html结构 --div v-htmlstr你好/div/divscriptnew Vue({el: #root,data: {str: h2我是potato/h2,},});/script注意v-html有安全性问题 1在网站上动态渲染任意HTML是非常危险的容易导致XSS攻击。 2一定要在可信的内容上使用v-html永不要用在用户提交的内容上
v-cloak指令没有值 1本质是一个特殊属性Vue实例创建完毕并接管容器后会删掉v-cloak属性。 2使用css配合v-cloak可以解决网速慢时页面展示出{{xxx}}的问题先隐藏标签然后Vue渲染完了之后删除v-cloak那么就能显示渲染完之后的页面了。
/* 选中所有包含v-cloak属性的标签 */
[v-cloak]{display: none;}h2 v-cloak{{name}}/h2v-once指令 1v-once所在节点在初次动态渲染后就视为静态内容了也就是只读一次。 2以后数据的改变不会引起v-once所在结构的更新可以用于优化性能。 div idrootdiv{{name}}/div!-- 使用v-once --h2 v-once初识n值为{{n}}/h2h2当前n值为{{n}}/h2button clickn点我n1/button/divscriptnew Vue({el: #root,data: {n: 1,},});/scriptv-pre指令 1跳过其所在节点的编译过程。 2可利用它跳过没有使用指令语法、没有使用插值语法的节点会加快编译。 div idroot!-- 使用v-pre --h2 v-preVue其实很简单/h2h2当前n值为{{n}}/h2button clickn点我n1/button/divscriptnew Vue({el: #root,data: {n: 1,},});/script2、自定义指令
定义语法
①局部指令在实例里面写
new Vue({ new Vue({
directives:{指令名:配置对象} 或 directives{指令名:回调函数}
}) })②全局指令
Vue.directive(指令名,配置对象) 或 Vue.directive(指令名,回调函数)注意
指令定义时不加v-但使用时要加v-指令名如果是多个单词要用-分隔比如使用big-number命名方式不要用bigNumber命名directives配置对象中所有函数的this都指向window这个和其他的不同尤其注意
1函数式
函数中有两个参数第一个参数是指令所在的标签真实DOM第二个参数是一个存着指令值的对象通过对象名.value就能获取当前绑定的值。
何时调用 1、指令与元素成功绑定时(一上来没放入页面之前) 2、指令所在的模板被重新解析时
需求定义一个v-big指令和v-text功能类似但会把绑定的数值放大10倍。 div idrooth2当前的n值是:span v-textn{{n}}/span/h2h2放大的n值是:span v-bign{{n}}/span/h2button clickn点我n1/button/divscriptnew Vue({el: #root,data: {n: 1,},directives: {big(element, binding) {element.innerText binding.value * 10;},},});/script2对象式
配置对象中常用的3个回调 (1).bind指令与元素成功绑定时(一上来没放入页面之前) (2).inserted指令所在元素被插入页面时调用放入页面后 (3).update指令所在模板结构被重新解析时调用有任意data中的东西被改了。
需求2定义一个v-fbind指令和v-bind功能类似但可以让其所绑定的input元素默认获取焦点。 使用函数调用element.focus()不奏效因为big函数执行时页面上还没放入inputfocus必须在input插入页面后才能有效果。所以这里我们只能用对象式 div idrootinput typetext v-fbind:valuen //divscriptnew Vue({el: #root,data: {n: 1,},directives: {fbind: {bind(element, binding) {element.value binding.value;},inserted(element, binding) {element.focus();},update(element, binding) {element.value binding.value;},},},});/script本质上二者差不多你会发现函数式其实就是对象式中的bind和update的合并如果在某些时候要实现一些特殊的效果比如获取焦点、操作节点父元素等需要等元素插入页面后才能操作它的这些操作只能用对象式靠的就是inserted函数
Vue的生命周期
1、什么是生命周期
生命周期 又名生命周期回调函数、生命周期函数、生命周期钩子。 是什么Vue在关键时刻帮我们调用的一些特殊名称的函数。 生命周期函数的名字不可更改但函数的具体内容是程序员根据需求编写的。 生命周期函数中的this指向是vm 或 组件实例对象。
2、生命周期中的8个钩子
常用的生命周期钩子 mounted: 发送ajax请求、启动定时器、绑定自定义事件、订阅消息等【初始化操作】。 beforeDestroy: 清除定时器、解绑自定义事件、取消订阅消息等【收尾工作】。
关于销毁Vue实例: 销毁后借助Vue开发者工具看不到任何信息。 销毁后自定义事件会失效但原生DOM事件依然有效现在的版本好像也会失效。留个疑点啥是自定义事件啥是原生DOM事件答自定义事件就是定义在组件标签上的事件是组件通信的一种方式原生DOM事件就是类似onclick这种的。销毁后所有的监视也没了 一般不会在beforeDestroy操作数据因为即便操作数据也不会再触发更新流程了。 !-- 准备一个容器 --div idhelloh1当前n值为{{n}}/h1button clickadd点击n1/button/divscriptconst vm new Vue({el: #hello,data: {n: 1},methods: {add() {this.n;}},beforeCreate() {console.log(beforeCreate);console.log(this);// debugger;},created() {console.log(created);},beforeMount() {console.log(beforeMount);},mounted() {console.log(mounted);},beforeUpdate() {console.log(beforeUpdate);},updated() {console.log(updated);},beforeDestroy() {console.log(beforeDestroy);},destryed() {console.log(destryed);}})/script3、生命周期图解重要 4、生命周期案例
!-- 准备一个容器 --
div idhelloh1 :style{opacity: opacity}欢迎学习Vue/h1button clickstop点击停止闪烁/button
/divscriptconst vm new Vue({el: #hello,data: {opacity: 1},methods: {stop() {// clearInterval(this.timer); vm可以这么写类比自杀也可以写在beforeDestroy中类别他杀this.$destroy(); //vm自杀}},//挂载意思就是放在页面上//挂载函数,Vue完成模板的解析并把*初始的(只调用一次)*真实DOM放入页面后(完成挂载)调用mountedmounted() {this.timer setInterval(() {console.log(计时器调用);this.opacity - 0.01;if (this.opacity 0) this.opacity 1; }, 16)},beforeDestroy() {console.log(vm即将被销毁);// 为什么vm的后事需要写在这里是因为vm很有可能是被别人干掉的clearInterval(this.timer);},})//通过外部的定时器实现(不推荐)// setInterval(() {// vm.opacity - 0.01;// if (vm.opacity 0) vm.opacity 1; // }, 16);
/script
