个人网站建站源码,南昌专业制作网站设计,网站更换标题,网站关键词 价格生成前言 个人认为vue的指令,对比react来说,给开发者节省了很大的学习成本。比如在react中,你想渲染一个列表,需要用Array.map的方法returndiv,而在vue中,一个简单的v-for就解决了问题。 在学习成本和入手体验上,vue的作者确实后来者居上,能让人更快的使用vue开发。不过也…前言 个人认为vue的指令,对比react来说,给开发者节省了很大的学习成本。比如在react中,你想渲染一个列表,需要用Array.map的方法returndiv,而在vue中,一个简单的v-for就解决了问题。 在学习成本和入手体验上,vue的作者确实后来者居上,能让人更快的使用vue开发。不过也是老生常谈的问题,各有特点,不做过多比较。 vue中的指令是用在标签上或者组件上,是ui层和数据层的交互介质。这个官方没有这么说,是我自己说的,比如你使用v-if,通过data去控制ui,使用v-model实现ui和data的双向交互。 我这里并不是指令的具体教程,只是一些demo的测试效果。 示例 这里我将指令分为三块 简单指令:学习简单,使用简单 复杂指令:可以在组件上使用,或者有修饰符等 自定义指令:自定义一些指令去实现某些业务功能 简单指令 v-text 用来回显常规字符串的 h6v-text使用/h6p使用v-text----span v-texttextValue/span/pp使用模板语法----span{{ textValue }}/span/p//datatextValue: 这是一段常规文字, 效果 v-html 用来回显html的节点 h6v-html使用/h6 div v-htmlhtmlTemplate/div//data htmlTemplate: divinput/button按钮/button/div 效果 v-show 用来控制元素的样式回显 h6v-show使用/h6 el-checkbox v-modelcheckedValue开关/el-checkbox p v-showcheckedValue开启/p p v-show!checkedValue关闭/p//data checkedValue: true, 效果 v-if v-else-if v-else 用来控制元素的渲染 h6v-if else-if else的使用/h6 p数字:{{ numValue }}/p el-button clickaddNum增加/el-button el-button clickdeleteNum减少/el-button p v-ifnumValue 0大于0/p p v-else-ifnumValue 0等于0/p p v-else小于0/p//data numValue: 0,//methods addNum() {this.numValue }, deleteNum() {this.numValue-- }, v-for 渲染数组类型 h6v-for使用/h6ulli v-for(item, index) in listValue :keyitem.value{{ item.label }}/li/ul//datalistValue: [{label: 文字1,value: one},{label: 文字2,value: two},{label: 文字3,value: three}], v-pre 跳过对js等变量的编译,渲染原始html h6v-pre使用/h6p v-pre我是不需要编译的span{{ textValue }}/span/p//datatextValue: 这是一段常规文字, v-cloak 渲染完成之前的一种替代(网速慢优化策略) h6v-cloak使用/h6p v-cloak{{ textValue }}/p v-once 元素只会渲染一次,更新不会重新渲染 h6v-once使用/h6el-button clickchangeNumberVal修改值/el-buttonp v-once不变的:{{ numberVal }}/pp变化的的:{{ numberVal }}/p//data numberVal: 100,//methodschangeNumberVal() {this.numberVal}, 复杂指令 v-on 用来处理事件的 简写和动态事件 h6v-on使用(简写为)/h6 el-button v-on:clickclickFun常规点击/el-button el-button clickclickFun简写常规点击/el-button el-button v-on:[eventName]clickFun动态事件/el-button el-button [eventName]clickFun动态事件简写/el-button el-button click.onceclickFun只生效一次/el-button//methodsclickFun() {console.log(常规点击)}, 依次点击按钮,最后一个按钮点击只触发依次 阻止默认事件 a hrefhttp://www.baidu.com clickclickFunel-button无限制跳转/el-button/a a hrefhttp://www.baidu.com click.preventclickFunel-button阻止默认事件/el-button/a//methodsclickFun() {console.log(常规点击)}, 第一个按钮会先触发函数,再跳往至百度页面。 第二个按钮只会触发函数,不会跳转页面。 阻止事件冒泡 span clickclickSpanFunel-button clickclickFun节点嵌套事件冒泡/el-button/span span clickclickSpanFunel-button click.stopclickFun阻止事件冒泡/el-button/span//methodsclickFun() {console.log(常规点击)},clickSpanFun() {console.log(点击span标签)}, 点击按钮1 点击按钮2 其他事件和点击组件的修饰符 input v-modelinputValue keyup.enterinputEventFun typetext el-input v-modelinputValue keyup.native.enterinputEventFun/el-input Child click.nativecomponentClick/Child v-bind 动态渲染值 h6v-bind使用/h6 p v-bind:classclassName动态class/p p :stylestyleName动态样式加简写/p el-button :name1name1 :name2name2 name3属性3 refbtn1 clickcheckBtn1查看element按钮组件的自定义属性/el-button button :name1name1 :name2name2 name3属性3 refbtn2 clickcheckBtn2查看原生dom的自定义属性/button//dataname1: 属性1,name2: JSON.stringify({value: 属性3}), 依次点击两个按钮 v-model 输入框类型数据视图双向绑定 h6v-model使用/h6 p常规v-modelel-input v-modelInputVal/el-input/p plazy修饰符input v-model.lazyInputLazyVal inputinputLazyFun //p pnumber修饰符el-input v-model.numberInputNumberVal/el-input/p ptrim修饰符el-input v-model.trimInputTrimVal/el-input/p v-slot 插槽,这里不说了,看插槽相关的文档吧 自定义指令 语法 全局注册和局部注册 局部注册 局部注册就是在当前组件里面写 templatedivh6固定颜色指令/h6p v-color固定红色的指令效果/p/div /templatescriptexport default{data(){return{ } },directives: {color: {// 指令的定义inserted: function (el) {el.style.color red}}}, }/script 全局注册 创建一个js文件并在main.js中引入  import Vue from vueVue.directive(setColor,{//初始化钩子inserted:function(el,val,vnode){console.log(el,val,vnode,???自定义函数)el.style.color val.value || #000},//更新钩子update:function(el,val,vnode){console.log(el,val,vnode,???自定义函数)el.style.color val.value || #000}, })引入后,任意组件内都可以使用 h6自定义颜色/h6选择一个颜色吧:el-color-picker v-modelcolorValue/el-color-pickerp v-setColorcolorValue我是一段可选择颜色的字段/p//data colorValue:#000 定义一个可拖拽的指令 vue组件 h6可拖拽指令/h6 div classdragBoxdiv classdragContent v-draggable/div /divstyle langless.dragBox {position: relative;width: 800px;height: 200px;border: 1px solid #000;.dragContent {position: absolute;width: 50px;height: 50px;background: red;cursor: move;left: 10px;top: 10px;} } /style 定义指令 Vue.directive(draggable,{inserted: function (el) {el.onmousedown function (e) {var disx e.pageX - el.offsetLeft;var disy e.pageY - el.offsetTop;document.onmousemove function (e) {el.style.left e.pageX - disx px;el.style.top e.pageY - disy px;}document.onmouseup function () {document.onmousemove document.onmouseup null;}}}, }) 自定义指令在实际的项目中还是很重要的,可以实现很多的业务场景。 比如我个人就用指令完成过水印效果,拖拽,按钮权限的控制等,学会自定义指令,也是多少需要复习一下很多人抛弃已久的dom基础知识。 全部代码 vue组件 templatediv classboxel-tabs v-modelactiveNameel-tab-pane label简单指令(不需要修饰符) namefirstdiv classcontent1h6v-text使用/h6p使用v-text----span v-texttextValue/span/pp使用模板语法----span{{ textValue }}/span/p/divdiv classcontent1h6v-html使用/h6div v-htmlhtmlTemplate/div/divdiv classcontent1h6v-show使用/h6el-checkbox v-modelcheckedValue开关/el-checkboxp v-showcheckedValue开启/pp v-show!checkedValue关闭/p/divdiv classcontent1h6v-if else-if else的使用/h6p数字:{{ numValue }}/pel-button clickaddNum增加/el-buttonel-button clickdeleteNum减少/el-buttonp v-ifnumValue 0大于0/pp v-else-ifnumValue 0等于0/pp v-else小于0/p/divdiv classcontent1h6v-for使用/h6ulli v-for(item, index) in listValue :keyitem.value{{ item.label }}/li/ul/divdiv classcontent1h6v-pre使用/h6p v-pre我是不需要编译的span{{ textValue }}/span/p/divdiv classcontent1h6v-cloak使用/h6p v-cloak{{ textValue }}/p/divdiv classcontent1h6v-once使用/h6el-button clickchangeNumberVal修改值/el-buttonp v-once不变的:{{ numberVal }}/pp变化的的:{{ numberVal }}/p/div/el-tab-paneel-tab-pane label复杂指令 nameseconddiv classcontent2h6v-on使用(简写为)/h6el-button v-on:clickclickFun常规点击/el-buttonel-button clickclickFun简写常规点击/el-buttonel-button v-on:[eventName]clickFun动态事件/el-buttonel-button [eventName]clickFun动态事件简写/el-buttonel-button click.onceclickFun只生效一次/el-buttonbra hrefhttp://www.baidu.com clickclickFunel-button无限制跳转/el-button/aa hrefhttp://www.baidu.com click.preventclickFunel-button阻止默认事件/el-button/abrp clickclickPFunspan clickclickSpanFunel-button clickclickFun节点嵌套事件冒泡/el-button/spanspan clickclickSpanFunel-button click.stopclickFun阻止事件冒泡/el-button/span/pbrinput v-modelinputValue keyup.enterinputEventFun typetextel-input v-modelinputValue keyup.native.enterinputEventFun/el-inputChild click.nativecomponentClick/Childbrbutton v-on{ mousedown: mousedownFun, mouseup: mouseUpFun }对象语法/button/divdiv classcontent2h6v-bind使用/h6p v-bind:classclassName动态class/pp :stylestyleName动态样式加简写/pel-button :name1name1 :name2name2 name3属性3 refbtn1clickcheckBtn1查看element按钮组件的自定义属性/el-buttonbutton :name1name1 :name2name2 name3属性3 refbtn2 clickcheckBtn2查看原生dom的自定义属性/button/divdiv classcontent2h6v-model使用/h6p常规v-modelel-input v-modelInputVal/el-input/pplazy修饰符input v-model.lazyInputLazyVal inputinputLazyFun //ppnumber修饰符el-input v-model.numberInputNumberVal/el-input/pptrim修饰符el-input v-model.trimInputTrimVal/el-input/p/divdiv classcontent2h6v-slot使用/h6具体参考插槽吧,这里不做演示了/div/el-tab-paneel-tab-pane label自定义指令 namethirdh6固定颜色指令/h6p v-color固定红色的指令效果/phrh6自定义颜色/h6选择一个颜色吧:el-color-picker v-modelcolorValue/el-color-pickerp v-setColorcolorValue我是一段可选择颜色的字段/phrh6可拖拽指令/h6div classdragBoxdiv classdragContent v-draggable/div/div/el-tab-pane/el-tabs/div /template script import Child from ./child.vue export default {name: instructions,data() {return {activeName: first,textValue: 这是一段常规文字,htmlTemplate: divinput/button按钮/button/div,checkedValue: true,numValue: 0,numberVal: 100,inputValue: 输入框的值,listValue: [{label: 文字1,value: one},{label: 文字2,value: two},{label: 文字3,value: three}],eventName: click,className: classP,styleName: {color: green},name1: 属性1,name2: JSON.stringify({value: 属性3}),InputVal: 常规输入框的值,InputLazyVal: lazy输入框的值,InputNumberVal: 1,InputTrimVal: 去空输入框的值,colorValue: #000,}},directives: {color: {// 指令的定义inserted: function (el) {el.style.color red}}},components: {Child},methods: {addNum() {this.numValue},deleteNum() {this.numValue--},changeNumberVal() {this.numberVal},clickFun() {console.log(常规点击)},clickPFun() {console.log(点击p标签)},clickSpanFun() {console.log(点击span标签)},inputEventFun() {console.log(this.inputValue, 输入框的值)},componentClick(e) {console.log(e, 点击了组件)},mousedownFun() {console.log(鼠标按下)},mouseUpFun() {console.log(鼠标抬起)},checkBtn1() {let btn1 this.$refs.btn1console.log(btn1, element组件按钮)console.log(btn1.$attrs[name1], JSON.parse(btn1.$attrs[name2]), btn1.$attrs[name3], 按钮的属性)},checkBtn2() {let btn2 this.$refs.btn2console.log(btn2, btn的节点)console.log(btn2.getAttribute(name1), JSON.parse(btn2.getAttribute(name2)), btn2.getAttribute(name3), 按钮的属性)},inputLazyFun() {console.log(this.InputLazyVal, lazy值)},}, } /script style langless scoped .box {padding: 14px;.content1 {float: left;width: 30%;height: 200px;margin: 10px;padding: 8px;box-shadow: 1px 1px 1px 1px #837e7e;h6 {font-size: 14px;font-weight: 600;}}.content2 {float: left;width: 40%;height: 350px;margin: 10px;padding: 8px;box-shadow: 1px 1px 1px 1px #837e7e;h6 {font-size: 14px;font-weight: 600;}}}[v-cloak] {display: none; }.classP {color: red; }.dragBox {position: relative;width: 800px;height: 200px;border: 1px solid #000;.dragContent {position: absolute;width: 50px;height: 50px;background: red;cursor: move;left: 10px;top: 10px;} } /style 自定义指令文件 import Vue from vue import _ from lodash Vue.directive(setColor,{inserted:function(el,val,vnode){console.log(el,val,vnode,???自定义函数)el.style.color val.value || #000},update:function(el,val,vnode){console.log(el,val,vnode,???自定义函数)el.style.color val.value || #000}, })Vue.directive(draggable,{inserted: function (el) {el.onmousedown function (e) {var disx e.pageX - el.offsetLeft;var disy e.pageY - el.offsetTop;document.onmousemove function (e) {el.style.left e.pageX - disx px;el.style.top e.pageY - disy px;}document.onmouseup function () {document.onmousemove document.onmouseup null;}}}, }) 那个child组件我没有写,随便定义一个就行,这些代码可以直接复制测试 感觉有用就给个赞吧!!!