【学习打卡】第15天 Vue3 从入门到实战第一章

2022/9/1 4:22:51

编程Tag： vue.js

本文主要是介绍【学习打卡】第15天 Vue3 从入门到实战第一章，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

# Vue3 从入门到实战

***

>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绑定的属性的值

<!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({ //创建Vue实例
data() {
return { //返回content的值和双向绑定在inputVal的值,和list数组里的数值
content: "增加",
inputVal: '',
list: [],
}
},
methods:{ //存放函数方法
handleClick() { //掉用点击增加按钮时候触发的事件
if (this.inputVal) { //当文本框值不为空的时候触发
this.list.push(this.inputVal); //将文本框里的值push到数组里
this.inputVal = ''; //当点击增加后清空文本框里的值
} else {

}
}
}, //模板
template: `
<input v-model="inputVal" />
<button v-on:click="handleClick">{{content}}</button>
<ul>
<todo-list
v-for="(item,index) of list"
v-bind:text="item"
v-bind:index="index"
></todo-list>
</ul>
`
});
//创建todo-list组件
app.component('todo-list',{
props: ['text','index'], //接受绑定在todo-list组件里的item和index内容值,用template模板进行渲染操作
template: `
<li>{{index}}--{{text}}</li>
`
})
//最后挂在id为root的模板里
app.mount('#root');

</script>
</html>

这篇关于【学习打卡】第15天 Vue3 从入门到实战第一章的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

【学习打卡】第15天 Vue3 从入门到实战 第一章

相关编程文章

【学习打卡】第15天 Vue3 从入门到实战第一章