有哪些网站可以做ppt,wordpress的企业网站,小程序注册量,一个数据库怎么做二个网站目录 Vue核心初识VueVue模板语法数据绑定el与data的两种写法MVVM模型数据代理Object.defineProperty方法何为数据代理Vue中的数据代理 事件处理事件的基本使用事件修饰符键盘事件 计算属性姓名案例_插值语法实现姓名案例_methods实现姓名案例_计算属性实现姓名案例_计算属性简写… 目录 Vue核心初识VueVue模板语法数据绑定el与data的两种写法MVVM模型数据代理Object.defineProperty方法何为数据代理Vue中的数据代理 事件处理事件的基本使用事件修饰符键盘事件 计算属性姓名案例_插值语法实现姓名案例_methods实现姓名案例_计算属性实现姓名案例_计算属性简写 监视属性天气案例天气案例_监视属性天气案例_深度监视天气案例_监视属性_简写姓名案例_watch实现 绑定样式条件渲染列表渲染基本列表key的原理列表过滤列表排序更新时的一个问题Vue监测数据改变的原理模拟一个数据监测Vue.set的使用Vue监测数据改变的原理_数组总结数据监视 收集表单数据过滤器内置指令v-text指令v-html指令v-cloak指令v-once指令v-pre指令 自定义指令自定义指令回顾一个DOM操作 生命周期引出生命周期分析生命周期总结生命周期 hello各位小伙伴们前段时间学习了尚硅谷提供的Vue框架视频真心感觉挺不错的。并记了相应的学习笔记包括Vue2以及Vue3,接下来的几篇文章就会发布这一系列的内容今天是第一篇也是Vue2学习的第一章Vue核心知识。文章可以会代码的部分多于文字的部分因为我觉得有相应的实际操作可以更加能够理解对应的知识单纯的文字叠加可以会比较难理解。 Vue核心
初识Vue
1.想让Vue工作就必须创建一个Vue实例且要传入一个配置对象
2.root容器里的代码依然符合html规范只不过混入了一些特殊的Vue语法
3.root容器里的代码被称为【Vue模板】
4.Vue实例和容器是一一对应的
5.真实开发中只有一个Vue实例并且会配合着组件一起使用
6.{{xxx}}中的xxx要写js表达式且xxx可以自动读取到data中的所有属性
7.一旦data中的数据发生改变那么页面中用到该数据的地方也会自动更新
注意区分js表达式 和 js代码(语句)
1.表达式一个表达式会产生一个值可以放在任何一个需要值的地方 (1). a (2). ab (3). demo(1) (4). x y ? ‘a’ : ‘b’
2.js代码(语句) (1). if(){} (2). for(){}
!DOCTYPE html
htmlheadmeta charsetUTF-8 /title初识Vue/title!-- 引入Vue --script typetext/javascript src../js/vue.js/script/headbody!-- 准备好一个容器 --div iddemoh1Hello{{name.toUpperCase()}}{{address}}/h1/divscript typetext/javascript Vue.config.productionTip false //阻止 vue 在启动时生成生产提示。//创建Vue实例new Vue({el:#demo, //el用于指定当前Vue实例为哪个容器服务值通常为css选择器字符串。data:{ //data中用于存储数据数据供el所指定的容器去使用值我们暂时先写成一个对象。name:atguigu,address:北京}})/script/body
/htmlVue模板语法
Vue模板语法有2大类
1.插值语法
功能用于解析标签体内容。
写法{{xxx}}xxx是js表达式且可以直接读取到data中的所有属性。
2.指令语法
功能用于解析标签包括标签属性、标签体内容、绑定事件…。
举例v-bind:href“xxx” 或 简写为 :href“xxx”xxx同样要写js表达式
且可以直接读取到data中的所有属性。
备注Vue中有很多的指令且形式都是v-???此处我们只是拿v-bind举个例子。
!DOCTYPE html
htmlheadmeta charsetUTF-8 /title模板语法/title!-- 引入Vue --script typetext/javascript src../js/vue.js/script/headbody!-- 准备好一个容器--div idrooth1插值语法/h1h3你好{{name}}/h3hr/h1指令语法/h1a v-bind:hrefschool.url.toUpperCase() xhello点我去{{school.name}}学习1/aa :hrefschool.url xhello点我去{{school.name}}学习2/a/div/bodyscript typetext/javascriptVue.config.productionTip false //阻止 vue 在启动时生成生产提示。new Vue({el:#root,data:{name:jack,school:{name:尚硅谷,url:http://www.atguigu.com,}}})/script
/html数据绑定
Vue中有2种数据绑定的方式
1.单向绑定(v-bind)数据只能从data流向页面。
2.双向绑定(v-model)数据不仅能从data流向页面还可以从页面流向data。
备注
1.双向绑定一般都应用在表单类元素上如input、select等
2.v-model:value 可以简写为 v-model因为v-model默认收集的就是value值。
!DOCTYPE html
htmlheadmeta charsetUTF-8 /title数据绑定/title!-- 引入Vue --script typetext/javascript src../js/vue.js/script/headbody!-- 准备好一个容器--div idroot!-- 普通写法 --!-- 单向数据绑定input typetext v-bind:valuenamebr/双向数据绑定input typetext v-model:valuenamebr/ --!-- 简写 --单向数据绑定input typetext :valuenamebr/双向数据绑定input typetext v-modelnamebr/!-- 如下代码是错误的因为v-model只能应用在表单类元素输入类元素上 --!-- h2 v-model:xname你好啊/h2 --/div/bodyscript typetext/javascriptVue.config.productionTip false //阻止 vue 在启动时生成生产提示。new Vue({el:#root,data:{name:尚硅谷}})/script
/htmlel与data的两种写法
data与el的2种写法
1.el有2种写法
(1).new Vue时候配置el属性。
(2).先创建Vue实例随后再通过vm.$mount(‘#root’)指定el的值。
2.data有2种写法
(1).对象式
(2).函数式
如何选择目前哪种写法都可以以后学习到组件时data必须使用函数式否则会报错。
3.一个重要的原则
由Vue管理的函数一定不要写箭头函数一旦写了箭头函数this就不再是Vue实例了。
!DOCTYPE html
htmlheadmeta charsetUTF-8 /titleel与data的两种写法/title!-- 引入Vue --script typetext/javascript src../js/vue.js/script/headbody!-- 准备好一个容器--div idrooth1你好{{name}}/h1/div/bodyscript typetext/javascriptVue.config.productionTip false //阻止 vue 在启动时生成生产提示。//el的两种写法/* const v new Vue({//el:#root, //第一种写法data:{name:尚硅谷}})console.log(v)v.$mount(#root) //第二种写法 *///data的两种写法new Vue({el:#root,//data的第一种写法对象式/* data:{name:尚硅谷} *///data的第二种写法函数式data(){console.log(,this) //此处的this是Vue实例对象return{name:尚硅谷}}})/script
/htmlMVVM模型
M模型(Model) data中的数据V视图(View) 模板代码VM视图模型(ViewModel)Vue实例
观察发现
1.data中所有的属性最后都出现在了vm身上。
2.vm身上所有的属性 及 Vue原型上所有属性在Vue模板中都可以直接使用。
!DOCTYPE html
htmlheadmeta charsetUTF-8 /title理解MVVM/title!-- 引入Vue --script typetext/javascript src../js/vue.js/script/headbody!-- 准备好一个容器--div idrooth1学校名称{{name}}/h1h1学校地址{{address}}/h1!-- h1测试一下1{{11}}/h1h1测试一下2{{$options}}/h1h1测试一下3{{$emit}}/h1h1测试一下4{{_c}}/h1 --/div/bodyscript typetext/javascriptVue.config.productionTip false //阻止 vue 在启动时生成生产提示。const vm new Vue({el:#root,data:{name:尚硅谷,address:北京,}})console.log(vm)/script
/html数据代理
Object.defineProperty方法
!DOCTYPE html
htmlheadmeta charsetUTF-8 /title回顾Object.defineproperty方法/title/headbodyscript typetext/javascript let number 18let person {name:张三,sex:男,}Object.defineProperty(person,age,{// value:18,// enumerable:true, //控制属性是否可以枚举默认值是false// writable:true, //控制属性是否可以被修改默认值是false// configurable:true //控制属性是否可以被删除默认值是false//当有人读取person的age属性时get函数(getter)就会被调用且返回值就是age的值get(){console.log(有人读取age属性了)return number},//当有人修改person的age属性时set函数(setter)就会被调用且会收到修改的具体值set(value){console.log(有人修改了age属性且值是,value)number value}})// console.log(Object.keys(person))console.log(person)/script/body
/html何为数据代理
!DOCTYPE html
htmlheadmeta charsetUTF-8 /title何为数据代理/title/headbody!-- 数据代理通过一个对象代理对另一个对象中属性的操作读/写--script typetext/javascript let obj {x:100}let obj2 {y:200}Object.defineProperty(obj2,x,{get(){return obj.x},set(value){obj.x value}})/script/body
/htmlVue中的数据代理
1.Vue中的数据代理
通过vm对象来代理data对象中属性的操作读/写
2.Vue中数据代理的好处
更加方便的操作data中的数据
3.基本原理
通过Object.defineProperty()把data对象中所有属性添加到vm上。
为每一个添加到vm上的属性都指定一个getter/setter。
在getter/setter内部去操作读/写data中对应的属性。
!DOCTYPE html
htmlheadmeta charsetUTF-8 /titleVue中的数据代理/title!-- 引入Vue --script typetext/javascript src../js/vue.js/script/headbody!-- 准备好一个容器--div idrooth2学校名称{{name}}/h2h2学校地址{{address}}/h2/div/bodyscript typetext/javascriptVue.config.productionTip false //阻止 vue 在启动时生成生产提示。const vm new Vue({el:#root,data:{name:尚硅谷,address:宏福科技园}})/script
/html事件处理
事件的基本使用
1.使用v-on:xxx 或 xxx 绑定事件其中xxx是事件名
2.事件的回调需要配置在methods对象中最终会在vm上
3.methods中配置的函数不要用箭头函数否则this就不是vm了
4.methods中配置的函数都是被Vue所管理的函数this的指向是vm 或 组件实例对象
5.click“demo” 和 click“demo($event)” 效果一致但后者可以传参
!DOCTYPE html
htmlheadmeta charsetUTF-8 /title事件的基本使用/title!-- 引入Vue --script typetext/javascript src../js/vue.js/script/headbody!-- 准备好一个容器--div idrooth2欢迎来到{{name}}学习/h2!-- button v-on:clickshowInfo点我提示信息/button --button clickshowInfo1点我提示信息1不传参/buttonbutton clickshowInfo2($event,66)点我提示信息2传参/button/div/bodyscript typetext/javascriptVue.config.productionTip false //阻止 vue 在启动时生成生产提示。const vm new Vue({el:#root,data:{name:尚硅谷,},methods:{showInfo1(event){// console.log(event.target.innerText)// console.log(this) //此处的this是vmalert(同学你好)},showInfo2(event,number){console.log(event,number)// console.log(event.target.innerText)// console.log(this) //此处的this是vmalert(同学你好)}}})/script
/html事件修饰符
Vue中的事件修饰符
1.prevent阻止默认事件常用
2.stop阻止事件冒泡常用
3.once事件只触发一次常用
4.capture使用事件的捕获模式
5.self只有event.target是当前操作的元素时才触发事件
6.passive事件的默认行为立即执行无需等待事件回调执行完毕
!DOCTYPE html
htmlheadmeta charsetUTF-8 /title事件修饰符/title!-- 引入Vue --script typetext/javascript src../js/vue.js/scriptstyle*{margin-top: 20px;}.demo1{height: 50px;background-color: skyblue;}.box1{padding: 5px;background-color: skyblue;}.box2{padding: 5px;background-color: orange;}.list{width: 200px;height: 200px;background-color: peru;overflow: auto;}li{height: 100px;}/style/headbody!-- 准备好一个容器--div idrooth2欢迎来到{{name}}学习/h2!-- 阻止默认事件常用 --a hrefhttp://www.atguigu.com click.preventshowInfo点我提示信息/a!-- 阻止事件冒泡常用 --div classdemo1 clickshowInfobutton click.stopshowInfo点我提示信息/button!-- 修饰符可以连续写 --!-- a hrefhttp://www.atguigu.com click.prevent.stopshowInfo点我提示信息/a --/div!-- 事件只触发一次常用 --button click.onceshowInfo点我提示信息/button!-- 使用事件的捕获模式 --div classbox1 click.captureshowMsg(1)div1div classbox2 clickshowMsg(2)div2/div/div!-- 只有event.target是当前操作的元素时才触发事件 --div classdemo1 click.selfshowInfobutton clickshowInfo点我提示信息/button/div!-- 事件的默认行为立即执行无需等待事件回调执行完毕 --ul wheel.passivedemo classlistli1/lili2/lili3/lili4/li/ul/div/bodyscript typetext/javascriptVue.config.productionTip false //阻止 vue 在启动时生成生产提示。new Vue({el:#root,data:{name:尚硅谷},methods:{showInfo(e){alert(同学你好)// console.log(e.target)},showMsg(msg){console.log(msg)},demo(){for (let i 0; i 100000; i) {console.log(#)}console.log(累坏了)}}})/script
/html键盘事件
1.Vue中常用的按键别名
回车 enter
删除 delete (捕获“删除”和“退格”键)
退出 esc
空格 space
换行 tab (特殊必须配合keydown去使用)
上 up
下 down
左 left
右 right
2.Vue未提供别名的按键可以使用按键原始的key值去绑定但注意要转为kebab-case短横线命名
3.系统饰键用法特殊ctrl、alt、shift、meta
(1).配合keyup使用按下修饰键的同时再按下其他键随后释放其他键事件才被触发。
(2).配合keydown使用正常触发事件。
4.也可以使用keyCode去指定具体的按键不推荐
5.Vue.config.keyCodes.自定义键名 键码可以去定制按键别名
!DOCTYPE html
htmlheadmeta charsetUTF-8 /title键盘事件/title!-- 引入Vue --script typetext/javascript src../js/vue.js/script/headbody!-- 准备好一个容器--div idrooth2欢迎来到{{name}}学习/h2input typetext placeholder按下回车提示输入 keydown.huicheshowInfo/div/bodyscript typetext/javascriptVue.config.productionTip false //阻止 vue 在启动时生成生产提示。Vue.config.keyCodes.huiche 13 //定义了一个别名按键new Vue({el:#root,data:{name:尚硅谷},methods: {showInfo(e){// console.log(e.key,e.keyCode)console.log(e.target.value)}},})/script
/html计算属性
姓名案例_插值语法实现
!DOCTYPE html
htmlheadmeta charsetUTF-8 /title姓名案例_插值语法实现/title!-- 引入Vue --script typetext/javascript src../js/vue.js/script/headbody!-- 准备好一个容器--div idroot姓input typetext v-modelfirstName br/br/名input typetext v-modellastName br/br/全名span{{firstName}}-{{lastName}}/span/div/bodyscript typetext/javascriptVue.config.productionTip false //阻止 vue 在启动时生成生产提示。new Vue({el:#root,data:{firstName:张,lastName:三}})/script
/html姓名案例_methods实现
!DOCTYPE html
htmlheadmeta charsetUTF-8 /title姓名案例_methods实现/title!-- 引入Vue --script typetext/javascript src../js/vue.js/script/headbody!-- 准备好一个容器--div idroot姓input typetext v-modelfirstName br/br/名input typetext v-modellastName br/br/全名span{{fullName()}}/span/div/bodyscript typetext/javascriptVue.config.productionTip false //阻止 vue 在启动时生成生产提示。new Vue({el:#root,data:{firstName:张,lastName:三},methods: {fullName(){console.log(---fullName)return this.firstName - this.lastName}},})/script
/html姓名案例_计算属性实现
计算属性
1.定义要用的属性不存在要通过已有属性计算得来。
2.原理底层借助了Objcet.defineproperty方法提供的getter和setter。
3.get函数什么时候执行
(1).初次读取时会执行一次。
(2).当依赖的数据发生改变时会被再次调用。
4.优势与methods实现相比内部有缓存机制复用效率更高调试方便。
5.备注
1.计算属性最终会出现在vm上直接读取使用即可。
2.如果计算属性要被修改那必须写set函数去响应修改且set中要引起计算时依赖的数据发生改变。
!DOCTYPE html
htmlheadmeta charsetUTF-8 /title姓名案例_计算属性实现/title!-- 引入Vue --script typetext/javascript src../js/vue.js/script/headbody!-- 准备好一个容器--div idroot姓input typetext v-modelfirstName br/br/名input typetext v-modellastName br/br/测试input typetext v-modelx br/br/全名span{{fullName}}/span br/br/!-- 全名span{{fullName}}/span br/br/全名span{{fullName}}/span br/br/全名span{{fullName}}/span --/div/bodyscript typetext/javascriptVue.config.productionTip false //阻止 vue 在启动时生成生产提示。const vm new Vue({el:#root,data:{firstName:张,lastName:三,x:你好},methods: {demo(){}},computed:{fullName:{//get有什么作用当有人读取fullName时get就会被调用且返回值就作为fullName的值//get什么时候调用1.初次读取fullName时。2.所依赖的数据发生变化时。get(){console.log(get被调用了)// console.log(this) //此处的this是vmreturn this.firstName - this.lastName},//set什么时候调用? 当fullName被修改时。set(value){console.log(set,value)const arr value.split(-)this.firstName arr[0]this.lastName arr[1]}}}})/script
/html姓名案例_计算属性简写
!DOCTYPE html
htmlheadmeta charsetUTF-8 /title姓名案例_计算属性实现/title!-- 引入Vue --script typetext/javascript src../js/vue.js/script/headbody!-- 准备好一个容器--div idroot姓input typetext v-modelfirstName br/br/名input typetext v-modellastName br/br/全名span{{fullName}}/span br/br//div/bodyscript typetext/javascriptVue.config.productionTip false //阻止 vue 在启动时生成生产提示。const vm new Vue({el:#root,data:{firstName:张,lastName:三,},computed:{//完整写法/* fullName:{get(){console.log(get被调用了)return this.firstName - this.lastName},set(value){console.log(set,value)const arr value.split(-)this.firstName arr[0]this.lastName arr[1]}} *///简写fullName(){console.log(get被调用了)return this.firstName - this.lastName}}})/script
/html监视属性
天气案例
!DOCTYPE html
htmlheadmeta charsetUTF-8 /title天气案例/title!-- 引入Vue --script typetext/javascript src../js/vue.js/script/headbody!-- 准备好一个容器--div idrooth2今天天气很{{info}}/h2!-- 绑定事件的时候xxxyyy yyy可以写一些简单的语句 --!-- button clickisHot !isHot切换天气/button --button clickchangeWeather切换天气/button/div/bodyscript typetext/javascriptVue.config.productionTip false //阻止 vue 在启动时生成生产提示。const vm new Vue({el:#root,data:{isHot:true,},computed:{info(){return this.isHot ? 炎热 : 凉爽}},methods: {changeWeather(){this.isHot !this.isHot}},})/script
/html天气案例_监视属性
监视属性watch
1.当被监视的属性变化时, 回调函数自动调用, 进行相关操作
2.监视的属性必须存在才能进行监视
3.监视的两种写法
(1).new Vue时传入watch配置
(2).通过vm.$watch监视
!DOCTYPE html
htmlheadmeta charsetUTF-8 /title天气案例_监视属性/title!-- 引入Vue --script typetext/javascript src../js/vue.js/script/headbody!-- 准备好一个容器--div idrooth2今天天气很{{info}}/h2button clickchangeWeather切换天气/button/div/bodyscript typetext/javascriptVue.config.productionTip false //阻止 vue 在启动时生成生产提示。const vm new Vue({el:#root,data:{isHot:true,},computed:{info(){return this.isHot ? 炎热 : 凉爽}},methods: {changeWeather(){this.isHot !this.isHot}},/* watch:{isHot:{immediate:true, //初始化时让handler调用一下//handler什么时候调用当isHot发生改变时。handler(newValue,oldValue){console.log(isHot被修改了,newValue,oldValue)}}} */})vm.$watch(isHot,{immediate:true, //初始化时让handler调用一下//handler什么时候调用当isHot发生改变时。handler(newValue,oldValue){console.log(isHot被修改了,newValue,oldValue)}})/script
/html天气案例_深度监视
深度监视
(1).Vue中的watch默认不监测对象内部值的改变一层。
(2).配置deep:true可以监测对象内部值改变多层。
备注
(1).Vue自身可以监测对象内部值的改变但Vue提供的watch默认不可以
(2).使用watch时根据数据的具体结构决定是否采用深度监视。
!DOCTYPE html
htmlheadmeta charsetUTF-8 /title天气案例_深度监视/title!-- 引入Vue --script typetext/javascript src../js/vue.js/script/headbody!-- 准备好一个容器--div idrooth2今天天气很{{info}}/h2button clickchangeWeather切换天气/buttonhr/h3a的值是:{{numbers.a}}/h3button clicknumbers.a点我让a1/buttonh3b的值是:{{numbers.b}}/h3button clicknumbers.b点我让b1/buttonbutton clicknumbers {a:666,b:888}彻底替换掉numbers/button{{numbers.c.d.e}}/div/bodyscript typetext/javascriptVue.config.productionTip false //阻止 vue 在启动时生成生产提示。const vm new Vue({el:#root,data:{isHot:true,numbers:{a:1,b:1,c:{d:{e:100}}}},computed:{info(){return this.isHot ? 炎热 : 凉爽}},methods: {changeWeather(){this.isHot !this.isHot}},watch:{isHot:{// immediate:true, //初始化时让handler调用一下//handler什么时候调用当isHot发生改变时。handler(newValue,oldValue){console.log(isHot被修改了,newValue,oldValue)}},//监视多级结构中某个属性的变化/* numbers.a:{handler(){console.log(a被改变了)}} *///监视多级结构中所有属性的变化numbers:{deep:true,handler(){console.log(numbers改变了)}}}})/script
/html天气案例_监视属性_简写
!DOCTYPE html
htmlheadmeta charsetUTF-8 /title天气案例_监视属性_简写/title!-- 引入Vue --script typetext/javascript src../js/vue.js/script/headbody!-- 准备好一个容器--div idrooth2今天天气很{{info}}/h2button clickchangeWeather切换天气/button/div/bodyscript typetext/javascriptVue.config.productionTip false //阻止 vue 在启动时生成生产提示。const vm new Vue({el:#root,data:{isHot:true,},computed:{info(){return this.isHot ? 炎热 : 凉爽}},methods: {changeWeather(){this.isHot !this.isHot}},watch:{//正常写法/* isHot:{// immediate:true, //初始化时让handler调用一下// deep:true,//深度监视handler(newValue,oldValue){console.log(isHot被修改了,newValue,oldValue)}}, *///简写/* isHot(newValue,oldValue){console.log(isHot被修改了,newValue,oldValue,this)} */}})//正常写法/* vm.$watch(isHot,{immediate:true, //初始化时让handler调用一下deep:true,//深度监视handler(newValue,oldValue){console.log(isHot被修改了,newValue,oldValue)}}) *///简写/* vm.$watch(isHot,(newValue,oldValue){console.log(isHot被修改了,newValue,oldValue,this)}) *//script
/html姓名案例_watch实现
computed和watch之间的区别
1.computed能完成的功能watch都可以完成。
2.watch能完成的功能computed不一定能完成例如watch可以进行异步操作。
两个重要的小原则
1.所被Vue管理的函数最好写成普通函数这样this的指向才是vm 或 组件实例对象。
2.所有不被Vue所管理的函数定时器的回调函数、ajax的回调函数等、Promise的回调函数最好写成箭头函数
这样this的指向才是vm 或 组件实例对象。
!DOCTYPE html
htmlheadmeta charsetUTF-8 /title姓名案例_watch实现/title!-- 引入Vue --script typetext/javascript src../js/vue.js/script/headbody!-- 准备好一个容器--div idroot姓input typetext v-modelfirstName br/br/名input typetext v-modellastName br/br/全名span{{fullName}}/span br/br//div/bodyscript typetext/javascriptVue.config.productionTip false //阻止 vue 在启动时生成生产提示。const vm new Vue({el:#root,data:{firstName:张,lastName:三,fullName:张-三},watch:{firstName(val){setTimeout((){console.log(this)this.fullName val - this.lastName},1000);},lastName(val){this.fullName this.firstName - val}}})/script
/html绑定样式
class样式
写法:class“xxx” xxx可以是字符串、对象、数组。
字符串写法适用于类名不确定要动态获取。
对象写法适用于要绑定多个样式个数不确定名字也不确定。
数组写法适用于要绑定多个样式个数确定名字也确定但不确定用不用。
2. style样式
:style{fontSize: xxx}其中xxx是动态值。
:style[a,b]其中a、b是样式对象。
!DOCTYPE html
htmlheadmeta charsetUTF-8 /title绑定样式/titlestyle.basic{width: 400px;height: 100px;border: 1px solid black;}.happy{border: 4px solid red;;background-color: rgba(255, 255, 0, 0.644);background: linear-gradient(30deg,yellow,pink,orange,yellow);}.sad{border: 4px dashed rgb(2, 197, 2);background-color: gray;}.normal{background-color: skyblue;}.atguigu1{background-color: yellowgreen;}.atguigu2{font-size: 30px;text-shadow:2px 2px 10px red;}.atguigu3{border-radius: 20px;}/stylescript typetext/javascript src../js/vue.js/script/headbody!-- 准备好一个容器--div idroot!-- 绑定class样式--字符串写法适用于样式的类名不确定需要动态指定 --div classbasic :classmood clickchangeMood{{name}}/div br/br/!-- 绑定class样式--数组写法适用于要绑定的样式个数不确定、名字也不确定 --div classbasic :classclassArr{{name}}/div br/br/!-- 绑定class样式--对象写法适用于要绑定的样式个数确定、名字也确定但要动态决定用不用 --div classbasic :classclassObj{{name}}/div br/br/!-- 绑定style样式--对象写法 --div classbasic :stylestyleObj{{name}}/div br/br/!-- 绑定style样式--数组写法 --div classbasic :stylestyleArr{{name}}/div/div/bodyscript typetext/javascriptVue.config.productionTip falseconst vm new Vue({el:#root,data:{name:尚硅谷,mood:normal,classArr:[atguigu1,atguigu2,atguigu3],classObj:{atguigu1:false,atguigu2:false,},styleObj:{fontSize: 40px,color:red,},styleObj2:{backgroundColor:orange},styleArr:[{fontSize: 40px,color:blue,},{backgroundColor:gray}]},methods: {changeMood(){const arr [happy,sad,normal]const index Math.floor(Math.random()*3)this.mood arr[index]}},})/script/html条件渲染
1.v-if
写法
(1).v-if“表达式”
(2).v-else-if“表达式”
(3).v-else“表达式”
适用于切换频率较低的场景。
特点不展示的DOM元素直接被移除。
注意v-if可以和:v-else-if、v-else一起使用但要求结构不能被“打断”。
2.v-show
写法v-show“表达式”
适用于切换频率较高的场景。
特点不展示的DOM元素未被移除仅仅是使用样式隐藏掉
3.备注使用v-if的时元素可能无法获取到而使用v-show一定可以获取到。
!DOCTYPE html
htmlheadmeta charsetUTF-8 /title条件渲染/titlescript typetext/javascript src../js/vue.js/script/headbody!-- 准备好一个容器--div idrooth2当前的n值是:{{n}}/h2button clickn点我n1/button!-- 使用v-show做条件渲染 --!-- h2 v-showfalse欢迎来到{{name}}/h2 --!-- h2 v-show1 1欢迎来到{{name}}/h2 --!-- 使用v-if做条件渲染 --!-- h2 v-iffalse欢迎来到{{name}}/h2 --!-- h2 v-if1 1欢迎来到{{name}}/h2 --!-- v-else和v-else-if --!-- div v-ifn 1Angular/divdiv v-else-ifn 2React/divdiv v-else-ifn 3Vue/divdiv v-else哈哈/div --!-- v-if与template的配合使用 --template v-ifn 1h2你好/h2h2尚硅谷/h2h2北京/h2/template/div/bodyscript typetext/javascriptVue.config.productionTip falseconst vm new Vue({el:#root,data:{name:尚硅谷,n:0}})/script
/html列表渲染
基本列表
v-for指令:
1.用于展示列表数据
2.语法v-for“(item, index) in xxx” :key“yyy”
3.可遍历数组、对象、字符串用的很少、指定次数用的很少
!DOCTYPE html
htmlheadmeta charsetUTF-8 /title基本列表/titlescript typetext/javascript src../js/vue.js/script/headbody!-- 准备好一个容器--div idroot!-- 遍历数组 --h2人员列表遍历数组/h2ulli v-for(p,index) of persons :keyindex{{p.name}}-{{p.age}}/li/ul!-- 遍历对象 --h2汽车信息遍历对象/h2ulli v-for(value,k) of car :keyk{{k}}-{{value}}/li/ul!-- 遍历字符串 --h2测试遍历字符串用得少/h2ulli v-for(char,index) of str :keyindex{{char}}-{{index}}/li/ul!-- 遍历指定次数 --h2测试遍历指定次数用得少/h2ulli v-for(number,index) of 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
/htmlkey的原理
面试题react、vue中的key有什么作用key的内部原理
1.虚拟DOM中key的作用
key是虚拟DOM对象的标识当数据发生变化时Vue会根据【新数据】生成【新的虚拟DOM】,
随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较比较规则如下
2.对比规则
(1).旧虚拟DOM中找到了与新虚拟DOM相同的key
①.若虚拟DOM中内容没变, 直接使用之前的真实DOM
②.若虚拟DOM中内容变了, 则生成新的真实DOM随后替换掉页面中之前的真实DOM。
(2).旧虚拟DOM中未找到与新虚拟DOM相同的key
创建新的真实DOM随后渲染到到页面。
3. 用index作为key可能会引发的问题
1. 若对数据进行逆序添加、逆序删除等破坏顺序操作:
会产生没有必要的真实DOM更新 界面效果没问题, 但效率低。
2. 如果结构中还包含输入类的DOM
会产生错误DOM更新 界面有问题。
4. 开发中如何选择key?:
1.最好使用每条数据的唯一标识作为key, 比如id、手机号、身份证号、学号等唯一值。
2.如果不存在对数据的逆序添加、逆序删除等破坏顺序操作仅用于渲染列表用于展示
使用index作为key是没有问题的。
!DOCTYPE html
htmlheadmeta charsetUTF-8 /titlekey的原理/titlescript typetext/javascript src../js/vue.js/script/headbody!-- 准备好一个容器--div idroot!-- 遍历数组 --h2人员列表遍历数组/h2button click.onceadd添加一个老刘/buttonulli v-for(p,index) of 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列表过滤
!DOCTYPE html
htmlheadmeta charsetUTF-8 /title列表过滤/titlescript typetext/javascript src../js/vue.js/script/headbody!-- 准备好一个容器--div idrooth2人员列表/h2input typetext placeholder请输入名字 v-modelkeyWordulli v-for(p,index) of filPerons :keyindex{{p.name}}-{{p.age}}-{{p.sex}}/li/ul/divscript typetext/javascriptVue.config.productionTip false//用watch实现//#region /* new 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:男}],filPerons:[]},watch:{keyWord:{immediate:true,handler(val){this.filPerons this.persons.filter((p){return p.name.indexOf(val) ! -1})}}}}) *///#endregion//用computed实现new 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:{filPerons(){return this.persons.filter((p){return p.name.indexOf(this.keyWord) ! -1})}}}) /script
/html列表排序
!DOCTYPE html
htmlheadmeta charsetUTF-8 /title列表排序/titlescript typetext/javascript src../js/vue.js/script/headbody!-- 准备好一个容器--div idrooth2人员列表/h2input typetext placeholder请输入名字 v-modelkeyWordbutton clicksortType 2年龄升序/buttonbutton clicksortType 1年龄降序/buttonbutton clicksortType 0原顺序/buttonulli v-for(p,index) of filPerons :keyp.id{{p.name}}-{{p.age}}-{{p.sex}}input typetext/li/ul/divscript typetext/javascriptVue.config.productionTip falsenew Vue({el:#root,data:{keyWord:,sortType:0, //0原顺序 1降序 2升序persons:[{id:001,name:马冬梅,age:30,sex:女},{id:002,name:周冬雨,age:31,sex:女},{id:003,name:周杰伦,age:18,sex:男},{id:004,name:温兆伦,age:19,sex:男}]},computed:{filPerons(){const arr this.persons.filter((p){return p.name.indexOf(this.keyWord) ! -1})//判断一下是否需要排序if(this.sortType){arr.sort((p1,p2){return this.sortType 1 ? p2.age-p1.age : p1.age-p2.age})}return arr}}}) /script
/html更新时的一个问题
!DOCTYPE html
htmlheadmeta charsetUTF-8 /title更新时的一个问题/titlescript typetext/javascript src../js/vue.js/script/headbody!-- 准备好一个容器--div idrooth2人员列表/h2button clickupdateMei更新马冬梅的信息/buttonulli v-for(p,index) of persons :keyp.id{{p.name}}-{{p.age}}-{{p.sex}}/li/ul/divscript typetext/javascriptVue.config.productionTip falseconst vm new Vue({el:#root,data:{persons:[{id:001,name:马冬梅,age:30,sex:女},{id:002,name:周冬雨,age:31,sex:女},{id:003,name:周杰伦,age:18,sex:男},{id:004,name:温兆伦,age:19,sex:男}]},methods: {updateMei(){// this.persons[0].name 马老师 //奏效// this.persons[0].age 50 //奏效// this.persons[0].sex 男 //奏效// this.persons[0] {id:001,name:马老师,age:50,sex:男} //不奏效this.persons.splice(0,1,{id:001,name:马老师,age:50,sex:男})}}}) /script
/htmlVue监测数据改变的原理
!DOCTYPE html
htmlheadmeta charsetUTF-8 /titleVue监测数据改变的原理/title!-- 引入Vue --script typetext/javascript src../js/vue.js/script/headbody!-- 准备好一个容器--div idrooth2学校名称{{name}}/h2h2学校地址{{address}}/h2/div/bodyscript typetext/javascriptVue.config.productionTip false //阻止 vue 在启动时生成生产提示。const vm new Vue({el:#root,data:{name:尚硅谷,address:北京,student:{name:tom,age:{rAge:40,sAge:29,},friends:[{name:jerry,age:35}]}}})/script
/html模拟一个数据监测
!DOCTYPE html
htmlheadmeta charsetUTF-8 /titleDocument/title/headbodyscript typetext/javascript let data {name:尚硅谷,address:北京,}//创建一个监视的实例对象用于监视data中属性的变化const obs new Observer(data) console.log(obs) //准备一个vm实例对象let vm {}vm._data data obsfunction Observer(obj){//汇总对象中所有的属性形成一个数组const keys Object.keys(obj)//遍历keys.forEach((k){Object.defineProperty(this,k,{get(){return obj[k]},set(val){console.log(${k}被改了我要去解析模板生成虚拟DOM.....我要开始忙了)obj[k] val}})})}/script/body
/htmlVue.set的使用
!DOCTYPE html
htmlheadmeta charsetUTF-8 /titleVue监测数据改变的原理/title!-- 引入Vue --script typetext/javascript src../js/vue.js/script/headbody!-- 准备好一个容器--div idrooth1学校信息/h1h2学校名称{{school.name}}/h2h2学校地址{{school.address}}/h2h2校长是{{school.leader}}/h2hr/h1学生信息/h1button clickaddSex添加一个性别属性默认值是男/buttonh2姓名{{student.name}}/h2h2 v-ifstudent.sex性别{{student.sex}}/h2h2年龄真实{{student.age.rAge}}对外{{student.age.sAge}}/h2h2朋友们/h2ulli v-for(f,index) in student.friends :keyindex{{f.name}}--{{f.age}}/li/ul/div/bodyscript typetext/javascriptVue.config.productionTip false //阻止 vue 在启动时生成生产提示。const vm new Vue({el:#root,data:{school:{name:尚硅谷,address:北京,},student:{name:tom,age:{rAge:40,sAge:29,},friends:[{name:jerry,age:35},{name:tony,age:36}]}},methods: {addSex(){// Vue.set(this.student,sex,男)this.$set(this.student,sex,男)}}})/script
/htmlVue监测数据改变的原理_数组
!DOCTYPE html
htmlheadmeta charsetUTF-8 /titleVue监测数据改变的原理_数组/title!-- 引入Vue --script typetext/javascript src../js/vue.js/script/headbody!-- 准备好一个容器--div idrooth1学校信息/h1h2学校名称{{school.name}}/h2h2学校地址{{school.address}}/h2h2校长是{{school.leader}}/h2hr/h1学生信息/h1button clickaddSex添加一个性别属性默认值是男/buttonh2姓名{{student.name}}/h2h2 v-ifstudent.sex性别{{student.sex}}/h2h2年龄真实{{student.age.rAge}}对外{{student.age.sAge}}/h2h2爱好/h2ulli v-for(h,index) in student.hobby :keyindex{{h}}/li/ulh2朋友们/h2ulli v-for(f,index) in student.friends :keyindex{{f.name}}--{{f.age}}/li/ul/div/bodyscript typetext/javascriptVue.config.productionTip false //阻止 vue 在启动时生成生产提示。const vm new Vue({el:#root,data:{school:{name:尚硅谷,address:北京,},student:{name:tom,age:{rAge:40,sAge:29,},hobby:[抽烟,喝酒,烫头],friends:[{name:jerry,age:35},{name:tony,age:36}]}},methods: {addSex(){// Vue.set(this.student,sex,男)this.$set(this.student,sex,男)}}})/script
/html总结数据监视
Vue监视数据的原理 vue会监视data中所有层次的数据。 如何监测对象中的数据
通过setter实现监视且要在new Vue时就传入要监测的数据。
(1).对象中后追加的属性Vue默认不做响应式处理
(2).如需给后添加的属性做响应式请使用如下API
Vue.set(targetpropertyName/indexvalue) 或
vm.$set(targetpropertyName/indexvalue)
3. 如何监测数组中的数据
通过包裹数组更新元素的方法实现本质就是做了两件事
(1).调用原生对应的方法对数组进行更新。
(2).重新解析模板进而更新页面。
4.在Vue修改数组中的某个元素一定要用如下方法
1.使用这些API:push()、pop()、shift()、unshift()、splice()、sort()、reverse()
2.Vue.set() 或 vm.$set()
特别注意Vue.set() 和 vm.$set() 不能给vm 或 vm的根数据对象 添加属性
!DOCTYPE html
htmlheadmeta charsetUTF-8 /title总结数据监视/titlestylebutton{margin-top: 10px;}/style!-- 引入Vue --script typetext/javascript src../js/vue.js/script/headbody!-- 准备好一个容器--div idrooth1学生信息/h1button clickstudent.age年龄1岁/button br/button clickaddSex添加性别属性默认值男/button br/button clickstudent.sex 未知 修改性别/button br/button clickaddFriend在列表首位添加一个朋友/button br/button clickupdateFirstFriendName修改第一个朋友的名字为张三/button br/button clickaddHobby添加一个爱好/button br/button clickupdateHobby修改第一个爱好为开车/button br/button clickremoveSmoke过滤掉爱好中的抽烟/button br/h3姓名{{student.name}}/h3h3年龄{{student.age}}/h3h3 v-ifstudent.sex性别{{student.sex}}/h3h3爱好/h3ulli v-for(h,index) in student.hobby :keyindex{{h}}/li/ulh3朋友们/h3ulli v-for(f,index) in student.friends :keyindex{{f.name}}--{{f.age}}/li/ul/div/bodyscript typetext/javascriptVue.config.productionTip false //阻止 vue 在启动时生成生产提示。const vm new Vue({el:#root,data:{student:{name:tom,age:18,hobby:[抽烟,喝酒,烫头],friends:[{name:jerry,age:35},{name:tony,age:36}]}},methods: {addSex(){// Vue.set(this.student,sex,男)this.$set(this.student,sex,男)},addFriend(){this.student.friends.unshift({name:jack,age:70})},updateFirstFriendName(){this.student.friends[0].name 张三},addHobby(){this.student.hobby.push(学习)},updateHobby(){// this.student.hobby.splice(0,1,开车)// Vue.set(this.student.hobby,0,开车)this.$set(this.student.hobby,0,开车)},removeSmoke(){this.student.hobby this.student.hobby.filter((h){return h ! 抽烟})}}})/script
/html收集表单数据
若input typetext则v-model收集的是value值用户输入的就是value值。
若input typeradio/则v-model收集的是value值且要给标签配置value值。
若input typecheckbox/
1.没有配置input的value属性那么收集的就是checked勾选 or 未勾选是布尔值
2.配置input的value属性:
(1)v-model的初始值是非数组那么收集的就是checked勾选 or 未勾选是布尔值
(2)v-model的初始值是数组那么收集的的就是value组成的数组
备注v-model的三个修饰符
lazy失去焦点再收集数据
number输入字符串转为有效的数字
trim输入首尾空格过滤
!DOCTYPE html
htmlheadmeta charsetUTF-8 /title收集表单数据/titlescript typetext/javascript src../js/vue.js/script/headbody!-- 准备好一个容器--div idrootform submit.preventdemo账号input typetext v-model.trimuserInfo.account br/br/密码input typepassword v-modeluserInfo.password br/br/年龄input typenumber v-model.numberuserInfo.age br/br/性别男input typeradio namesex v-modeluserInfo.sex valuemale女input typeradio namesex v-modeluserInfo.sex valuefemale br/br/爱好学习input typecheckbox v-modeluserInfo.hobby valuestudy打游戏input typecheckbox v-modeluserInfo.hobby valuegame吃饭input typecheckbox v-modeluserInfo.hobby valueeatbr/br/所属校区select v-modeluserInfo.cityoption value请选择校区/optionoption valuebeijing北京/optionoption valueshanghai上海/optionoption valueshenzhen深圳/optionoption valuewuhan武汉/option/selectbr/br/其他信息textarea v-model.lazyuserInfo.other/textarea br/br/input typecheckbox v-modeluserInfo.agree阅读并接受a hrefhttp://www.atguigu.com《用户协议》/abutton提交/button/form/div/bodyscript typetext/javascriptVue.config.productionTip falsenew Vue({el:#root,data:{userInfo:{account:,password:,age:18,sex:female,hobby:[],city:beijing,other:,agree:}},methods: {demo(){console.log(JSON.stringify(this.userInfo))}}})/script
/html过滤器
定义对要显示的数据进行特定格式化后再显示适用于一些简单逻辑的处理。
语法
1.注册过滤器Vue.filter(name,callback) 或 new Vue{filters:{}}
2.使用过滤器{{ xxx | 过滤器名}} 或 v-bind:属性 “xxx | 过滤器名”
备注
1.过滤器也可以接收额外参数、多个过滤器也可以串联
2.并没有改变原本的数据, 是产生新的对应的数据
!DOCTYPE html
htmlheadmeta charsetUTF-8 /title过滤器/titlescript typetext/javascript src../js/vue.js/scriptscript typetext/javascript src../js/dayjs.min.js/script/headbody!-- 准备好一个容器--div idrooth2显示格式化后的时间/h2!-- 计算属性实现 --h3现在是{{fmtTime}}/h3!-- methods实现 --h3现在是{{getFmtTime()}}/h3!-- 过滤器实现 --h3现在是{{time | timeFormater}}/h3!-- 过滤器实现传参 --h3现在是{{time | timeFormater(YYYY_MM_DD) | mySlice}}/h3h3 :xmsg | mySlice尚硅谷/h3/divdiv idroot2h2{{msg | mySlice}}/h2/div/bodyscript typetext/javascriptVue.config.productionTip false//全局过滤器Vue.filter(mySlice,function(value){return value.slice(0,4)})new Vue({el:#root,data:{time:1621561377603, //时间戳msg:你好尚硅谷},computed: {fmtTime(){return dayjs(this.time).format(YYYY年MM月DD日 HH:mm:ss)}},methods: {getFmtTime(){return dayjs(this.time).format(YYYY年MM月DD日 HH:mm:ss)}},//局部过滤器filters:{timeFormater(value,strYYYY年MM月DD日 HH:mm:ss){// console.log(,value)return dayjs(value).format(str)}}})new Vue({el:#root2,data:{msg:hello,atguigu!}})/script
/html内置指令
v-text指令
我们学过的指令
v-bind : 单向绑定解析表达式, 可简写为 :xxx
v-model : 双向数据绑定
v-for : 遍历数组/对象/字符串
v-on : 绑定事件监听, 可简写为
v-if : 条件渲染动态控制节点是否存存在
v-else : 条件渲染动态控制节点是否存存在
v-show : 条件渲染 (动态控制节点是否展示)
v-text指令
1.作用向其所在的节点中渲染文本内容。
2.与插值语法的区别v-text会替换掉节点中的内容{{xx}}则不会。
!DOCTYPE html
htmlheadmeta charsetUTF-8 /titlev-text指令/title!-- 引入Vue --script typetext/javascript src../js/vue.js/script/headbody!-- 准备好一个容器--div idrootdiv你好{{name}}/divdiv v-textname/divdiv v-textstr/div/div/bodyscript typetext/javascriptVue.config.productionTip false //阻止 vue 在启动时生成生产提示。new Vue({el:#root,data:{name:尚硅谷,str:h3你好啊/h3}})/script
/htmlv-html指令
1.作用向指定节点中渲染包含html结构的内容。
2.与插值语法的区别
(1).v-html会替换掉节点中所有的内容{{xx}}则不会。
(2).v-html可以识别html结构。
3.严重注意v-html有安全性问题
(1).在网站上动态渲染任意HTML是非常危险的容易导致XSS攻击。
(2).一定要在可信的内容上使用v-html永不要用在用户提交的内容上
!DOCTYPE html
htmlheadmeta charsetUTF-8 /titlev-html指令/title!-- 引入Vue --script typetext/javascript src../js/vue.js/script/headbody!-- 准备好一个容器--div idrootdiv你好{{name}}/divdiv v-htmlstr/divdiv v-htmlstr2/div/div/bodyscript typetext/javascriptVue.config.productionTip false //阻止 vue 在启动时生成生产提示。new Vue({el:#root,data:{name:尚硅谷,str:h3你好啊/h3,str2:a hrefjavascript:location.hrefhttp://www.baidu.com?document.cookie兄弟我找到你想要的资源了快来/a,}})/script
/htmlv-cloak指令
v-cloak指令没有值
1.本质是一个特殊属性Vue实例创建完毕并接管容器后会删掉v-cloak属性。
2.使用css配合v-cloak可以解决网速慢时页面展示出{{xxx}}的问题。
!DOCTYPE html
htmlheadmeta charsetUTF-8 /titlev-cloak指令/titlestyle[v-cloak]{display:none;}/style!-- 引入Vue --/headbody!-- 准备好一个容器--div idrooth2 v-cloak{{name}}/h2/divscript typetext/javascript srchttp://localhost:8080/resource/5s/vue.js/script/bodyscript typetext/javascriptconsole.log(1)Vue.config.productionTip false //阻止 vue 在启动时生成生产提示。new Vue({el:#root,data:{name:尚硅谷}})/script
/htmlv-once指令
1.v-once所在节点在初次动态渲染后就视为静态内容了。
2.以后数据的改变不会引起v-once所在结构的更新可以用于优化性能。
!DOCTYPE html
htmlheadmeta charsetUTF-8 /titlev-once指令/title!-- 引入Vue --script typetext/javascript src../js/vue.js/script/headbody!-- 准备好一个容器--div idrooth2 v-once初始化的n值是:{{n}}/h2h2当前的n值是:{{n}}/h2button clickn点我n1/button/div/bodyscript typetext/javascriptVue.config.productionTip false //阻止 vue 在启动时生成生产提示。new Vue({el:#root,data:{n:1}})/script
/htmlv-pre指令
1.跳过其所在节点的编译过程。
2.可利用它跳过没有使用指令语法、没有使用插值语法的节点会加快编译。
!DOCTYPE html
htmlheadmeta charsetUTF-8 /titlev-pre指令/title!-- 引入Vue --script typetext/javascript src../js/vue.js/script/headbody!-- 准备好一个容器--div idrooth2 v-preVue其实很简单/h2h2 当前的n值是:{{n}}/h2button clickn点我n1/button/div/bodyscript typetext/javascriptVue.config.productionTip false //阻止 vue 在启动时生成生产提示。new Vue({el:#root,data:{n:1}})/script
/html自定义指令
自定义指令
需求1定义一个v-big指令和v-text功能类似但会把绑定的数值放大10倍。
需求2定义一个v-fbind指令和v-bind功能类似但可以让其所绑定的input元素默认获取焦点。
自定义指令总结
一、定义语法
(1).局部指令
new Vue({ new Vue({
directives:{指令名:配置对象} 或 directives{指令名:回调函数}
}) })
(2).全局指令
Vue.directive(指令名,配置对象) 或 Vue.directive(指令名,回调函数)
二、配置对象中常用的3个回调
(1).bind指令与元素成功绑定时调用。
(2).inserted指令所在元素被插入页面时调用。
(3).update指令所在模板结构被重新解析时调用。
三、备注
1.指令定义时不加v-但使用时要加v-
2.指令名如果是多个单词要使用kebab-case命名方式不要用camelCase命名。
!DOCTYPE html
htmlheadmeta charsetUTF-8 /title自定义指令/titlescript typetext/javascript src../js/vue.js/script/headbody!-- 准备好一个容器--div idrooth2{{name}}/h2h2当前的n值是span v-textn/span /h2!-- h2放大10倍后的n值是span v-big-numbern/span /h2 --h2放大10倍后的n值是span v-bign/span /h2button clickn点我n1/buttonhr/input typetext v-fbind:valuen/div/bodyscript typetext/javascriptVue.config.productionTip false//定义全局指令/* Vue.directive(fbind,{//指令与元素成功绑定时一上来bind(element,binding){element.value binding.value},//指令所在元素被插入页面时inserted(element,binding){element.focus()},//指令所在的模板被重新解析时update(element,binding){element.value binding.value}}) */new Vue({el:#root,data:{name:尚硅谷,n:1},directives:{//big函数何时会被调用1.指令与元素成功绑定时一上来。2.指令所在的模板被重新解析时。/* big-number(element,binding){// console.log(big)element.innerText binding.value * 10}, */big(element,binding){console.log(big,this) //注意此处的this是window// console.log(big)element.innerText binding.value * 10},fbind:{//指令与元素成功绑定时一上来bind(element,binding){element.value binding.value},//指令所在元素被插入页面时inserted(element,binding){element.focus()},//指令所在的模板被重新解析时update(element,binding){element.value binding.value}}}})/script
/html回顾一个DOM操作
!DOCTYPE html
htmlheadmeta charsetUTF-8 /titleDocument/titlestyle.demo{background-color: orange;}/style/headbodybutton idbtn点我创建一个输入框/buttonscript typetext/javascript const btn document.getElementById(btn)btn.onclick (){const input document.createElement(input)input.className demoinput.value 99input.onclick (){alert(1)}document.body.appendChild(input)input.focus()// input.parentElement.style.backgroundColor skyblueconsole.log(input.parentElement)}/script/body
/html生命周期
引出生命周期
1.又名生命周期回调函数、生命周期函数、生命周期钩子。
2.是什么Vue在关键时刻帮我们调用的一些特殊名称的函数。
3.生命周期函数的名字不可更改但函数的具体内容是程序员根据需求编写的。
4.生命周期函数中的this指向是vm 或 组件实例对象。
!DOCTYPE html
htmlheadmeta charsetUTF-8 /title引出生命周期/title!-- 引入Vue --script typetext/javascript src../js/vue.js/script/headbody!-- 准备好一个容器--div idrooth2 v-ifa你好啊/h2h2 :style{opacity}欢迎学习Vue/h2/div/bodyscript typetext/javascriptVue.config.productionTip false //阻止 vue 在启动时生成生产提示。new Vue({el:#root,data:{a:false,opacity:1},methods: {},//Vue完成模板的解析并把初始的真实DOM元素放入页面后挂载完毕调用mountedmounted(){console.log(mounted,this)setInterval(() {this.opacity - 0.01if(this.opacity 0) this.opacity 1},16)},})//通过外部的定时器实现不推荐/* setInterval(() {vm.opacity - 0.01if(vm.opacity 0) vm.opacity 1},16) *//script
/html分析生命周期
!DOCTYPE html
htmlheadmeta charsetUTF-8 /title分析生命周期/title!-- 引入Vue --script typetext/javascript src../js/vue.js/script/headbody!-- 准备好一个容器--div idroot :xnh2 v-textn/h2h2当前的n值是{{n}}/h2button clickadd点我n1/buttonbutton clickbye点我销毁vm/button/div/bodyscript typetext/javascriptVue.config.productionTip false //阻止 vue 在启动时生成生产提示。new Vue({el:#root,// template:// div// h2当前的n值是{{n}}/h2// button clickadd点我n1/button// /div// ,data:{n:1},methods: {add(){console.log(add)this.n},bye(){console.log(bye)this.$destroy()}},watch:{n(){console.log(n变了)}},beforeCreate() {console.log(beforeCreate)},created() {console.log(created)},beforeMount() {console.log(beforeMount)},mounted() {console.log(mounted)},beforeUpdate() {console.log(beforeUpdate)},updated() {console.log(updated)},beforeDestroy() {console.log(beforeDestroy)},destroyed() {console.log(destroyed)},})/script
/html总结生命周期
常用的生命周期钩子
1.mounted: 发送ajax请求、启动定时器、绑定自定义事件、订阅消息等【初始化操作】。
2.beforeDestroy: 清除定时器、解绑自定义事件、取消订阅消息等【收尾工作】。
关于销毁Vue实例
1.销毁后借助Vue开发者工具看不到任何信息。
2.销毁后自定义事件会失效但原生DOM事件依然有效。
3.一般不会在beforeDestroy操作数据因为即便操作数据也不会再触发更新流程了。
!DOCTYPE html
htmlheadmeta charsetUTF-8 /title引出生命周期/title!-- 引入Vue --script typetext/javascript src../js/vue.js/script/headbody!-- 准备好一个容器--div idrooth2 :style{opacity}欢迎学习Vue/h2button clickopacity 1透明度设置为1/buttonbutton clickstop点我停止变换/button/div/bodyscript typetext/javascriptVue.config.productionTip false //阻止 vue 在启动时生成生产提示。new Vue({el:#root,data:{opacity:1},methods: {stop(){this.$destroy()}},//Vue完成模板的解析并把初始的真实DOM元素放入页面后挂载完毕调用mountedmounted(){console.log(mounted,this)this.timer setInterval(() {console.log(setInterval)this.opacity - 0.01if(this.opacity 0) this.opacity 1},16)},beforeDestroy() {clearInterval(this.timer)console.log(vm即将驾鹤西游了)},})/script
/html注意以上的部分.vue文件代码由于没有对应的.vue代码模板代码无法高亮所以选择了html格式
