版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领
文档简介
第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. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 二零二五私企员工劳动合同与员工绩效评估
- 2025年度无产权车库转让及附属绿化带使用协议
- 二零二五年度科技型企业融资合作框架
- 2025年度矿山股份合作保险合同：矿山安全生产责任险与财产险合作协议
- 二零二五年度城市轨道交通工程用工管理协议
- 2025年度首饰抵押借款合同购买设计师首饰服务协议
- 2025年手房购房合同（含车位及储藏室）
- 【央企招聘】中煤电力有限公司所属企业公开招聘（24人）笔试参考题库附带答案详解
- 2025辽宁鞍山市台安农业发展集团有限公司招聘11人笔试参考题库附带答案详解
- 2025福建投资集团能源板块去场招聘114人笔试参考题库附带答案详解
- 2024年合肥市高三第二次教学质量（二模）英语试卷（含答案）
- 新能源充电桩创业计划书
- 2024届浙江省初中学业水平测试中考科学测模拟试题（二模）附答案
- 2023年全国统一高考政治试卷（湖南卷）含答案与解析
- 运动损伤的预防与处理预防和处理舞蹈运动损伤
- 中班语言活动：小老虎的名片
- 某住宅楼招投标文件
- 第四章-国防动员
- 2022云南省中考道法真题试卷和答案
- 跨文化商务交际导论-教学课件Unit 3 Cultural patterns
- 成语故事-引狼入室
评论
0/150
提交评论