如何建设一个优秀的电商网站,沐风seo,网站开发的高级阶段包括什么,专业有哪些目录
表单输入绑定
基础用法
修饰符
过滤器
指令
内置指令
自定义指令
全局指令 表单输入绑定
之前篇幅讲过使用v-model指令在表单input/textarea以及select元素上创建双向数据绑定#xff0c;它会根据控件类型自动选取正确的方法来更新元素…目录
表单输入绑定
基础用法
修饰符
过滤器
指令
内置指令
自定义指令
全局指令 表单输入绑定
之前篇幅讲过使用v-model指令在表单input/textarea以及select元素上创建双向数据绑定它会根据控件类型自动选取正确的方法来更新元素其实就是将input输入的值value自动绑定并更新数据。它就是语法糖负责监听用户的输入事件以更新数据并对一些极端场景进行一些特殊处理~
基础用法
表单分为input/textarea/selectinput有text/checkbox/radio/password等类型下面分别进行讨论
div idrootform账号input typetext v-modelaccountbr/br密码input typepassword v-modelpasswordbr/br性别input typeradio namesex v-modelsex valuemale 男input typeradio namesex v-modelsex valuefemale 女br/br爱好input typecheckbox v-modelhobby valueplayPingPang打乒乓球input typecheckbox v-modelhobby valuesleep睡觉input typecheckbox v-modelhobby valuewatchTV看剧br/br所属地区select name id v-modelregionoption value请选择/optionoption valueShanghai上海/optionoption valueBeijing北京/optionoption valuetianjin天津/optionoption valueguangzhou广州/option/select br/br补充说明textarea v-modelother/textarea/form/divscriptconst vm new Vue({el: #root,data: {account: ,password: ,sex: ,hobby: [],region: Shanghai,other: }})/script
对于类型为text、password的input框以及select和textarea表单这种有输入值的表单默认v-model绑定的value值即输入值所以无需再专门指定value值
对于radio、checkbox来说若不专门指定value值由于前端并未输入内容则虽然显示checked为true或false但是实际的value值为null因此要特别绑定value值另外对于多选框checkbox来说若data中未定义绑定的数值为数组类型则会出现选中一个则其它多选框也会被选中的情况即单选框绑定到布尔值多选框绑定到数组
修饰符
v-model也可以加修饰符如.lazy/.number/.trim
.lazy
在默认情况下v-mode在每次input事件触发后将输入框的值立即与数据进行同步若想在input输入完成后再同步可以添加lazy修饰符从而转化为在change事件失去焦点之后进行同步
账号input typetext v-model.lazyaccount
.number
由于输入框拿到的数据为字符串即使在设置了标签为typenumber后HTML输入元素的值也总会返回字符串若想将用户的输入值转为数值类型则要给v-model添加number修饰符后
年龄input v-model.numberage typenumber
.trim
若想自动过滤用户输入的首尾空白字符则要给v-model添加trim修饰符
账号input typetext v-model.trimaccount
过滤器
过滤器能实现对要显示的数据进行特定格式化后再显示它并没有改变原来的数据直接产生了新的与之对应的数据
div idrooth3当前时间戳是{{time}}/h3h3格式化处理后的时间是: {{time | timeFilter}}/h3/divscriptconsole.log(Date.now());const vm new Vue({el: #root,data: {time: 1643164727498,},filters: {timeFilter(value) {return dayjs(value).format(YYYY年MM月DD日)}}})/script
上述代码讲解
{{time | timeFilter}}
上述代码中time表示过滤器要处理的数据中间为管道符|后面为过滤器timeFilter该方法的实现逻辑是指将time作为参数传给timeFormater过滤器---调用timeFormater过滤器---将拿到的返回值给{{time|timeFormat}}呈现页面
filters: {timeFilter(value) {//此处的value是默认参数timereturn dayjs(value).format(YYYY年MM月DD日)}
} 过滤器函数若未加参数则默认参数是管道符前面的属性此处即time若加了参数则不仅有传入的参数还有默认的管道符前面的属性
div idrooth3当前时间戳是{{time}}/h3h3格式化处理后的时间是: {{time | timeFilter(YYYY年)}}/h3/divscriptconsole.log(Date.now());const vm new Vue({el: #root,data: {time: 1643164727498,},filters: {timeFilter(value, str) {console.log(value); // value是默认参数console.log(str); // str是YYYY年return dayjs(value).format(str)}}})/script
过滤器之间可实现串联操作即将前一个过滤器的返回值作为默认参数传给下一个过滤器
div idrooth3当前时间戳是{{time}}/h3h3格式化处理后的时间是: {{time | timeFilter(YYYY年MM月) | timeSlice(4)}}/h3/divscriptconst vm new Vue({el: #root,data: {time: 1643164727498,},filters: {timeFilter(value, str) {return dayjs(value).format(str)},timeSlice(value, num) {return value.slice(0, num)}}})/script
过滤器还可以用在v-bind上用的不多
input typetext v-bind:idrawId | formatId/input 全局过滤器
在创建vue实例全局定义过滤器 Vue.filter(capitalize, function(value) {if (!value) return value value.toString()return value.charAt(0).toUpperCase() value.slice(1)})
指令
内置指令
之前介绍过一些内置指令如v-bind/v-model/v-for/v-on/v-if/v-else/v-show
v-bind表示单向绑定解析表达式可简写为:xxx
v-model表示双向数据绑定
v-for遍历数组/对象/字符串
v-on绑定事件监听可简写为
v-if条件渲染动态控制节点是否存在
v-show条件渲染动态控制节点是否展示
v-text向其所在的节点中渲染文本内容与插值语法的区别是v-text会替换掉整个节点中的内容如
div idrootdiv v-textname你好/div!-- 只会展示出来 柳柳 --div你好{{ename}}/div!-- 展示出来 你好 --/divscriptconst vm new Vue({el: #root,data: {name: 柳柳,ename: liu}})/script
v-html指令可以向指定节点中渲染包含html结构的内容它和v-text一样也是会替换掉节点中所有的内容并且可以识别html结构但是v-html有安全性问题因为在网站上动态渲染任意html是非常危险的容易导致XSS攻击一定要在可信的内容上使用v-html而且不要在用户提交的内容上使用
div idrootdiv v-htmlstr你好/div/divscriptconst vm new Vue({el: #root,data: {str: a hrefjavascript:location.hrefhttp://www.baidu.com? document.cookie危险链接/a,}})/script
v-cloak指令配合CSS使用可以解决网速慢时页面展示出未经解析的模板如{{xxx}}问题
没有值直接使用v-cloak在Vue实例创建完毕并接管容器后会删掉v-cloak属性
style[v-cloak] {display: none;}
/style
div idrootdiv v-cloak{{name}}/div/divscriptconst vm new Vue({el: #root,data: {name: xiaoming}})/script
v-once指令是指所在节点在初次动态渲染后就视为静态内容以后数据的改变不会引起v-once所在结构的更新可以用于优化性能 div idrooth2 v-once初始化的n值是 {{n}}/h2!-- 这个n值不会动态改变只会在加载页面的时候动态改变一次变为1 --h2当前的n值是 {{n}}/h2button clickn点我n1/button/divscriptconst vm new Vue({el: #root,data: {n: 1}})/script
v-pre用于跳过没有使用指令语法、插值语法的节点加快编译过程
h2 v-pre马上放假喽~/h2
自定义指令
除了核心功能默认内置的指令v-model和v-showVue也允许注册自定义指令自定义指令是个函数但不会通过返回值形式拿到结果有两种方式定义回调函数方式与定义配置对象方式
定义回调函数
示例定义一个v-amplify指令和v-text功能类似将绑定的数值放大10倍
div idrooth2当前的n值是 {{n}}/h2h2放大10倍后的n值是 span v-amplifyn/span/h2button clickn点我n1/button/divscriptconst vm new Vue({el: #root,data: {n: 1},directives: {amplify(element, binding) {// 定义指令的时候不加v-使用的时候为v-xxxconsole.log(element, binding);// element即指令所绑定的元素可以用来直接操作 DOMbinding是一个对象表示元素与指令之间的绑定关系element.innerText binding.value * 10}}})/script
官网上关于指令参数的介绍如下 回调函数何时会被调用指令与元素成功绑定时即刚开始vue接管模板初始化的时候在指令所在的模板被重新解析时也会被调用 定义配置对象
示例定义一个v-fbind指令和v-bind功能类似但可以使其所绑定的input元素默认获取焦点
此时用函数方法很难找到何时让其获得焦点的时刻因为在绑定关系成立后拿不到input输入框啥时候解析在页面的时刻因为无法获得input框的焦点基于此采用配置对象方法
div idrootinput typetext v-fbind:valuen/divscriptconst vm new Vue({el: #root,data: {n: 1},directives: {amplify(element, binding) {// 定义指令的时候不加v-使用的时候为v-xxxconsole.log(element, binding);// element即指令所绑定的元素可以用来直接操作 DOMbinding是一个对象表示元素与指令之间的绑定关系element.innerText binding.value * 10},fbind: {// 该对象中可以放入很多函数保证在每个时间点执行要做的函数,每个函数中的参数都是element与bindingbind(element, binding) {// 指令与元素成功绑定时即初始化时element.innerText binding.value * 10},inserted(element, binding) {// 指令所在元素被插入页面时element.focus()},update(element, binding) {// 指令所在的模板被重新解析时element.value binding.value},}}})/script
这三个函数binding、inserted、update三个函数被称为钩子函数官网介绍如下 可以看出来第一种回调函数方法是第二种方法省略掉inserted方法的简写形式
注意
指令相关的函数中的this皆指向windows
指令名若是多个单词组成则要使用kebab-case命名方式不能用驼峰命名法如:
big-sum: {bind(element,binding){},inserted(element,binding){},update(element,binding) {}
},
或
big-sum(element,binding) {}
全局指令
在创建vue实例全局定义指令上述两种方法分别对应如下
Vue.directive(指令名配置对象)
或
Vue.directive(指令名回调函数)
