鱼台县建设局网站,京东建设网站的意义,定制 网站开发 价格,攻击网站方法目录
前言
2.1 单文件组件 2.2 数据绑定 2.2.2 响应式数据绑定
2.3 指令
2.3.1 内容渲染指令
2.3.2 属性绑定指令
编辑 2.3.3 事件绑定指令 2.3.4 双向数据绑定指令
2.3.5 条件渲染指令
2.3.6 列表渲染指令 2.4 事件对象 2.5 事件修饰符 学习目标
掌握内容渲染指令
掌握数据绑定能够定义数据并将数据渲染到页面中 掌握列表渲染指令等
前言
在搭建好Vue开发环境后要想使用Vue开发实际项目必须先学习Vue基础知识。只有掌握Vue框架的基础知识后才能根据实际需求游刃有余地进行项目开发。本章将详细讲解Vue开发基础。
2.1 单文件组件
概念在第1章中使用Vite创建Vue项目后目录结构中包含一些扩展名为.vue的文件每个.vue文件都可用来定义一个单文件组件。 Vue中的单文件组件是Vue组件的文件格式。
每个单文件组件由模板、样式和逻辑3个部分构成。
1模板
模板用于搭建当前组件的DOM结构其代码写在template标签中。
2样式
样式是指通过CSS代码为当前组件设置样式其代码写在style标签中。
3逻辑
逻辑是指通过JavaScript代码处理组件的数据与业务其代码写在script标签中。
演示如何定义一个基本的单文件组件。
template!-- 此处编写组件的结构 --
/template
script
/* 此处编写组件的逻辑 */
/script
style
/* 此处编写组件的样式 */
/style
演示单文件组件的使用方法
打开命令提示符切换到D:\vue\chapter02目录在该目录下执行如下命令创建项目。
yarn create vite vue-demo --template vue项目创建完成后执行如下命令进入项目目录启动项目
cd vue-demo
yarn
yarn dev项目启动后可以使用URL地址http://127.0.0.1:5173/进行访问。
使用VS Code编辑器打开D:\vue\chapter02\vue-demo目录 将src\style.css文件中的样式代码全部删除从而避免项目创建时自带的样式代码影响本案例的实现效果。
创建src\components\Demo.vue文件该文件是Demo组件示例
templatediv classdemoDemo组件/div
/template
style
.demo {font-size: 22px;font-weight: bold;
}
/style修改src\main.js文件切换页面中显示的组件
import App from ./components/Demo.vue保存上述代码后Demo组件的页面效果如下图所示。 2.2 数据绑定
概念Vue通过数据绑定实现了数据与页面相分离从而实现了数据驱动视图的效果。即将页面中的数据分离出来放到组件的script标签中通过程序操作数据并且当数据改变时页面会自动发生改变。
数据绑定分为定义数据和输出数据。
1定义数据
由于数据和页面是分离的在实现数据显示之前需要先在script标签中定义组件所需的数据。
语法格式如下
script
export default {setup() {return {数据名: 数据值,……}}
}
/script为了让代码更简洁Vue 3提供了setup语法糖Syntactic Sugar使用它可以简化上述语法提高开发效率。
使用setup语法糖来定义数据的语法格式如下
script setup
const 数据名 数据值
/script2输出数据
Vue为开发者提供了Mustache语法又称为双大括号语法将数据输出到页面中。
Vue为开发者提供了Mustache语法又称为双大括号语法使用该语法时相当于在模板中放入占位符其语法格式如下。
{{ 数据名 }}在Mustache语法中还可以将表达式的值作为输出内容。表达式的值可以是字符串、数字等类型示例代码如下。
{{ Hello Vue.js }}
{{ number 1 }}
{{ obj.name }}
{{ ok ? YES : NO }}
{{ divHTML标签/div }}演示数据绑定的实现
创建src\components\Demo.vue文件
template{{ message }}/template
script setup
const message 不积跬步无以至千里
/script修改src\main.js文件切换页面中显示的组件。
import App from ./components/Demo.vue保存上述代码后数据绑定的页面效果如下图所示。 其实Vue的使用方式非常灵活它还提供了另一种使用方式就是将Vue引入HTML页面中。但这种方式只能使用Vue的核心功能所以只适合开发一些简单的页面在实际开发中一般不用这种方式。
创建D:\vue\chapter02\helloworld.html文件在该文件中通过script标签引入Vue。
template
divmessage的值{{message}}/div
divobj.message的值{{obj.message}}/div
/templatescript setupimport {reactive,toRef} from vueconst objreactive({message:黑发不知勤学早})const messagetoRef(obj,message)setTimeout((){message.value少壮不努力},2000)
/scriptstyle
/style
在页面中定义一个用于被Vue应用实例控制的DOM区域使开发者可以将数据填充到该DOM区域中。
div idappp{{ message }}/p
/div运行结果 2.2.2 响应式数据绑定
概念Vue为开发者提供了如下函数用于定义响应式数据。 ref()函数 reactive()函数 toRef()函数 toRefs()函数。
1. ref()函数
ref()函数用于将数据转换成响应式数据其参数为数据返回值为转换后的响应式数据。使用ref()函数定义响应式数据的语法格式如下。
响应式数据 ref(数据)如果需要更改响应式数据的值可以使用如下语法格式进行修改。
响应式数据.value 新值演示ref()函数的使用方法
template{{ message }}/template
script setup
import { ref } from vue
const message ref(会当凌绝顶一览众山小)
setTimeout(() {message.value 锲而不舍金石可镂
}, 2000)
/script修改src\main.js文件切换页面中显示的组件。
import App from ./components/Demo.vue运行结果 等待2秒后的页面效果如下图所示。 2. reactive()函数
reactive()函数用于创建一个响应式对象或数组将普通的对象或数组作为参数传给该函数即可。 使用reactive()函数定义响应式数据的语法格式如下。
响应式对象或数组 reactive(普通的对象或数组)创建src\components\Reactive.vue文件。
template{{ obj.message }}/template
script setup
import { reactive } from vue
const obj reactive({ message: 不畏浮云遮望眼自缘身在最高层 })
setTimeout(() {obj.message 欲穷千里目更上一层楼
}, 2000)
/script修改src\main.js文件切换页面中显示的组件。
import App from ./components/Reactive.vue运行结果 等待2秒后的页面效果如下图所示。 3. toRef()函数
toRef()函数用于将响应式对象中的单个属性转换为响应式数据。 使用toRef()函数定义响应式数据的语法格式如下。
响应式数据 toRef(响应式对象, 属性名)演示toRef()函数的使用方法
创建src\components\Demo.vue文件。
templatedivmessage的值{{ message }}/divdivobj.message的值{{ obj.message }}/div
/template
script setup
import { reactive, toRef } from vue
const obj reactive({ message: 黑发不知勤学早白首方悔读书迟 })
const message toRef(obj, message)
setTimeout(() {message.value 少壮不努力老大徒伤悲
}, 2000)
/script
修改src\main.js文件切换页面中显示的组件。
import App from ./components/Demo.vue运行结果 等待2秒后的页面效果如下图所示。 4. toRefs()函数 toRefs()函数用于将响应式对象中的所有属性转换为响应式数据。 使用toRefs()函数定义响应式数据的语法格式如下。
所有属性组成的对象 toRefs(响应式对象)演示toRefs()函数的使用方法
创建src\components\Demo.vue文件。
templatedivmessage的值{{ message }}/divdivobj.message的值{{ obj.message }}/div
/template
script setup
import { reactive, toRefs } from vue
const obj reactive({ message: 盛年不重来一日难再晨 })
let { message } toRefs(obj)
setTimeout(() {message.value 及时当勉励岁月不待人
}, 2000)
/script修改src\main.js文件切换页面中显示的组件。
import App from ./components/Demo.vue
运行效果 等待2秒后的页面效果如下图所示。 2.3 指令
2.3.1 内容渲染指令
内容渲染指令用于渲染DOM元素的内容。
常见的内容渲染指令v-text 和 v-html
1. v-text
v-text用于渲染DOM元素的文本内容如果文本内容中包含HTML标签那么浏览器不会对其进行解析。v-text的语法格式如下。
标签名 v-text数据名/标签名演示v-text的使用方法
创建src\components\Demo.vue文件。
templatediv v-textmessage/div
/template
script setup
const message span咬定青山不放松立根原在破岩中/span
/script修改src\main.js文件切换页面中显示的组件。
import App from ./components/Demo.vue 运行结果 2. v-html
在使用Vue进行内容渲染时如果内容中包含HTML标签并且希望这些标签被浏览器解析则可以使用v-html。v-html用于渲染DOM元素的HTML内容其用法与v-text相似。v-html的语法格式如下。
标签名 v-html数据名/标签名创建src\components\Demo.vue文件。
templatediv v-htmlhtml/div
/template
script setup
const html strong千磨万击还坚劲任尔东西南北风/strong
/script修改src\main.js文件切换页面中显示的组件。
import App from ./components/Demo.vue
运行结果 2.3.2 属性绑定指令
在Vue开发中有时需要绑定DOM元素的属性从而更好地控制属性的值此时可以使用属性绑定指令v-bind来实现。v-bind的语法格式如下。
标签名 v-bind:属性名数据名/标签名v-bind还支持将属性与字符串拼接表达式绑定示例代码如下。
div :idlist index/div演示v-bind的使用方法
创建src\components\Demo.vue文件。
templatepinput typetext v-bind:placeholderusername/ppinput typepassword :placeholderpassword/p
/template
script setup
const username 请输入用户名
const password 请输入密码
/script修改src\main.js文件切换页面中显示的组件。
import App from ./components/Demo.vue
运行结果 2.3.3 事件绑定指令
在Vue开发中有时需要给DOM元素绑定事件从而利用事件实现交互效果这时可以利用事件绑定指令v-on来实现。v-on的语法格式如下。
标签名 v-on:事件名事件处理器/标签名在上述语法格式中事件名即DOM中的事件名例如click、input、keyup等事件处理器可以是方法名或内联JavaScript语句。如果逻辑复杂事件处理器建议使用方法名方法需要在script标签中定义如果逻辑简单只有一行代码则可以使用内联JavaScript语句。另外v-on还有简写形式可以将“v-on:事件名”简写为“事件名”。
演示v-on的使用方法
创建src\components\Dmeo文件。
templatebutton clickshowInfo输出信息/button
/template
script setup
const showInfo () {console.log(欢迎来到Vue.js的世界)
}
/script修改src\main.js文件切换页面中显示的组件。
import App from ./components/Demo.vue
运行结果 2.3.4 双向数据绑定指令
Vue为开发者提供了v-model指令来实现双向数据绑定使用它可以在input、textarea和select元素上创建双向数据绑定它会根据使用的元素自动选取对应的属性和事件组合负责监听用户的输入事件并更新数据。v-model的语法格式如下。
标签名 v-model数据名/标签名v-model内部会为不同的元素绑定不同的属性和事件具体如下。
textarea元素和text类型的input元素会绑定value属性和input事件。
checkbox类型的input元素和radio类型的input元素会绑定checked属性和change事件。
select元素会绑定value属性和change事件。 例如使用v-model实现输入框的值与变量保持同步示例代码如下。
input v-modelinfo为了方便对用户输入的内容进行处理v-model提供了3个修饰符。v-model的修饰符如下表所示。 演示v-model的使用方法
创建src\components\Demo.vue文件
template请输入姓名input typetext v-modelusernamediv姓名是{{ username }}/div
/template
script setup
import { ref } from vue
const username ref(zhangsan)
/script修改src\main.js文件切换页面中显示的组件。
import App from ./components/Demo.vue
运行结果 在输入框中输入“xiaoming”页面效果如下图所示。 演示.number修饰符的使用方法
在src\components\VModel.vue文件的script标签中添加代码定义响应式数据n1和n2。
const n1 ref(1)
const n2 ref(2)在src\components\Demo.vue文件的template标签中添加代码通过v-model实现双向数据绑定。
template请输入用户名input typetext v-modelusername /div您的名字是{{username}}/divinput typetext v-model.numbernumber1/input typetext v-model.numbernumber2/{{number1number2}}
/template
script setupimport{ref}fromvue;const usernameref(liu)const number1ref(1)const number2ref(2)/script
style
/style
运行结果 2.3.5 条件渲染指令
在Vue中当需要根据不同的判断结果显示不同的DOM元素时可以通过条件渲染指令来实现。条件渲染指令可以辅助开发者按需控制DOM元素的显示与隐藏。 条件渲染指令 v-if 和v-show
1. v-if
v-if是根据布尔值切换元素的显示或隐藏状态本质是通过操作DOM元素来切换显示状态。
当给定的值为true时元素存在于DOM树中
当给定的值为false时元素从DOM树中移除。
v-if有两种使用方式。 演示v-if的使用方法
创建src\components\Demo.vue文件
template小明的学习评定等级为p v-iftype A优秀/pp v-else-iftype B良好/pp v-else差/pbutton clicktype A切换成优秀/buttonbutton clicktype B切换成良好/buttonbutton clicktype C切换成差/button
/template
script setupimport { ref } from vue
const type ref(B)
/script修改src\main.js文件切换页面中显示的组件。
import App from ./components/Demo.vue
运行效果 2. v-show
v-show与v-if都用来决定某一个元素是否在页面上显示出来。 v-show的原理是通过为元素添加或移除display: none样式来实现元素的显示或隐藏。 当需要频繁切换某个元素的显示或隐藏时使用v-show会更节省性能开销而当只需要切换一次显示或隐藏时使用v-if更合理。
演示v-show的使用方法
templatep v-ifflag通过v-if控制的元素/pp v-showflag通过v-show控制的元素/pbutton clickflag !flag显示/隐藏/button
/template
script setup
import { ref } from vue
const flag ref(true)
/script修改src\main.js文件切换页面中显示的组件。
import App from ./components/Demo.vue运行效果 2.3.6 列表渲染指令
在开发购物应用时为了方便用户查找商品信息通常会以商品列表的形式展示商品信息。在商品列表中每件商品的结构都是相同的如果每件商品的结构都要手动定义会非常麻烦。为此Vue提供了列表渲染指令v-for。开发者只需在模板中定义一件商品的结构v-for便会根据开发者提供的数据自动渲染商品列表中所有的商品。 使用v-for根据list数组中的元素渲染列表后当在list数组中删除一个元素后index会发生变化v-for会重新渲染列表导致性能下降。
为了给v-for一个提示以便它能跟踪每个节点的身份从而对现有元素进行重用和重新排序建议通过key属性为列表中的每一项提供具有唯一性的值示例代码如下。
div v-foritem in items :keyitem.id/div创建src\components\ll.vue文件。
templatediv v-for(item,index) in arr :keyindex索引是:{{index}} ----元素的内容是{{item}}/divdiv v-foritem in arr2 :keyitem.idid是:{{item.id}} ---- 元素的内容{{item.message}}/divdiv v-for(item,name) in obj :keyname属性名{{name}} ---属性值是 {{value}}/div/templatescript setupimport {reactive} from vueconst arrreactive([你好,学习新课程,学习vue.js]);const arr2reactive([{id:1,message:梅花},{id:2,message:玫瑰花},{id:3,message:西兰花},{id:4,message:没钱花}]);const arr3reactive({id: 11,name: 刘,gender: 女})
/scriptstyle
/style 修改src\main.js文件切换页面中显示的组件。
import App from ./components/ll.vue运行效果 2.4 事件对象
事件对象是在事件触发时产生的对象该对象保存了事件触发时的相关信息。
事件对象有以下两种获取方式。
通过事件方法的参数获取事件对象
通过$event获取事件对象
1. 通过事件方法的参数获取事件对象
在v-on绑定的用于处理事件的方法中可以接收到一个参数这个参数就是事件对象示例代码如下。
templatebutton clickgreetGreet/button
/template
script setup
const greet event console.log(event)
/script修改src\main.js文件切换页面中显示的组件。
import App from ./components/Demo.vue
运行结果 2. 通过$event获取事件对象
$event是Vue提供的内置变量使用它可以获取事件对象示例代码如下。
templatebutton clickchange($event)change/button
/template
script setup
const change event console.log(event)
/script修改src\main.js文件切换页面中显示的组件。
import App from ./components/Demo.vue
运行结果 演示事件对象的使用方法 创建src\components\Demo.vue文件。
templatedivcount的值为{{ count }}/divbutton clickaddCountcount1/button
/template
script setup
import { ref } from vue
const count ref(1)
const addCount event {count.valueif (count.value % 2 0) { event.target.style.border 3px dotted } else { event.target.style.border 3px solid } }
/script修改src\main.js文件切换页面中显示的组件。
import App from ./components/Demo.vue
运行结果持续增加数字 演示通过$event获取事件对象的方式
修改src\components\Demo.vue文件编写addCountN()方法。
const addCountN (n, event) {count.value nif (count.value % 2 0) {event.target.style.border 3px dotted} else {event.target.style.border 3px solid}
}页面结构代码增加一个按钮。
button clickaddCountN(3, $event)countn/button2.5 事件修饰符
为了简化开发Vue为开发者提供了事件修饰符它可以与v-on配合使用以便于对事件进行控制让开发者更专注于逻辑。 事件修饰符用于修饰事件的行为写在事件名称之后多个事件修饰符可以串联使用。
通过事件修饰符可以实现的一些功能。 1. 阻止默认事件行为 通过.prevent事件修饰符可以实现阻止默认事件行为的功能。例如在单击a标签时页面会自动跳转这就是a标签的默认事件行为。 在实际开发中如果默认事件行为与事件发生冲突可以使用.prevent事件修饰符阻止默认事件行为示例代码如下。
a hreftest.html v-on:click.prevent阻止默认行为/a2. 阻止事件冒泡 通过.stop事件修饰符可以实现阻止事件冒泡的功能示例代码如下。
templatebutton clickaddCountCount1/buttona href../test03.html v-on:click.prevent默认阻止事件行为/adiv v-on:clickshow(我是祖先元素事件)button clickshow(我是子元素的事件)事件冒泡/buttonbutton click.stopshow(我是子元素的事件)阻止事件冒泡/button/div/templatescript setupimport {ref} from vue
const show message console.log(message)
const count ref(1);
const addCount event {count.valueif(count.value%2 0){event.target.style.border 3px dotted}else{event.target.style.border 3px solid}
}
/scriptstyle
/style 3. 事件捕获 代码示例
templatediv v-on:click.captureshow(我是父元素的事件)button v-on:clickshow(我是子元素的事件)事件捕获/button/div
/template
script setup
let show message console.log(message)
/script运行效果 4. 使事件只触发一次 通过.once事件修饰符可以实现使事件只触发一次的功能。.once事件修饰符用于阻止事件的多次触发让事件只触发一次示例代码如下。
templatebutton v-on:click.once show(我是当前元素的单击事件且只执行一次)只执行一次/button
/template
script setup
let show message console.log(message)
/script运行效果 5. 使DOM元素只有自身触发事件时才执行事件方法 通过.self事件修饰符可以实现只有DOM元素自身触发事件时才执行事件方法的功能示例代码如下。
代码
templatediv v-on:clickshow(我是祖先元素的事件)祖先元素div v-on:click.selfshow(我是父元素的事件)父元素div v-on:clickshow(我是子元素的事件)子元素/div/div/div
/template
script setup
let show message console.log(message)
/script运行效果
