做网站需要几步,公司怎么建设官网,建站登录,财经类 直播类网站开发前言
个人认为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组件我没有写,随便定义一个就行,这些代码可以直接复制测试
感觉有用就给个赞吧!!!
