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

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

标签：

Vue.js

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

课程章节：第1章 Vue 语法初探

主讲老师：Dell

课程内容：

今天学习的内容包括：

Vue基础语法
编写Hello World程序和定时器
编写字符串反转和隐藏小功能
编写todolist功能
对组件代码进行拆分

课程收获：

定时器
<!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>
Vue.createApp({
data() {
return {
content : 1
}
},
mounted() {
setInterval(() => {
// console.log(this.content += 1)
},1000);
},
template: '<div>{{content}}</div>'
}).mount('#root');
</script>
</html>

点击按钮显示隐藏内容
<!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>
Vue.createApp({
data() {
return {
show: true,
content: 'hello world!',
}
},
methods:{
handleClick() {
const After = this.content.split('').reverse().join('');
this.content = After;
},
displayClick() {
console.log(".....");
this.show = !this.show;
},
},
template: `<div v-if:="show">{{content}}</div>
<button v-on:click="handleClick">反转</button>
<button v-on:click="displayClick">显/隐</button>
`,
}).mount('#root');
</script>
</html>

todolist
<!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="root03"></div>
</body>
<script>
Vue.createApp({
data() {
return {
valueInput: "",
list: [],
}
},
methods:{
handleAdd() {
// this.list = this.valueInput.list.push;
this.list.push(this.valueInput);
this.valueInput = ''
}
},
template: `
<input v-model="valueInput" />
<button v-on:click="handleAdd">添加</button>
<ul>
<li v-for="(item) of list">{{item}}</li>
</ul>
`
}).mount('#root03');
</script>
</html>

对组件代码进行拆分
<!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="root04"></div>
</body>
<script>
const app = Vue.createApp({
data() {
return {
valInput:'',
list: []
}
},
methods: {
handleClick() {
this.list.push(this.valInput);
this.valInput = '';
}
},
template:`
<input v-model="valInput" />
<button v-on:click="handleClick">增加</button>
<ul>
<todo-list v-for="(item,index) of list"
v-bind:content="item"
v-bind:index="index"
>{{item}}</todo-list>
</ul>
`
});

app.component('todo-list',{
props:['content','index'],
template: `
<li>{{index}}--{{content}}</li>
`
})

app.mount('#root04')
</script>
</html>