免费网站搭建,深圳网站设计服务商,做视频点播网站,公司部门kpi绩效考核指标模板前言
VUE是前端用的最多的框架#xff1b;这篇文章是本人大一上学习前端的笔记#xff1b;欢迎点赞 收藏 关注#xff0c;本人将会持续更新。
Vue学习笔记
用于构建用户界面的渐进式框架
构建用户界面#xff1a;基于数据动态渲染页面渐进式#xff1a;循序渐近的学…前言
VUE是前端用的最多的框架这篇文章是本人大一上学习前端的笔记欢迎点赞 收藏 关注本人将会持续更新。
Vue学习笔记
用于构建用户界面的渐进式框架
构建用户界面基于数据动态渲染页面渐进式循序渐近的学习框架一套完整项目解决方案
1、Vue核心
1.1、vue实例配置对象
选项说明dataVue实例数据对象methods定义Vue实例中的方法components定义子组件computed计算属性filter过滤器el唯一跟标签watch监听数据变化
1.2、初始Vue
想让Vue工作就必须创建一个Vue实例并且要传入一个配置对象root容器里的代码依然符合html规范Vue模板root容器中的代码{{xxxx}}中的xxx表达式要写js表达式实际开发中只有一个Vue实例
--引入Vue/--
script src/scriptbody--准备好一个容器/--div idrooth2hello! {{name}}/h2/divscriptvar vm new Vue({el: #root, //唯一标签data: {name: wy //data储存数据}})/script
/body1.3、模板语法
script srcvue.js文件地址/scriptbodydiv idrooth1插值语法/h1h3hello {{name}}/h3h1指令语法/h1a v-bind:hrefur1邓紫棋/a--b-vind 的简写形式 :href/--/div
/body总结 插值语法 用于解析标签内容 指令语法 功能用于解析标签包括标签属性、标签体内容、绑定事件……:href是v-bind:href的简写形式备注Vue中的很多指令都是v-???形式
1.4、数据绑定
script src/scriptbodydiv idroot单项数据绑定input typetext v-bind:valuename双向数据绑定input typetext v-bind:valuename/divscriptconst vm new Vue({el: #root,data: {name: wqy}})/script
/body总结
Vue的2种数据绑定 单项数据绑定(v-bind): 数据只能从data流向页面双向数据绑定(v-model)数据既可以从data流向页面还可以从页面流向data 技巧 双向绑定都应用在表单类元素上(如 \ 等)v-model:value简写成v-model
1.5、el和data的两种写法
scriptconst vm new Vue({//1.el: #root,data: {}//data的第二种写法data() {}})//el的第二种写法vm.$mount(#root)
/script总结
data有两种写法 对象式函数式
注意Vue管理的函数一定不要写出箭头函数否则this就不再是Vue实例了
1.6、MVVM模型 总结
data中所有属性最后都出现在vm上
1.8、事件处理
1.8.1、事件的基本用法
script src/scriptbodydiv idrooth2hello , {{name}}/h2boutton v-on:clickshowIndo1点我提升信息一 /bouttonbutton clickshowIno2(66)点我提示信息二/button/divscriptconst vm new Vue({el: #root,data: {name: wy}methods: {showIno1(event) {console.log(event);}showIno2(num) {console.log(num);}}})/script
/body总结
使用v-on:xxx或者**xxx**绑定事件其中xxx是事件名事件的回调需要配置在methods对象中最总会出现在vm上methods中配置函数不要使用箭头函数methods中配置的函数都是被Vue所管理的函数this指向是vm或者实例化对象clickdemo和clickdemo($event)效果一致但后者可以传参
1.8.2、事件修饰符
prevent:阻止默认事件常用stop:阻止事件冒泡常用once:事件只触发一次(常用)capture:使用事件捕获(执行顺序是有外部到内部 P31页)self: 只有event.target是当前操作的元素时才触发事件简单理解只触发自己本身的元素passive: 事件的默认行为为立即执行函数
技巧修饰符可以连续写 click.prevent.stop“show”
1.8.3、键盘事件
script src/scriptbodydiv idrootinput typetext keydow.entershow/divbodyconst vm new Vue({el: #root,methods: {show(e) {console.log(e.target.value)}}})/body
/body总结
键盘上的每个按键都有自己的名称和编码例如Enter13。而Vue还对一些常用按键起了别名方便使用
Vue中常用的按键名
回车enter删除delete退出src换行 tab必须结合keydown使用上up下down左left右right
注意
系统修饰符ctrl shifr alt 配合keyup使用按下修饰键的同时再按下其他键随后释放其他键事件才被触发配合keydown使用正常触发事件 Vue.config.keyCodes.自定义键名 键码可以自定义键别名
1.9、计算属性
script src/scriptbodydiv idroot姓input typetext v-modelfirstNamebr名 input tyeptext v-modellastNamebr姓名span{{fullName}}/span/divscriptconst vm new Vue({el: #root,data: {firstName: 张lastName: 三},computed: {fullName: {get() {return this.firstName - lastName}set(vaule) {const arr value.split(-),this.firstName arr[0];this.lastName arr[1]}}}})/script
/body总结
计算属性 定义要用的属性不存在需要计算的来原理Object.defineProperty()get函数(重要) 当初读取时会执行一次依赖数据改变时会再次调用 备注 计算属性最后会出现在vm上如果计算属性要被修改那必须写set函数去响应修改且set中要引起计算时依赖的数据发送改变如果计算属性不发生修改简写形式为
scriptnew Vue({el: #root,data: {firstName: 张lastName: 三},computed: {fullName() [return this.firstName - this.lastName]}})
/script1.10、监视属性
1.10.1、监视属性的基本用法
bodydiv idrooth2今天天气好{{info}}/h2button clickchangeWeather点击切换天气/button/divscriptnew Vue({el: #root,data: {isHot: true,},computed: {info() {return this.isHot ? 炎热 凉爽}}methods: {changeWeather() {this.isHot !this.isHot}},watch: {isHot: {immdiate: true, //初始化时让handler调用一下//当isHot改变时会调用handler(newVaule,oldValue) {console.log(newValue,oldValue)}} }})/script
/body总结
当监视的属性被变化时回调函数自动调用进行相关操作监视的属性必须存在才能进行监视两种写法 同上同下
vm.$watch(isHot,{immediate:true,handler(newValue,oldValue){console.log(isHot被修改了,newValue,oldValue)}
})
1.10.2、深度监视
深度监视 Vue中的watch默认不监视对象内部的值改变deep: true
bodydiv idrooth3a的值为:{{number.a}}/h3--简单的代码可以这样操作/--button clicknumber.a点我a加 1 /buttonh3b的值为{{number.b}}/h3button clicknumber.b点我b加 1/button/divscriptconst vm new Vue({el: #root,data: {number: {a:1,b:2,}},watch: {number: {deep: true,handler() {console.log(number改变了)}}}})/script
/body1.10.4、监听属性 vs 计算属性
computed和watch之间的区别 computed可以完成的东西watch都可以完成但是watch可以完成的东西computed不一定能完成如watch可以进行异步操作 两个重要原则 所有被Vue管理的函数最好写出普通函数不被Vue管理的函数最好写出箭头函数如计算器
使用计算属性
bodydiv idroot姓input typetext v-modelfirstName名input typetext v-modellastName 姓名{{fullname}}/divscriptconst vm new Vue({el: #root,data: {firstName 张,lastName 三},conputed: {fullName: {get() {return this.firstName this.lastName;}set(value) {let arr fullName.split(-);this.firstName arr[0];this.lastName arr[1];}}},})/script
/body使用监视属性
scriptnew Vue({el: #root,data: {firstName: 张,lastName: 三fullName: 张-三},watch: {firstName: {handler(val) {setTimeout((){this.fullName val - lastName;},1000)},lastName: {handler(val) {this.fullName this.firstName - val;}}}}})
/script1.11、绑定样式
写法
bodydiv idroot绑定class样式--字符串写法通用于类名不确定需要动态指定div classbasic :classmood clickchangeMood/divbr绑定class样式--数组写法适用于要绑定的样式个数不确定div classbasic :classclassArr/divbr绑定class样式---对象写法适用于要绑定的样式个数不确定、名字确定div classbasic :classclassObj/divbr绑定style样式--对象写法 div classbasic :stylestyleObj/divbr绑定style样式--数组写法 div classbasic :stylestyleArr/divbr/div
/body总结 class样式 写法classxxxxxx可以是字符串、对象、数组字符串写法适用于类名不确定要动态获取对象写法适用于要绑定多个样式个数不确定名字也不确定数组写法适用于要绑定多个样式个数确定名字也确定但不确定用不用 style样式 :style{fontSize: xxx}其中xxx是动态值:style[a,b]其中a、b是样式对象
1.12、条件渲染
v-if 写法 v-ifv-else-ifv-else v-show: 写法 v-show“表达式”
bodydiv idrooth2 v-showtruehello/h2div v-if21/div brdiv v-else-if31/div brdiv v-else/div /div
/body1.13、列表渲染
1.13.1、基本列表
v-for
bodydiv idrooth2人员列表遍历数组/h2ulli v-for(p,index) in persons :keyindex{{p.name}}-{{p.age}}/li/ulh2汽车信息遍历对象/h2ulli v-for(value,k) in car :keyk{{k}}-{{value}}/li/ulh2遍历字符串/h2ulli v-for(char,index) in str :keyindex{{char}}-{{index}}/li/ulh2遍历指定次数/h2ulli v-for(number,index) in 5 :keyindex{{index}}-{{number}}/li/ul/divscript typetext/javascriptVue.config.productionTip falsenew Vue({el:#root,data:{persons:[{id:001,name:张三,age:18},{id:002,name:李四,age:19},{id:003,name:王五,age:20}],car:{name:奥迪A8,price:70万,color:黑色},str:hello}})/script/body
/html
总结:
v-for指令
用于展示列表数据语法key既可以是index也可以是遍历数组的唯一标识可遍历数组、对象、字符串、指定次数
1.13.2、key的作用与原理 bodydiv idrooth2人员列表/h2button click.onceadd添加老刘/buttonulli v-for(p,index) in persons :keyindex{{p.name}} - {{p.age}}input typetext/li/ul/divscript typetext/javascriptVue.config.productionTip falsenew Vue({el:#root,data:{persons:[{id:001,name:张三,age:18},{id:002,name:李四,age:19},{id:003,name:王五,age:20}]},methods: {add(){const p {id:004,name:老刘,age:40}this.persons.unshift(p)}},})/script
/html
1.13.3、列表过滤
bodydiv idrooth2人员列表/h2input typetext v-modelkeyWordulli v-for(p,index) of filPersons :keyindex/li{{p.name}} - {{p.age}} - {{p.sex}}/ul/divscriptnew Vue({el: #root,data: {keyWord: ,persons: [{id:001,name:马冬梅,age:19,sex:女},{id:002,name:周冬雨,age:20,sex:女},{id:003,name:周杰伦,age:21,sex:男},{id:004,name:温兆伦,age:22,sex:男}]},computed: {filPersons() {return this.person.filter((p) {return p.name.indexOf(this.keyWord) ! -1;}}}})/script
/body注意在Vue修改数组请用下面方法
使用这些API**push() \ pop() \ shift() \ splice() \ sort() \ reserse() **这些才会更新用[]不会但是vue3可以
1.15、过滤器
定义对要显示的数据进行特定格式化处理后再显示语法 注册过滤器Vue.filter(name,callback) 或 new Vue{filters:{}}使用过滤器{{ xxx | 过滤器名}} 或 v-bind:属性 xxx | 过滤器名
具体使用请看视频
1.16、内置指令
v-model双向数据绑定v-on监听事件v-bind单项数据绑定v-text插入文本内容v-html插入包含html的文本内容v-for列表渲染v-if条件渲染v-show显示隐藏
v-text:
v-text会替换掉节点中的内容但是{{xx}}则不会
v-html有安全隐患
v-html会替换掉节点中所有的内容但是{{xx}}则不会v-html可以识别html结构
v-clock指令
没有值{{name}}配合css解决配速慢的问题一个特殊值Vue实例创建完毕后会删掉v-clock
v-once指令
v-所在节点在初次渲染后就视为静态内容
div idrooth2 v-oncen的值为{{n}}/h2h2n现在的值为{{n}}/h2button clickn点我n1/button
/divv-pre 可利用它跳过没有使用指令语法、没有使用插值语法的节点会加快编译 Vue其实很简单
1.17、自定义指令 局部指令 scriptnew Vue({directives: {指令名配置对象}})
/scriptscriptnew Vue({directives: {指令名回调函数}})
/script全部指令 Vue.directive(指令名,配置对象)Vue.directive(指令名回调函数)
scriptVue.directive(find{//指令与元素一上来就绑定成功bind(element,binding){element.value bind.value},//指令所在元素被插入页面时inserted(element,binding){element.focus()}//指令所在的模板被重新加载时update(element,binding) {element.value binding.value}})
/script配置对象中常用的3个回调函数 bind(element,binding)指令与元素成功绑定时调用inserted(element,binding)指令所在元素被插入页面时调用update(element,binding)指令所在模板结构被重新解析时调用 注意 指令名如果是多个单词要使用kebab-case命名方式不要用camelCase命名
1.18、生命周期 总结
常用生命周期钩子
mounted发送ajax请求、启动定时器、绑定自定义事件、订阅消息等初始化操作beforeDestroy清除定时器、解绑自定义事件、取消订阅消息等收尾工作
