东阳科技网站建设,宁波建网站方式,软件工程需要学哪些课程,wordpress制作网站一、前言二、Vue常用指令2.1 什么是指令#xff1f;指令 (Directives) 是带有 v- 前缀的特殊特性。指令特性的预期值是#xff1a;单个 JavaScript 表达式。指令的职责是#xff0c;当表达式的值改变时#xff0c;将其产生的连带影响#xff0c;响应式地作用于 DOM。 例如…一、前言二、Vue常用指令2.1 什么是指令指令 (Directives) 是带有 v- 前缀的特殊特性。指令特性的预期值是单个 JavaScript 表达式。指令的职责是当表达式的值改变时将其产生的连带影响响应式地作用于 DOM。 例如我们在入门案例中的v-on代表绑定事件。2.2 插值表达式2.2.1.花括号格式{{表达式}}说明该表达式支持JS语法可以调用js内置函数必须有返回值表达式必须有返回结果。例如 1 1没有结果的表达式不允许使用如var a 1 1;可以直接获取Vue实例中定义的数据或函数示例HTMLdiv idapp{{name}}/divJS:var app new Vue({el:#app,data:{name:Jack}
})2.2.2 插值闪烁使用{{}}方式在网速较慢时会出现问题。在数据未加载完成时页面会显示出原始的{{}}加载完毕后才显示正确数据我们称为插值闪烁。我们将网速调慢一些然后试试看刚才的案例刷新页面2.2.3 v-text和v-html使用v-text和v-html指令来替代{{}}说明v-text将数据输出到元素内部如果输出的数据有HTML代码会作为普通文本输出v-html将数据输出到元素内部如果输出的数据有HTML代码会被渲染示例HTML:div idappv-text:span v-texthello/span br/v-html:span v-htmlhello/span
/divJS:var vm new Vue({el:#app,data:{hello: h1大家好我是峰哥/h1}
})效果并且不会出现插值闪烁当没有数据时会显示空白。2.3 v-model指令刚才的v-text和v-html可以看做是单向绑定数据影响了视图渲染但是反过来就不行。接下来学习的v-model是双向绑定视图View和模型Model之间会互相影响。既然是双向绑定一定是在视图中可以修改数据这样就限定了视图的元素类型。目前v-model的可使用元素有inputselecttextareacheckboxradiocomponentsVue中的自定义组件基本上除了最后一项其它都是表单的输入项。举例htmldiv idappinput typecheckbox v-modellanguage valueJava /Javabr/input typecheckbox v-modellanguage valuePHP /PHPbr/input typecheckbox v-modellanguage valueSwift /Swiftbr/h1你选择了{{language.join(,)}}/h1
/div
script src./node_modules/vue/dist/vue.js/script
script typetext/javascriptvar vm new Vue({el:#app,data:{language: []}})
/script多个CheckBox对应一个model时model的类型是一个数组单个checkbox值默认是boolean类型radio对应的值是input的value值input 和textarea 默认对应的model是字符串select单选对应字符串多选对应也是数组效果2.4 v-on指令2.4.1 基本用法v-on指令用于给页面元素绑定事件。语法v-on:事件名js片段或函数名示例div idapp!--事件中直接写js片段--button v-on:clicknum增加一个/buttonbr/!--事件指定一个回调函数必须是Vue实例中定义的函数--button v-on:clickdecrement减少一个/buttonbr/h1有{{num}}个女神迷恋峰哥/h1
/div
script src./node_modules/vue/dist/vue.js/script
script typetext/javascriptvar app new Vue({el:#app,data:{num:100},methods:{decrement(){this.num--;}}})
/script另外事件绑定可以简写例如v-on:clickadd可以简写为clickadd2.4.2 事件修饰符在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在方法中轻松实现这点但更好的方式是方法只有纯粹的数据逻辑而不是去处理 DOM 事件细节。为了解决这个问题Vue.js 为 v-on 提供了事件修饰符。修饰符是由点开头的指令后缀来表示的。.stop 阻止事件冒泡到父元素.prevent阻止默认事件发生.capture使用事件捕获模式.self只有元素自身触发事件才执行。冒泡或捕获的都不执行.once只执行一次阻止默认事件div idapp!--右击事件并阻止默认事件发生--button v-on:contextmenu.preventnum增加一个/buttonbr/!--右击事件不阻止默认事件发生--button v-on:contextmenudecrement($event)减少一个/buttonbr/h1有{{num}}个女神迷恋峰哥/h1
/div
script src./node_modules/vue/dist/vue.js/script
script typetext/javascriptvar app new Vue({el: #app,data: {num: 100},methods: {decrement(ev) {// ev.preventDefault();this.num--;}}})
/script效果右键“增加一个”不会触发默认的浏览器右击事件右键“减少一个”会触发默认的浏览器右击事件2.4.3 按键修饰符在监听键盘事件时我们经常需要检查常见的键值。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符!-- 只有在 keyCode 是 13 时调用 vm.submit() --
input v-on:keyup.13submit记住所有的 keyCode 比较困难所以 Vue 为最常用的按键提供了别名!-- 同上 --
input v-on:keyup.entersubmit!-- 缩写语法 --
input keyup.entersubmit全部的按键别名.enter.tab.delete (捕获“删除”和“退格”键).esc.space.up.down.left.right2.4.4 组合按钮可以用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器。.ctrl.alt.shift例如!-- Alt C --
input keyup.alt.67clear!-- Ctrl Click --
div click.ctrldoSomethingDo something/div三、Vue高级指令3.1 v-for指令遍历数据渲染页面是非常常用的需求Vue中通过v-for指令来实现。3.1.1 遍历数组语法v-foritem in itemsitems要遍历的数组需要在vue的data中定义好。item迭代得到的数组元素的别名示例div idappulli v-foruser in users{{user.name}} - {{user.gender}} - {{user.age}}/li/ul
/div
script src./node_modules/vue/dist/vue.js/script
script typetext/javascriptvar app new Vue({el: #app,data: {users:[{name:柳岩, gender:女, age: 21},{name:峰哥, gender:男, age: 18},{name:范冰冰, gender:女, age: 24},{name:刘亦菲, gender:女, age: 18},{name:古力娜扎, gender:女, age: 25}]},})
/script效果3.1.2 数组角标在遍历的过程中如果我们需要知道数组角标可以指定第二个参数语法v-for(item,index) in itemsitems要迭代的数组item迭代得到的数组元素别名index迭代到的当前元素索引从0开始。示例ulli v-for(user, index) in users{{index 1}}. {{user.name}} - {{user.gender}} - {{user.age}}/li/ul效果3.1.3 遍历对象v-for除了可以迭代数组也可以迭代对象。语法基本类似语法v-forvalue in object
v-for(value,key) in object
v-for(value,key,index) in object1个参数时得到的是对象的属性2个参数时第一个是属性第二个是键3个参数时第三个是索引从0开始示例div idappulli v-for(value, key, index) in user{{index 1}}. {{key}} - {{value}}/li/ul
/div
script src./node_modules/vue/dist/vue.js/script
script typetext/javascriptvar vm new Vue({el:#app,data:{user:{name:峰哥, gender:男, age: 18}}})
/script效果3.1.4 key当 Vue.js 用 v-for 正在更新已渲染过的元素列表时它默认用“就地复用”策略。如果数据项的顺序被改变Vue 将不会移动 DOM 元素来匹配数据项的顺序 而是简单复用此处每个元素并且确保它在特定索引下显示已被渲染过的每个元素。这个功能可以有效的提高渲染的效率。但是要实现这个功能你需要给Vue一些提示以便它能跟踪每个节点的身份从而重用和重新排序现有元素你需要为每项提供一个唯一 key 属性。理想的 key 值是每项都有的且唯一的 id。示例ulli v-for(item,index) in items :keyindex/li
/ul这里使用了一个特殊语法:key 我们后面会讲到它可以让你读取vue中的属性并赋值给key属性这里我们绑定的key是数组的索引应该是唯一的3.2 v-if指令和v-show指令3.2.1 基本使用v-if顾名思义条件判断。当得到结果为true时所在的元素才会被渲染。语法v-if布尔表达式示例div idappbutton v-on:clickshow !show点我呀/buttonbrh1 v-ifshow看到我啦/h1h1 v-showshow看到我啦show/h1
/div
script src./node_modules/vue/dist/vue.js/script
script typetext/javascriptvar app new Vue({el: #app,data: {show: true}})
/script效果3.2.2 与v-for结合当v-if和v-for出现在一起时v-for优先级更高。也就是说会先遍历再判断条件。修改v-for中的案例添加v-ifulli v-for(user, index) in users v-ifuser.gender 女{{index 1}}. {{user.name}} - {{user.gender}} - {{user.age}}/li/ul效果只显示女性用户信息3.2.3 v-else你可以使用 v-else 指令来表示 v-if 的“else 块”div idapph1 v-ifMath.random() 0.5看到我啦if/h1h1 v-else看到我啦else/h1
/divv-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面否则它将不会被识别。v-else-if顾名思义充当 v-if 的“else-if 块”可以连续使用div idappbutton v-on:clickrandomMath.random()点我呀/buttonspan{{random}}/spanh1 v-ifrandom 0.75看到我啦if/h1h1 v-else-ifrandom 0.5看到我啦if 0.5/h1h1 v-else-ifrandom 0.25看到我啦if 0.25/h1h1 v-else看到我啦else/h1
/div
script src./node_modules/vue/dist/vue.js/script
script typetext/javascriptvar app new Vue({el: #app,data: {random: 1}})
/script类似于 v-elsev-else-if 也必须紧跟在带 v-if 或者 v-else-if 的元素之后。演示3.2.4 v-show另一个用于根据条件展示元素的选项是 v-show 指令。用法大致一样h1 v-showokHello!/h1不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 属性 display。示例div idapp!--事件中直接写js片段--button v-on:clickshow !show点击切换/buttonbr/h1 v-ifshow你好/h1/divscript src./node_modules/vue/dist/vue.js/scriptscript typetext/javascriptvar app new Vue({el:#app,data:{show:true}})/script代码3.3 v-bind指令html属性不能使用双大括号形式绑定只能使用v-bind指令。在将 v-bind 用于 class 和 style 时Vue.js 做了专门的增强。表达式结果的类型除了字符串之外还可以是对象或数组。div idapp!--可以是数据模型可以是具有返回值的js代码块或者函数--div v-bind:titletitle styleborder: 1px solid red; width: 50px; height: 50px;/div
/div
script src./node_modules/vue/dist/vue.js/script
script typetext/javascriptvar app new Vue({el: #app,data: {title: title,}})
/script效果在将 v-bind 用于 class 和 style 时Vue.js 做了专门的增强。表达式结果的类型除了字符串之外还可以是对象或数组。3.3.1 绑定class样式数组语法我们可以借助于v-bind指令来实现HTMLdiv idappdiv v-bind:classactiveClass/divdiv v-bind:classerrorClass/divdiv v-bind:class[activeClass, errorClass]/div
/div
script src./node_modules/vue/dist/vue.js/script
script typetext/javascriptvar app new Vue({el: #app,data: {activeClass: active,errorClass: [text-danger, text-error]}})
/script渲染后的效果具有active和hasError的样式对象语法我们可以传给 v-bind:class 一个对象以动态地切换 classdiv v-bind:class{ active: isActive }/div上面的语法表示 active 这个 class 存在与否将取决于数据属性 isActive 的 truthiness所有的值都是真实的除了false,0,“”,null,undefined和NaN。你可以在对象中传入更多属性来动态切换多个 class。此外v-bind:class 指令也可以与普通的 class 属性共存。如下模板:div classstaticv-bind:class{ active: isActive, text-danger: hasError }
/div和如下 datadata: {isActive: true,hasError: false
}结果渲染为div classstatic active/divactive样式和text-danger样式的存在与否取决于isActive和hasError的值。本例中isActive为truehasError为false所以active样式存在text-danger不存在。通常情况下绑定的数据对象不必内联定义在模板里div classstatic v-bind:classclassObject/div数据data: {classObject: {active: true,text-danger: false}
}效果和之前一样div classstatic active/div3.3.2 绑定style样式数组语法数组语法可以将多个样式对象应用到同一个元素上div v-bind:style[baseStyles, overridingStyles]/div数据data: {baseStyles: {background-color: red},overridingStyles: {border: 1px solid black}
}渲染后的结果div stylebackground-color: red; border: 1px solid black;/div对象语法v-bind:style 的对象语法十分直观——看着非常像 CSS但其实是一个 JavaScript 对象。CSS 属性名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case记得用单引号括起来) 来命名div v-bind:style{ color: activeColor, fontSize: fontSize px }/div数据data: {activeColor: red,fontSize: 30
}效果div stylecolor: red; font-size: 30px;/div直接绑定到一个样式对象通常更好这会让模板更清晰div v-bind:stylestyleObject/div
data: {styleObject: {color: red,fontSize: 13px}
}效果同上。3.3.3 简写v-bind:class可以简写为:class3.4 计算属性在插值表达式中使用js表达式是非常方便的而且也经常被用到。但是如果表达式的内容很长就会显得不够优雅而且后期维护起来也不方便例如下面的场景我们有一个日期的数据但是是毫秒值data:{birthday:1529032123201 // 毫秒值
}我们在页面渲染希望得到yyyy-MM-dd的样式h1您的生日是{{new Date(birthday).getFullYear() - new Date(birthday).getMonth() - new Date(birthday).getDay()}}
/h1虽然能得到结果但是非常麻烦。Vue中提供了计算属性来替代复杂的表达式var vm new Vue({el:#app,data:{birthday:1429032123201 // 毫秒值},computed:{birth(){// 计算属性本质是一个方法但是必须返回结果const d new Date(this.birthday);return d.getFullYear() - d.getMonth() - d.getDay();}}
})计算属性本质就是方法但是一定要返回数据。然后页面渲染时可以把这个方法当成一个变量来使用。页面使用div idapph1您的生日是{{birth}} /h1/div效果我们可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。然而不同的是计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。这就意味着只要birthday还没有发生改变多次访问 birthday 计算属性会立即返回之前的计算结果而不必再次执行函数。3.5 watchwatch可以让我们监控一个值的变化。从而做出相应的反应。示例div idappinput typetext v-modelmessage
/div
script src./node_modules/vue/dist/vue.js/script
script typetext/javascriptvar vm new Vue({el:#app,data:{message:},watch:{message(newVal, oldVal){console.log(newVal, oldVal);}}})
/script效果四、Vue组件化在大型应用开发的时候页面可以划分成很多部分。往往不同的页面也会有相同的部分。例如可能会有相同的头部导航。但是如果每个页面都独自开发这无疑增加了我们开发的成本。所以我们会把页面的不同部分拆分成独立的组件然后在不同页面就可以共享这些组件避免重复开发。4.1 全局组件我们通过Vue的component方法来定义一个全局组件。div idapp!--使用定义好的全局组件--counter/counter
/div
script src./node_modules/vue/dist/vue.js/script
script typetext/javascript// 定义全局组件两个参数1组件名称。2组件参数Vue.component(counter,{template:button v-on:clickcount你点了我 {{ count }} 次我记住了./button,data(){return {count:0}}})var app new Vue({el:#app})
/script组件其实也是一个Vue实例因此它在定义时也会接收data、methods、生命周期函数等不同的是组件不会与页面的元素绑定否则就无法复用了因此没有el属性。但是组件渲染需要html模板所以增加了template属性值就是HTML模板全局组件定义完毕任何vue实例都可以直接在HTML中通过组件名称来使用组件了。data必须是一个函数不再是一个对象。效果4.2 组件的复用定义好的组件可以任意复用多次div idapp!--使用定义好的全局组件--counter/countercounter/countercounter/counter
/div效果你会发现每个组件互不干扰都有自己的count值。怎么实现的组件的data属性必须是函数当我们定义这个 counter 组件时它的data 并不是像这样直接提供一个对象data: {count: 0
}取而代之的是一个组件的 data 选项必须是一个函数因此每个实例可以维护一份被返回对象的独立的拷贝data: function () {return {count: 0}
}如果 Vue 没有这条规则点击一个按钮就会影响到其它所有实例4.3 局部注册一旦全局注册就意味着即便以后你不再使用这个组件它依然会随着Vue的加载而加载。因此对于一些并不频繁使用的组件我们会采用局部注册。我们先在外部定义一个对象结构与创建组件时传递的第二个参数一致const counter {template:button v-on:clickcount你点了我 {{ count }} 次我记住了./button,data(){return {count:0}}
};然后在Vue中使用它var app new Vue({el:#app,components:{counter:counter // 将定义的对象注册为组件}
})components就是当前vue对象子组件集合。其key就是子组件名称其值就是组件对象的属性效果与刚才的全局注册是类似的不同的是这个counter组件只能在当前的Vue实例中使用4.4 组件通信通常一个单页应用会以一棵嵌套的组件树的形式来组织页面首先分成了顶部导航、左侧内容区、右侧边栏三部分左侧内容区又分为上下两个组件右侧边栏中又包含了3个子组件各个组件之间以嵌套的关系组合在一起那么这个时候不可避免的会有组件间通信的需求。4.4.1 props父向子传递父组件使用子组件时自定义属性属性名任意属性值为要传递的数据子组件通过props接收父组件属性父组件使用子组件并自定义了title属性div idapph1打个招呼/h1!--使用子组件同时传递title属性--introduce title大家好我是锋哥/
/div
script src./node_modules/vue/dist/vue.js/script
script typetext/javascriptVue.component(introduce,{// 直接使用props接收到的属性来渲染页面template:h1{{title}}/h1,props:[title] // 通过props来接收一个父组件传递的属性})var app new Vue({el:#app})
/script效果4.4.2 props验证我们定义一个子组件并接受复杂数据const myList {template: ulli v-foritem in items :keyitem.id{{item.id}} : {{item.name}}/li/ul,props: {items: {type: Array,default: [],required: true}}};这个子组件可以对 items 进行迭代并输出到页面。props定义需要从父组件中接收的属性items是要接收的属性名称type限定父组件传递来的必须是数组default默认值required是否必须当 prop 验证失败的时候(开发环境构建版本的) Vue 将会产生一个控制台的警告。我们在父组件中使用它div idapph2传智播客已开设如下课程/h2!-- 使用子组件的同时传递属性这里使用了v-bind指向了父组件自己的属性lessons --my-list :itemslessons/
/div
var app new Vue({el:#app,components:{myList // 当key和value一样时可以只写一个},data:{lessons:[{id:1, name: java},{id:2, name: php},{id:3, name: ios},]}
})效果type类型可以有4.4.3 动态静态传递给 prop 传入一个静态的值introduce title大家好我是锋哥/给 prop 传入一个动态的值 通过v-bind从数据模型中获取title的值introduce :titletitle/静态传递时我们传入的值都是字符串类型的但实际上任何类型的值都可以传给一个 props。!-- 即便 42 是静态的我们仍然需要 v-bind 来告诉 Vue --
!-- 这是一个JavaScript表达式而不是一个字符串。--
blog-post v-bind:likes42/blog-post!-- 用一个变量进行动态赋值。--
blog-post v-bind:likespost.likes/blog-post4.4.4 子向父的通信来看这样的一个案例div idapph2num: {{num}}/h2!--使用子组件的时候传递num到子组件中--counter :numnum/counter
/div
script src./node_modules/vue/dist/vue.js/script
script typetext/javascriptVue.component(counter, {// 子组件定义了两个按钮点击数字num会加或减template:divbutton clicknum加/button button clicknum--减/button /div,props:[num]// count是从父组件获取的。})var app new Vue({el:#app,data:{num:0}})
/script子组件接收父组件的num属性子组件定义点击按钮点击后对num进行加或减操作我们尝试运行好像没问题点击按钮试试子组件接收到父组件属性后默认是不允许修改的。怎么办既然只有父组件能修改那么加和减的操作一定是放在父组件var app new Vue({el:#app,data:{num:0},methods:{ // 父组件中定义操作num的方法increment(){this.num;},decrement(){this.num--;}}
})但是点击按钮是在子组件中那就是说需要子组件来调用父组件的函数怎么做我们可以通过v-on指令将父组件的函数绑定到子组件上div idapph2num: {{num}}/h2counter :countnum incincrement decdecrement/counter
/div在子组件中定义函数函数的具体实现调用父组件的实现并在子组件中调用这些函数。当子组件中按钮被点击时调用绑定的函数Vue.component(counter, {template:divbutton clickplus加/button button clickreduce减/button /div,props:[count],methods:{plus(){this.$emit(inc);},reduce(){this.$emit(dec);}}})vue提供了一个内置的this.$emit()函数用来调用父组件绑定的函数效果五、尾声Vue初次邂逅(二)完成了。天天打码天天进步
