首页手记【九月打卡】第3天 Vue3框架

【九月打卡】第3天 Vue3框架

标签：

Vue.js

课程名称：2022持续升级 Vue3 从入门到实战掌握完整知识体系

课程章节：第2章 Vue 基础语法

主讲老师：Dell

课程内容：

今天学习的内容包括：

v-html 输出html
v-bind:绑定属性值,简写:
{{}} 插值表达式
v-once
v-if 逻辑判断
v-on:click 绑定事件简写@click
[] 动态指定控件属性
@click.prevent 阻止默认行为

课程收获：

v-once：只渲染一次，后面数据如果发生变化也不再渲染；提高渲染性能，避免无用的渲染

v-if ：决定标签需不需要渲染到视图，为true渲染到页面，false不渲染这个Dom节点

v-bind：绑定 data 中的数据。

标签属性中想用变量，单纯的这样使用

页面上显示的是”message“这个字符串，而不是 data 中 message 变量

需要用 v-bind 来绑定 data 中的变量

使用 v-bind 的时候 vue 会去 data 中找相应的变量来替换

v-html：防止转义，变量中有html标签时，可以在页面上渲染出来。

{ { } } 插值表达式可以是变量，可用JS表达式，不可用js语句

如：{{‘a’+ 'b' }}

{{ if(true){console.log() }} 不可

{{}}插值表达式的练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
const app = Vue.createApp({
data() {
return {
message:"hello world!"
}
},
template:`
<div v-once>{{message}}</div>
`
});

const vm = app.mount('#root');

</script>
</html>

v-if(内容显示或隐藏的练习)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
const app = Vue.createApp({
data() {
return {
show: true
}
},
template:`
<div v-if="show">hello world!</div>
`
});

const vm = app.mount('#root');

</script>
</html>

v-on:简写成@(点击事件的练习)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
const app = Vue.createApp({
data() {
return {
show: true
}
},
methods: {
handleClick() {
alert("你点到我了!");
}
},
template:`
<div @click="handleClick">hello world!</div>
`
});

const vm = app.mount('#root');

</script>
</html>

v-bind:简写成:(绑定title属性值的练习)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
const app = Vue.createApp({
data() {
return {
message:"hello"
}
},
template:`
<div :title="message">hello world!</div>
`
});

const vm = app.mount('#root');

</script>
</html>

1. 模板语法简写

v-bind:title ==== :title

v-on:click ==== @click

2. 其他模板语法

1）属性名/事件不确定时可以用中括号”[]“ 来绑定动态属性

2）阻止默认行为

<1> 正常写：

<2> 简写：在事件后加 prevent 修饰符，意为先阻止默认行为再执行 handleClick 中的逻辑代码

[] 动态指定控件属性练习
<script>
const app = Vue.createApp({
data() {
return {
message:"hello",
name:'title'
}
},
template:`
<div :[name]="message">hello world!</div>
`
});

const vm = app.mount('#root');
</script>

[] 动态指定事件属性练习
<script>
const app = Vue.createApp({
data() {
return {
message:"hello",
event:'click'
}
},
methods: {
handleClick() {
alert("收到!");
}
},
template:`
<div @[event]="handleClick">hello world!</div>
`
});

const vm = app.mount('#root');
</script>

阻止默认行为的练习
<script>
const app = Vue.createApp({
data() {
return {
message:"hello",
event:'click'
}
},
methods: {
handleClick(e) {
e.preventDefault();
}
},
template:`
<form action="https://baidu.com" @[event]="handleClick">
<button>提交</button>
</form>
`
});

const vm = app.mount('#root');
</script>

阻止默认行为简写的练习
<script>
const app = Vue.createApp({
data() {
return {
message:"hello",
event:'click'
}
},
methods: {
handleClick(e) {
// e.preventDefault();
}
},
template:`
<form action="https://baidu.com" @[event].prevent="handleClick">
<button>提交</button>
</form>
`
});

const vm = app.mount('#root');
</script>