Javascript
【学习打卡】第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>
-
Vue3教程：新手入门到实践应用12-21
-
VueRouter4教程：从入门到实践12-21
-
Vue3项目实战：从入门到上手12-20
-
Vue3项目实战：新手入门教程12-20
-
VueRouter4项目实战：新手入门教程12-20
-
如何实现JDBC和jsp的关系？-icode9专业技术文章分享12-20
-
Vue项目中实现TagsView标签栏导航的简单教程12-20
-
Vue3入门教程：从零开始搭建你的第一个Vue3项目12-20
-
从零开始学习vueRouter4：基础教程12-20
-
Vuex4课程：新手入门到上手实战全攻略12-20
-
Vue3资料：新手入门及初级教程12-20
-
Vuex4入门指南：轻松掌握Vue状态管理12-20
-
Vue3学习：从入门到实践的简单教程12-20
-
Vue学习：从入门到简单项目实战12-20
-
Vue3教程：初学者快速入门指南12-20
