网站建设设置背景图片在建工程项目一览表

当前位置： 首页 > news >正文

网站建设设置背景图片,在建工程项目一览表,商丘做网站用什么程序好,上海网站推广找哪家文章目录1. 监测数据原理1.1 通过问题引出1.2 开始1.3 Vue.set() 方法1.4 vue 监视 数组1.5 小练习2. 收集表数据3. 过滤器4. 内置指令4.1 v-text4.2 v-html4.3 v-cloak4.4 v-once4.5 v-pre1. 监测数据原理 1.1 通过问题引出 1.2 开始 要想解决上面的这个问题 #xff0c;需要… 文章目录1. 监测数据原理1.1 通过问题引出1.2 开始1.3 Vue.set() 方法1.4 vue 监视 数组1.5 小练习2. 收集表数据3. 过滤器4. 内置指令4.1 v-text4.2 v-html4.3 v-cloak4.4 v-once4.5 v-pre1. 监测数据原理 1.1 通过问题引出 1.2 开始 要想解决上面的这个问题 需要知道 Vue 是如何监测数组里元素的改变 , 但是 为了 更好的理解 这里先来说说 vue 是如何监测 对象里数据改变的 。 回顾 数据代理 Vue (3) 之前说过 数据代理 是让 vm._data data , 其实 这是第二步 第一步是 对 data 进行加工 , vue 监视原理 简单来说 监视数据的原理就是 靠 set 当我们修改 data中 的属性 是 (比如 上面的 name address) vue 就会重新解析模板
生成新的 虚拟 DOM 然后 新旧 虚拟 DOM 对比 更新 页面 . 知道了 set 下面 就来看看 set 这个 API 1.3 Vue.set() 方法 图二 上面是在控制台上写 ,下面写一个按钮 点击 添加 学校年龄 图三 set 的局限性 1.4 vue 监视 数组 vue 文档 : 列表渲染 — Vue.js (vuejs.org) 图二 可以看到想要 vue 监视到数组的变化 需要通过 上面列举的方法 其实 还可以通过 之前说过的 set 来改 . 同理 \(set 一样 这里不展示了 . 1.5 小练习 将之前说过的 API 使用以下 : !DOCTYPE html html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlescript src../../js/vue.js/script/headbodydiv idrootbutton clickstudent.age年龄1岁/buttonbr /br /button clickaddSex()添加性别属性, 默认值: 男/buttonbr /br /button clickremoveSex()隐藏 性别/buttonbutton clickupdateSex()修改性别/buttonbr /br /button clickaddFriend()在列表首页添加一名朋友/buttonbr /br /button clickupdateFirstFriendName修改第一个朋友的名字为: 鲲鹏/buttonbr /br /button clickaddHobby添加一个爱好/buttonbr /br /button clickupdateHobby修改第一个爱好为: 打羽毛球/buttonh3姓名: {{student.name}}/h3h3年龄: {{student.age}}/h3h3 v-ifstudent.sex性别: {{student.sex}}/h3h2爱好: /h2ulli v-for(h,index) in student.hobby :keyindex{{h}}/li/ulh2朋友: /h2ulli v-for(f,index) in student.friends :keyindex{{f.name}}-{{f.age}}/li/ul/divscript// let flag false;let vm new Vue({el: #root,data: {student: {name: 张三,age: 18,// 爱好hobby: [// 数组 抽烟,喝酒,烫头,],flag: false,friends: [{name: 张三, age: 35},{name: 李四, age: 60}]},},methods: {addSex() {// this.\)set(this.student,sex,男)Vue.set(this.student, sex, 男)this.flag true},updateSex() {if (this.flag) {if (this.student.sex 男) {this.student.sex 女} else {this.student.sex 男}}},removeSex() {if (this.student.sex) {this.flag falsethis.student.sex null}},addFriend() {this.student.friends.unshift({ name: 坤哥, age: 80 })},updateFirstFriendName() {this.student.friends[0].name 鲲鹏},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 /body/html总结 :   Vue 监视数据的原理 : vue 会监视 data 中所有 层次的数据 .   如何监测对象中的数据 ? a.通过 setter 实现监视 且要在 new Vue 时就传入要监测的数据 (data 中 写的) 对象中后追加的属性 Vue 默认不做响应式处理如需要给后添加的属性做响应式 请使用 这如下 APIVue.set(target,propertyName/index,value) 或 vm.\)set(target,propertyName/index,value)   如何监测数组中的数据 a. 通过包裹数组更新元素的方式实现 本质就是做了两件事 : 通过调用原生对应的方法对数组进行更新.重新解析模板进而更新页面   在Vue 修改数组中的某个元素一定要用如下方法 : a. 使用 这些 API push() , pop() , shift() , unshift(), splice() , sort() reverse() , b. Vue.set() 或 vm.\(set() 特别注意 Vue.set() 和 vm.\)set() 不能给 vm 或 vm 的根数据对象 (data) 添加属性 最后 说以下 数据劫持 : 2. 收集表数据 要求 实现 图二 图三 图四 图五 补充 附上代码
!DOCTYPE html html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title收集表达/titlescript src../../js/vue.js/script /headbodydiv idrootform submit.preventdemo!– form 表单提交数据 –label fordemo 账号 :/labelinput typetext iddemo v-model.trimaccountbr /br /label fordemo2 密码 :/labelinput typetext iddemo2 v-modelpasswordbr /br /label fordemo3年龄 : /labelinput typenumber iddemo3 v-model.numberagebr /br /男 input typeradio namesex v-modelsex valuemale女 input typeradio namesex v-modelsex valuefemalebr /br /爱好 :学习 input typecheckbox v-modelhobby valuestudy打游戏input typecheckbox v-modelhobby valuegame吃饭input typecheckbox v-modelhobby valueeat br /br /select v-modelcityoption value请选择小区/optionoption valuebeijing北京/optionoption valueshanghai上海/optionoption valueshenzhen深圳/optionoption valuewuhan武汉/option/selectbr /br /其他信息 :textarea v-model.lazyother/textareabr / br /input typecheckbox v-modelagree阅读并接收a href#《用户协议》/abutton提交/button/form/div /bodyscriptlet vm new Vue({el: #root,data: {account: ,password: ,sex: female,hobby: [],city: beijing,other: ,agree: ,age: ,},methods: {demo() {console.log(JSON.stringify(this._data))}}}) /script/html总结
收集表单数据 : 若 input typetext / 则 v-model 收集的是 value 值 用户输入的就是 value值 . 若 input typeradio / , 则 v-model 收集的就是 value 值 且要给标签配置 value 值 若 input typecheckbox / a. 没有 配置 inpput 的value 属性 那么收集的就是 checked (勾选 or 未勾选 是布尔值) b. 配置 inputd value 属性 : v-model 的初始值是非数组那么收集的就是 checked (勾选 or 未 勾选 是布尔值)v-model 的初始值 是 数组那么收集的就是 value 组成的数组 备注 v-model的三个修饰符 a. lazy 失去焦点再收集数据 b. number : 数组字符串转为有效的数字 c. trim : 输入首位空格过滤 3. 过滤器 注意 过滤器 并不是必要的 而是 vue 提供 一个新的 数据处理的方式 不想用 正常使用 计算属性 methods也能完成. 下面这里通过第三方库来操作我们的时间 BootCDN - Bootstrap 中文网开源项目免费 CDN 加速服务 下面先通过计算属性 来完成 要求 : 计算属性实现 : methods 实现 过滤器实现 上面写的过滤器 都是 局部的过滤器 只能 由 创建 过滤的 vue 实例使用 , 如果在出现一个vue 实例 就无法 使用了 . 下面来学习 创建全局的过滤器 : 总结
过滤器
定义 对要显示的数据进行特定格式化再显示(适用一些简单逻辑的处理) . 语法
注册过滤器 : Vue.filter(name,callback) 或 new Vue {filters:{}}使用过滤器 {{ xxx | 过滤器名}} 或 v-bind : 属性 “xxx | 过滤器名” 备注
过滤器也可接收额外参数 多个过滤器 也可以串联并没有改变原本的庶几乎是产生新的对应的数据 4. 内置指令 之前学过 v-on , v-bind , v-if , v-for 这里 就来 学习一下 vue 提供的其他 指令 . 回顾一下之前学过的 4.1 v-text 从 v-text 名字 就可以知道 这个指令是 将一个文本渲染到页面上 下面演示一下下 图二 4.2 v-html v-html 向指定节点中渲染 含 html 结构的内容 . 4.3 v-cloak 4.4 v-once 4.5 v-pre