一Vue核心语法1vue是什么构建用户界面的渐进式JavaScript框架。专门把后台给的数据转换成客户可以查看的页面简单应用只需要一个轻量小巧的核心库复杂应用可以引入各式各样的Vue插件。1谁开发的后起之秀生态完善前端生存必备。尤雨溪开发的。2Vue特点1采用组件化模型提高代码复用率切让代码更好维护。2声明式编码编码人员无需直接操作Dom提高开发效率3使用虚拟DOM优秀的Diff算法尽量复用DOM节点2Vue开发环境1初始小案例两种方式1直接使用script标签引入2NPM配合命令行工具使用浏览器默认行为网站打开的时候都会去拿图标VScode当中我们使用了一个插件 Open with live server插件执行的时候会把工程内容部署到5500端口下。也会到5500下拿图标。!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title初识vue/title script typetext/javascript src../../js/vue.js/script /head body !-- 准备好一个容器 -- div idroot h1hello,{{name}}/h1 /div script typetext/javascript Vue.config.productionTip false // 阻止Vue启动时生成生产提示。 // 创建Vue实例。 new Vue({ el: #root,// el指定当前vue实例为哪个容器服务通常为选择器字段。这里是id选择器 data: { name: 张三 }// data中存储数据供root容器内容进行实例。值先写成一个对象。 }); /script /body /html1想让Vue工作就必须创建一个Vue实例且要传入一个配置对象;2root容器里的代码依然符合htm1规范只不过混入了一些特殊的Vue语法;3root容器里的代码被称为【Vue模板】;4Vue实例和容器是一一对应的;5真实开发中只有一个Vue实例并且会配合着组件一起使用;6{{xxx}}中的xxx要写js表达式且xxx可以自动读取到data中的所有属性:7一旦data中的数据发生改变那么模板中用到该数据的地方也会自动更新;html中我们定义了一个div容器并与Vue对象进行绑定容器被Vue对象找到后进行解析解析容器中是否有特殊规定的语法也就是模板进行解析。2案例解析1容器和Vue实例一对一对应。2容器中的模板括号中必须要写js的表达式。3为什么要把数据交个vue实例托管要变化。js代码和js表达式1表达式一个表达式会生成一个值可以放在任何需要值的位置2js代码控制代码走势。下边的这个root就是vue实例。R是大写的。data中的数据只要发生变化页面自动更新。3模板语法Vue模板语法有2大类:1.插值语法:功能:用于解析标签体内容。写法:{{xxx}}xxx是js表达式且可以直接读取到data中的所有属性。2.指令语法:功能:用于解析标签(包括:标签属性、标体内容、定事件.....)举例:v-bind:hrefxxx或 简写为:hrefxxxxxx同样要写js表达式,且可以直接读取到data中的所有属性。备注:Vue中有很多的指令且形式都是:v-????此处我们只是拿v-bind举个例子。1插值语法{{插值语法双花括号包围}}2指令语法!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title初识vue/title script typetext/javascript src../../js/vue.js/script /head body !-- v-bind:写了之后url就被当成了js表达式 -- !-- v-bind可以给标签中任何一个属性动态绑值 -- !-- v-bind:可以简写成: -- !--插值语法往往都指定标签体内容指令语法管理标签属性 -- a v-bind:hrefurl/a script typetext/javascript Vue.config.productionTip false new Vue({ el: #root, data: { name: 张三, url: http://www.baidu.com } }); /script /body /html4数据绑定1数据绑定2单项与双向数据绑定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 html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title数据绑定/title script typetext/javascript src../../js/vue.js/script /head body !-- 准备好一个容器 -- div idroot h1你好{{name}}/h1 /div script typetext/javascript Vue.config.productionTip false // data的第二种写法函数式 对象式以后到组件的时候一定是函数式。 // data现在是一个函数这个函数不是我们调用的是Vue给我们进行调用的。 // data函数中的this是Vue实例对象我们需要给他写成普通函数不能写成箭头函数。 // 箭头函数没有自己的this最后往外找变成windows对象。 // 所以data我们后续都是箭头函数。 const v new Vue({ data: function () { console.log(, this) return { name: my home } } }) // 第二种写法 const v1 new Vue({ data() { console.log(, this) return { name: my home } } }) // 第三种写法。错误,箭头函数版本 const v2 new Vue({ data : (){ console.log(, this) return { name: my home } } }) console.log(v) // vue原型对象的属性这种方式更灵活一点。 // 可以实现过一秒中再给组件绑定组件出数据的效果。 v.$mount(#root)// 第二种写法挂载的意思。将组件挂载到容器中 /script /body /html注意这里边的连锁反应。注意这里边的简化写法。5el与data两种写法Vue对象中$开头的都是给程序员使用的。data与el的2种写法1el有2种写法(1).new vue时候配置e1属性。(2).先创建Vue实例随后再通过vm.$mount(#root)指定el的值。2.data有2种写法(1).对象式(2).函数式如何选择:目前哪种写法都可以以后学习到组件时data必须使用函数式否则会报错。3.一个重要的原则:由Vue管理的函数一定不要写箭头函数一旦写了箭头函数this就不再是Vue实例了变成了windows$开头的都是Vue开放给我们用的不带$是VUE自己底层的。el的两种写法!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title数据绑定/title script typetext/javascript src../../js/vue.js/script /head body !-- 准备好一个容器 -- div idroot h1你好{{name}}/h1 /div script typetext/javascript Vue.config.productionTip false const v new Vue({ // el: #root,// 这个是第一种写法 data: { name: my home } }) console.log(v) // vue原型对象的属性这种方式更灵活一点。 // 可以实现过一秒中再给组件绑定组件出数据的效果。 v.$mount(#root)// 第二种写法挂载的意思。将组件挂载到容器中 /script /body /htmldata的两种写法!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title数据绑定/title script typetext/javascript src../../js/vue.js/script /head body !-- 准备好一个容器 -- div idroot h1你好{{name}}/h1 /div script typetext/javascript Vue.config.productionTip false const v new Vue({ data: function () { console.log(, this) return { name: my home } } }) console.log(v) // vue原型对象的属性这种方式更灵活一点。 // 可以实现过一秒中再给组件绑定组件出数据的效果。 v.$mount(#root)// 第二种写法挂载的意思。将组件挂载到容器中 /script /body /html6MvvM模型M模型(Model):对应 data 中的数据V视图(View):模板VM视图模型(ViewModel): Vue 实例对象观察发现:1.data中所有的属性最后都出现在了vm身上。(这里边有个数据代理后边说)2.vm身上所有的属性 及 vue原型上所有属性在Vue模板中都可以直接使用。Vue并没有完全遵循MVVM模型但是参考了这个东西。因此我们在实际代码中经常采用vm这个变量代表viewmodel对象。data中有的对象都会经过层层处理放到vm对象上vm对象上的东西都可以在view上进行使用。7数据代理1Object.defineproperty方法!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title数据绑定/title script typetext/javascript src../../js/vue.js/script /head body script typetext/javascript let person { name: 张三, sex: 男 } let hello 18 // 这方方法给框架用的。动态赋值 Object.defineProperty(person, age, { // value: 18, // enumerable: true,//控制属性可以遍历默认是false // writable: true,//控制属性可以修改默认是false // configurable: true,// 控制属性是否可以删除默认是false // 当有人读取person属性age时会被调用。进行动态赋值。 get: function () { return hello } }) // 获取person对象上的属性 console.log(Object.keys(person)) console.log(person) /script /body /htmlperson对象上有一个get属性这个属性为了person对象的age属性服务当获取person对象的age属性值的时候我们通过方法进行动态获取。!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title数据绑定/title script typetext/javascript src../../js/vue.js/script /head body script typetext/javascript let person { name: 张三, sex: 男 } let hello 18 // 这方方法给框架用的。动态赋值 Object.defineProperty(person, age, { // value: 18, // enumerable: true,//控制属性可以遍历默认是false // writable: true,//控制属性可以修改默认是false // configurable: true,// 控制属性是否可以删除默认是false // 当有人读取person属性age时会被调用。进行动态赋值。 // get是个属性名属性值是个函数。这个组合叫getter get: function () { return hello }, // 当有人修改person属性age值时调用且会收到修改的具体值value set(value) { console.log(有人修改了age属性值是, value) } }) // 获取person对象上的属性 console.log(Object.keys(person)) console.log(person) /script /body /html2什么是数据代理数据代理通过一个对象代理另外一个对象中的属性的操作!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title数据绑定/title script typetext/javascript src../../js/vue.js/script /head body !-- 数据代理通过一个对象代理另外一个对象中的属性的操作 -- script typetext/javascript let obj { x: 100 } let obj2 { y: 100 } Object.defineProperty(obj2, x, { get() { return obj.x }, set(value) { obj.x value } }) /script /body /html3vue中进行数据代理数据代理的作用就是为了写代码方便。1.Vue中的数据代理:通过vm对象来代理data对象中属性的操作(读/写)2.Vue中数据代理的好处:更加方便的操作data中的数据3.基本原理:通过object.defineProperty()把data对象中所有属性添加到vm上为每一个添加到vm上的属性都指定一个getter/setter。在getter/setter内部去操作(读/写)data中对应的属性。!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title数据绑定/title script typetext/javascript src../../js/vue.js/script /head body div idroot h2学校名称{{name}}/h2 h2学校地址{{address}}/h2 /div script typetext/javascript let vm new Vue({ el: #root, data: { name: Vue大学, address: Vue.com } }) /script /body /htmlvue对象代理了_data对象_data data true8事件处理1最简单的事件处理回调函数中的调用事件是vm对象当然如果用的是箭头函数的话那么就是window对象了。所有被vue管理的函数最好是普通函数不要写箭头函数。只有配置到data里边的对象才会做数据代理和数据劫持。事件的基本使用:1.使用v-on:xxx 或 xxx 绑定事件其中xxx是事件名;2.事件的回调需要配置在methods对象中最终会在vm上;3.methods中配置的函数不要用箭头函数!否则this就不是vm了;4.methods中配置的函数都是被vue所管理的函数this的指向是vm 或组件实例对象;5.clickdemo”和 clickdemo($event,66)”效果一致但后者可以传参;!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title事件处理/title script typetext/javascript src../../js/vue.js/script /head body div idroot h2欢迎来来到{{name}}/h2 button v-on:clickshowInfo点击迎新/button /div script typetext/javascript let vm new Vue({ el: #root, data: { name: Vue大学 }, methods: { showInfo() { alert(hello,my baby) } } }) /script /body /html简写形式!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title事件处理/title script typetext/javascript src../../js/vue.js/script /head body div idroot h2欢迎来来到{{name}}/h2 !-- button v-on:clickshowInfo点击迎新/button -- button clickshowInfo点击迎新/button /div script typetext/javascript let vm new Vue({ el: #root, data: { name: Vue大学 }, methods: { showInfo() {// 当前的this是vue对象。 alert(hello,my baby) } } }) /script /body /htmlbutton clickshowInfo点击迎新/button button clickshowInfo($event)点击迎新/button # 传递带点击事件。click中传递的可以是js表达式。 button clickshowInfo($event,111)点击迎新/button showInfo(event,numberr){ console.log(event,number) } 最终的showinfo1这些方法也是在vm对象上方法没有做数据代理但是属性是做了数据代理。方法是不改变的所以不需要做数据代理。 直接把方法直接放到data上也能用。但是这样会让vue很累得走数据代理。 只有在data上的东西才会走数据劫持和数据代理。2事件修饰符vue中的事件修饰符:prevent阻止默认事件(常用);stop阻止事件冒泡(常用);once事件只触发一次(常用);capture使用事件的捕获模式;self只有event.target是当前操作的元素时才触发事件;比方说冒泡阶段点击里层导致外层触发就可以用这个属性进行阻止。passive事件的默认行为立即执行无需等待事件回调执行完毕;!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title事件处理/title script typetext/javascript src../../js/vue.js/script style .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 /head body div idroot h2欢迎来来到{{name}}/h2 !-- 阻止默认事件常用 -- a hrefhttp://www.baidu.com click.preventshowInfo点我提示信息/a !-- 阻止事件冒泡常用 -- div classdemo1 clickshowInfobutton click.stopshowInfo点我提示信息/button/div !-- 事件只触发一次 常用-- button click.onceshowInfo点我提示信息/button !-- 事件捕获模型在事件捕获过程中触发事件默认是冒泡 -- div classbox box1 click.captureshowMsg(1) div1 div classbox box2 clickshowMsg(2) div2 /div /div !-- 只有event.target是当前操作元素时才触发事件。 -- div classdemo1 click.selfshowInfobutton clickshowInfo点我提示信息/button/div !-- 事件的默认行为立即执行无需等待时间回调执行完毕 -- !-- scroll滚动条的滚动 -- !-- wheel鼠标滚轮滚动 -- !-- 这两个区别一个是滚动条触发 另外一个是鼠标滚轮触发到头了滑滚轮也可以触发。 -- !-- demo函数执行完毕之后滚动条在往下走页面卡顿。 -- ul classlist wheel.passivedemo li1/li li2/li li3/li li4/li /ul /div script typetext/javascript let vm new Vue({ el: #root, data: { name: Vue大学 }, methods: { showInfo(e) { // A标签的默认行为就是跳转。 // 阻止A标签的默认跳转行为。 // e.preventDefault(); // vue中方式不需要这么写现在通过click.prevent进行阻止。 // 这个是事件修饰符。 // 阻止元素冒泡 // e.stopPropagation() // vue中方式不需要这么写现在通过click.stop阻止冒泡 alert(欢迎来到Vue大学); } , showMsg(number) { console.log(number) }, demo() { for (let i 0; i 100000; i) { console.log(#) } console.log(累坏了) } } }) /script /body /html冒泡由内到外捕获由外到内默认事件是在冒泡阶段进行处理。先发生捕获阶段再发生冒泡阶段。event.target就是触发元素。3键盘事件1.Vue中常用的按键别名:回车 enter删除 delete(捕获“删除”和“退格键“)退出 esc空格 space换行 tab(必须配合keydown使用)上up下 down左left右right2.vue未提供别名的按键可以使用按键原始的key值去绑定但注意要转为kebab-case(短横线命名)距离说明caps-lock3.系统修饰键特殊使用:ctrl、alt、shift、meta(1).配合keyup使用:按下修饰键同时再按下其他键随后释放其他键事件才触发(2).配合keydown使用:正常触发事件。4.也可以使用keycode去指定具体的按键(不推荐) key5.Vue.config.keyCodes.自定义键名 键码可以去定制按键别名event.key 键盘编码 event.keyCode键盘名称!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title键盘事件/title script typetext/javascript src../../js/vue.js/script /head body div idroot h2欢迎来来到{{name}}/h2 input typetext placeholder按下回车提示输入 keyup.entershowInfo /div script typetext/javascript let vm new Vue({ el: #root, data: { name: Vue大学 }, methods: { showInfo(e) { // 正常是这么写 // 但是Vue中有简单写法 // keyup.enter即可。 if (e.keyCode 13) { console.log(e.keyCode) console.log(e.target.value) } } } }) /script /body /html4事件总结9计算属性1姓名案例1插值语法实现!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title姓名案例_插值语法实现/title script typetext/javascript src../../js/vue.js/script /head body !-- 准备一个容器 -- div idroot 姓input typetext v-modelfirstName br 名input typetext v-modellastName br 姓名span{{firstName.slice(0,3)}}-{{lastName}}/span /div script Vue.config.productionTip false const vm new Vue({ el: #root, data: { firstName: 张, lastName: 三 } }) /script /body /html2methods实现!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title姓名案例_methods实现/title script typetext/javascript src../../js/vue.js/script /head body !-- 准备一个容器 -- div idroot 姓input typetext v-modelfirstName br 名input typetext v-modellastName br 姓名span{{fullName()}}/span /div script Vue.config.productionTip false const vm new Vue({ el: #root, data: { firstName: 张, lastName: 三 }, methods: { fullName() { return this.firstName this.lastName } } }) /script /body /htmlVue中Data数据任何一个属性变化之后模板会重新解析。模板中如果用到了掉了方法重新解析时那方法也会重新调用一次就拿到了最新值。可以在方法中添加个打印然后该页面上的值来观察下。2计算属性版对于Vue来讲data对象中的就叫属性。属性名属性值。什么叫计算属性计算属性就是拿着Vue对象当中既有的属性进行加工计算成一个新的属性。在Vue当中属性和计算属性是进行分开放的Data当中的属性是属性计算属性是在computed当中。原理:底层借助了objcet.defineproperty方法提供的getter和setter。get函数什么时候执行?(1).初次读取时会执行一次。(2).当依赖的数据发生改变时会被再次调用。优势:与methods实现相比内部有缓存机制(复用)效率更高调试方便备注:计算属性最终会出现在vm上直接读取使用即可。如果计算属性要被修改那必须写set函数去响应修改且set中要引起计算时依赖的数据发生变化这样才真正修改掉fullname的值。注意点这里的get和set不能使用箭头函数!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title姓名案例_methods实现/title script typetext/javascript src../../js/vue.js/script /head body !-- 准备一个容器 -- div idroot 姓input typetext v-modelfirstName br 名input typetext v-modellastName br !-- 单次模板更新初次读取fullname -- 姓名span{{fullName}}/span !-- 单次模板更新第二次读取fullname -- 姓名span{{fullName}}/span 姓名span{{fullName}}/span 姓名span{{fullName}}/span /div script Vue.config.productionTip false const vm new Vue({ el: #root, data: { firstName: 张, lastName: 三 }, computed: { fullName: { // 当有人读取fullName时get就会被调用返回值就是fullname的值。 // 底层用的就是Object.defineProperty() // get什么时候调用1单次模板更新初次读取fullname时或者所依赖的数据发生变化时。此时依赖firstname和lastname这两个变化就变化。 get() { return this.firstName this.lastName }, // set不是必须写 // 当fullname修改时才会调用 set(value) { const arr value.split(-); //数组解构 [this.firstName, this.lastName] arr; } } } }) /script /body /html3计算属性简写方式简写前提条件此属性只需要读取不需要修改。!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title姓名案例_methods实现/title script typetext/javascript src../../js/vue.js/script /head body !-- 准备一个容器 -- div idroot 姓input typetext v-modelfirstName br 名input typetext v-modellastName br !-- 单次模板更新初次读取fullname -- 姓名span{{fullName}}/span !-- 单次模板更新第二次读取fullname -- 姓名span{{fullName}}/span 姓名span{{fullName}}/span 姓名span{{fullName}}/span /div script Vue.config.productionTip false const vm new Vue({ el: #root, data: { firstName: 张, lastName: 三 }, computed: { // 这个function就代表get函数 fullName: function () { return this.firstName this.lastName } } }) /script /body /html10监视属性友情提示如何写VueCode有提示VsCode当中引入一个插件即可。Vue 3 Snippets1天气案例!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title天气案例/title script typetext/javascript src../../js/vue.js/script /head body !-- 准备一个容器 -- div idroot h2今天天气很{{info}}/h2 !-- 里边可以写脚本 -- !-- 去vm当中查找对象和属性。 -- !-- button clickisHot !isHot;x;切换天气/button -- !-- changeWeather的位置可以歇一些简单的脚本 -- button clickchangeWeather切换天气/button /div script Vue.config.productionTip false const vm new Vue({ el: #root, data: { isHot: true }, computed: { info: function () { return this.isHot ? 炎热 : 凉爽 } }, methods: { changeWeather() { this.isHot !this.isHot } } }) /script /body /html