网站建设英语要几级,浙江省住房和城乡建设厅网站打不开,安全网站建设的研究方法,十种人不适合学建筑computed计算属性
概念
基于现有数据#xff0c;计算出来的新属性#xff0c;依赖的数据变化#xff0c;会自动重新计算
语法
声明在computed配置项中#xff0c;一个计算属性对应一个函数这是一个属性{{计算属性名}}#xff0c;不是方法注意不要忘记return
body…computed计算属性
概念
基于现有数据计算出来的新属性依赖的数据变化会自动重新计算
语法
声明在computed配置项中一个计算属性对应一个函数这是一个属性{{计算属性名}}不是方法注意不要忘记return
body
div idappulli v-forarr in list{{arr.name}}nbspnbspnbspnbspnbsp个数{{arr.num}}个/li/ulp礼物总数{{totalCount}}/p
/div
script src../lib/vue.js/script
scriptconst appnew Vue({el:#app,data:{list:[{id:1,name:篮球,num:1},{id:2,name:玩具,num:2},{id:3,name:铅笔,num:5}]},computed:{totalCount(){console.log(this.list)let totalthis.list.reduce((sum,item)sumitem.num,0)return total}}})
/script
/body
computed计算属性与methods方法的区别
computed计算属性
作用封装一段对于数据的处理得一个结果
语法写在computed配置项中作为属性直接使用this.计算属性{{计算属性}} methods方法
作用给试了提供一个方法调用来处理业务逻辑
语法写在methods配置项中作为方法需要调用this.方法名() {{方法名()}} 事件名方法名
计算属性完整写法 username:{get(){return this.firstNamethis.lastName},set(){}
}上一段代码和下面这一段简写的代码等价 username(){return this.firstNamethis.lastName
}完整属性是再加上set() bodydiv idapp姓input typetext v-modelfirstName名:input typetext v-modellastName{{username}}brbutton clickchangeName改名/button/divscript src../lib/vue.js/scriptscriptconst appnew Vue({el:#app,data:{firstName:刘,lastName:备},methods:{changeName(){console.log(点击)this.username吕xiao布}},computed:{username:{get(){return this.firstNamethis.lastName},set(value){this.firstNamevalue.slice(0,1)this.lastNamevalue.slice(1)}}}})/script
/body
补充
阻止默认行为并设置点击事件click.prevent td click.preventdel(arr.id)a hrefhttps://www.baidu.com/删除/a/tdmethods:{del(id){this.listthis.list.filter(arrarr.id!id)}
} 此时就不会默认进入百度的页面而是执行del(id)方法 相除保留几位小数被除数不能为零 10/this.list.length.toFixed(2) //保留两位小数 局部样式 style scoped}
/style scoped原理css选择器都会被添加上一个自定义属性date-v-hash值 watch监视器
作用
监视数据变化执行一些业务逻辑或异步操作
语法
简单写法简单配置项直接监视完整写法添加额外配置项 deep:true 对复杂类型深度见识immediate:true 初始化立刻执行一次handler方法
方法名是不能出现特殊字符的
那么对于list.num的监听要如何写? data:{words1:,obj:{words2:}
},
watch:{words1(newValue,oldValue){console.log(变,newValue,oldValue)},obj.word2(newValue,oldValue){console.log(变,newValue,oldValue)}
} 加上此时就可以监听到obj.words2了 简单写法
-简单写法-
bodydiv idappdivinput typetext v-modelobj.words/divdivinput typetext v-modelresult/div/divscript srchttps://unpkg.com/axios/dist/axios.min.js/scriptscript src../lib/vue.js/scriptscriptconst appnew Vue({el:#app,data:{obj:{words:},result:,timer:null//延时器id},watch:{obj.words(newValue){//防抖处理,延时执行clearTimeout(this.timer)this.timersetTimeout(async(){console.log(变,newValue)const resawait axios({url:https://applet-base-api-t.itheima.net/api/translate,params:{words: newValue}})this.resultres.data.dataconsole.log(res.data.data)},300)}}})/script
/body完整写法 data:{obj:{words:,lang:italy},result:,timer:null//延时器id},watch:{obj:{deep:true,immediate:true,handler(newValue){clearTimeout(this.timer)this.timersetTimeout(async(){console.log(变,newValue)const resawait axios({url:https://applet-base-api-t.itheima.net/api/translate,params:newValue})this.resultres.data.dataconsole.log(res.data.data)},300)}}}})
此时监控了两个值的变化一个是选择语言——obj.lang还有输入框的变化——obj.words。
其中immediate:true是立刻执行即使没有发生变化也会执行一遍这条语句可省。
生命周期
Vue生命周期一个Vue实例从创建到销毁的整个过程
创建阶段响应式数据挂载阶段渲染模板更新阶段数据修改更新视图销毁阶段销毁实例
生命周期过程中会自动运行一些函数被称为【生命周期钩子】让开发者可以在【特定阶段】运行自己的代码
工程化开发脚手架Vue CLI
基本介绍
Vue CLI是Vue官方提供的一个全局命令工具可以快速创建一个开发Vue项目的标准化基础架子
使用步骤
创建项目架子vue create project-name项目名不能用中文名启动项目yarn server或npm run serve找package.json
组件化开发根组件
组件化一个页面可以拆分为一个个组件每个组件有着自己独立的结构、样式、行为。好处便于维护利于复用提升开发效率组件分类普通组件、根组件根组件整个应用最上层的组件包裹所有普通组件 template结构在vue2中只能有一个根结点style样式可以支持less需要装包less和less-loaderscript行为
普通组件的注册使用
注册的两种方式 局部注册只能在注册内的组件内使用 创建.vue文件三个组成部分在使用的组件内导入并注册 import Vue from .vue文件路径
import App from ./components/HmHeaderexport default{//局部注册component:{组件名:组件对象,HmHeader:HmHeader}
} 使用当成html标签使用组件名/组件名 注意组件名规范大驼峰命名法 全局注册所有组件内都能使用 创建.vue文件三个组成部分main.js中进行全局注册 //导入需要全局注册的组件
import HmButton from ./components/HmButton
//调用Vue.component进行全局注册
//Vue.component(组件名,组件对象)
Vue.component(HmButton,HmButton) 使用当成html标签使用组件名/组件名 组件通信
父子关系props和$emit 什么是prop
prop定义组件上注册的一些自定义属性prop作用向子组件传递数据
特点
可以传递任意数量的prop可以传递任意类型的prop
有时需要props校验不符合要求会出现错误提示
类型校验非空校验默认值自定义校验 props:{校验的属性名: {type:类型,required:true,//是否必填default:默认值,//默认值validator(value){//自定义校验逻辑return 是否通过校验}}
}, prop和data的比较
共同点都可以给组件提供数据
区别
data的数据是自己的可以随便改prop的数据是外部的要遵循单向数据流谁的数据谁负责
非父子关系eventbus
作用非父子组件之间进行建议消息传递复杂场景-Vue
1.创建一个都能访问到的事件总线空Vue实例-utils/EventBus.js 2.A组件接收方监听Bus实例的事件 3.B组件发送方触发Bus实例的事件 非父子关系provideinject
作用跨层级共享数据
1.父组件provide提供数据 export default{provide(){return{//普通类型【非响应式】color:this.color,//复杂类型【响应式】userinfo:this.userInfo}}} 2.子/孙组件inject取值使用 export default{inject:[color,userInfo],created(){console.log(this.color,this.userInfo)}
}
