作者：无私向斑马
2023-12-01 11:25:37 Vue是web前端快速搭建网站的框架之一，是以数据驱动web界面，vue的写法简单，容易掌握，组件形式可以大大提高工作效率。下面我们就一起来学习一下通过Vue的基本程序结构用MVC框架来实现一个 'Hello, Vue'。
引入Vue.js
将Vue.js源码通过script标签引入到html.
第一个Vue程序
我们通过Vue的基本程序结构用MVC框架来实现一个 'Hello, Vue'。
NO.1创建Vue的实例
通过new Vue()创建一个实例对象:
Vue的实例能帮我实现一个MVC框架。
在实例化Vue时需要传入一个配置参数 {}。
配置参数可以包含挂载元素(el)，数据(data)， 方法(methods)等。
Vue实例里的el, data, method为固定名称, 不可改变。
NO.2准备数据模型 Model
将Model中的数据放在data中。
将Model中的方法放在methods中。
NO.3关联视图 View
el是element的缩写。
el中用CSS选择器赋值，这点和jQuery相似。
创建Vue实例要在el对应的Dom元素加载完成之后执行，这样在关联el时才能找到Dom。
NO.4数据绑定
通过前面的步骤，我们关联好了Model和View，现在就可以View中使用Model中的数据了。
NO.5测试数据同步
在控制台修改data中message的值，界面上就会自动修改，完全不用操作Dom，这就是MVC中的数据绑定。
NO.6为什么要使用MVC？
MVC是一种设计思想，专注业务数据，而不是显示。
MVC框架帮我们将数据（Model）与显示（View）进行了分离。
一个应用程序可以完全没有界面，它的本质是数据。
完整代码
作业
用Vue这个MVC框架将ToDoList中的数据和显示进行分离。
版权声明 | 文章配图仅供学习参考，引用图片版权归属原作所有
如有问题，请及时与我们联系，我们将第一时间做出处理
Android版下载
