杭州建站模板制作,个人购物网站 怎么建,wordpress拖动建站,佛山seo培训简介
Vue是一套用于构建用户界面的渐进式JS框架。
构建用户界面#xff1a;就是将后端返回来的数据以不同的形式(例如#xff1a;列表、按钮等)显示在界面上。渐进式#xff1a;就是可以按需加载各种库。简单的应用只需要一个核心库即可#xff0c;复杂的应用可以按照需求…简介
Vue是一套用于构建用户界面的渐进式JS框架。
构建用户界面就是将后端返回来的数据以不同的形式(例如列表、按钮等)显示在界面上。渐进式就是可以按需加载各种库。简单的应用只需要一个核心库即可复杂的应用可以按照需求引入各种Vue插件。
特点
采用组件化模式提高代码复用率、且让代码更好维护。声明式编码让编码人员无需直接操作DOM提高开发效率。
入门案例
!DOCTYPE html
headscript srchttps://cdn.jsdelivr.net/npm/vue2.7.14/script
/head
bodydiv idrooth1Hello {{name}}/h1//{{name}} 为vue里面的模板/divscript typetext/javascriptVue.config.productionTip false //阻止vue在启动时生成生产提示//容器与vue实例只能时一对一的关系new Vue({el:#root,//通常为ucss选择器data:{name:Vue}})//root已经被第一个vue接管了因此这个vue实例是无效的// new Vue({// el:#root,//通常为ucss选择器// data:{// name:Vue1// }// })/script
/body总结
Vue实例和容器是一对一的关系真实开发过程中只有一个Vue实例并且会配合组件一起使用{{xxx}}中的xxx要写js表达式且xxx可以自动读取到data中的所有属性一旦data中的数据发生变化那么页面中用到该数据的地方也会自动更新
模板语法
Vue模板语法分为2大类 插值语法 功能用于解析标签体内容。 写法{{xxx}}xxx是js表达式且可以直接读取到data中的所有属性。 指令语法 功能用于解析标签包括标签属性、标签体内容、绑定事件…。 举例v-bind:hrefxxx’或简写为:href‘xxx’xxx同样要写js表达式且可以直接读取到data中的所有属性。 备注Vue中有很多的指令且形式都是v-???。
!DOCTYPE html
headscript srchttps://cdn.jsdelivr.net/npm/vue2.7.14/script
/head
bodydiv idrooth1Hello {{name}}/h1a v-bind:hrefurl点我/a//v-bind是数据单向绑定的/divscript typetext/javascriptVue.config.productionTip false //阻止vue在启动时生成生产提示//容器与vue实例只能时一对一的关系new Vue({el:#root,//通常为ucss选择器data:{name:Vue,url:https://www.baidu.com}})/script
/body数据绑定
数据绑定分为双向数据绑定与单项数据绑定。这点与Android中的jetpack组件databinding一致。毕竟Vue也是采用了MVVM模型。
单向绑定(v-bind):数据只能从data流向页面。双向绑定(v-model):数据不仅能从data流向页面还可以从页面流向data。 备注 双向绑定一般都应用在表单类元素上如input、select等。v-model:value 可以简写为v-model因为v-model默认收集的就是value值。
!DOCTYPE html
headscript srchttps://cdn.jsdelivr.net/npm/vue2.7.14/script
/head
bodydiv idroot单向数据绑定input typetext v-bind:valuename/br///input组件里的内容改变不会导致vue里面的存储的数据改变//v-model只能用于表单类元素中(输入类元素)双向数据绑定input typetext v-model:valuename/br///input组件里的内容改变会导致vue里面的存储的数据改变/divscript typetext/javascriptVue.config.productionTip false //阻止vue在启动时生成生产提示//容器与vue实例只能时一对一的关系new Vue({el:#root,//通常为ucss选择器data:{name:Vue,url:https://www.baidu.com}})/script
/bodyel与data的两种写法
el const vnew Vue({//1.第一种写法el:#root,//通常为ucss选择器data:{name:Vue,url:https://www.baidu.com}})
//第二种写法
v.$mount(#root)data
//第一种写法data:{name:Vue,url:https://www.baidu.com}//第二种写法
data:function(){console.log(,this)//此处的this是Vue实例return{name :hello world}
}//可以简写为
data{console.log(,this)//此处的this是Vue实例return{name :hello world}
}
一个重要原则由Vue管理的函数一定不要写箭头函数因为箭头函数是没有自己的this对象的只能往外找(箭头函数的this对象是window)一旦写了箭头函数函数里面的this就不再是Vue实例了。
MVVM模型
M模型modeldata中的数据V视图View模板代码VM视图模型ViewModelVue实例 总结
data中所有的属性最后都出现在了vm上。vm身上的所有属性以及Vue原型上的所有属性在Vue模板中都可以直接使用。
数据代理
Vue中的数据代理通过vm对象来代理data对象中属性操作(读/写)。Vue中数据代理的好处更加方便地操作data中的数据。基本原理通过Object.defineProperty()把data对象中所有属性添加到vm的_data属性上。为每一个添加到vm上的属性都指定一个getter/setter方法在getter/setter内部去操作(读/写)data中对应的属性。 script typetext/javascriptVue.config.productionTip false //阻止vue在启动时生成生产提示//容器与vue实例只能时一对一的关系let data{name:Vue,url:https://www.baidu.com};const v new Vue({el:#root,//通常为ucss选择器data})console.log(v._datadata (v._datadata)) //true//修改_data的属性也可以修改view中的值// v._data.name Hello/script script typetext/javascriptVue.config.productionTip false //阻止vue在启动时生成生产提示//容器与vue实例只能时一对一的关系let age 10let data{name:Vue,url:https://www.baidu.com};const v new Vue({el:#root,//通常为ucss选择器data})//通过 Object.defineProperty方法为对象添加属性Object.defineProperty(data,age,{enumerable :true, //控制属性是否可以被枚举默认是falsewritable:true,//控制属性是否可以被修改默认是falseconfigurable:true ,//控制属性是否可以被删除默认是falseget(){console.log(有人读取了age属性)return age},set(value){console.log(有人修改了age属性值是,value)age value}})console.log(Object.keys(data))/script 事件处理
事件的基本使用
使用v-on:xxx或xxx绑定事件其中xxx是事件名事件的回调需要配置在methods对象中最终会在vm上methods中配置的函数不要用箭头函数否则this就不是vmmethods中配置的函数都是被Vue所管理的函数this的指向是vm或组件实例对象click‘demo’和clickdemo($event)效果一致但后者可以传参
!DOCTYPE html
headscript srchttps://cdn.jsdelivr.net/npm/vue2.7.14/script
/head
bodydiv idrootbutton clickshowInfo($event,11)点我/button/divscript typetext/javascriptVue.config.productionTip false //阻止vue在启动时生成生产提示//容器与vue实例只能时一对一的关系let age 10let data{name:Vue,url:https://www.baidu.com};const v new Vue({el:#root,//通常为ucss选择器data,methods:{showInfo(event,num){alert(num is num event is event);}}})/script
/body事件修饰符
prevent阻止默认事件(常用)stop阻止事件冒泡常用once事件只触发一次常用capture使用事件的捕获模式self只有event.target是当前操作的元素时才触发事件passive事件的默认行为立即执行无需等待事件回调函数执行完毕 button click.stop.preventshowInfo($event,11)点我/button//事件修饰符可以链式调用键盘事件
Vue中常用的按键别名
回车enter删除(包括“删除”和“退格”键)delete退出esc空格space换行tab需要配合keydown使用上up下down左left右right Vue中未提供别名的按键可以使用按键原始的key值去绑定但注意要转为keytab-case(短横线命名) 系统修饰键(用法特殊)ctrl、alt、shift、meta 配合keyup使用按下修饰键的同时再按下其他键随后释放其他键事件才被触发配合keydown使用正常触发事件 也可以使用keycode去指定具体的按键(不推荐有些键盘的keycode不统一) Vue.config.keyCodes.自定义键名键码。可以定制按键别名
input keyup.caps-lock showInfo(12) typetext v-bind:valuename/br/
input keydown.tab.y showInfo(12) typetext v-model:valuename/br/
input keydown.ctrl.y showInfo(12) typetext v-model:valuename/br///点击ctrly才调用showInfo方法
计算属性
定义要用的属性不存在要通过已有属性(注意是vm已有的属性如果是通过变量是不行的)计算得来原理底层借助Object.defineproperty方法提供的getter和setterget函数什么时候执行 初次读取时会执行一次当依赖的数据发生变化时会被再次调用 优势与methods相比内部右缓存机制效率高调试方便备注1.计算属性最终会出现在vm上直接读取使用即可2.如果计算属性被修改那必须写set函数去响应修改且set中要引起计算时依赖的数据发生变化。
!DOCTYPE html
headscript srchttps://cdn.jsdelivr.net/npm/vue2.7.14/script
/head
bodydiv idroot单向数据绑定input keyup.caps-lock showInfo(12) typetext v-bind:valuename/br/双向数据绑定input keydown.ctrl.y showInfo(12) typetext v-model:valueurl/br/button clickshowInfo($event,11)点我/buttonh1{{fullName}}/h1/divscript typetext/javascriptVue.config.productionTip false //阻止vue在启动时生成生产提示//容器与vue实例只能时一对一的关系let age 10let data{name:Vue,url:https://www.baidu.com};const v new Vue({el:#root,//通常为ucss选择器data,//计算属性computed:{//1.完整写法fullName:{get(){return this.name-this.url},//当fullName被修改时set方法被调用set(value){console.log(set,value)const arr value.split(-)this.name arr[0]this.url arr[1]}}//2.简写方法只有读才能够使用简写方式fullName[:function](){//:function也是可以省略的return this.name-this.url}}})/script
/body监视属性——watch
当被监视的属性变化时回调函数自动调用进行相关操作。监视的属性必须存在才能进行监视。Vue中的watch默认不监测对象内部值的改变(一层)。配置deep:true可以监测对象内部值改变(多层)。监视的两种写法1.new Vue时传入watch配置2.通过vm.$watch监视。备注1.Vue自身可以监测对象内部值的改变但Vue提供的watch方法默认不可以2.使用watch时根据数据具体结构决定是否采用深度监测。 const v new Vue({el:#root,//通常为ucss选择器data,computed:{fullName(){return this.name-this.url}},//第1种写法watch:{info:{//监视info属性immediate:true,//初始化让handler调用一下//handler什么时候被调用当info发生改变时handler(newValue,oldValue){console.log(info被修改了,newValue,oldValue)}}}})//第2种写法vm.$watch(info,{deep:true,//监视多级结构种某个属性的变化immediate:true,//初始化让handler调用一下//handler什么时候被调用当info发生改变时handler(newValue,oldValue){console.log(info被修改了,newValue,oldValue)}})计算属性vs监视属性
computed和watch之间的区别
computed能完成的功能watch都可以完成。watch能完成的功能computed不一定能完成例如watch可以进行异步操作。重要原则 所有被Vue管理的函数最好写成普通函数这样this的指向才是vm或组件实例对象。所有不被Vue所管理的函数(定时器的回调函数、ajax的回调函数等、Promise的回调函数)最好写成箭头函数。这样this的指向才是vm或组件实例对象。
Vue监视数据的原理 vue会监视data中所有层次的数据 如何监测对象中的数据 通过setter实现监视且要在new Vue时就传入要监视的数据。 1对象中后追加的属性Vue默认不做响应式处理 2如需给后添加的属性做响应式使用如下API:Vue.set()/vm.$set() 如何监测数组中的数据 在Vue修改数组中的某个元素一定要用如下方法 使用这些APIpush()、pop()、shift()、unshift()、splice()、sort()、reverse()Vue.set()或vm.$set() 特别注意Vue.set和vm.$set不能给vm或vm的跟数据对象添加属性
绑定样式
在 Vue.js 中我们可以使用 v-bind 指令来绑定 style 样式和 class 样式。主要有两种方式绑定 class 和 style分别是对象语法和数组语法。以下是两种方式的使用
对象语法的绑定方式
在需要绑定 style类名时可以使用 v-bind 绑定一个对象对象中的 key 就是需要添加的样式名或类名value 则是这个样式是否需要添加。
绑定class样式
div v-bind:class{ active: isActive }/div在上面的代码中只有在isActive为true时才会给这个div添加一个名为active的类。
绑定style样式
div v-bind:style{ color: activeColor, fontSize: fontSize px }/div在这里activeColor和fontSize是定义在Vue实例或组件选项中的数据。
数组语法的绑定方式
另一种方式就是将一个包含样式名或类名的数组 bind 到 class 或者 style。不管数组元素的个数是多少数组元素可以是字符串或对象。
绑定class样式
div v-bind:class[activeClass, errorClass]/div在这个例子中activeClass和errorClass都应该是之前已经定义过的数据属性。
绑定style样式
div v-bind:style[baseStyles, overridingStyles]/div在这个例子中baseStyles和overridingStyles都是之前定义过的样式对象。
条件渲染
v-if 写法1. v-if‘表达式’ 2. v-else-if ‘表达式’3. v-else‘表达式’适用于切换频率较低的场景。特点不展示的DOM元素直接被移除注意v-if可以和v-else-if、v-else一起使用但要求结构不能被”打断“v-if可以和template一起使用 template v-iftrueh1Hello/h1h2sdsdsd/h2/templatev-show 写法v-show‘表达式’适用于切换频率较高的场景特点不展示的DOM元素未被移除仅仅是样式隐藏掉 备注使用v-if时元素可能无法获取到而使用v-show一定可以获取到 列表渲染 过滤器
定义对要显示的数据进行特定格式化后再显示适用于一些简单逻辑的处理。语法 注册过滤器Vue.filter(name,callback)或new Vue(filters:{}).使用过滤器{{xxx|过滤器名}} 或v-bind:属性xxx | 过滤器名 备注 过滤器也可以接受额外参数多个过滤器也可以串联并没有改变原本的数据时产生新的数据
!DOCTYPE html
headscript srchttps://cdn.jsdelivr.net/npm/vue2.7.14/script
/head
bodydiv idrooth3{{time|timeFormation(YYYY_MM_DD)|mySlice}}/h3/divscript typetext/javascriptVue.config.productionTip false //阻止vue在启动时生成生产提示//全局过滤器Vue.filter(mySlice,function(value){return value.slice(0,4)})let age 10let data{name:Vue,url:https://www.baidu.com,time:1621685748334};const v new Vue({el:#root,//通常为ucss选择器data,//局部过滤器filters:{timeFormation(value,strYYYY年MM月DD日 HH:mm:ss){return dayjs(value).format(str)},mySlice(value){return value.slice(0,4)}}})vm.$watch(info,{immediate:true,//初始化让handler调用一下//handler什么时候被调用当info发生改变时handler(newValue,oldValue){console.log(info被修改了,newValue,oldValue)}})/script
/bodyv-once指令
v-once所在节点初次动态渲染后就视为静态内容了以后数据的改变不会引起v-once所在结构的更新可以用于性能优化
v-cloak指令
本质上是一个特殊属性Vue实例创建完毕并接管容器后会删掉v-cloak属性配合使用css的{ display: none }可以解决网速慢时页面展示出{{xxx}}的问题
v-html指令
向指定节点中渲染包含html结构的内容。v-html替换节点中所有的内容{{xxx}}则不会v-html可以识别html结构。v-html有安全性问题1.在网站上动态渲染任意html是非常危险的容易导致XSS攻击一定要在可信的内容上使用v-html永远不要用在用户提交的内容上。
v-pre指令
跳过其所在节点的编译过程与 v-cloak的功能相反可利用它跳过没有使用指令语法、没有使用插值语法的节点会加快编译速度
自定义指令
在 Vue 中除了内置指令 (v-model, v-show, v-else 等) 外也可以自定义指令。自定义指令的语法和使用方式如下
1.全局自定义指令
Vue.directive(directiveName, {bind: function (el, binding, vnode, oldVnode) {// 这里写你的代码比如操作 DOM},// 同样你可以提供其他的钩子函数如 inserted, update, componentUpdated, unbind 等
});// 使用时在元素上添加 v-directiveName2.局部自定义指令 (在某个 Vue 实例或组件中定义)
new Vue({el: #app,directives: {directiveName: {bind: function (el, binding, vnode, oldVnode) {// 这里写你的代码比如操作 DOM},// 同样你可以提供其他的钩子函数如 inserted, update, componentUpdated, unbind 等}}
});自定义指令提供了几个钩子函数如 bind、inserted、update、componentUpdated 和 unbind它们的意义如下
bind只调用一次指令第一次绑定到元素时调用。inserted被绑定元素插入父节点时调用。update所在组件的 VNode 更新时调用。componentUpdated指令所在组件的 VNode 及其子 VNode 全部更新后调用。unbind只调用一次指令与元素解绑时调用。
这些钩子函数的参数如下
el: 指令所绑定的元素可以用来直接操作 DOM 。binding: 一个对象包含以下属性 name指令名不包括 v- 前缀指令名如果是多个单词要使用kebab-case命名不要使用camelCase命名。value指令的绑定值例如v-directiveName“1 1”value 的值是 2。oldValue指令绑定前的值。expression字符串形式的指令表达式。arg传给指令的参数。modifiers一个包含修饰符的对象。 vnodeVue 编译生成的虚拟节点。oldVnode上一个虚拟节点仅在 update 和 componentUpdated 钩子中可用。
React和Vue中key的作用与原理 虚拟dom中key的作用 key是虚拟dom对象的标识当数据发生变化时 Vue会根据【新数据】生成【新的虚拟DOM】随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较。 对比规则 旧虚拟dom中找到了与新虚拟dom相同的key——若虚拟dom中内容没变直接使用之前的真实dom若虚拟dom中内容变了则生成新的真实dom随后替换掉页面中之前的真实dom。旧虚拟dom中未找到与新虚拟dom相同的key——创建新的真实dom随后渲染到页面。 用index作为key可能会引发的问题 若对数据进行逆序添加逆序删除等破坏顺序操作会产生没有必要的真实dom更新 界面效果没有问题但效率低。如果结构中还包含了输入类的dom会产生错误dom更新界面有问题。 并发中如何选择key 最好只有每条数据的唯一标识作为key比如id、手机号等。如果不存在对数据的逆序添加逆序删除等破坏顺序的操作仅用于渲染列表用于展示使用index作为key也是没有问题的。
Vue中的生命周期 总结 mounted发送ajax请求启动定时器绑定自定义事件、订阅消息等【初始化操作】。beforeDestory清除定时器、解绑自定义事件、取消订阅消息等【收尾工作】。销毁后借助Vue开发者工具看不到任何消息。销毁后自定义事件会失效但原生dom事件依然有效。一般不会在beforeDestory操作数据因为即便操作数据也不会再触发更新流程了。
