杭州正晖建设工程有限公司网站佛山网站建设公司有哪

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

杭州正晖建设工程有限公司网站,佛山网站建设公司有哪,wordpress会员小图标,域名注册服务原则上实行什么文章目录Vue 核心#xff08;二#xff09;八、 绑定样式1、 class2、 style九、 条件渲染1、 渲染指令2、 使用示例十、 列表渲染1、 基本语法2、 key原理3、 列表过滤4、 列表排序5、 数组更新检测6、 大总结十一、 收集表单数据十二、 内置指令1、 v-text2、 v-html3、 v-… 文章目录Vue 核心二八、 绑定样式1、 class2、 style九、 条件渲染1、 渲染指令2、 使用示例十、 列表渲染1、 基本语法2、 key原理3、 列表过滤4、 列表排序5、 数组更新检测6、 大总结十一、 收集表单数据十二、 内置指令1、 v-text2、 v-html3、 v-cloak4、 v-once5、 v-pre6、 自定义指令6.1 示例6.2 总结十三、 生命周期1、 引出生命周期2、 分析生命周期3、 总结Vue 核心二 八、 绑定样式 1、 class !DOCTYPE html html langen headmeta charsetUTF-8title样式绑定/titlescript typetext/javascript src../js/vue.js/scriptstyle.basic {width: 400px;height: 400px;border: 1px solid indigo;}.custom_1 {background-color: cyan;}.custom_2 {background-color: green;}.custom_3 {background-color: red;}/style /head body div idroot!–绑定class样式–字符串写法适用于样式的类名不确定需要动态指定–div classbasic :classcustom clickchangeStyle你好/div!–绑定class样式–数组写法适用于要绑定的样式个数不确定、名字也不确定–div classbasic :classcustom_arr clickchangeStyle样式数组/div!–绑定class样式–对象写法适用于要绑定的样式个数确定、名字也确定但是需要动态决定是否使用–div classbasic :classcustom_obj clickchangeStyle绑定对象/div /div script typetext/javascriptVue.config.productionTip false;new Vue({el: #root,data() {return {custom: custom_1,custom_arr: [], // 样式数组可以动态的删除和添加样式增加动态性custom_obj: {custom_3: false,custom_2: true,},}},methods: {changeStyle() {// 需求点击事件设置随机样式const style (() {return [custom_1, custom_2, custom_3]})() // 将所有的样式存放在一个数组中let num Math.floor(Math.random() * 3)this.custom style[num]}}}) /script /body /html2、 style !DOCTYPE html html langen headmeta charsetUTF-8title样式绑定/titlescript typetext/javascript src../js/vue.js/script /head body div idrootdiv :stylestyleObjstyle内部样式/div /div script typetext/javascriptVue.config.productionTip false;new Vue({el: #root,data() {return {styleObj: {fontSize: 40px,color: red,backgroundColor: blue,},}},}) /script /body /html绑定样式 class 样式 写法:classxxxxxx 可以是字符串、对象、数组 字符串适用于类名不确定需要动态获取对象写法适用于要绑定多个样式个数不确定名字也不确定数组写法适用于要绑定多个样式个数确定名字也确定但不确定是否需要使用 style 样式 :style{}对象绑定方法:style[]数组绑定方法数组里面必须是存放样式的对象 九、 条件渲染 1、 渲染指令 v-if v-else v-show比较 if 与 show 如果需要频繁切换 v-show 较好当条件不成立时v-if的所有节点不会解析项目中使用 2、 使用示例 !DOCTYPE html html langen headmeta charsetUTF-8title样式绑定/titlescript typetext/javascript src../js/vue.js/script /head body div idroot !–使用 v-show 做条件渲染–div v-showisShow clicktoHidclick me to hid注意只是进行隐藏并没有完全删除/divdiv v-iffalse你好这个内容是被彻底删除的/divdiv stylebackground-color: greenh2当前值是{{num}}/h2butto clicknum点我/buttodiv v-shownum % 3 0Angular/divdiv v-shownum % 3 1React/divdiv v-shownum % 3 2Vue/div!–使用 v-if 做条件渲染–div v-ifnum % 3 0Angular/divdiv v-else-ifnum % 3 1React/divdiv v-elseVue/div!–条件模板的使用其不会影响HTML的结构同时其只可以同 v-if 使用–template v-ifnum 1h31/h3h31/h3h31/h3/template/div /div script typetext/javascriptVue.config.productionTip false;new Vue({el: #root,data() {return {isShow: true,num: 0,}},methods: {toHid() {this.isShow false},},}) /script /body /html十、 列表渲染 1、 基本语法 !DOCTYPE html html langen headmeta charsetUTF-8title基本列表/titlescript typetext/javascript src../js/vue.js/script /head body div idroot!–遍历列表–h1人员列表/h1ulli v-forperson in persons :keyperson.id!–li v-for(person, index) in persons :keyperson.id–!–遍历对象–ulli v-for(value, key) in person :keykeyp遍历对象{{value}} – {{key}}/p/li/ul/li/ul!–遍历字符串–h1字符串遍历/h1ulli v-for(char, index) of Hello World :keyindex!–注意of 和 in 是等价的–{{char}} – {{index}}/li/ul!–遍历指定次数–h1数字迭代/h1ulli v-for(value, index) of 5 :keyindex{{value}} – {{index}}/li/ul /div script typetext/javascriptVue.config.productionTip false;new Vue({el: #root,data() {return {persons: [{id: 001, name: Make, age: 17},{id: 002, name: Jack, age: 16},{id: 003, name: Neck, age: 19},]}},}) /script /body /htmlv-for可以遍历数组、对象、字符串以及指定次数 2、 key原理 使用 index 作为key时 !DOCTYPE html html langen headmeta charsetUTF-8title遍历列表中key的作用/titlescript typetext/javascript src../js/vue.js/script /head body div idrooth1人员列表/h1button click.onceaddPerson添加一个数据/buttonulli v-for(person, index) in persons :keyindex!– li v-for(person, index) in persons :keyperson.id 使用 id 作为 key–!–key的作用–p{{person.name}} {{person.age}} brinput typetext placeholder输入数据/p/li/ul/div script typetext/javascriptVue.config.productionTip false;new Vue({el: #root,data() {return {persons: [{id: 001, name: Make, age: 17},{id: 002, name: Jack, age: 16},{id: 003, name: Neck, age: 19},]}},methods: {addPerson() {const p {id: 004, name: Lisa, age: 17}this.persons.unshift(p)}},}) /script /body /html使用 id 这个唯一标识时 key 的内部原理 虚拟 DOM 中 key 的作用 key 是虚拟 DOM 对象的标识当数据发生改变时Vue 会根据新数据生成新的虚拟 DOM随后 Vue 进行 新虚拟 DOM 与旧虚拟 DOM 的差异比较
比较规则 虚拟 DOM 找到了与新虚拟 DOM 相同的 key 若虚拟 DOM 中内容没变直接使用之前的真实 DOM若虚拟 DOM 中内容变了则生成新的真实 DOM随后替换掉页面中之前的真实 DOM 就虚拟 DOM 中未找到与新虚拟 DOM 相同的 key创建新的真实 DOM随后渲染到页面中 如果使用 index 作为 key 可能会引发的问题 若对数据进行逆序添加逆序删除等破坏顺序操作会产生没有必要的真实 DOM 更新 》界面效果没有问题但效率低如果结构中还包含输入类的 DOM会产生错误的 DOM 更新 》 界面有问题 开发中如何选择 key 最好使用每条数据唯一标识作为 key比如 id、手机号、身份证号、学号等唯一标识如果不存在对数据的逆序添加、逆序删除等破坏顺序的操作仅用于渲染列表用于展示使用 index 作为 key 是没有问题的但是不推荐。 3、 列表过滤 !DOCTYPE html html langen headmeta charsetUTF-8title列表过滤/titlescript typetext/javascript src../js/vue.js/script /head body div idrooth1人员列表/h1input typetext placeholder请输入需要搜索的名字 v-modelkeywordulli v-forperson in filterPerson :keyperson.id!–key的作用–p{{person.name}} {{person.age}} br/p/li/ul/div script typetext/javascriptVue.config.productionTip false;new Vue({el: #root,data() {return {persons: [{id: 001, name: Make, age: 17},{id: 002, name: Jack, age: 16},{id: 003, name: Neck, age: 19},],keyword: ,}},computed: {filterPerson() {return this.persons.filter((person) {return (person.name.indexOf(this.keyword) ! -1)})}}}) /script /body /html这里使用的是 computed 来实现这个功能当然也可以使用 wacth 监视器来实现这个功能。 4、 列表排序 !DOCTYPE html html langen headmeta charsetUTF-8title列表过滤/titlescript typetext/javascript src../js/vue.js/script /head body div idrooth1人员列表/h1input typetext placeholder请输入需要搜索的名字 v-modelkeywordbutton clicksortType1升序/buttonbutton clicksortType-1降序/buttonbutton clicksortType0原顺序/buttonulli v-forperson in filterPerson :keyperson.id!–key的作用–p{{person.name}} {{person.age}} br/p/li/ul/div script typetext/javascriptVue.config.productionTip false;new Vue({el: #root,data() {return {persons: [{id: 001, name: Make, age: 17},{id: 002, name: Jack, age: 16},{id: 003, name: Neck, age: 19},],keyword: ,sortType: 0, // 1 升序, -1 降序}},computed: {filterPerson() {const arr this.persons.filter((person) {return (person.name.indexOf(this.keyword) ! -1)})// 判断这些数据是否需要排序if (this.sortType) {arr.sort((a, b) {return this.sortType 1 ? a.age - b.age : b.age - a.age})}return arr}}}) /script /body /html5、 数组更新检测 Vue 将被侦听的数组的变更方法进行了包裹所以它们也将会触发视图更新。这些被包裹过的方法包括 push()pop()shift()unshift()splice()sort()reverse() 替换数组 变更方法顾名思义会变更调用了这些方法的原始数组。相比之下也有非变更方法例如 filter()、concat() 和 slice()。它们不会变更原始数组而总是返回一个新数组。当使用非变更方法时可以用新数组替换旧数组 example1.items example1.items.filter(function (item) {return item.message.match(/Foo/) })注意由于 JavaScript 的限制Vue 不能检测数组和对象的变化。深入响应式原理中有相关的讨论。 同时也可以使用 Vue.set(target, key, value)来替换数组里面的值 const vm new Vue(data() {return {arr: [a, b, c],}}, ) // 使用包裹方法修改数组的第一个元素vm.arr.splice(0, 1, d)// 使用 Vue.set 来修改数组的第一个元素 Vue.set(vm.arr, 0, d) vm.\(set(vm.arr, 0, d)6、 大总结 !DOCTYPE html html langen headmeta charsetUTF-8title大总结/titlescript typetext/javascript src../js/vue.js/script /head body div idrooth1学生信息/h1button clickstudent.age年龄1岁/buttonbutton clickaddSex添加性别属性默认值男/buttonbutton clickstudent.sex 未知修改性别/buttonbutton clickaddFriend在列表首位添加一个朋友/buttonbutton clickchangeFriend修改第一个朋友的名字为张三/buttonbutton clickaddHobby添加一个爱好/buttonbutton clickchangeHobby修改第二个爱好为C/buttonh3姓名{{student.name}}/h3h3年龄{{student.age}}/h3h3 v-ifstudent.sex{{student.sex}}/h3h3爱好/h3ulli v-for(hobby, index) in student.hobbies :keyindex{{hobby}}/li/ulh3朋友们/h3ulli v-for(friend, index) of student.friends :keyindex{{friend.name}} -- {{friend.age}}/li/ul /div script typetext/javascriptVue.config.productionTip false;new Vue({el: #root,data() {return {student: {name: Lisa,age: 17,friends: [{name: Jerry, age: 37},{name: Tony, age: 38}],hobbies: [C, Python, C#]}}},methods: {addSex() {Vue.set(this.student, sex, 男)// this.\)set(this.student, sex, 男)},addFriend() {this.student.friends.unshift({name: Make,age: 19,})},changeFriend() {this.student.friends[0].name 张三 // 修改数组里面的对象可以被 Vue 监视到},addHobby() {this.student.hobbies.push(Java)},changeHobby() {this.student.hobbies.splice(1, 1, C) // 使用重写后的方法修改数组后可以被检测到},}}) /script /body /htmlVue 监视数据的原理 Vue 会监视 data 中所有层次的数据 如何监测对象中的数据 通过 setter 来实现且要在 new Vue时就传入要监测的数据 对象中后追加的属性Vue 默认不做响应式处理如需给后添加的属性做响应式请使用 Vue 提供的 set(target, key, value) 方法 如何监视数组中的数据 通过包裹数组更新元素的方法实现本质就是做了两件事 调用原生对应的方法对数组进行更新重新解析模板进而更新页面 在 Vue 修改数组中的某个元素一定要使用如下方法 使用被包裹的 API使用 set()方法 注意Vue.set() 和vm.\(set()不能给 vm 或 vm 的根数据对象添加属性 十一、 收集表单数据 !DOCTYPE html html langen headmeta charsetUTF-8title收集表单/titlescript typetext/javascript src../js/vue.js/script /head body div idrootform submit.preventsubmitDatalabel foraccount账号/labelinput typetext idaccount v-model.trimuerInfo.account placeholder请输入您的账号 br!--.trim 去除输入框里面的空格--label forpassword密码/labelinput typepassword idpassword v-modeluerInfo.password placeholder请输入您的密码 brlabel forage年龄/labelinput typenumber idage v-model.numberuerInfo.age placeholder请输入您的年龄 br!--使用指令修饰符来指定输入的内容为数字类型--性别男input typeradio namesex valuemale v-modeluerInfo.sex 女 input typeradio namesex valuefemale v-modeluerInfo.sex br爱好Java input typecheckbox v-modeluerInfo.hobbies valueJavaPython input typecheckbox v-modeluerInfo.hobbies valuePythonC input typecheckbox v-modeluerInfo.hobbies valueC br所属校区select v-modeluerInfo.cityoption value请选择校区/optionoption valuenc南昌/optionoption valuegz赣州/option/select br其他信息textarea cols30 rows10 v-model.lazyuerInfo.others/textarea br!--.lazy 缓慢收集失去焦点的一瞬间进行数据的收集--input typecheckbox v-modeluerInfo.agree 阅读并接受 a hrefjavascript:;《用户使用协议》/a brbutton提交/button/form /div script typetext/javascriptVue.config.productionTip false;new Vue({el: #root,data() {return {uerInfo: {account: ,password: ,age: ,sex: male, // 默认为男hobbies: [Java], // 默认勾选 Javacity: ,others: ,agree: false,}}},methods: {submitData() {console.log(JSON.stringify(this.uerInfo)) // 将对象装换为 JSON 格式},},}) /script /body /html收集表单数据总结 十二、 内置指令 我们学过的指令 指令描述v-bind单向绑定解析表达式可简写为 :xxxv-model双向数据绑定v-for遍历数组 / 对象 / 字符串v-on绑定事件监听可简写为 v-if / v-else-if / v-else条件渲染动态控制节点是否存在v-show条件渲染动态控制节点是否展示 1、 v-text 功能向其所在的节点渲染文本内容 !DOCTYPE html html langen headmeta charsetUTF-8titlev-text/titlescript typetext/javascript src../js/vue.js/script /head body div idrootdiv v-textname/div !--更多的时候使用插值语法-- /div script typetext/javascriptVue.config.productionTip false;new Vue({el: #root,data() {return {name: Lisa}},}) /script/body /htmlv-text 其会替换掉标签里面的所有内容同时其不会解析标签 2、 v-html !DOCTYPE html html langen headmeta charsetUTF-8titlev-html/titlescript typetext/javascript src../js/vue.js/script /head body div idrootdiv v-htmlname/div !--支持结构的解析--div v-textname/div /div script typetext/javascriptVue.config.productionTip false;new Vue({el: #root,data() {return {name: h3你好/h3}},}) /script/body /html但是这个使用会比较危险可能会受到 xss 攻击一定要在可信的内容上使用 v-html永远不要用在用户提交的内容上 3、 v-cloak !DOCTYPE html html langen headmeta charsetUTF-8titlev-cloak/titlescript typetext/javascript src../js/vue.js/scriptstyle[v-cloak] { /*选择所有含有v-cloak的标签*/display: none; }/style /head body div idroot h2 v-cloak{{name}}/h2 !--当 Vue 被加载出来时v-cloak 会被删除--/div script typetext/javascriptVue.config.productionTip false;new Vue({el: #root,data() {return {name: Lisa}},}) /script/body /htmlv-cloak 指令没有值 本质是一个特殊属性Vue 实例创建完毕并接管容器后会删掉 v-cloak 属性使用 css 配合 v-cloak 可以解决网速慢时页面展示出 {{xx}} 的问题 4、 v-once !DOCTYPE html html langen headmeta charsetUTF-8titlev-once/titlescript typetext/javascript src../js/vue.js/script /head body div idrooth2 v-once初始化的n值是{{n}}/h2!--v-once 指令的作用是插值语法只能执行一次不会执行第二次--h2当前的 n 值是/h2pn {{n}}/pbutton clickn n1/button /div script typetext/javascriptVue.config.productionTip false;new Vue({el: #root,data() {return {n: 1}},}) /script/body /htmlv-once 指令 v-once 所在节点在初次动态渲染后就视为静态内容了以后数据的改变不会引起 v-once 所在结构的更新可以用于优化性能 5、 v-pre !DOCTYPE html html langen headmeta charsetUTF-8titlev-pre/titlescript typetext/javascript src../js/vue.js/script /head body div idrooth2 v-preVue 很简单/h2!--使得其所在节点跳过编译过程--h2当前的 n 值是/h2pn {{n}}/pbutton clickn n1/button /div script typetext/javascriptVue.config.productionTip false;new Vue({el: #root,data() {return {n: 1}},}) /script/body /htmlv-pre 指令 跳过其所在节点的编译过程可利用它跳过没有使用指令语法、没有使用插值语法会加快编译速度 6、 自定义指令 6.1 示例 实例1定义一个 v-big 指令和 v-text 类似但会把绑定的数值放大 10 倍 !DOCTYPE html html langen headmeta charsetUTF-8titlev-big/titlescript typetext/javascript src../js/vue.js/script /headbody div idrooth3当前的n值是span v-textn/span/h3h3放大十倍的n值是span v-bign/span/h3button clicknN1/button /div/body script typetext/javascriptVue.config.productionTip false;// 全局指令// Vue.directive(big, (element, binding) {// // big 函数何时调用// // 1. 指令与元素成功绑定时会调用初始化// // 2. 指令所在的模板被重新解析时调用// console.log(big, this) // 注意此处的 this 是 Window// console.log(element, binding.value)// element.innerText binding.value * 10// })new Vue({el: #root,data() {return {n: 0,}},directives: {big-number() {}, // 当指令为 v-big-number 时的写法big(element, binding) {// big 函数何时调用// 1. 指令与元素成功绑定时会调用初始化// 2. 指令所在的模板被重新解析时调用console.log(big, this) // 注意此处的 this 是 Windowconsole.log(element, binding.value)element.innerText binding.value * 10},}}) /script/html实例2定义一个 v-fbind 指令和 v-bind 功能类似但可以让其所绑定的 input 元素默认获取焦点 !DOCTYPE html html langen headmeta charsetUTF-8titlev-fbind/titlescript typetext/javascript src../js/vue.js/script /headbody div idrootinput typetext v-fbind:valuenhrbutton clicknN1/button /div script typetext/javascriptVue.config.productionTip false;new Vue({el: #root,data() {return {n: 0,}},directives: {fbind: {// 如果只写成函数形式的话其只有 bind 和 update 功能bind(element, binding) {console.log(指令与元素成功绑定时调用)element.value binding.value // 把数据插入文本框内},inserted(element, binding) {console.log(指令所在元素被插入页面时调用)element.focus() // 获取焦点},update(element, binding) {console.log(指令所在的模板被重新解析时调用)element.value binding.value},}},}) /script/body/html全局指令Vue.directive() 6.2 总结 一、 定义语法 局部指令 new Vue({directives: {指令名: 配置对象 / 回调函数}, })全局指令 Vue.drective(指令名, 配置对象 / 回调函数)二、 配置对象中常用的三个回调 bind指令与元素成功绑定时调用inserted指令所在元素被插入页面时使用update指令所在模板结构被重新解析时调用 三、 备注 指令定义时不需要加 v- 但是使用时需要加 v-指令名如果是多个单词需要使用 kabab-case命名方式不要用cameCase命名 十三、 生命周期 1、 引出生命周期 生命周期 又名生命周期函数、生命周期函数、生命周期钩子是什么Vue 在关键时刻帮助我们调用的一些特殊名称的函数生命周期函数的名字不可更改但函数的具体内容是程序员根据需求编写的生命周期函数中的 this 指向是 vm 或 组件实例对象 !DOCTYPE html html langen headmeta charsetUTF-8title生命周期/titlescript typetext/javascript src../js/vue.js/script /head body div idrooth2 :style{opacity}SteveAnthony/h2 /div script typetext/javascriptVue.config.productionTip falsenew Vue({el: #root,data() {return {opacity: 1,}},mounted() {console.log(Vue 将生成的 HTML 挂载到页面中)setInterval(() {this.opacity - 0.01if (this.opacity 0) {this.opacity 1}}, 16)},}) /script/body /html2、 分析生命周期 这是实例的生命周期。 解释图 !DOCTYPE html html langen headmeta charsetUTF-8title生命周期/titlescript typetext/javascript src../js/vue.js/script /head body div idrooth2当前的 n 值是{{num}}/h2button clickaddN1/button /div script typetext/javascriptVue.config.productionTip falsenew Vue({el: #root,data() {return {num: 1,}},methods: {add() {this.num 1},},beforeCreate() {console.log(Vue 实例创建但没有初始化数据监测和数据代理)debugger;},created() {console.log(Vue 初始化数据监测、数据代理)debugger;},beforeMount() {console.log(完成模板编译但是还没有进行页面的挂载)debugger;},mounted() {console.log(Vue 将生成的 HTML 挂载到页面中)debugger;},beforeUpdate() {console.log(状态更新之前执行函数此时 data 中的状态值是最新的但是页面上显示的数据还是旧的)debugger;},updated() {console.log(利用刚重新渲染的内容替换之前的内容)debugger;},beforeDestroy() {console.log(实例准备销毁但是还没有销毁)debugger;},destroy() {console.log(实例已经销毁实例所有内容均不可使用)debugger;}}) /script/body /html使用vm.\)destory()完全想销毁一个实例清理它与其他实例的连接解绑它的全部指令以及事件监听器 3、 总结 常用的生命周期钩子 mounted发送 Ajax 请求、启动定时器、绑定自定义事件、订阅消息等【初始化操作】beforeDestroy清除定时器、解绑自定义事件、取消订阅消息等 关于销毁 Vue 实例 销毁后借助 Vue 开发者工具看不到任何信息销毁后自定义事件会失效当原生 DOM 事件依然有效一般不会在 beforeDestroy 操作数据因为即便操作数据也不会再触发更新流程了