从“心”认识vue(一):我的第一个vue
前言
开始学习vue了,但是编程的思想还是不容易转变过来,一两周过去了,只知道个大概,知其然而不知其所以然,打算开一个系列帖,重新认识下vue。
一、vue是什么?
vue是一套构建用户界面的渐进式的自底向上增量开发MVVM框架.
渐进式 : 不做职责以外的事情,可以局部使用也可以全局使用
自底向上增量开发:从基础到复杂的开发过程
二、编程范式
1.命令式编程
在没有学习框架以前,我们只要学习的是命令式编程,即需要一步一步告诉计算机先做什么,后做什么。
如:有一个变量想展示在div里,js里需要这样做:
// 1.创建div元素,设置id属性,js里拿到元素节点
// 2.定义一个变量
// 3.设置元素节点html或text的值,将变量放在div元素中显示
// 4.在需要修改数据时,将数据赋值给变量
2.声明式编程
学习vue之后,我们关注的是数据展示,即只要告诉计算机应该做什么,但不指定具体要怎么做。
如在vue中,只需要定义数据,然后让它在html里展示,而其中的过程不需要我们去管。
三、第一个vue
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="node_modules/vue/dist/vue.min.js"></script>
</head>
<body>
<div id="app">
{{text}}
</div>
<script>
const app = new Vue({
el:"#app",
data:{
text:"haha"
}
})
</script>
</body>
</html>
1.vue都做了什么?
- 首先js里实例化出了一个vue对象,那么在导入的vue.js里一定会有这样的代码,以供我们可以实例化对象。
//伪代码:Vue.js里有类似的代码
function Vue(xxx,xxx){
}
- el:用于要挂载要管理的元素,在这个元素节点里可以进行vue的各种操作
- data:对于定义数据
- html元素里双大括号用于展示定义后的数据
- js里整个代码对原html进行解析和修改
2.vue的响应式
我们在修改定义的数据时,html里的数据会进行同步修改。
如:在控制台修改数据时,页面上的数据同步更新。
总结
创建vue实例的步骤:
- 1.创建元素,并设置好节点名称,id等
- 2.实例vue对象,设置vue挂载元素
- 3.定义数据
- 4.在html里展示数据