。

它基于标准HTML、CSS和JavaScript构建#xff0c;并提供了一套声明式的、组件化的编程模型#xff0c;帮助开发者高效地开发用户界面。

初识Vue1.

Vue是一款用于构建用户界面的JavaScript框架。

它基于标准HTML、CSS和JavaScript构建并提供了一套声明式的、组件化的编程模型帮助开发者高效地开发用户界面。

初识Vue1.

准备Vue.js以及Vue.min.js在我的电脑新建一个文件夹通过VsCode选择并打开

点击左侧的扩展图标打开侧边栏在文本框输入Chiness点击install安装中文简体插件

在项目目录新建文件夹并将下载好的Vue.js以及Vue.min.js放进去

vue.js是开发环境版本包含完整的警告和调试模式vue.js是完整的未压缩的版本文件比较大。

vue.min.js是生产环境版本删除了警告而vue.min.js是经过压缩的版本减小了文件体积。

3.

模板语法

在project目录新建一个文件夹并创建一个html文件同时引入vue.js

!DOCTYPE

charsetutf-8title模板语法/titlescript

src../js/vue.js

通过以下演示单向数据绑定可以很直观的看到虽然文本框的值被改变但是data中的name还是原来的值

在data中定义name字段并赋值

在html中增加一个input标签并通过指令语法绑定(v-bind:valuexxxx)

数据只能从

通过以下案例演示双向数据绑定可以看到当我们在input进行编辑时data中的name也同步被修改双向数据绑定一般都应用在表单类输入类元素上

如input、select等

在html中增加一个input标签并通过指令语法绑定(v-model:valuexxxx)

数据不仅能从

后端同学如果没有前端开发经验的可能会有点疑问不是MVC模型吗怎么变成MVVM模型了是不是说错了这里也顺带提一下MVC模型俩模型长的挺像

经典MVC模式中M是指模型V是视图C则是控制器使用MVC的目的是将M和V的实现代码分离从而使同一个程序可以使用不同的表现形式。

其中View的定义比较清晰就是用户界面。

模型主要包含业务数据和业务逻辑。

在模型层还会涉及到用户发布的服务在服务中会根据不同的业务需求更新业务模型中的数据。

视图呈现给用户的部分是用户和程序交互的接口用户会根据具体的业务需求在View视图层输入自己特定的业务数据并通过界面的事件交互将对应的输入参数提交给后台控制器进行处理。

控制器用来处理用户输入数据已经更新业务模型的部分。

控制器中接收了用户与界面交互时传递过来的数据并根据数据业务逻辑来执行服务的调用和更新业务模型的数据和状态。

那什么是MVVM模型呢

MVVM是Model-View-ViewModel的简写。

它本质上就是MVC

ViewModel

可以将Model称之为数据层因为它仅仅只关注数据本身不关注其他的任何行为可以理解为一个数据对象仓库只是用于存储用于展示在界面上的数据它主要表达的就是Vue框架里的data数据对象

data:function(){return{name:摔跤猫子,};

},5.2

JavaScript里的DOM对象我们所看到的页面也就是我们的DOM通过一个标签进行声明容器范围

!--

vm是mvvm模式的核心亦是连接View和Model的桥梁通过数据绑定以达到承上启下的效果监听数据变化的同时对数据进行绑定。

!--

typetext/javascript//Vue.config.productionTip

false

Vue({el:#root,//函数式data:function(){return{name:摔跤猫子,};},});/script