【九月打卡】第1天 Vue3框架-原创手记-慕课网

课程名称：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 src="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 src="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 src="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 src="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>

>Vue基础语法知识点

1. `Vue.createApp({})`创建Vue实例

2. `.mount('@root')`将实例挂载到指定id的区域内

3. `template`存放指定位置的DOM区域应该渲染的内容

4. `mounted()`页面加载完成之后会自动执行这个函数

5. `setInterval(()=>{},1000)`定时器

6. `data()`定义数据时使用,用`return`来传递数据到模版，或者其他函数中,函数中可以用 `this` + 变量名调用这些数据.

7. `{{}}`双括号里对来展示对应vue语句的变量

8. `this.content`是`this.$data.content`的简写

9. `v-on`表示绑定事件,`v-on:click=""`表示绑定点击事件,事件触发时执行相关函数,v-on简写@

10. `v-if="show"`显示true/隐藏false

11. `v-bind`绑定属性值,用于标签属性和数据进行绑定v-bind简写：

12. `methods:{}`包含一系列定义的方法,用来存放一些处理数据或者其他信息的函数

13. `vue`面向数据编程

14. `split('').reverse('').join('')`字符串打散——翻转——连接

15. `methods`方法中对`data`中的数据进行读取，必须使用`this`，比如`this.show = !this.show;`否则就无法读取，当然也可以写全，比如`this.$data.show = ......`

16. `v-for="(item, index) of list"`，便利list数组对象的元素和索引

17. `v-model="inputValue"`, 和data中的inputValue做双向绑定

18. 动态属性、事件和参数的用法修饰符简化代码，阻拦页面跳转`click.prevent="方法名"`

19. Vue从面向对象编程到面向数据编程

20. `app.component('组件名称',{})`注册组件

21. `app.mount('#root');`将组件挂在到id为root节点商

22. 注册组件流程,先创建Vue实例,在实例上面进行定义组件,最后在用mount进行挂载

23. `props: ['content','index'],`用于接收v-bind绑定的属性的值

今天学习了Vue框架,一种用于构建用户界面的渐进式JavaScript框架,它可以采用组件化模式，提高代码复用率，且让代码更好维护,让编码人员无需直接操作DOM，提高开发效率,今天也是收获满满的一天，希望能够每天学习一点点,一直坚持下，加油!