个人网站注册步骤图解,建设通查项目经理,开发者模式关掉好还是开着好,专业积分商城网站建设目录
第一课#xff1a;Vue方法、计算机属性及侦听器
一、数组变化侦测
方法1#xff1a;变更方法
方法2#xff1a;替换一个数组 例子#xff1a;小Demo:合并两个数组
二、计算属性
1.基础#xff08;不推荐#xff09;
2.使用计算属性来完成案例
3.使用函数的方…目录
第一课Vue方法、计算机属性及侦听器
一、数组变化侦测
方法1变更方法
方法2替换一个数组 例子小Demo:合并两个数组
二、计算属性
1.基础不推荐
2.使用计算属性来完成案例
3.使用函数的方式去完成
计算机属性缓存 vs 方法
三、侦听器
例子
第二课Vue的表单绑定
1. 基本的表单绑定
文本输入框绑定
2. 处理复选框和单选框
单选框绑定 复选框绑定 3. 处理下拉框 4. 处理文本区域 5. 动态表单和验证
6.总结
第三课v-model修饰符 第一课Vue方法、计算机属性及侦听器
一、数组变化侦测
假设我们写了一个数组现在想让该数组中新增一条数据,那么如何去实现呢
给出例子如下 templateh3数组变化侦听/h3button clickaddListHandler添加数据/buttonulli v-for(item,index) of names :keyindex{{ item }}/li/ul
/template
scriptexport default{data(){return{names:[张三,李四,王五]}},methods:{addListHandler(){}}}
/script 现在要求在上述的数组中再添加一条如何操作呢
方法1变更方法
Vue能够侦听响应式数组的变更方法并在它们被调用时触发相关的更新。变更方法顾名思义就是会对调用它们的原数组进行变更。这些变更方法包括 push() pop() shift() unshift() splice( sort() reverse() 那么此时点击按钮就会更新 方法2替换一个数组
变更方法顾名思义就是会对调用它们的原数组进行变更。相对地也有一些不可变(immutable)方法例如fiter()concat()和slice()这些都不会更改原数组而总是返回一个新数组。当遇到的是非变更方法时我们需要将旧的数组替换为新的。
这样写的话不会引起ui的自动更新但是当我们输出程序的时候发现数组已经合并了一个新元素 那如果我想让UI发生变化呢--无非就是重新赋值覆盖旧数组 例子小Demo:合并两个数组 templateh3数组变化侦听/h3button clickaddList合并数组/buttonh3数组1/h3p v-for(item,index) of nums1 :keyindex{{ item }}/ph3数组2/h3p v-for(item,index) of nums2 :keyindex{{ item }}/p
/template
scriptexport default{data(){return{names:[张三,李四,王五],nums1:[1,2,3,4,5],nums2:[6,7,8,9,10]}},methods:{addList(){this.nums1 this.nums1.concat(this.nums2) }}}
/script 二、计算属性
模板中的表达式虽然方便但也只能用来做简单的操作。如果在模板中写太多逻辑会让模板变得臃肿难以维护。因此我们推荐使用计算属性来描述依赖响应式状态的复杂逻辑。
下面是一个简单的判断长度的判断-大于0返回Yes否则返回No
1.基础不推荐 templatedivh3{{ qcby.name }}/h3p{{qcby.content.length 0 ?Yes : No }}/p/div
/template
scriptexport default{data(){return{qcby:{name:计算属性,content:[前端,Java,python] }}}}
/script 2.使用计算属性来完成案例 templatedivh3{{ qcby.name }}/h3p{{ qqqq }}/p/div
/template
scriptexport default{data(){return{qcby:{name:计算属性,content:[前端,Java,python] }}},//计算属性computed:{qqqq(){return this.qcby.content.length 0 ? Yes:No}}}
/script 3.使用函数的方式去完成 templatedivh3{{ qcby.name }}/h3p{{ yyyy() }}/p/div
/template
scriptexport default{data(){return{qcby:{name:函数,content:[前端,Java,python] }}},//函数的方式去完成methods:{yyyy(){return this.qcby.content.length 0 ? Yes:No}}}
/script 那么既然可以使用函数的方式去完成为什么要弄一个计算属性呢
计算机属性缓存 vs 方法
你可能注意到我们在表达式中像这样调用一个函数也会获得和计算属性相同的结果
重点区别
计算属性计算属性值会基于其响应式依赖被缓存。一个计算属性仅会在其响应式依赖更新时才重新计算即一次调用
方法方法调用总是会在重渲染发生时再次执行函数即多次调用 如上在上述的显示中
计算属性只会计算一次
方法会计算四次
三、侦听器
我们可以使用watch选项在每次响应式属性发生变化时触发一个函数
例子 templateh3侦听器/h3p{{ message }}/pbutton clickclickHandle修改数据/button
/template
scriptexport default{data(){return{message:前端}},methods:{clickHandle(){this.message python}},watch:{//函数名称必须与侦听的数据对象保持一致// newVlaue改变之后的数据// oldValue改变之前的数据message(newVlaue,oldValue){console.log(newVlaue,oldValue);}}}
/script 第二课Vue的表单绑定
在 Vue 中处理表单绑定主要是通过 v-model 指令来实现的。v-model 可以帮助我们在表单元素如文本框、复选框、单选框、下拉框等和 Vue 数据之间建立双向绑定使得数据和视图可以自动同步。
下面我将详细介绍如何在 Vue 中处理表单绑定包括常见的表单元素的绑定方式。
1. 基本的表单绑定
在 Vue 中使用 v-model 可以方便地实现双向数据绑定。v-model 会自动处理用户输入和数据的同步更新。最常见的表单元素包括文本输入框、单选框、复选框和下拉框。 文本输入框绑定
文本框input是最基本的表单元素通过 v-model 可以实现双向绑定。
templatedivlabel forusername用户名/labelinput typetext idusername v-modelusername /!-- 在这里获取--p你输入的用户名是{{ username }}/p/div
/templatescript
export default {data() {return {username: //在这里返回};}
};
/script解释 通过 v-modelusername输入框的值会绑定到 Vue 实例中的 username 数据属性。当用户在输入框中输入内容时username 会自动更新反之当 username 的值变化时输入框的值也会同步变化。 2. 处理复选框和单选框
单选框绑定
单选框input typeradio用于从多个选项中选择一个v-model 也能帮助你实现绑定。
templatedivlabelinput typeradio valueMale v-modelgender / 男/labellabelinput typeradio valueFemale v-modelgender / 女/labelp你选择的性别是{{ gender }}/p/div
/templatescript
export default {data() {return {gender: Male //默认是Male};}
};
/script解释 v-modelgender 使得 gender 与选中的单选框同步。当用户选择不同的性别时gender 会自动更新为对应的值。 复选框绑定
复选框input typecheckbox允许用户选择多个选项。通过 v-model你可以将复选框的选中状态绑定到一个数组中。
templatedivlabelinput typecheckbox valueVue v-modelskills / Vue/labellabelinput typecheckbox valueReact v-modelskills / React/labellabelinput typecheckbox valueAngular v-modelskills / Angular/labelp你掌握的技能{{ skills.join(, ) }}/p/div
/templatescript
export default {data() {return {skills: []};}
};
/script解释 v-modelskills 会将选中的复选框的值添加到 skills 数组中。数组中会包含用户选中的所有技能项。 3. 处理下拉框
下拉框select也可以通过 v-model 来实现数据绑定用户选择的选项会绑定到 Vue 实例中的数据属性。
templatedivlabel forlanguage选择你的语言/labelselect v-modellanguageoption valueEnglish英语/optionoption valueChinese中文/optionoption valueSpanish西班牙语/option/selectp你选择的语言是{{ language }}/p/div
/templatescript
export default {data() {return {language: English};}
};
/script解释 v-modellanguage 使得 language 与下拉框的选中值进行双向绑定。用户选择的语言会更新 language 的值。 4. 处理文本区域textarea
如果表单中有文本区域textarea你同样可以使用 v-model 来绑定数据。
templatedivlabel fordescription描述/labeltextarea iddescription v-modeldescription/textareap你的描述{{ description }}/p/div
/templatescript
export default {data() {return {description: };}
};
/script解释 v-modeldescription 使得textarea 的值与 description 数据属性绑定。当用户修改文本框内容时description 的值会自动更新。 5. 动态表单和验证
在实际项目中我们通常需要动态渲染表单元素并且对用户输入进行验证。Vue 提供了强大的功能来支持这种需求。你可以结合 Vue 的表单验证库如 VeeValidate来进行表单验证或者自行处理验证逻辑。
例如创建一个简单的表单验证
templatedivlabel foremail电子邮件/labelinput typeemail idemail v-modelemail /p v-if!isValidEmail请输入有效的电子邮件地址。/plabel forpassword密码/labelinput typepassword idpassword v-modelpassword /p v-ifpassword.length 6密码长度不能少于 6 个字符。/pbutton :disabled!isFormValid提交/button/div
/templatescript
export default {data() {return {email: ,password: };},computed: {isValidEmail() {const regex /^[a-zA-Z0-9._-][a-zA-Z0-9.-]\.[a-zA-Z]{2,6}$/;return regex.test(this.email);},isFormValid() {return this.isValidEmail this.password.length 6;}}
};
/script解释 通过计算属性 isValidEmail 和 isFormValid 来验证表单输入。电子邮件和密码的输入字段分别使用 v-model 来绑定到 email 和 password 数据属性。提交按钮通过 :disabled 属性来禁用直到表单验证通过。 6.总结
在 Vue 中处理表单绑定非常简单主要依赖 v-model 指令它能自动处理表单元素和 Vue 数据的双向绑定。通过 v-model你可以轻松地将数据与表单控件如文本框、单选框、复选框、下拉框等进行绑定从而实现数据与视图的同步。
表单验证可以通过计算属性、方法和条件渲染来完成确保表单的正确性和有效性。
通过这些基本的操作你可以在 Vue 中高效地处理表单输入、更新和验证等任务。
第三课v-model修饰符
v-model也提供了修饰符lazy、number、trim .lazy
默认情况下v-model会在每次input事件后更新数据。你可以添加lazy修饰符来改为在每次change事件后更新数据
templateinput typetext v-model.lazymessagep{{ message }}/p
/template
scriptexport default{data(){return{message:}}}
/script
number:只能接受数值类型的数据
trim:去掉前后空格
