从“心”认识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里展示数据
1624
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
