Vue3的学习---2
2.Vue基本语法
2.1 文本渲染指令
v-html和v-text
v-html：将数据当作html代码渲染到页面上
v-text：将数据当作纯文本渲染到页面上
<body>
<div id="app">
<!-- v-html 和 v-text 指令的作用是将数据渲染到 HTML 元素或文本节点中，避免出现{{num}} -->
<p v-html="msg"></p>
<p v-text="msg"></p>
</div>
<script src="../js/vue3.js"></script>
<script>
Vue.createApp({
data() {
return {
msg: '<h1>hello</h1>'
}
}
}).mount('#app')
</script>
</body>
2.2 属性绑定指令
2.2.1 v-bind
v-bind 用于动态地绑定一个或多个属性、特性或组件的 prop 到表达式。它允许你将数据从 Vue 实例动态地绑定到 HTML 元素或组件的属性上。
<body>
<div id="app">
<!-- 使用v-bind，通过‘:’，绑定title属性 -->
<p v-bind:title="msg">hello</p>
<!-- 简写 -->
<p :title="msg">hello</p>
</div>
<script src="../js/vue3.js"></script>
<script>
Vue.createApp({
data(){
return {
msg: 'hello'
}
}
}).mount('#app')
</script>
</body>
2.2.2 样式绑定
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.one {
color: slateblue;
}
.two {
font-size: 48px;
}
</style>
</head>
<body>
<div id="app">
<p :class="one">hello world</p>
<p :class="className">hello world</p>
<p :class="{one: isOne, two: isTwo}">hello world</p>
<p :class="userId==1?className:''">hello world</p>
<p :style="{color:colorValue, fontSize:fontSizeValue}">hello world</p>
<!-- 应使用小驼峰命名法 -->
</div>
<script src="../js/vue3.js"></script>
<script>
Vue.createApp({
data() {
return {
className: 'one two',
isOne: true,
isTwo: false,
userId: 1,
className: 'one',
colorValue: 'blue',
fontSizeValue: '48px'
}
}
}).mount('#app')
</script>
</body>
2.3 事件处理指令
2.3.1 v-on
v-on是vue当中的事件绑定指令，可以绑定click、mouseover等事件。v-on: 可以简写为 @
<body>
<div id="app">
<button v-on:click="pointme">点击</button>
<!-- 简写 -->
<button @click="pointme">点击</button>
<!-- 焦点失去事件 -->
<input type="text" @blur="blurEvent">
</div>
<script src="../js/vue3.js"></script>
<script>
Vue.createApp({
data(){
return {
}
},
// 方法
methods:{
pointme(){
console.log('点我了')
},
blurEvent(){
console.log('失去焦点了')
}
}
}).mount('#app')
</script>
</body>
2.3.2 事件处理的参数
<body>
<div id="app">
{{num}}
<button v-on:click="change(1)">加</button>
<button @click="change(-1)">减</button>
</div>
<script src="../js/vue3.js"></script>
<script>
Vue.createApp({
data(){
return {
num: 0
}
},
methods: {
change(value) {
this.num += value
}
}
}).mount('#app')
</script>
</body>
2.3.3 样式切换实例
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.one {
color: slateblue;
}
.two {
color: dodgerblue;
}
</style>
</head>
<body>
<div id="app">
<p :class="className" @click="change">hello world</p>
</div>
<script src="../js/vue3.js"></script>
<script>
Vue.createApp({
data() {
return {
className: 'one'
}
},
methods: {
change() {
this.className = this.className == 'one' ? 'two' : 'one'
}
}
}).mount('#app')
</script>
</body>
2.3.4 事件对象
事件对象是在事件触发时，由浏览器自动创建并传递给事件处理函数的一个对象。它包含了与事件相关的各种信息，例如事件的类型、触发事件的元素、事件发生的时间等。事件对象通常作为事件处理函数的第一个参数传递。
<body>
<div id="app">
{{num}}
<!-- 当只有一个$event时，可以省略 -->
<button v-on:click="change(3, $event)">加</button>
</div>
<script src="../js/vue3.js"></script>
<script>
Vue.createApp({
data() {
return {
num: 0
}
},
methods: {
change(value, event) {
this.num += value
console.log(event)
// event.target表示触发事件的元素
console.log(event.target)
}
}
}).mount('#app')
</script>
</body>
2.3.5 事件修饰符
事件修饰符在vue中用于修改事件处理函数的默认行为。它可以帮助我们更加简洁地处理事件，而不需要在事件处理函数中编写额外的逻辑。事件修饰符通过在绑定指令（如 v-on:click）后面添加点号（.）和修饰符名称来使用。
常见的事件修饰符及其作用：
.stop：阻止事件冒泡。相当于调用event.stopPropagation()。.prevent：阻止事件的默认行为。相当于调用event.preventDefault()。.capture：使用事件捕获模式，即在捕获阶段处理事件。.self：只有当事件是从监听器绑定发元素本身触发时才触发回调。.once：事件只会触发一次。.passive：默认行为将会立即触发，不会等待事件处理函数执行完毕。这通常用于优化移动端滚动性能。
2.4 条件渲染指令
2.4.1 v-if
v-if 用于条件性地渲染。它根据表达式的值（ true 或 false ）来决定是否将元素插入到DOM。如果值为 true，则元素会被渲染；如果为 false，则元素不会被渲染。
<body>
<div id="app">
<div v-if="num === 1">num等于1</div>
<div v-else-if="num === 2">num等于2</div>
<div v-else-if="num === 3">num等于3</div>
<div v-else>num不等于1，2，3</div>
</div>
<script src="../js/vue3.js"></script>
<script>
Vue.createApp({
data() {
return {
num: 1
}
}
}).mount('#app')
</script>
</body>
2.4.2 v-show
v-show 用于条件性地渲染。它根据表达式的值（ true 或 false ）来决定是否将元素插入到DOM。如果值为 true，则元素会被渲染；如果为 false，则元素不会被渲染。
<body>
<div id="app">
<div v-show="isShow">这里是v-show</div>
</div>
<script src="../js/vue3.js"></script>
<script>
Vue.createApp({
data() {
return {
isShow: false
}
}
}).mount('#app')
</script>
</body>
v-if 与 v-show的区别：
-
编译条件：
v-if是“真正的”条件渲染，因为它会确保在切换过程中条件块内的时间监听和子组件适当地被销 毁和重构。v-show只是简单地基于CSS的display属性进行切换。 -
初始渲染开销：
v-if在初始渲染时，如果条件为假，则什么也不做，直到条件第一次变为真时，才会开始渲染条件块。v-show不管初始条件是什么，元素总会被渲染，并且只是简单地基于CSS进行显示隐藏。 -
切换开销：
v-if有更高的切换开销，因为每次切换时，条件块内的组件和事件监听器都需要重新创建和销毁。v-show有更低的初始渲染开销，但有更高的切换开销，因为每次切换时，只是简单地改变CSS属性。 -
适用场景：
v-if适用于运行条件很少改变的情况。v-show适用于需要非常频繁切换的情况。
2.5 循环遍历指令
2.5.1 v-for
v-for 是 用于循环渲染列表的指令。它可以根据一个数组或对象生成一个元素列表。
<body>
<div id="app">
<!-- (value, key, index)是指(属性值,属性名,序号) -->
<p v-for="(value, key, index) in user">{{ index }}.{{ key }}: {{ value }}</p>
</div>
<script src="../js/vue3.js"></script>
<script>
Vue.createApp({
data() {
return {
user: {
userId: 1,
userName: '张三',
userAge: 20
}
}
}
}).mount('#app')
</script>
</body>
2.5.2 遍历数组元素
<body>
<div id="app">
<ul>
<!-- :key="user.userId" 唯一标识，修改哪个就重新渲染哪个，不必重新渲染整个列表，提高渲染效 率 -->
<li v-for="user in userArr" :key="user.userId">{{user.userId}} {{user.userName}} {{user.userAge}}</li>
</ul>
</div>
<script src="../js/vue3.js"></script>
<script>
Vue.createApp({
data() {
return {
userArr: [
{
userId: 1,
userName: '张三',
userAge: 20
}, {
userId: 2,
userName: '李四',
userAge: 25
}, {
userId: 3,
userName: '王五',
userAge: 30
}
]
}
}
}).mount('#app')
</script>
</body>