免版权图片网站,仪征网站建设公司,成品网站好吗,深圳专业做网站设计选项的概念与要点 data#xff0c;methods#xff0c;computed 等可以选择添加使用#xff0c;称之为选项
注意#xff1a;vue组件中的选项#xff08;data#xff0c;methods#xff0c;computed#xff0c;...#xff09;名字是不能随意更改的#xff0c;也是不能重…选项的概念与要点 datamethodscomputed 等可以选择添加使用称之为选项
注意vue组件中的选项datamethodscomputed...名字是不能随意更改的也是不能重复定义的更改选项名会报错无法正常渲染重复定义会导致后面的覆盖前面的data选项 data选项必须是个函数且必须返回一个{}其内部注册响应式数据当响应式数据被改变会使引用对应数据的组件模板代码重新执行export default {data(){return {tabs:[{ name:首页,pic: },{ name:分类,pic: },{ name:购物车,pic: },{ name:我的,pic: },],currentIndex:0}}
}methods选项 methods 选项 必须是个对象格式内部定义若干方法函数用逗号两两隔开export default {methods:{handleClick(i){this.currentIndex i;}}
} computed选项 1.要点1 computed 选项 定义计算属性 定义时像函数写法上和函数相同 使用时像变量不带括号否则会报错2 计算属性内部所依赖的数据发生变化时 计算属性本身就会自动重新计算返回一个新的计算值并缓存起来3 计算属性内部所依赖的数据没有发生变化 计算属性会直接返回上一次缓存的值computed计算计算的2.代码演示templatediv classappdiv classgoodsdiv v-for(item,index) in goods :keyindex classgooddiv classname{{item.name}}/divdiv classprice¥{{item.price}}/divdiv classnum button clickminus(item) - /button x{{item.num}} button clickadd(item) /button/div/div/divh3总数: {{totalNum}} 总价: {{totalPrice}}/h3/div/templatescriptexport default {data(){return {goods:[{ name:iphone xx,price:8888,num:1 },{ name:iphone xx pro,price:10000,num:1 },{ name:iphone xx max,price:20000,num:2 },],count:0,}},computed:{totalNum(){-----------该属性计算购物车中商品的总数console.log(totalNum);var res 0;this.goods.forEach((item){---------思路一: 循环遍历, 累加商品的数量res item.num})return res;----------累加的商品的数量作为返回值},totalPrice(){--------------计算购物车中商品的总价格var res 0;this.goods.forEach((item){----------思路一: 循环遍历, 累加商品的金额res item.num * item.price})return res;}},}/scriptdirectives选项 1.要点1 directives选项 定义自定义指令 局部指令 directive指令指令的2 注意 1 局部指令只能在当前文件中使用全局指令可以在任何.vue 文件中使用2 当局部指令和全局指令冲突时 局部指令优先生效。3 全局指令语法定义指令app.directive(指令名,{mounted(el,binding){指令功能代码}})el代表指令所在的 dom节点binding获取指令携带的参数4 局部指令语法directives:{指令名:{mounted(el,binding){指令功能代码}}}2.局部指令局部指令在.vue为后缀的组件中声明语法directives:{指令名:{mounted(el,binding){指令功能代码}}}templatediv classappinput typetext v-focus v-validate--------指令添加在组件模板中的元素标签上该元素执行时指令就生效/div/templatescriptexport default directives:{focus:{-------表单自动聚焦指令mounted(el,binding){--------el 获取指令所在的dom节点 , binding获取指令携带的参数console.log(局部指令 focus);el.focus();-------聚焦失焦为el.blur();}},validate:{------验证表单输入内容是否为空指令mounted(el,binding){---------el 获取指令所在的dom节点 , binding 获取指令携带的参数if( !el.value ){el.style.border 1px solid red; }}}}}/script3.全局指令补充
v-focus 和 v-validate 都是 Vue.js 中的自定义指令。v-focus这是一个自定义指令用于在元素渲染时自动设置焦点。通过在元素上添加 v-focus 指
令当该元素被渲染到页面上时会自动获得焦点无需手动点击或调用 focus() 方法。例如可
以在输入框上使用 v-focus 指令使页面加载后自动聚焦到该输入框。v-validate这也是一个自定义指令用于进行表单验证。通过在表单元素上添加 v-validate 指
令并传入相应的验证规则可以实现对表单数据的实时验证。当用户输入或改变表单数据时v-
validate 会根据指定的验证规则对数据进行验证并根据验证结果添加相应的样式或显示错误信
息。常见的验证规则包括必填字段、最小长度、最大长度、正则表达式等。components选项 1.要点1 注意components选项用于注册局部组件component方法用于注册全局组件二者有区别方法的拼写少一个“s”2 局部组件语法在需要使用的组件书写1 导入组件import 组件名 from 组件文件路径2 注册组件components:{组件名,...}3 全局组件语法在入口文档 main.js 中书写1 导入组件将在其他.vue 文件中写好的组件导入到入口文件import 组件名 from 组件文件路径2 注册组件使用app.component(注册名,注册组件)方法为引入的组件进行注册注册完成后全局组件可在任何.vue 文件使用component组成部分组成的2.局部组件语法在需要使用的组件书写1)导入组件import 组件名 from 组件文件路径2)注册组件components:{组件名,...}script导入轮播图组件import swiper from ./components/swiper.vue导入快捷入口组件import entry from ./components/entry.vueexport default {components:{----------------------components注册组件导入的组件需要在components中注册才可以使用swiper,--------------当key与value相同时可以简写entry}}/script3.全局组件语法在入口文档main.js中书写1)导入组件将在其他.vue文件中写好的组件导入到入口文件import 组件名 from 组件文件路径2)使用app.component(注册名,注册组件)为引入的组件进行注册注册完成后全局组件可在任何.vue文件使用import { createApp } from vueimport App from ./App-选项-computed.vuevar app createApp(App)注册全局组件 ( 全局组件可以在任何.vue文件中使用(渲染) )导入轮播图组件import swiper from ./components/swiper.vue导入快捷入口组件import entry from ./components/entry.vueapp对象调用component方法注册全局组件app.component(swiper,swiper);app.component(entry,entry);app.mount(#app)
filter选项已弃用 filters 选项 定义过滤器 filter过滤的
注意 在 vue2.x 中 filters 是可以用的 在 vue3.x 中 已经不再支持了templatediv classapph3 {{ time | formatTime }} /h3/div
/templatescript
export default {filters:{formatTime(time){var d new Date(time);return ${d.getFullYear()} - ${d.getMonth()} - ${d.getDate()}}}
}
/script案例分组件开发 主页面文件app.vuetemplate搜索区div classsearch-boxspan北京/spaninput typetext placeholder搜索商品span我的/span/div轮播图swiper /快捷入口entry /秒杀推荐 /templatescript导入轮播图组件import swiper from ./components/swiper.vue导入快捷入口组件import entry from ./components/entry.vueexport default {omponents 注册组件components:{swiper,--------------当key与value相同时可以简写entry}}/scriptstyle。。。。。。。。/style轮播图文件swiper.vue组件需要放在component文件夹中templatediv classswiper/div/templatescriptexport default {}/scriptstyle.swiper{background-color: lightseagreen;height: 150px;}/style快捷入口文件entry.vue组件需要放在component文件夹中templatediv classentrydiv v-for(item,index) in list :keyindex classitem{{item.name}}/div/div/templatescriptexport default {data(){return {list:[{ name:超市 },{ name:生鲜 },{ name:服饰 },{ name:充值 },{ name:缴费 },{ name:9.9 },{ name:领券 },{ name:plus },{ name:到家 },{ name:家电 },]}}}/scriptstyle.entry{display: flex;flex-wrap: wrap;}.entry .item{width: 20%;margin: 20px 0;text-align: center;font-size: 14px;}/stylevue数据绑定的底层原理 vue 数据绑定的底层原理
1. vue 数据绑定实际是借助Object.defineProperty()实现数据劫持 给每个属性都添加 gettersetter 方法。1 vue3 中数据绑定的原理将Object.defineProperty()改成了 Proxy 实现2 vue2 中Object.defineProperty()无法监听数组对象属性的改变添加属性删除属性 但是 Proxy 可以监听到改变
2. 当访问到某个数据属性时 会触发 getter 方法的调用 这时该数据属性会和当前 Watcher 实例进行绑定。
3. 当修改某个数据属性的值时 会触发 setter 方法的调用 这时会自动通过当前属性属性所绑定的 Watcher 实例进行 dom 的更新 Watcher 实例会将对应的异步更新函数放入到异步更新队列中 等到下一次事件循环时批量执行Vue 通过虚拟 DOM 技术对 DOM 进行更新将更新后的 DOM 渲染到页面上 proxy代理的
