网站前后端分离怎么做,建网站的专业公司,安徽建设工程信息管理平台,中国发达国家投票#xff01;#xff01;#xff01;声明必看#xff1a;由于本篇开始就写了Vue#xff0c;内容过多#xff0c;本篇部分内容还有待完善#xff0c;小编先去将连续更新的js高阶第四天完成~本篇部分待完善内容明日更新
一、Vue核心#xff08;上篇#xff09;
热身top…声明必看由于本篇开始就写了Vue内容过多本篇部分内容还有待完善小编先去将连续更新的js高阶第四天完成~本篇部分待完善内容明日更新
一、Vue核心上篇
热身tops选取开发模式 ①用于开发模式 我们只需要知道 我们是开发模式开发模式他会跟你提示代码出现错误的地方以及出错原因而生产模式比较简洁。 ②用于生产模式 1.1 new Vue()实例 了解VueVue 构造函数是 vue.js 框架中用于创建 Vue 实例的核心部分而 vue.js 框架则是一个包含了这个构造函数以及许多其他功能和工具的完整系统。注后半句话不太理解先这样后面理解后会更新 1关于vue实例
想让Vue工作就必须创建一个Vue实例且要传入一个配置对象创建vue实例语法new Vue({ 配置对象 })配置对象包含很多配置项也就是属性或者方法常见的如dataelmethods等。root容器里的代码依然符合html规范只不过混入了一些特殊的Vue语法如插值语法root容器里的代码被称为【Vue模板】 !-- 准备好一个容器 --div idroot!-- 插值语法 --h1hello{{name}}/h1/divscript typetext/javascript//死记硬背开发的时候写着这个就好了 减少不必要的提示Vue.config.productionTip false!-- 创建vue实例 --new Vue({el: #root, //el用于指定当前vue实例为哪个容器服务值通常为css选择器字符串data: { //data用于存储数据数据供el所指定的容器去使用值通常是对象name: 哈哈哈}})/script1.2 模板语法 Vue模板语法两大类插值语法 指令语法 1.插值语法
功能可以解析标签体的内容标签是html标签 语法{{xxxx}} xxxx是js表达式 可以直接读取data中的所有属性意味着即使是data中的方法也可以直接将方法属性插入到模版中将结果直接返回如果data出现多个相同名字的属性使用多层需要用点来引用 div idrooth1插值语法/h1h3你好{{name}}/h3/divscriptVue.config.productionTip falsenew Vue({el: #root,data: {name: jack}}) /script讲一下vue模版中的JS表达式 vue模版可以直接访问js表达式这意味着即使是name属性也可是直接访问JS表达式相当于将name当对象来用 区分js表达式和js代码语句在 Vue 的模板中可以使用 JavaScript 表达式但不能直接添加 JavaScript 代码块如 if语句、for循环等。 因为Vue 的模板是声明式的意味着你告诉 Vue 你想要什么而不是如何得到它。 ***js表达式 和 js代码(语句)区分***1.表达式一个表达式会产生一个值可以放在任何一个需要值的地方(1). a(2). ab(3). demo(1)(4). x y ? a : b2.js代码(语句)(1). if(){}(2). for(){}!-- 准备好一个容器 --div idroot!-- 13:03 --!-- 函数调用表达式 --h1hello{{name.toUpperCase()}},{{address}},{{Date.now()}}/h1/div2.指令语法 Vue中指令语法通常是 v-
功能用于解析标签包括标签属性(也就是可以直接对标签属性进行操作)、标签体内容、绑定事件、、、。
即不再像插值语法局限标签体内容可以直接利用data中的数据对标签属性值进行赋值属性值还可以加上js表达式或者变量重新给标签设置属性注意在data数据中设置好属性和属性值意思是当我使用V-bind指令时实际上是将html属性的值给绑定在vue实例对象某个数据属性上这样当vue实例该数据属性的值发生变化html属性的值也相应发生变化 div idroot!--v-bind:缩写为: --//这里的x实际上是重新给标签设置属性注意在data数据中设置好属性和属性值a v-bind:hrefurl :xhello去{{school.name}}吧/a!-- a :hrefschool.url.toUpperCase() :xschool.hello去{{school.name}}吧/a --/divscriptVue.config.productionTip falsenew Vue({el: #root,data: {name: jack,// 两个相同属性不能在同一层school: {name: 百度,url: https://www.baidu.com/,hello: 你好}}}) /script单项数据绑定input typetext v-bind:valuenamebr双向数据绑定input typetext v-model:valuenamebr单向双向绑定案例一起写
!-- 准备一个容器 --div idroot单项数据绑定input typetext v-bind:valuenamebr双向数据绑定input typetext v-model:valuenamebr!-- 简写单项数据绑定input typetext :valuenamebr双向数据绑定input typetext v-modelname --!-- v-model只能应用在表单元素输入类元素上 --!-- h2 v-bind:xname你好啊/h2 --/divscript typetext/javascriptVue.config.productionTip falsenew Vue({el: #root,data: {name: 哈哈哈}})/script就会有神奇的化学反应这里用abc代指。那就是只要b发生改变a、c都会紧接着改变大家会觉得奇怪c发生改变是因为双向绑定特性但是a为什么改变这是因为b发生改变因为双向绑定c发生改变c发生改变因为c、a之间有单项绑定c改变所以a改变。
1.4 el与data的两种写法 script typetext/javascriptVue.config.productionTip false //阻止 vue 在启动时生成生产提示。const vm new Vue({// el: #root,//指定容器 第一种写法// 函数式 第二种写法的简写式// data () {// return {// name: 哈哈哈哈// }// }// 使用普通函数// data: function () {// return {// name: 哈哈哈// }// }// 第二种写法的简写式使用箭头函数// 箭头函数在vue实例中一般不要添加 因为需要将this指向vue实例 而不是其他data: () {console.log(, this) //此处的thisreturn {name: 哈哈哈}}})// 指定容器 挂载式vm.$mount(#root)/script1.5 Vue中的MVVM
Vue是基于MVVM构成的
M模型 对应data中的数据
V视图模板 DOMvue模版经过解析形成的页面从而形成dom结构 所以模版也是页面结构
VM 视图模型 Vue实例对象
VMVue实例对象 实例对象vm的由来通过Viewmodel 可以实现视图与数据的交互 而且通过vue实例可以获得viewmodel 所以叫vm Vue中MVVM之间的关系 这样实例对象vm对象中的数据经过数据绑定就绑定在页面上的DOM上面了 DOM结构经过监听就返回到数据中了 数据经过数据绑定形成页面上的dom的页面结构 反映在代码上 有下面的案例可以知道 data中的属性经过vue内部一系列sao操作可以显示vue实例对象中而vue实例对象中的所有属性直接间接都可以被展示在页面视图中。 !-- 容器 视图 V --div idrooth1学校名称{{name}}/h1h1学校地址{{address}}/h1h1{{$options}}/h1/divscript typetext/javascriptVue.config.productionTip false //阻止 vue 在启动时生成生产提示。// Vue实例 vmconst vm new Vue({el: #root,// 数据 Mdata: {name: 尚硅谷,address: 北京,a: 1}})console.log(vm);1.6 回顾Object.defineProperty方法
scriptlet number 20let person {name: 张三,sex: 男,// age: number}// 访问age属性 默认会调用此函数//getter 函数在尝试读取 age 属性的值时会被调用而 setter 函数在尝试设置 age 属性的值时//会被调用。 定义对象中的新属性Object.defineProperty(person, age, {// value: 18,// enumerable: true, //控制属性是否可以枚举// writable: true, //控制属性是否可以被修改 默认值是false// configurable: true, //控制属性是否可以被删除 默认值是falseget () {console.log(有人读取age属性了)return number},set (value) {console.log(有人修改了age属性且是, value)number value}})// console.log(Object.keys(person));// for in遍历对象// for (let key in person) {// console.log(, person[key])// }// console.log(person);/script1.7 数据代理 // 数据代理通过一个对象代理对另一个对象中属性的操作读 / 写let obj { x: 100 }let obj2 { y: 200 }//对A对象的访问实现对B对象的访问Object.defineProperty(obj2, x, {get () {return obj.x}, set (value) {obj.x value}})页面的数据发生改变 一旦data中的数据发生改变那么页面中用到该数据的地方也会自动更新 数据代理总结 1.Vue中的数据代理 通过vm对象来代理data对象中属性的操作读/写 2.Vue中数据代理的好处 更加方便的操作data中的数据 3.基本原理 通过Object.defineProperty()把data对象中所有属性添加到vm上。 为每一个添加到vm上的属性都指定一个getter/setter。 在getter/setter内部去操作读/写data中对应的属性。 1.8 事件处理
(1)事件的基本使用 回调函数中传参 要加上并且不要忘记event便于获取event.target.innerHTML,$eventvm中showinfo方法和data数据的区别是showinfo不进行数据代理为什么——1顾名思义showinfo是函数是方法通过别人调用他来工作的写完是不改变的只需要等着被调用但是data中的数据name是数据如果从hi1改变为hi2需要数据代理更好地改变数据。2其实showinfo放在data中也可以被调用以下将showinfo2放在data中但是用到了getter和setter因为方法只会被调用不会被更改这样就错误滴使用了数据代理。 const vm new Vue({el: #root,data: {name: 北京,showInfo2 (number, event) { //所有被vue管理的函数最好写成普通函数alert(同学你好2)console.log(number, event)// console.log(event.target.innerText)// console.log(this) //此处的this是vm}},//配置项methods: {showInfo1 (event) { //所有被vue管理的函数最好写成普通函数alert(同学你好1)// console.log(event.target.innerText)// console.log(this) //此处的this是vm}}});总结事件的基本使用 1.使用v-on:xxx 或 xxx 绑定事件其中xxx是事件名 2.事件的回调需要配置在methods对象中最终会在vm上 3.methods中配置的函数不要用箭头函数否则this就不是vm了 4.methods中配置的函数都是被Vue所管理的函数this的指向是vm 或 组件实例对象 5.click“demo” 和 click“demo($event)” 效果一致但后者可以传参
(2)事件修饰符
注意stopPropagation() 方法的作用就是阻止事件在捕获和冒泡阶段的进一步传播。也就是说当你调用一个事件对象通常通过事件处理函数中的 event 参数获取的 stopPropagation() 方法时该事件将不会继续传播到 DOM 树中的其他节点。 preventDefault 阻止默认行为 capture js事件流 捕获阶段冒泡阶段 触发box2传2 先捕获在冒泡 捕获阶段 外》内 冒泡阶段由内岛外 开始执行 捕获阶段就开始处理 self 不加上 则可以有两次冒泡并且是一样的 加了self相当于组织了冒泡阶段 passive 事件的默认行为立即执行 无需等待事件回调执行完毕 感觉用的地方太少 不了解了最后还是写了解决哈哈哈哈 这里使用到了scroll 滚动条滚动 wheel 滚轮滚动 对这个有用 不加passive 需要限制性回调函数 那么回调函数执行for循环之后才能完成滚动条的滚动 但我自己实际上实践的时候 其实并没有完全执行完or循环才滚动条滚动 而是一会儿就滚懂了 并且在使用scroll 无论for循环多大 滚动条都会直接滚动 这也说明passive并不是什么事件都用得上的 在某些特定事件 !-- passive 事件的默认行为立即执行 无需等待事件回调执行完毕 --!-- 滚动条的滚动 鼠标轮的滚动 --ul wheel.passivedemo classlistli1/lili2/lili3/lili4/li/uldemo () {// console.log()for (let i 0; i 100000; i) {console.log(#)}console.log(累坏了)}键盘事件 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.自定义键名 键码可以去定制按键别名1.8 计算属性
姓名案例——插值语法实现 缺点实现都需要在vue模板中实现vue官网说的是Vue 的模板是声明式的意味着你告诉 Vue 你想要什么而不是如何得到它。要求vue模版中尽量语法简洁所以不适合在这里面那实现很多方法 div idroot姓input typetext v-modelfirstName/br/br名input typetext v-modellastName/br/br!-- vue模版中的语句应该尽量简化 此时如果还要让填进去的字母有小写变成大写还需要继续添加代码太复杂了--姓名span{{firstName.slice(0,3)}}-{{lastName}}/span/divscript typetext/javascriptnew Vue({el: #root,data: {firstName: 张,lastName: 三}})姓名案例——methods实现
先说一下插值语法与指令语法加与不加的区别 重点理解数据一变化vue模板就会重新解析自然里面的方法也会重新调用一下fullName所以全名也会随着变化 div idroot姓input typetext v-modelfirstName/br/br名input typetext v-modellastName/br/br全名 span{{fullName()}}/span!-- button clickfullName()点我/button --/divscript typetext/javascriptVue.config.productionTip false //阻止 vue 在启动时生成生产提示。new Vue({el: #root,data: {firstName: 张,lastName: 三},methods: {fullName () {console.log(数据一变化vue模板就会重新解析自然里面的方法也会重新调用一下fullName)return this.firstName - this.lastName}}});/script计算属性
!DOCTYPE html
html langzh-CNheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0meta http-equivX-UA-Compatible contentieedgetitleDocument/titlescript src../../js/vue.js/script
/headbodydiv idroot姓input typetext v-modelfirstNamebrbr名input typetext v-modellastNamebrbr全名span{{fullName}}/spanbrbr全名span{{fullName}}/spanbrbr全名span{{fullName}}/spanbrbr全名span{{fullName}}/spanbrbr全名span{{fullName}}/span/divscript typetext/javascriptVue.config.productionTip false //阻止 vue 在启动时生成生产提示。const vm new Vue({el: #root,data: {firstName: 张,lastName: 三},computed: {// fullName: {// // get的作用当有人读取fullName时get就会被调用且返回值就作为fullName的值// //get什么时候被调用1.初次读取fullName时 2.所依赖的数据发生变化时// // 这里提到一个缓存也就是所赐调用 只有在初次调用的时候才起效果 vue会将返回值保存起来 并且起名fullName 与methods方法不同// get () {// console.log(get被调用了)// // console.log(this)// return this.firstName - this.lastName// },//set什么时候被调用当fullName被修改时// set (value) {// console.log(set, value)// // 在每个分隔符处将字符串分割为子串 并返回为数组// const arr value.split(-)// this.firstName arr[0]// this.lastName arr[1]// }// }// 只考虑读取 不考虑修改 简写// fullName: function () {// console.log(get被调用了)// return this.firstName - this.lastName// }fullName () {return this.firstName - this.lastName}}});/script
/body/html
