《Vue.js前端开发技术与实践（第二版）》 课件 第4章 Vue指令_第1页
《Vue.js前端开发技术与实践（第二版）》 课件 第4章 Vue指令_第2页
《Vue.js前端开发技术与实践（第二版）》 课件 第4章 Vue指令_第3页
《Vue.js前端开发技术与实践（第二版）》 课件 第4章 Vue指令_第4页
《Vue.js前端开发技术与实践（第二版）》 课件 第4章 Vue指令_第5页
已阅读5页，还剩21页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

第4章Vue指令🍒🍒🍒HTMLLHTML+CSSLHTML+CSS+JavaScriptL+hello<p></P>元素开始标签结束标签hello<p></P>

<p

>hello</p>style="color:red"属性属性名属性值有些属性是布尔属性，属性值可以省略，表示打开该属性,如hidden。style="color:red"

<p

>hello</p>onclick="javascript:style.fontSize='40px'"

事件属性元素1、标签（区分不同的类别的元素）2、属性（

操控元素的状态和行为）3、内容（DOM对象中属性innerTEXT、innerHTML）v-textv-htmlv-showv-ifv-elsev-else-ifv-forv-onv-bindv-modelv-slotv-prev-oncev-memov-cloakVue通过指令来用来操控DOM。指令以HTML自定义属性的方式使用，名命以v-开头。为常用的页面功能设置了内置指令15条指令指令类别：内置指令、自定义指令一、指令语法主要职责是当其表达式的值改变时，相应地将某些行为应用在DOM上指令特性的值预期是单个JavaScript表达式一般格式：指令=JS表达式有参数格式：指令:参数=JS表达式（v-bind、v-on

）布尔格式：指令（v-pre、v-once、v-cloak）二、操控DOM内容一般格式：指令=JS表达式v-textv-htmlv-showv-ifv-elsev-else-ifv-forv-prev-oncev-cloak布尔格式：指令v-pre、v-once、v-cloak、elsev-text、v-html、v-forv-show、v-if、v-else-if1、全局属性id、class、title、style、hidden等等2、事件属性有：onblur、onfocus、onsubmit、onkeydown、onkeypress、onclick、ondblclick、onmousedown、onmousemove、等等。/show/49132.html有参数格式：指令:参数=JS表达式参数为属性名，如：v-bind:class=JS表达式参数为事件名，如：v-on:click=事件处理函数三、操控DOM属性（v-bind、v-on）在Vue中，动态的样式类在“v-on:class”中定义，静态的类名写在class样式中。v-bind指令主要用于响应更新HTML元素的属性，将属性动态绑定到表达式三、v-bind指令只需要通过表达式计算出字符串结果即可*表达式表达式：是对一个变量或值的引用，或者是一组值和变更与运算符的组合语句：a=b*100100：字面理表达式b：是一个变量表达式，表示取它的值b*100：算术表达式a=b*100：赋值表达式fn():函数调用表达式在Vue中，动态的样式类在“v-on:class”中定义，静态的类名写在class样式中。v-bind指令主要用于响应更新HTML元素的属性，将属性动态绑定到表达式三、v-bind指令只需要通过表达式计算出字符串结果即可$event事件对象.stop阻止事件冒泡.capture事件流为捕获事件流.self只接收自触发事件.prevent阻止默认事件插槽slot参数为插槽名，如：v-slot:defaultv-slot="{x,y}"

4、操控组件标签(v-slot)5、操控表单(v-model)student={

'name':

'tom',//设置属性

'age':

20,

//设置属性

'say':

function(){

alert("helloworld!")

}//设置方法};HeaderfooterasidecontentHTMLCSSJSHTMLCSSJSHTMLCSSJSHTMLCSSJS它带有前缀v-，主要职责是当其表达式的值改变时，相应地将某些行为应用在DOM上。<!DOCTYPE

html><html

lang="en"><head>

<title>Document</title>

<style>

</style></head><body>

</body>

<script>

</script></html><script

setup>

</script>

<template>

<div>

</div></template>

<style>

</style>Vue单文件组件包

出口模块

模块

模块

模块

模块

App.vueimport{createApp}from

'vue'createApp(import

App

from

'./App.vue')App.mount()'#app'globals:{

defineProps:'readonly',defineEmits:'readonly',defineExpose:'readonly',withDefaults:'readon

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论