MVC模式变化而来,相对于MVC强调控制-模型-视图的责任分离之外,最大的特点就是引入ViewModel,支持双向绑定

比如你改变一个输入框 Input 标签的值,会自动同步更新到页面上其他绑定该输入框的组件的值

页面上小到一个按钮/文本输入框/图片等等元素都可以是一个单独的文件.vue,这些小组件直接可以像乐高积木一样通过互相引用而组装起来,参考如下。

这样的好处在于,页面上的元素都是独立可替换的,可以实现最大的复用性和独立性。这样的好处在于,页面上的元素都是独立可替换的,可以实现最大的复用性和独立性。

目前大多数老项目还是vue2 vue3相对vue2基本完全重构,解决了很多历史问题,这里不详述 vue2和vue3实现上有很大差别,但在基础概念上没什么大的差别,对新手上手难度相差不大 考虑到目前的应用广泛度,本教程暂时以vue2作为演示版本,后续看需求再补上vue3教程

vue cli顾名思义,是vue提供的一套辅助命令行脚手架 可以自动生成工程目录和框架,辅助调试和开发 目前有多个版本,最新版本vue-cli4

目前推荐使用最新的cli,为了新手简单理解vue的机制,这里会先使用vue-cli2简单演示(如果不想深入了解或没有老项目,可以直接跳过),实际代码编写推荐最新vue-cli4

如下,使用webpack-simple模板,默认全部回车,这里简单演示选择不使用sass

如下,默认会自动按照依赖,生成的项目功能一致,只是引入了更多实际生产代码和更多可配置项,更适合实际企业项目开发,其它不再赘述,可查看文档

如下,最大的差别是Vue CLI 3开始设计原则是“0配置,隐藏了大量webpack的配置,现在webpack相关配置,通过fig.js来配置,参考 相比vue-cli2 这里App中以组件化方式引用具体内容 运行npm/cnpm run serve运行调试服务器

如下图,打开页面localhost:8080/显示如下,到此一个基本可运行的vue项目初始化完成

类似于服务端模板功能,增加更多html的逻辑控制语义,主要是if/else语义和for循环语义

通过监听用户的输入事件以更新数据,并对一些极端场景进行一些特殊处理。如下,对应的表单值会和变量绑定。

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注