建立网站有什么好处,中国国防新闻,网站开发需要申请专利吗,wordpress3.5.1漏洞一、回顾 总结Vue监视数据 1.Vue监视数据的原理#xff1a;
1.vue会监视data中所有层次的数据。
2.如何监测对象中的数据?通过setter实现监视#xff0c;且要在new Vue时就传入要监测的数据。(1#xff09;.对象中后追加的属性#xff0c;Vue默认不做响应式处理(2#…一、回顾 总结Vue监视数据 1.Vue监视数据的原理
1.vue会监视data中所有层次的数据。
2.如何监测对象中的数据?通过setter实现监视且要在new Vue时就传入要监测的数据。(1.对象中后追加的属性Vue默认不做响应式处理(2.如需给后添加的属性做响应式请使用如下APIVue.set(target,propertyName/index,value)或vm.$set(target, propertyName/index, value)
3.如何监测数组中的数据?通过包裹数组更新元素的方法实现本质就是做了两件事(1.调用原生对应的方法对数组进行更新。2.重新解析模板进而更新页面。4.在Vue修改数组中的某个元素一定要用如下方法1.使用这些API:push()、pop()、shift()、unshift()、splice()、sort()、reverse()2.Vue.set或 vm.$set特别注意Vue.set和vm.$set不能给vm或vm的根数据对象添加属性
2.一个练习 div idrooth1学生信息/h1button clickstudent.age年龄1岁/buttonbr /button clickaddSex添加性别属性默认值男/buttonbr /button clickstudent.sex 未知 修改性别/buttonbr /button clickaddFriends在朋友列表首位添加一个朋友/buttonbr /button clickupdateFirstFriendsName修改第一个朋友的名字年龄为张三 17/buttonbr /button clickaddHobby添加一个爱好/buttonbr /button clickupdateHobby修改第一个爱好为开车/buttonbr /h3姓名{{student.name}}/h3h3年龄{{student.age}}/h3h3 v-ifstudent.sex性别{{student.sex}}/h3h3爱好/h3ulli v-for(h,index) in student.hobby :keyindex{{h}}/li/ulh3朋友们: /h3ulli v-for(f,index) in student.friends :keyindex{{f.name}}--{{f.age}}/li/ul/divscriptconst vm new Vue({ el: #root, data: { student: { name: tom, age: 18, hobby:[抽烟,喝酒,烫头],friends:[{name:jerry,age:35},{name:tony,age:36}]}},methods:{addSex(){// 两种写法// Vue.set(this.student,sex,男)this.$set(this.student,sex,男)},addFriends(){this.student.friends.unshift({name:jack,age:20})//有效写法},updateFirstFriendsName(){this.student.friends[0].name 张三this.student.friends[0].age 17},addHobby(){this.student.hobby.push(学习)},updateHobby(){//三种写法// this.student.hobby.splice(0,1,开车)//意思是从第一个开始删掉一个改成‘开车’// Vue.set(this.student.hobby,0,开车)this.$set(this.student.hobby, 0, 开车)}}})/script 二、收集表单数据
1、不同的value属性
若input typetext/,则v-model收集的是value值用户输入的就是value值。
若input typeradio/,则v-model收集的是value值且要给标签配置value值。
若input typecheckbox/
1.没有配置input的value属性那么收集的就是checked勾选or未勾选是布尔值
2.配置input的value属性1v-model的初始值是非数组那么收集的就是checked勾选 or未勾选是布尔值(2)v-model的初始值是数组那么收集的的就是value组成的数组
2、v-model的三个修饰符
备注v-model的三个修饰符lazy失去焦点再收集数据number输入字符串转为有效的数字trim输入首尾空格过滤 3、案例 div idroot!-- 快捷写法#root回车 --!-- radio 单选框 checkbox复选框 label用法点击请输入文字时也能把光标定在输入框内 --form submit.preventdemo!-- 阻止默认行为发生 阻止点击提交按钮之后会自动刷新 --!-- label fordemo账号/labelinput typetext iddemobrlabel fordemo1密码/labelinput typepassword iddemo1br --账号input typetext v-model.trimuserInfo.accountbr密码input typepassword v-modeluserInfo.passwordbr密码input typepassword v-modeluserInfo.passwordbr年龄input typenumber v-model.numberuserInfo.agebr性别男input typeradio namesex v-modeluserInfo.sex valuemale女input typeradio namesex v-modeluserInfo.sex valuefemalebr /br /爱好学习input typecheckbox v-modeluserInfo.hobby valuestudy打游戏input typecheckbox v-modeluserInfo.hobby valuegame吃饭input typecheckbox v-modeluserInfo.hobby valueeatbr /br /所属校区select v-modeluserInfo.cityoption value请选择校区/optionoption valuebeijing北京/optionoption valueshanghai上海/optionoption valueshenzhen深圳/optionoption valuewuhan武汉/option/selectbr /br /其他信息textarea v-model.lazyuserInfo.other/textarea br /br /input typecheckbox v-modeluserInfo.agree阅读并接受a hrefhttp://www.atguigu.com《用户协议》/abutton提交/button/form/divscriptconst vm new Vue({el:#root,data:{userInfo:{account: ,password: ,age:,sex: ,hobby: [],//爱好要用数组才能获取到否则只能获取true falsecity: Beijing,//默认选北京other: ,agree: }},methods:{demo(){console.log(JSON.stringify(this.userInfo));}}})/script 三、 过滤器
1、bootcdn和dayjs
BootCDN - Bootstrap 中文网开源项目免费 CDN 加速服务
先来bootcdn中下载一个dayjs保存在vue中然后在开头引入 script src../js/dayjs.min.js/script
2.什么是过滤器 定义对要显示的数据进行特定格式化后再显示适用于一些简单逻辑的处理比如价格1999改成1,999等需求复杂的用计算属性或方法。 语法 1、注册过滤器Vue.filter(name,callback) 或 new Vue{filters:{}} 2、使用过滤器{{ xxx | 过滤器名}} 或 v-bind:属性 xxx | 过滤器名第二种几乎不用 备注 1、过滤器也可以接收额外参数、多个过滤器也可以串联 2、并没有改变原本的数据, 是产生新的对应的数据 3、局部过滤器全局过滤器 div idrooth2显示格式化后的时间/h2!-- 计算属性 --h2现在时间{{fmtTime}}/h2!-- methods获取 --h2现在时间{{getfmtTime()}}/h2!-- 过滤器 --h2现在时间{{time | timeFormater}}/h2!-- 过滤器传参 --h2现在时间{{time | timeFormater(YYYY-MM-DD) | mySlice}}/h2!-- 只能用于插值语法和v-bind: --h2 :xmsg | mySlice方便面/h2/divdiv idroot2h2{{msg | mySlice}}/h2/divscript// 全局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,strYYYY-MM-DD HH:mm:ss){return dayjs(value).format(str)}}})new Vue({el:#root2,data:{msg:hello,}})/script
四、自定义指令
1、内置指令
v-bind : 单向绑定解析表达式, 可简写为 :xxx v-model : 双向数据绑定 v-for : 遍历数组/对象/字符串 v-on : 绑定事件监听, 可简写为 v-if : 条件渲染动态控制节点是否存存在 v-else : 条件渲染动态控制节点是否存存在 v-show : 条件渲染 (动态控制节点是否展示)
v-text指令 作用向其所在的节点中渲染文本内容。 与插值语法的区别v-text会替换掉节点中的所有内容{{xx}}则不会。 比如下面str的内容会替代掉方便面 div idrooth2{{name}}/h2h2 v-textstr方便面/h2/divscriptnew Vue({el:#root,data:{name:方便面,str:你好方便面}})/script v-html指令 作用向指定节点中渲染包含html结构的内容。 与插值语法的区别 1v-html会替换掉节点中所有的内容{{xx}}则不会,这点和v-text一样。 2v-html可以识别html结构这点和v-text区别v-text不能渲染标签。 div idrooth2{{name}}/h2h2 v-textstr方便面/h2h2 v-htmlstr方便面/h2/divscriptnew Vue({el:#root,data:{name:方便面,str:h1你好方便面h1/}})/script 严重注意v-html有安全性问题 1在网站上动态渲染任意HTML是非常危险的容易导致XSS攻击。 2一定要在可信的内容上使用v-html永不要用在用户提交的内容上 v-cloak指令没有值
1本质是一个特殊属性Vue实例创建完毕并接管容器后会删掉v-cloak属性。 2使用css配合v-cloak可以解决网速慢时页面展示出{{xxx}}的问题先隐藏标签然后Vue渲染完了之后删除v-cloak那么就能显示渲染完之后的页面了。 v-once指令没有值
1v-once所在节点在初次动态渲染后就视为静态内容了也就是只读一次。 2以后数据的改变不会引起v-once所在结构的更新可以用于优化性能。
v-pre指令
1跳过其所在节点的编译过程。 2可利用它跳过没有使用指令语法、没有使用插值语法的节点会加快编译。
2、自定义指令
1、定义语法
(1).局部指令
new Vue({ new Vue({
directives:{指令名:配置对象} 或 directives{指令名:回调函数}
})
(2).全局指令
Vue.directive(指令名,配置对象) 或 Vue.directive(指令名,回调函数)
备注 1.指令定义时不加v-但使用时要加v- 2.指令名如果是多个单词要使用big-number命名方式不要用bigNumber命名。
big-number(){console.log()}
3.directives配置对象中所有函数的this都指向window这个和其他的不同尤其注意 2、函数式
函数中有两个参数第一个参数是指令所在的标签第二个参数是一个存着指令值的对象通过对象名.value就能获取当前绑定的值
big函数何时调用 1、指令与元素成功绑定时(一上来没放入页面之前) 2、指令所在的模板被重新解析时 需求定义一个v-big指令和v-text功能类似但会把绑定的数值放大10倍 div idrooth2当前的n值是:span v-textn/span/h2h2放大10倍后的n值是:span v-bign/span/h2button clickn点我n1/button/divscriptnew Vue({el:#root,data:{n:1},directives:{big(element,binding){// big函数何时会被调用1.指令与元素成功绑定时一上来2.指令所在的模板重新解析时console.log(big);element.innerText binding.value*10}}})/script3、对象式
配置对象中常用的3个回调 (1).bind指令与元素成功绑定时(一上来没放入页面之前) (2).inserted指令所在元素被插入页面时调用放入页面后 (3).update指令所在模板结构被重新解析时调用有任意data中的东西被改了。
需求2定义一个v-fbind指令和v-bind功能类似但可以让其所绑定的input元素默认获取焦点。 使用函数调用element.focus()不奏效因为big函数执行时页面上还没放入inputfocus必须在input插入页面后才能有效果。所以这里我们只能用对象式 !-- 准备一个容器 --div idhelloh1当前n值是span v-textn/span/h1button clickn点我n1/button!-- 在输入框中显示n的值动态变化 --input v-fbind:valuen/divscriptconst vm new Vue({el: #hello,data: {n: 1},directives: {// 需求2定义一个v-fbind指令和v-bind功能类似但可以让其所绑定的input元素默认获取焦点。//函数无法实现该需求// fbind(element, binding) {// element.innerText binding.value * 10;// //下面这个focus必须在放到页面之后才调用// element.focus(); //不奏效因为big函数调用时还没放入页面// }//二、对象式fbind: {// 指令与元素成功绑定时(一上来没放入页面之前)bind(element, binding) {element.value binding.value;},// 指令所在元素被插入页面时inserted(element, binding) {element.focus();},// 指令所在的模板被重新解析时update(element, binding) {element.value binding.value;}}}})/script本质上二者差不多你会发现函数式其实就是对象式中的bind和update的合并如果在某些时候要实现一些特殊的效果比如获取焦点、操作节点父元素等需要等元素插入页面后才能操作它的这些操作只能用对象式靠的就是inserted函数
