网站首页设计效果图,建设外贸产品展示网站,工商登记注册身份验证app,wordpress网站维护页面模板1. 过滤器
定义#xff1a;对要显示的数据进行特定格式转换再显示#xff08;适用于一些简单逻辑的处理#xff09;语法#xff1a; 注册过滤器#xff1a;Vue.filter(name, callback) 或 new Vue{filters:{}}使用过滤器#xff1a;{{ xx | 过滤器名 }} 或 v-bind:属性 …1. 过滤器
定义对要显示的数据进行特定格式转换再显示适用于一些简单逻辑的处理语法 注册过滤器Vue.filter(name, callback) 或 new Vue{filters:{}}使用过滤器{{ xx | 过滤器名 }} 或 v-bind:属性 xxx | 过滤器名 备注 过滤器也可以接受额外参数、多个过滤器也可以串联并没有改变原本的数据是产生新的对应的数据
示例(局部过滤器) !DOCTYPE htmlhtml langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlescript src./vue.js/script/headbodydiv idapp!-- 计算属性 --h3计算属性/h3p{{ nameUpper }}/phrh3过滤器/h3!-- 过滤器 --p{{ name | nameSliceFilter | nameUpperFilter }}/pp{{ name | nameUpperFilter }}/phr!-- 过滤器传参数 --!-- p{{ longName | nameSliceFilter2(9, 测试传值) }}/p --p{{ longName | nameSliceFilter2(9) }}/pp{{ longName | nameSliceFilter2() }}/phr!-- 属性过滤器 --p :namename | nameSliceFilter | nameUpperFilter属性过滤器文本/p/divscriptconst vm new Vue({el: #app,data:{name: abcdefg,longName: abcdefghigklmn},// 计算属性computed:{nameSlice(){return this.name.slice(0,3)},nameUpper(){return this.nameSlice.toUpperCase()}},// 过滤器filters:{nameSliceFilter(val){// console.log(val);return val.slice(0,3)},nameUpperFilter(val){return val.toUpperCase()},// 过滤器传值// 可以传值传多少个参数就接收多少参数但是第一个参数永远是原本数据// nameSliceFilter2(val,length, text){// console.log(val, length,text);// }// nameSliceFilter2(val, length){nameSliceFilter2(val, length 3){console.log(val, length);return val.slice(0, length)}}})/script/body/html示例(全局过滤器) !DOCTYPE htmlhtml langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlescript src./vue.js/script/headbodydiv idappp{{ name | nameSliceFilter }}/pp{{ longName | nameUpperFilter }}/p/divdiv idrootp{{ rootName | nameSliceFilter }}/p/divscript// 必须要把全局筛选器提前配置好Vue.filter(nameSliceFilter,(val){return val.slice(0,3) })// app 实例挂载new Vue({el: #app,data:{name: abcdefg,longName: abcdefghigklmn},// 过滤器filters:{// vue实例内的筛选器优先级更高// nameSliceFilter(val){// return val.slice(0,4)// },nameUpperFilter(val){return val.toUpperCase()}}})// root实例挂载new Vue({el: #root,data:{rootName: 这是rootName的值},})/script/body/html2. 内置指令 v-bind, v-on,v-show… v-text指令 作用向其所在的节点中渲染文本内容与差值语法的区别v-text会替换掉节点中的内容{{ xx }} 不会 示例 bodydiv idapp!-- 通常 {{ }} 表较多 更灵活 --p{{ name }}/pp v-textname/phrp你好 {{ name }}/pp v-textname你好/phrp{{ str }}/pp v-textstr/p/divscriptnew Vue({el: #app,data:{name: 小红,str: h3这是个标题/h3}})/script
/bodyv-html指令 作用向指定节点中渲染包含html结构的内容与插值语法的区别 v-html会替换掉节点中所有的内容{{ xx }}不会v-html可以识别html结构 严重注意v-html有安全问题 在网站上动态渲染任意HTML是非常危险的容易收到XSS攻击一定要在可信的内容上使用v-html永不要在用户提交的内容上 示例 bodydiv idappp{{ str }}/pp v-textstr/pp v-htmlstr/p/divscriptnew Vue({el: #app,data:{str: h3这是个标题/h3}})/script/bodyv-cloak指令没有值 本质是一个特殊属性Vue实例创建完毕并接管容器后会删掉v-cloak属性使用css配合v-cloak可以解决网速慢时页面展示出 {{ xx }} 的问题 !DOCTYPE htmlhtml langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlescript src./vue.js/scriptstyle[v-cloak]{display: none;}/style/headbodydiv idappp v-cloak{{ name }}/p/divscriptconst vm new Vue({// el: #app,data:{name: 小红}})setTimeout(() {vm.$mount(#app)}, 5000);/script/body/htmlv-once指令 v-once所在的节点初次动态渲染后就视为静态内容了以后数据的改变不会引起v-once所在结构的更新可以用于优化性能 示例 bodydiv idapp!-- 需求 显示初始值也显示修改后的值 --p v-once初始的n值是{{ n }}/pp当前的n值是{{ n }}/pbutton clickn添加/button/divscriptnew Vue({el: #app,data:{n: 8}})/script
/bodyv-pre指令 跳过其所在节点的编译过程可利用它跳过没有使用指令语法、没有使用插值语法的节点会加快编译 示例 bodydiv idappp v-pre当前的n值是/pp{{ n }}/pbutton clickn 添加/button/divscriptnew Vue({el: #app,data:{n: 8}})/script
/bodyVue模板语法有2大类 插值语法 功能 用于解析标签体内容写法 {{ xx }}, xx是js表达式且可以直接读取到data中的所有属性 指令语法 功能用于解析标签包括标签属性标签体内容绑定事件…举例v-bind:href ‘xxx’ 或简写 :href ‘xxx’ xxx同样要写表达式且可以直接读取到data中的属性备注Vue中有很多的指令且形式都是v-???,此处我们只拿v-bind举个例子
3. 自定义指令
本质是一个函数不靠返回值获取值靠操作收到的参数去获取值作用 操作DOM元素: 例如v-bind,v-show,v-if等都是对DOM元素进行操作两种方式 函数式写法简单不能操作一些细节 directives:{// big函数何时会被调用// 1. 指令与元素成功绑定时,(初始时)// 2. 指令所在的模板被重新解析时big(element, binding){// element指令所绑定的元素可以用来直接操作 DOM// binding一个对象包含很多属性// value: 指令的绑定值// name: 指令名,不包括 v- 前缀// expression字符串形式的指令表达式console.log(element, binding);element.innerHTML binding.value * 10}
}对象式: 详细的表明执行到某一特定时期调用特定函数 directives:{fbind:{// 指令与元素成功绑定时,(初始时)bind(element, binding){// console.log(1,element, binding);element.value binding.value},// 指令所在的元素被插入页面时inserted(element, binding){// console.log(2,element, binding);element.focus()},// 指令所在的模板被重新解析时update(element, binding){// console.log(3,element, binding)element.value binding.value}}}定义语法 局部指令 new Vue({
directives:{指令名: 配置对象}
})
或
new Vue({
directives:{指令名: 回调函数}
})全局指令 Vue.directive(指令名, 配置对象)
或
Vue.directive(指令名, 回调函数)配置对象中常用的3个回调 bind: 指令与元素成功绑定时调用inserted: 指令所在元素被插入页面时调用update: 指令所在模板结构被重新解析时调用 备注 指令定义时不加v-, 但使用时要加v-指令中的this指向的是window指令名如果是多个单词要使用kebab-case命名方式不要用camelCase命名
示例局部指令–对象式
!DOCTYPE htmlhtml langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlescript src./vue.js/script/headbody!-- 需求1写一个v-big指令和v-text功能类似但会把绑定的数值放大10倍 --!-- 需求2写一个v-fbind指令和v-bind功能类似但可以让其所绑定的input元素自动获取焦点 --div idappbutton clickn操作/buttonhrinput typetext v-fbindn//divscriptconst vm new Vue({el: #app,data:{n: 1},directives:{// 函数式// big函数何时会被调用// 1. 指令与元素成功绑定时,(初始时)// 2. 指令所在的模板被重新解析时// fbind(element, binding){// element.value binding.value// element.focus()// }// 对象式fbind:{// 指令与元素成功绑定时,(初始时)bind(element, binding){// console.log(1,element, binding);element.value binding.value},// 指令所在的元素被插入页面时inserted(element, binding){// console.log(2,element, binding);element.focus()},// 指令所在的模板被重新解析时update(element, binding){// console.log(3,element, binding)element.value binding.value}}}})/script/body/html示例局部指令–函数式
!DOCTYPE htmlhtml langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlescript src./vue.js/script/headbody!-- 需求1写一个v-big指令和v-text功能类似但会把绑定的数值放大10倍 --!-- 需求2写一个v-fbind指令和v-bind功能类似但可以让其所绑定的input元素自动获取焦点 --div idappp{{ name }}/ph3当前的n值是span v-textn/span/h3h3放大10倍后的n值是span v-bign/span/h3button clickn操作/button/divscriptconst vm new Vue({el: #app,data:{name: 小红,n: 1},directives:{// big函数何时会被调用// 1. 指令与元素成功绑定时,(初始时)// 2. 指令所在的模板被重新解析时big(element, binding){// console.log(element, binding);console.log(big);element.innerHTML binding.value * 10}}})/script/body/html示例全局指令
!DOCTYPE htmlhtml langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlescript src./vue.js/script/headbodydiv idapph3当前的n值是span v-textn/span/h3!-- h3放大10倍后的n值是span v-big-numbern/span/h3 --h3放大10倍后的n值是span v-bign/span/h3button clickn操作/button/divhrdiv idrooth3当前的n值是span v-textn/span/h3h3放大10倍后的n值是span v-bign/span/h3button clickn操作/button/divscriptVue.directive(big,(element, binding){element.innerHTML binding.value * 20})new Vue({el: #app,data:{n: 1},directives:{// 多个单词的话推荐使用kebab-case命名// big-number(element, binding){// // console.log(element, binding);// console.log(big, this) // this指向window// element.innerHTML binding.value * 30// },// 优先级更高big(element, binding){// console.log(element, binding);console.log(big, this) // this指向windowelement.innerHTML binding.value * 10}}})new Vue({el: #root,data:{n: 1},})/script/body/html
